/* =====================================================================
   Let's Lend A Helping Hand — Premium Design System
   Brand + accent colors come from the admin (inline <style id="theme-vars">).
   The site is LIGHT by default: the big "band" surfaces (hero, quote/impact
   sections, info cards, CTA + newsletter, footer, splash loader) use the
   --band-* / --*-bg tokens defined below.
   Switching <html data-theme="dark"> restores the original navy dark theme —
   every token the bands use has a navy counterpart in that block.
   ===================================================================== */

:root {
    color-scheme: light;
    --brand: #3b82f6;
    --brand-2: #0a1c33;
    --brand-light: #60a5fa;
    --teal: #2eb8a0;
    --accent: #c9a84c;
    --accent-2: #a07f28;
    --accent-light: #f0d878;

    --bg: #f6f9fe;
    --surface: #ffffff;
    --surface-2: #eaf1fb;
    --ink: #0f1c30;
    --muted: #51617c;
    --line: #dfe8f5;
    --line-strong: #c6d6ee;

    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
    --font-serif: "Playfair Display", Georgia, serif;
    --font-ar: "Amiri", "Traditional Arabic", "Scheherazade New", serif;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 10px rgba(10, 28, 51, .06);
    --shadow: 0 12px 34px rgba(10, 28, 51, .10);
    --shadow-lg: 0 26px 60px rgba(10, 28, 51, .16);
    --glow: 0 8px 26px rgba(59, 130, 246, .35);
    --grad-brand: linear-gradient(135deg, var(--brand-light), var(--brand));
    /* Legacy alias kept for custom CSS — bands use --band-bg instead. */
    --grad-dark: linear-gradient(160deg, #0a1c33 0%, #050d1a 100%);
    --grad-accent: linear-gradient(135deg, var(--accent), #f0c86a);
    --header-h: 76px;

    /* ── Premium glass system (light theme) ───────────────────────────────
       Frosted translucent surfaces with a soft top highlight, layered
       depth shadows and a gold sheen. Dark navy overrides live below. */
    --glass-bg: rgba(255, 255, 255, .55);
    --glass-bg-strong: rgba(255, 255, 255, .82);
    --glass-border: rgba(255, 255, 255, .72);
    --glass-blur: 20px;
    --glass-sat: 170%;
    --glass-sheen: linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 46%);
    --premium-ring: inset 0 1px 0 rgba(255, 255, 255, .95);
    --premium-hairline: rgba(255, 255, 255, .75);
    --premium-shadow: 0 26px 54px -32px rgba(13, 38, 76, .5), 0 3px 10px rgba(13, 38, 76, .05);
    --premium-shadow-hover: 0 38px 74px -30px rgba(13, 38, 76, .58), 0 6px 16px rgba(13, 38, 76, .07);
    --marquee-gold: linear-gradient(120deg, #f6e6b0, #c9a84c 46%, #a07f28 72%, #e8d190);

    /* Aliases some older components expect */
    --text: var(--ink);
    --border: var(--line);

    /* Outline button (sits on the band surfaces — hero, CTA, ads) */
    --btn-outline-line: color-mix(in srgb, var(--brand) 45%, transparent);
    --btn-outline-ink: var(--brand);
    --btn-outline-bg-hover: var(--brand);
    --btn-outline-ink-hover: #ffffff;

    /* ── Band surfaces ────────────────────────────────────────────────────
       The big "feature" surfaces — hero, page hero, impact/quote sections,
       info cards, CTA + newsletter bands, page footer and the splash loader.
       They are LIGHT by default so the whole site reads as a light theme;
       the [data-theme="dark"] block below restores the original navy look. */
    --band-bg: linear-gradient(160deg, #eaf1fb 0%, #f8fbff 100%);
    --band-ink: var(--ink);
    --band-sub: var(--muted);
    --band-faint: var(--muted);
    --band-accent: var(--accent-2);
    --band-line: var(--line-strong);
    --band-card-bg: var(--surface);
    --band-card-bg-hover: #ffffff;
    --band-card-line: var(--line-strong);
    --band-icon-bg: var(--surface-2);
    --band-watermark: rgba(15, 28, 48, .05);
    --band-glow-brand: color-mix(in srgb, var(--brand) 14%, transparent);
    --band-glow-accent: color-mix(in srgb, var(--accent) 15%, transparent);
    --band-em-grad: linear-gradient(100deg, var(--accent-2), var(--accent));
    --hero-veil: linear-gradient(rgba(246, 249, 254, .86), rgba(236, 243, 252, .93));
    --hero-veil-soft: linear-gradient(100deg, rgba(246, 249, 254, .62), rgba(246, 249, 254, .28));
    --topbar-bg: var(--surface-2);
    --topbar-ink: var(--muted);
    --topbar-chip-bg: rgba(15, 28, 48, .06);
    --footer-bg: var(--surface-2);
    --footer-ink: var(--muted);
    --footer-faint: var(--muted);
    --newsletter-bg: linear-gradient(160deg, #e6effb 0%, #f7fbff 100%);
    --newsletter-ink: var(--ink);
    --newsletter-sub: var(--muted);
    --newsletter-input-bg: var(--surface);
    --newsletter-input-bg-focus: var(--surface-2);
    --newsletter-input-line: var(--line-strong);
    --newsletter-placeholder: var(--muted);
    --ok-ink: #1f7a4d;
    --err-ink: #9c2b25;
    --dot-bg: rgba(15, 28, 48, .22);
    --dot-active: var(--brand);
    --ad-glass-bg: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .78));
    --ad-glass-line: var(--line-strong);
    --ad-shadow: 0 24px 60px rgba(10, 28, 51, .12);
    --ad-shadow-hover: 0 30px 70px rgba(10, 28, 51, .16);
    --loader-bg: #f4f8fd;
    --loader-ink: var(--ink);
    --loader-faint: var(--muted);
    --loader-track: rgba(15, 28, 48, .1);
    --loader-dot: rgba(160, 127, 40, .2);
    --loader-ring-1: rgba(160, 127, 40, .3);
    --loader-ring-2: rgba(31, 143, 124, .28);
    --loader-ring-3: rgba(160, 127, 40, .22);
    --loader-title-grad: linear-gradient(135deg, #a07f28, #1f8f7c);
}

/* Font pair variants (admin-controllable) */
body[data-font="classic"] {
    --font-display: "Playfair Display", Georgia, serif;
}

body[data-font="minimal"] {
    --font-display: "Inter", system-ui, sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #050b14;
    --surface: #0d1726;
    --surface-2: #122036;
    --ink: #e8eefb;
    --muted: #93a3bd;
    --line: #1c2b45;
    --line-strong: #2a3c5e;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
    --shadow: 0 12px 34px rgba(0, 0, 0, .45);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, .55);
    --grad-brand: linear-gradient(135deg, var(--brand-light), #1d4ed8);
    --glass-bg: rgba(15, 27, 46, .55);
    --glass-bg-strong: rgba(15, 27, 46, .82);
    --glass-border: rgba(255, 255, 255, .12);
    --glass-sat: 130%;
    --glass-sheen: linear-gradient(115deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 46%);
    --premium-ring: inset 0 1px 0 rgba(255, 255, 255, .08);
    --premium-hairline: rgba(255, 255, 255, .14);
    --premium-shadow: 0 26px 54px -30px rgba(0, 0, 0, .7), 0 3px 10px rgba(0, 0, 0, .3);
    --premium-shadow-hover: 0 38px 74px -28px rgba(0, 0, 0, .78), 0 6px 16px rgba(0, 0, 0, .35);

    /* Navy variants of the band surfaces (see the :root block above) */
    --btn-outline-line: rgba(255, 255, 255, .7);
    --btn-outline-ink: #ffffff;
    --btn-outline-bg-hover: #ffffff;
    --btn-outline-ink-hover: var(--brand-2);
    --band-bg: linear-gradient(160deg, #0a1c33 0%, #050d1a 100%);
    --band-ink: #ffffff;
    --band-sub: #c4d6f2;
    --band-faint: #93a3bd;
    --band-accent: var(--accent);
    --band-line: rgba(255, 255, 255, .15);
    --band-card-bg: rgba(255, 255, 255, .05);
    --band-card-bg-hover: rgba(255, 255, 255, .09);
    --band-card-line: rgba(255, 255, 255, .16);
    --band-icon-bg: rgba(255, 255, 255, .08);
    --band-watermark: rgba(255, 255, 255, .04);
    --band-glow-brand: color-mix(in srgb, var(--brand) 55%, transparent);
    --band-glow-accent: color-mix(in srgb, var(--accent) 32%, transparent);
    --band-em-grad: linear-gradient(100deg, var(--accent), #f6dc9a);
    --hero-veil: linear-gradient(rgba(6, 15, 30, .88), rgba(6, 15, 30, .94));
    --hero-veil-soft: linear-gradient(100deg, rgba(6, 15, 30, .55), rgba(6, 15, 30, .2));
    --topbar-bg: var(--brand-2);
    --topbar-ink: #c9daf2;
    --topbar-chip-bg: rgba(255, 255, 255, .1);
    --footer-bg: var(--brand-2);
    --footer-ink: #a7bce0;
    --footer-faint: #7f97c2;
    --newsletter-bg: var(--grad-brand);
    --newsletter-ink: #ffffff;
    --newsletter-sub: #d4e2f8;
    --newsletter-input-bg: rgba(255, 255, 255, .14);
    --newsletter-input-bg-focus: rgba(255, 255, 255, .22);
    --newsletter-input-line: rgba(255, 255, 255, .35);
    --newsletter-placeholder: rgba(255, 255, 255, .75);
    --ok-ink: #d4f2e2;
    --err-ink: #ffe0dc;
    --dot-bg: rgba(255, 255, 255, .38);
    --dot-active: #ffffff;
    --ad-glass-bg: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    --ad-glass-line: rgba(255, 255, 255, .22);
    --ad-shadow: 0 24px 60px rgba(2, 8, 24, .35);
    --ad-shadow-hover: 0 30px 70px rgba(2, 8, 24, .42);
    --loader-bg: #060810;
    --loader-ink: #ffffff;
    --loader-faint: rgba(255, 255, 255, .65);
    --loader-track: rgba(255, 255, 255, .1);
    --loader-dot: rgba(201, 168, 76, .13);
    --loader-ring-1: rgba(201, 168, 76, .15);
    --loader-ring-2: rgba(46, 184, 160, .12);
    --loader-ring-3: rgba(201, 168, 76, .1);
    --loader-title-grad: linear-gradient(135deg, #c9a84c, #e8cc80 50%, #2eb8a0);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    transition: background .3s ease, color .3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color .18s ease;
}

a:hover {
    color: var(--brand-light);
}

ul {
    list-style: none;
}

::selection {
    background: var(--brand);
    color: #fff;
}

.container {
    width: min(1180px, 92%);
    margin-inline: auto;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    line-height: 1.22;
    color: var(--ink);
}

h2 {
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 {
    letter-spacing: -.02em;
}

/* ================= Announcement bar ================= */
.announcement-bar {
    background: var(--grad-accent);
    color: #221503;
    font-size: .86rem;
    font-weight: 600;
    position: relative;
    z-index: 120;
}

.announcement-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .5rem 2.4rem;
}

.announcement-link {
    color: #221503;
}

.announcement-link:hover {
    color: #000;
    text-decoration: underline;
}

.announcement-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: #221503;
    opacity: .7;
    padding: .2rem .5rem;
    border-radius: 6px;
}

.announcement-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .08);
}

.announcement-bar.hidden {
    display: none;
}

/* ================= Top bar ================= */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-ink);
    font-size: .82rem;
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: .45rem;
    flex-wrap: wrap;
}

.topbar-contacts {
    display: flex;
    gap: 1.2rem;
}

.topbar-contacts a {
    color: var(--topbar-ink);
}

.topbar-contacts a:hover {
    color: var(--band-accent);
}

.topbar-socials {
    display: flex;
    gap: .45rem;
    align-items: center;
}

/* icons only — no text names */
.topbar-socials>a {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--topbar-chip-bg);
    color: var(--topbar-ink);
    transition: .2s;
}

.topbar-socials>a svg {
    width: 14px;
    height: 14px;
    display: block;
}

.topbar-socials>a:hover {
    background: var(--accent);
    color: var(--brand-2);
    transform: translateY(-2px);
}

/* ================= Header / nav ================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    /* Transparent while the visitor is at the top of the page so the hero
       artwork reads through it; the frosted surface fades in the moment they
       scroll (.site-header.scrolled), which keeps the links readable. */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.site-header.scrolled {
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--ink);
}

.brand-mark {
    font-size: 1.5rem;
    line-height: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--grad-brand);
    box-shadow: 0 6px 18px rgba(37, 99, 235, .35);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text strong {
    font-size: 1rem;
    letter-spacing: .1px;
    font-family: var(--font-display);
}

.brand-text small {
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: .2rem;
}

.main-nav a {
    padding: .5rem .9rem;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 500;
    font-size: .93rem;
    position: relative;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.main-nav a:hover {
    color: var(--brand);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}

.main-nav a.active {
    color: var(--brand);
    font-weight: 600;
}

.main-nav a[data-nav="button"] {
    margin-left: .5rem;
    background: var(--grad-accent);
    color: #221503 !important;
    padding: .58rem 1.3rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(217, 164, 65, .35);
}

.main-nav a[data-nav="button"]::after {
    display: none;
}

.main-nav a[data-nav="button"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(217, 164, 65, .45);
}

/* =====================================================================
   PREMIUM MOBILE NAV TOGGLE
   Frosted glass pill, animated hamburger → X morph, "Menu/Close" label
   and a soft attention ring. Shown only on phones (see the responsive
   block further down).
   ===================================================================== */
.nav-toggle {
    display: none;
    position: relative;
    align-items: center;
    gap: .55rem;
    padding: .5rem .8rem .5rem .65rem;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    cursor: pointer;
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px -12px rgba(13, 38, 76, .55);
    transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 24px -12px rgba(217, 164, 65, .6);
}

.nav-toggle:active {
    transform: scale(.95);
}

/* attention ring that softly pulses until the menu is opened */
.nav-toggle::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 17px;
    border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
    opacity: 0;
    animation: ntPulse 2.6s ease-out infinite;
    pointer-events: none;
}

.nav-toggle.open::before,
.nav-toggle.open {
    animation: none;
}

.nav-toggle.open::before {
    opacity: 0;
}

@keyframes ntPulse {
    0% {
        opacity: .55;
        transform: scale(.92);
    }

    70% {
        opacity: 0;
        transform: scale(1.14);
    }

    100% {
        opacity: 0;
        transform: scale(1.14);
    }
}

/* the three bars */
.nt-bars {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 17px;
}

.nt-bars i {
    display: block;
    height: 2.6px;
    width: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ink) 5%, color-mix(in srgb, var(--accent) 80%, var(--ink)));
    transform-origin: center;
    transition: transform .38s cubic-bezier(.68, -.55, .27, 1.55), opacity .2s ease, width .3s ease;
}

.nt-bars i:nth-child(1) {
    width: 100%;
}

.nt-bars i:nth-child(2) {
    width: 78%;
}

.nt-bars i:nth-child(3) {
    width: 100%;
}

/* the Menu / Close label */
.nt-label {
    position: relative;
    z-index: 1;
    font-style: normal;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
}

.nt-close {
    display: none;
}

.nav-toggle.open .nt-open {
    display: none;
}

.nav-toggle.open .nt-close {
    display: inline;
}

/* morph the hamburger into an X */
.nav-toggle.open .nt-bars i:nth-child(1) {
    width: 100%;
    transform: translateY(7.6px) rotate(45deg);
}

.nav-toggle.open .nt-bars i:nth-child(2) {
    width: 0;
    opacity: 0;
}

.nav-toggle.open .nt-bars i:nth-child(3) {
    width: 100%;
    transform: translateY(-7.6px) rotate(-45deg);
}

/* Close (X) button inside the mobile menu */
.nav-close {
    display: none;
    align-self: flex-end;
    width: 44px;
    height: 44px;
    margin: -0.4rem -0.6rem 0.4rem auto;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav-close:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: rotate(90deg);
}

@media (max-width: 860px) {
    .main-nav.open .nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ================= Buttons ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    font-family: var(--font-body);
}

.btn:active {
    transform: scale(.98);
}

.btn-primary {
    background: var(--grad-accent);
    color: #221503;
    box-shadow: 0 8px 22px rgba(217, 164, 65, .4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(217, 164, 65, .5);
    color: #221503;
}

.btn-outline {
    border-color: var(--btn-outline-line);
    color: var(--btn-outline-ink);
    background: transparent;
}

.btn-outline:hover {
    background: var(--btn-outline-bg-hover);
    border-color: var(--btn-outline-bg-hover);
    color: var(--btn-outline-ink-hover);
    transform: translateY(-2px);
}

.btn-green {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .35);
}

.btn-green:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow);
    color: #fff;
}

.btn-gold {
    background: var(--grad-accent);
    color: #221503;
}

.btn-gold:hover {
    background: var(--accent-2);
    color: #221503;
    transform: translateY(-2px);
}

.btn-ghost {
    border-color: var(--line-strong);
    color: var(--ink);
    background: transparent;
}

.btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
}

.btn-sm {
    padding: .45rem 1.1rem;
    font-size: .85rem;
}

.btn-lg {
    padding: .95rem 2.3rem;
    font-size: 1.05rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ================= Home hero ================= */
.hero {
    position: relative;
    color: var(--band-ink);
    background: var(--band-bg);
    border-bottom: 1px solid var(--band-line);
    overflow: hidden;
    padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 420px at 12% 8%, var(--band-glow-brand), transparent 65%),
        radial-gradient(620px 420px at 88% 18%, var(--band-glow-accent), transparent 65%);
    animation: heroShift 14s ease-in-out infinite alternate;
}

@keyframes heroShift {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    100% {
        transform: translate3d(2%, 1.5%, 0) scale(1.06);
    }
}

.hero::after {
    content: "﴾ ﴿";
    font-family: var(--font-ar);
    font-size: 24rem;
    color: var(--band-watermark);
    position: absolute;
    right: -3rem;
    bottom: -8rem;
    line-height: 1;
    pointer-events: none;
    transform: rotate(-8deg);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--band-card-bg);
    color: var(--band-accent);
    border: 1px solid var(--band-card-line);
    padding: .4rem 1.1rem;
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    backdrop-filter: blur(6px);
    margin-bottom: 1.4rem;
}

.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.12;
    margin-bottom: 1.2rem;
    font-family: var(--font-display);
    font-weight: 800;
}

.hero h1 em {
    font-style: normal;
    background: var(--band-em-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p.lead {
    font-size: 1.1rem;
    color: var(--band-sub);
    max-width: 56ch;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.hero-stat {
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-line);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    backdrop-filter: blur(10px);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.hero-stat:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    background: var(--band-card-bg-hover);
}

.hero-stat strong {
    display: block;
    font-size: 2rem;
    color: var(--band-accent);
    line-height: 1.1;
    font-family: var(--font-display);
}

.hero-stat span {
    font-size: .86rem;
    color: var(--band-sub);
}

.hero-scroll {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--band-sub);
    font-size: 1.4rem;
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 8px);
    }
}

/* ================= Marquee ================= */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    background: var(--grad-accent);
    color: #221503;
    padding: .75rem 0;
    position: relative;
    z-index: 3;
}

.marquee-track {
    display: inline-block;
    animation: marquee var(--marquee-duration, 30s) linear infinite;
    will-change: transform;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-track span {
    margin: 0 2.2rem;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .3px;
}

.marquee-track span i {
    font-style: normal;
    opacity: .55;
    margin-right: 2.2rem;
}

/* Marquee style variants (chosen in Admin → Settings → Marquee) */
.marquee[data-style="glass"] {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7)),
        linear-gradient(90deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    color: var(--ink);
    border-block: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    box-shadow: 0 14px 34px -22px rgba(13, 38, 76, .5), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* premium edge fade so the ticker glides in and out */
.marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.marquee[data-style="glass"] .marquee-track span {
    color: var(--ink);
}

.marquee[data-style="glass"] .marquee-track span i {
    color: var(--accent-2);
    opacity: 1;
}

/* same glass ticker on the navy theme reads as smoked glass */
[data-theme="dark"] .marquee[data-style="glass"] {
    background: linear-gradient(120deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
    border-block-color: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

[data-theme="dark"] .marquee[data-style="glass"] .marquee-track span {
    color: #fff;
}

[data-theme="dark"] .marquee[data-style="glass"] .marquee-track span i {
    color: var(--accent);
}

.marquee[data-style="brand"] {
    background: var(--grad-brand);
    color: #fff;
}

.marquee[data-style="brand"] .marquee-track span i {
    color: rgba(255, 255, 255, .7);
}

.marquee[data-style="navy"] {
    background: linear-gradient(120deg, #0a1c33, #050d1a);
    color: #f3e6c4;
}

.marquee[data-style="navy"] .marquee-track span i {
    color: var(--accent);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Gold shimmer sweeping across the gold ticker */
.marquee[data-style="gold"] {
    background: var(--marquee-gold);
}

.marquee[data-style="gold"]::after,
.marquee[data-style="glass"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: marqueeShine 6.5s ease-in-out infinite;
}

@keyframes marqueeShine {
    0% {
        transform: translateX(-100%);
    }

    55%,
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .marquee-track,
    .marquee::after {
        animation: none;
    }
}

/* ================= Page hero (inner pages) ================= */
.page-hero {
    position: relative;
    color: var(--band-ink);
    padding: clamp(3.4rem, 7vw, 5.6rem) 0 2.2rem;
    border-bottom: 1px solid var(--band-line);
    background:
        var(--hero-veil),
        var(--hero-img, none) center/cover no-repeat;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 320px at 85% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%);
}

/* ── Hero under the transparent header ───────────────────────────────
   The banner is pulled up behind the (now see-through) navigation so the
   artwork reads through it, and the extra top padding keeps the headline
   clear of the sticky bar at every width. */
.hero,
.page-hero {
    margin-top: calc(-1 * var(--header-h));
}

.hero {
    padding-top: calc(var(--header-h) + clamp(2.4rem, 5vw, 4.2rem));
}

.page-hero {
    padding-top: calc(var(--header-h) + clamp(1.8rem, 4vw, 3.4rem));
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-veil-soft);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-content h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.18;
    margin-bottom: .9rem;
}

.hero-sub {
    color: var(--band-sub);
    font-size: 1.08rem;
    max-width: 62ch;
}

.breadcrumbs {
    position: relative;
    z-index: 2;
    margin-top: 1.8rem;
    padding-block: .95rem;
    font-size: .86rem;
    border-top: 1px solid var(--band-line);
    color: var(--band-sub);
}

.breadcrumbs a {
    color: var(--band-accent);
}

.breadcrumbs .current {
    color: var(--band-ink);
}

/* ================= Section scaffolding ================= */
.section {
    padding: clamp(3.2rem, 7vw, 5.8rem) 0;
}

.section-alt {
    background: var(--surface-2);
}

.section-green {
    background: var(--band-bg);
    color: var(--band-ink);
    border-block: 1px solid var(--band-line);
    position: relative;
    overflow: hidden;
}

.section-green::before {
    content: "﷽";
    font-family: var(--font-ar);
    position: absolute;
    font-size: 10rem;
    color: var(--band-watermark);
    top: -2.2rem;
    right: 1rem;
    line-height: 1;
}

.section-head {
    max-width: 740px;
    margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
    text-align: center;
    position: relative;
    z-index: 2;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--accent-2);
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    font-size: .76rem;
    margin-bottom: .7rem;
    position: relative;
}

.section-kicker::before {
    content: "—";
    opacity: .5;
}

.section-kicker::after {
    content: "—";
    opacity: .5;
}

.section-head h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}

.section-head p {
    color: var(--muted);
    margin-top: .7rem;
    font-size: 1.02rem;
}

.section-green .section-head h2 {
    color: var(--band-ink);
}

.section-green .section-kicker {
    color: var(--band-accent);
}

.section-green .section-head p {
    color: var(--band-sub);
}

.section-head-left {
    text-align: left;
    margin-inline: 0;
}

.section-head-left .section-kicker::before {
    display: none;
}

/* ================= Feature cards ================= */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.7rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.fc-icon {
    font-size: 1.9rem;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    margin-bottom: 1.2rem;
    transition: transform .3s ease;
}

.feature-card:hover .fc-icon {
    transform: scale(1.1) rotate(-6deg);
}

.feature-card h3 {
    font-size: 1.14rem;
    margin-bottom: .5rem;
}

.feature-card p {
    color: var(--muted);
    font-size: .94rem;
}

.feature-card .fc-link {
    margin-top: 1rem;
    display: inline-flex;
    font-weight: 700;
    font-size: .9rem;
    align-items: center;
    gap: .3rem;
}

.feature-card .fc-link:hover {
    gap: .55rem;
}

/* ================= Stats band ================= */
.stats-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.3rem;
}

.stat-block {
    text-align: center;
    padding: 1.7rem 1rem;
    border-radius: var(--radius);
}

.stat-block .stat-num {
    font-size: clamp(2.1rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--band-accent);
    line-height: 1;
    font-family: var(--font-display);
}

.stat-block .stat-label {
    color: var(--band-sub);
    font-size: .92rem;
    margin-top: .5rem;
}

.stats-band.light .stat-block {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.stats-band.light .stat-block .stat-num {
    color: var(--brand);
}

.stats-band.light .stat-block .stat-label {
    color: var(--muted);
}

/* ================= Project cards (medium size) ================= */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1.1rem;
    max-width: 1040px;
    margin-inline: auto;
}

.project-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
    position: relative;
}

.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px transparent;
    pointer-events: none;
    transition: box-shadow .28s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(10, 28, 51, .13);
    border-color: var(--line-strong);
}

.project-card:hover::after {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
}

.pc-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--surface-2);
}

.pc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.project-card:hover .pc-media img {
    transform: scale(1.08);
}

.pc-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 55%, rgba(6, 15, 30, .35));
    opacity: 0;
    transition: opacity .3s ease;
}

.project-card:hover .pc-media::after {
    opacity: 1;
}

.pc-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(7, 35, 26, .8);
    color: #fff;
    font-size: .62rem;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: .24rem .68rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.pc-tag.gold {
    background: var(--grad-accent);
    color: #221503;
}

.pc-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}

.pc-body h3 {
    font-size: 1rem;
    letter-spacing: -.01em;
}

.pc-body h3 a {
    color: inherit;
}

.pc-body h3 a:hover {
    color: var(--brand);
}

.pc-body p {
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-bar {
    height: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 99px;
    overflow: hidden;
}

.pc-bar i {
    display: block;
    height: 100%;
    background: var(--grad-brand);
    border-radius: 99px;
    transition: width 1s ease;
}

.pc-meta {
    display: flex;
    justify-content: space-between;
    font-size: .76rem;
    color: var(--muted);
}

.pc-meta b {
    color: var(--brand);
}

.pc-actions {
    display: flex;
    gap: .55rem;
    margin-top: .3rem;
}

.pc-actions .btn {
    flex: 1;
}

/* ================= Split sections ================= */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.split-media {
    position: relative;
}

.split-media .sm-frame {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.split-media .sm-frame img {
    width: 100%;
}

.split-media::before {
    content: "";
    position: absolute;
    inset: -16px auto auto -16px;
    width: 46%;
    height: 46%;
    border-radius: var(--radius);
    border: 3px solid var(--accent);
    opacity: .5;
    z-index: -1;
}

.split-copy h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    margin-bottom: .9rem;
}

.split-copy .lead {
    color: var(--muted);
    margin-bottom: 1.3rem;
    font-size: 1.04rem;
}

.check-list li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: .75rem;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--brand);
    color: var(--brand);
    font-weight: 800;
    font-size: .78rem;
    display: grid;
    place-items: center;
}

/* ================= Quote / hadith cards ================= */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}

.quote-card {
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-line);
    border-radius: var(--radius);
    padding: 1.9rem 1.8rem;
    position: relative;
    backdrop-filter: blur(6px);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.quote-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: var(--band-card-bg-hover);
}

.quote-card::before {
    content: "“";
    position: absolute;
    top: .6rem;
    right: 1.2rem;
    font-family: var(--font-serif);
    font-size: 4.5rem;
    color: rgba(217, 164, 65, .18);
    line-height: 1;
}

.quote-card .q-icon {
    font-size: 1.6rem;
    margin-bottom: .9rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}

.quote-card blockquote {
    font-size: 1.04rem;
    color: var(--band-ink);
    font-style: italic;
    margin-bottom: 1rem;
    font-family: var(--font-body);
}

.quote-card cite {
    font-style: normal;
    color: var(--band-accent);
    font-size: .85rem;
    letter-spacing: .4px;
}

.quote-card.ar blockquote {
    font-family: var(--font-ar);
    font-size: 1.5rem;
    line-height: 2;
    font-style: normal;
    text-align: right;
    direction: rtl;
}

.quote-card.ar cite {
    display: block;
    text-align: right;
}

/* ================= Gallery (medium tiles) ================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .85rem;
    max-width: 1060px;
    margin-inline: auto;
}

.gallery-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1/1;
    display: block;
    box-shadow: var(--shadow-sm);
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease;
}

.gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(10, 28, 51, .18);
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.gallery-card:hover img {
    transform: scale(1.08);
}

.gallery-card .g-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(transparent 40%, rgba(6, 15, 30, .88));
    color: #fff;
    padding: .85rem;
    font-weight: 700;
    font-size: .88rem;
    font-family: var(--font-display);
}

.gallery-card .g-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(6, 15, 30, .75);
    color: var(--accent);
    font-size: .74rem;
    padding: .22rem .7rem;
    border-radius: 999px;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    background: rgba(4, 14, 10, .95);
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(8px);
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 82vh;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    animation: lbIn .3s ease;
}

@keyframes lbIn {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lightbox figcaption {
    color: #d5e9de;
    text-align: center;
    margin-top: .9rem;
    font-size: .95rem;
}

/* The viewer deliberately has no ✕ button over the photo: it is closed by
tapping the dark backdrop or pressing Esc (see assets/js/main.js). */
.lightbox .lb-prev,
.lightbox .lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.6rem;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
    padding: .6rem 1.1rem;
    opacity: .85;
}

.lightbox .lb-prev:hover,
.lightbox .lb-next:hover {
    opacity: 1;
    color: var(--accent);
}

.lightbox .lb-prev {
    left: 12px;
}

.lightbox .lb-next {
    right: 12px;
}

/* ================= Timeline ================= */
.timeline {
    position: relative;
    max-width: 760px;
    margin-inline: auto;
    padding-left: 2.4rem;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: linear-gradient(var(--accent), var(--brand));
    border-radius: 99px;
}

.tl-item {
    position: relative;
    padding-bottom: 2.2rem;
}

.tl-item::before {
    content: "";
    position: absolute;
    left: -2.4rem;
    top: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--grad-accent);
    border: 3px solid var(--bg);
    margin-left: -3px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.tl-year {
    font-weight: 800;
    color: var(--brand);
    font-size: 1.06rem;
    font-family: var(--font-display);
}

.tl-title {
    font-weight: 700;
}

.tl-item p {
    color: var(--muted);
    font-size: .95rem;
}

/* ================= Team ================= */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.7rem;
}

.team-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    padding: 2rem 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

.team-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-accent);
    transform: scaleX(0);
    transition: transform .3s ease;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.team-card:hover::after {
    transform: scaleX(1);
}

.team-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 1.1rem;
    display: grid;
    place-items: center;
    font-size: 2.1rem;
    font-weight: 700;
    color: #fff;
    background: var(--grad-brand);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .35);
    position: relative;
}

.team-avatar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
    animation: spin 14s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.team-card h3 {
    font-size: 1.1rem;
}

.team-card .t-role {
    color: var(--accent-2);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: .25rem 0 .6rem;
}

.team-card p {
    color: var(--muted);
    font-size: .9rem;
}

/* ================= Donate ================= */
.bank-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.6rem;
}

.bank-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.bank-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.bank-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-brand);
}

.bank-card:nth-child(2)::before {
    background: var(--grad-accent);
}

.bank-card h3 {
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.bank-card h3 .bc-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 1.15rem;
}

.bank-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--line-strong);
    font-size: .94rem;
}

.bank-row:last-child {
    border-bottom: 0;
}

.bank-row .k {
    color: var(--muted);
}

.bank-row .v {
    font-weight: 600;
    text-align: right;
}

.cause-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.cause-pill {
    flex: 1 1 220px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    background: var(--surface);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cause-pill:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.cause-pill .cp-ico {
    font-size: 1.6rem;
}

.cause-pill strong {
    display: block;
    margin: .35rem 0 .2rem;
    color: var(--ink);
    font-family: var(--font-display);
}

.cause-pill span {
    font-size: .84rem;
    color: var(--muted);
}

.section-green .cause-pill {
    background: var(--band-card-bg);
    border-color: var(--band-card-line);
}

.section-green .cause-pill strong {
    color: var(--band-ink);
}

.section-green .cause-pill:hover {
    border-color: var(--accent);
    background: var(--band-card-bg-hover);
}

/* ================= Forms ================= */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.form-grid .full {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .4rem;
    color: var(--ink);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: .8rem 1rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 11px;
    font-family: inherit;
    font-size: .96rem;
    background: var(--surface);
    color: var(--ink);
    transition: border .18s ease, box-shadow .18s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}

.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

.form-note {
    font-size: .85rem;
    color: var(--muted);
    margin-top: .5rem;
}

.form-message {
    padding: .9rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.2rem;
    font-size: .95rem;
    display: none;
}

.form-message.ok {
    display: block;
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}

.form-message.err {
    display: block;
    background: #fdecea;
    color: #9c2b25;
    border: 1px solid #f3b7b0;
}

[data-theme="dark"] .form-message.err {
    background: #3a1714;
    color: #ffb4ac;
    border-color: #6d2a22;
}

.contact-panel {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2.6rem;
    align-items: start;
}

.info-card {
    background: var(--band-bg);
    color: var(--band-ink);
    border-radius: var(--radius);
    padding: 2.2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.info-card::before {
    content: "﷽";
    font-family: var(--font-ar);
    position: absolute;
    font-size: 7rem;
    color: var(--band-watermark);
    bottom: -1.5rem;
    right: -.5rem;
}

.info-card h3 {
    color: var(--band-accent);
    margin-bottom: 1.4rem;
}

.info-list li {
    display: flex;
    gap: .9rem;
    margin-bottom: 1.2rem;
    align-items: flex-start;
}

.info-list .il-ico {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--band-icon-bg);
    font-size: 1.1rem;
}

.info-list strong {
    display: block;
    color: var(--band-ink);
}

.info-list span,
.info-list a {
    color: var(--band-sub);
    font-size: .94rem;
}

.info-list a:hover {
    color: var(--accent);
}

/* ================= CTA band ================= */
.cta-band {
    background: var(--band-bg);
    color: var(--band-ink);
    text-align: center;
    padding: clamp(3.4rem, 7vw, 5rem) 0;
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(560px 320px at 15% 10%, var(--band-glow-brand), transparent 60%),
        radial-gradient(560px 320px at 85% 90%, var(--band-glow-accent), transparent 60%);
}

.cta-band::after {
    content: "﷽";
    font-family: var(--font-ar);
    position: absolute;
    font-size: 9rem;
    color: var(--band-watermark);
    top: -2.5rem;
    left: 1rem;
    line-height: 1;
}

.cta-band h2 {
    font-size: clamp(1.7rem, 3.8vw, 2.5rem);
    margin-bottom: .8rem;
    color: var(--band-ink);
    position: relative;
    z-index: 2;
}

.cta-band p {
    color: var(--band-sub);
    max-width: 62ch;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 2;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* ================= Working page ================= */
.working-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1.6rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
    max-width: 1040px;
    margin-inline: auto;
}

.working-card:hover {
    box-shadow: 0 18px 44px rgba(10, 28, 51, .13);
    transform: translateY(-3px);
}

.working-card:nth-child(even) {
    direction: rtl;
}

.working-card:nth-child(even)>* {
    direction: ltr;
}

.wc-media {
    aspect-ratio: 16/10;
    position: relative;
}

.wc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-body {
    padding: 1.5rem 1.7rem;
}

.wc-body .wc-tag {
    display: inline-block;
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    color: var(--brand);
    font-size: .74rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 700;
    padding: .32rem 1rem;
    border-radius: 999px;
    margin-bottom: .9rem;
}

.wc-body h2 {
    margin-bottom: .55rem;
    font-size: 1.24rem;
}

.wc-body p {
    color: var(--muted);
}

.wc-stats {
    display: flex;
    gap: 1.4rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.wc-stat strong {
    display: block;
    color: var(--brand);
    font-size: 1.15rem;
    font-family: var(--font-display);
}

.wc-stat span {
    color: var(--muted);
    font-size: .85rem;
}

.wc-actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}

/* ================= Newsletter band ================= */
.newsletter-band {
    background: var(--newsletter-bg);
    color: var(--newsletter-ink);
    padding: clamp(2.6rem, 5vw, 3.8rem) 0;
    position: relative;
    overflow: hidden;
}

.newsletter-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(480px 260px at 90% 20%, var(--band-glow-brand), transparent 60%);
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.newsletter-copy h2 {
    color: var(--newsletter-ink);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    margin-bottom: .4rem;
}

.newsletter-copy p {
    color: var(--newsletter-sub);
    font-size: .95rem;
    max-width: 52ch;
}

.newsletter-form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: .85rem 1.2rem;
    border-radius: 999px;
    border: 2px solid var(--newsletter-input-line);
    background: var(--newsletter-input-bg);
    color: var(--newsletter-ink);
    font-size: .95rem;
    outline: none;
}

.newsletter-form input::placeholder {
    color: var(--newsletter-placeholder);
}

.newsletter-form input:focus {
    border-color: var(--brand);
    background: var(--newsletter-input-bg-focus);
}

.newsletter-msg {
    width: 100%;
    font-size: .88rem;
    font-weight: 600;
    min-height: 1.2em;
}

.newsletter-msg.ok {
    color: var(--ok-ink);
}

.newsletter-msg.err {
    color: var(--err-ink);
}

/* ================= Impact chart ================= */
.chart-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.8rem;
    align-items: stretch;
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.8rem 1.2rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}

.chart-card canvas {
    max-height: 320px;
}

.chart-facts {
    background: var(--band-bg);
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
    color: var(--band-sub);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.chart-facts::before {
    content: "﷽";
    font-family: var(--font-ar);
    position: absolute;
    font-size: 7rem;
    color: var(--band-watermark);
    bottom: -1.6rem;
    right: -.4rem;
    line-height: 1;
}

.chart-facts h3 {
    color: var(--band-accent);
    font-size: 1.05rem;
    margin-bottom: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chart-facts ul li {
    display: flex;
    gap: .9rem;
    align-items: center;
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 2;
}

.chart-facts .cf-ico {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--band-icon-bg);
    font-size: 1.15rem;
}

.chart-facts strong {
    display: block;
    color: var(--band-ink);
    font-size: 1.25rem;
    font-family: var(--font-display);
}

.chart-facts span {
    color: var(--band-faint);
    font-size: .85rem;
}

/* ================= Notice ================= */
.notice {
    padding: 1rem 1.3rem;
    border-radius: 11px;
    margin-bottom: 1.4rem;
    font-size: .95rem;
    border: 1px solid;
}

.notice.info {
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    color: var(--brand);
}

/* ================= Footer ================= */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-ink);
    position: relative;
    overflow: hidden;
}

.footer-watermark {
    position: absolute;
    right: -1rem;
    bottom: -3.5rem;
    font-family: var(--font-ar);
    font-size: 16rem;
    line-height: 1;
    color: var(--band-watermark);
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.6rem;
    padding: clamp(2.8rem, 5vw, 4.2rem) 0 2.4rem;
    position: relative;
    z-index: 2;
}

.brand-footer {
    color: var(--band-ink);
    margin-bottom: 1rem;
}

.footer-about p {
    font-size: .93rem;
    margin-bottom: 1.2rem;
}

.footer-socials {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

/* icons only — no text names */
.footer-socials a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--band-card-line);
    color: var(--footer-ink);
    transition: .2s;
}

.footer-socials a svg {
    width: 18px;
    height: 18px;
    display: block;
}

.footer-socials a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--brand-2);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(201, 168, 76, .35);
}

.site-footer h4 {
    color: var(--band-accent);
    font-size: .92rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.footer-links li,
.footer-contact li {
    margin-bottom: .65rem;
    font-size: .93rem;
}

.footer-links a {
    color: var(--footer-ink);
    position: relative;
}

.footer-links a::before {
    content: "→";
    opacity: 0;
    margin-right: 0;
    transition: .2s;
    color: var(--accent);
}

.footer-links a:hover {
    color: var(--band-accent);
    padding-left: 1.2rem;
}

.footer-links a:hover::before {
    opacity: 1;
    margin-right: .5rem;
}

.footer-contact a {
    color: var(--footer-ink);
}

.footer-contact a:hover {
    color: var(--band-accent);
}

.footer-cta-text {
    font-size: .92rem;
    margin: .9rem 0 1.2rem;
}

.footer-bottom {
    border-top: 1px solid var(--band-line);
    padding: 1.3rem 0;
    font-size: .84rem;
    color: var(--footer-faint);
    position: relative;
    z-index: 2;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-bottom a {
    color: var(--footer-ink);
}

/* ================= Floating widgets ================= */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 80;
}

.whatsapp-float a {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2be26f, #1faf57);
    color: #fff;
    font-size: 1.7rem;
    box-shadow: 0 12px 30px rgba(37, 211, 102, .45);
    transition: transform .2s ease;
}

/* GPU-friendly pulse: a pseudo-element ring fades/scales instead of
   animating box-shadow (which forces a repaint on every frame). */
.whatsapp-float a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 12px 30px rgba(37, 211, 102, .45);
    opacity: 1;
    transform: scale(1);
    animation: waPulse 2.6s ease-in-out infinite;
    pointer-events: none;
}

.whatsapp-float a {
    position: relative;
}

@keyframes waPulse {

    0%,
    100% {
        opacity: .9;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(1.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float a::after {
        animation: none;
    }
}

.whatsapp-float a:hover {
    transform: scale(1.1);
    color: #fff;
}

.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 96px;
    z-index: 79;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: var(--grad-accent);
    color: #221503;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(217, 164, 65, .4);
    /* fully hidden until the visitor scrolls down — JS toggles [hidden]
       plus .show for the fade-in (belt and suspenders) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.back-to-top:hover {
    transform: translateY(-3px);
}

/* ================= Reveal animation ================= */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ================= Responsive ================= */
@media (max-width: 1020px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-grid,
    .split,
    .contact-panel,
    .newsletter-inner,
    .chart-grid {
        grid-template-columns: 1fr;
    }

    .hero-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .working-card,
    .working-card:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .working-card:nth-child(even)>* {
        direction: ltr;
    }
}

@media (max-width: 860px) {
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        z-index: 95;
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.4rem 1.6rem;
        gap: .2rem;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        transform: translateY(-140%);
        transition: transform .3s ease;
    }

    .main-nav.open {
        transform: none;
    }

    .main-nav a {
        padding: .9rem 1rem;
        border-radius: 11px;
        font-size: 1.02rem;
    }

    .main-nav a::after {
        display: none;
    }

    .main-nav a[data-nav="button"] {
        margin: .6rem 0 0;
        text-align: center;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .topbar-contacts a:first-child {
        display: none;
    }
}

@media (max-width: 620px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .topbar-socials>a {
        display: none;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* =====================================================================
   PREMIUM GLASS DESIGN LAYER (blue glassmorphism)
   ===================================================================== */
.glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
}

/* The bar is see-through at the top of the page (see .site-header at the top
   of this file) so the hero shows behind the menu; only the scrolled state
   turns it into frosted glass. */
.site-header.scrolled {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border-bottom: 1px solid var(--line);
}

.main-nav a[data-nav="button"] {
    background: var(--grad-brand);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .4);
}

.main-nav a[data-nav="button"]:hover {
    box-shadow: 0 10px 26px rgba(37, 99, 235, .5);
}

.btn-primary {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .4);
}

.btn-primary:hover {
    box-shadow: 0 14px 30px rgba(37, 99, 235, .5);
    color: #fff;
}

.announcement-bar {
    background: var(--grad-brand);
    color: #fff;
}

.announcement-link,
.announcement-close {
    color: #fff;
}

.announcement-link:hover {
    color: #dbeafe;
}

.feature-card,
.project-card,
.bank-card,
.chart-card {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.project-card {
    border: 1px solid var(--glass-border);
}

.chart-card {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.chart-facts {
    background: var(--band-bg);
    border: 1px solid var(--band-card-line);
    box-shadow: var(--shadow);
}

.stat-block .stat-num {
    color: var(--band-accent);
}

.stats-band.light .stat-block .stat-num {
    color: var(--brand);
}

.hero-stat {
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-line);
}

/* ================= Request letter (public viewer) ================= */
.pc-tag-letter {
    top: auto;
    bottom: 12px;
    background: rgba(37, 99, 235, .92);
    color: #fff;
}

.letter-viewer {
    max-width: 920px;
    margin-inline: auto;
}

.letter-figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    text-align: center;
    padding: .8rem;
}

.letter-figure img {
    width: 100%;
    max-height: 640px;
    object-fit: contain;
    border-radius: calc(var(--radius) - 6px);
    background: #fff;
}

.letter-figure figcaption {
    padding: .9rem 1rem .4rem;
    color: var(--muted);
    font-size: .88rem;
}

.letter-pdf {
    border-radius: var(--radius);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.letter-pdf-icon {
    font-size: 3.4rem;
    margin-bottom: 1rem;
}

.letter-pdf h3 {
    margin-bottom: .5rem;
}

.letter-pdf p {
    color: var(--muted);
    margin-bottom: 1.4rem;
}

@media (max-width: 760px) {
    .letter-figure img {
        max-height: 460px;
    }
}

/* ================= Projects filter bar ================= */
.filter-bar {
    display: flex;
    gap: .7rem;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 999px;
    padding: .55rem .7rem .55rem 1.2rem;
    max-width: 860px;
    margin: 0 auto 2.4rem;
    box-shadow: var(--shadow-sm);
}

.filter-search {
    flex: 1 1 220px;
}

.filter-search input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: .98rem;
    color: var(--ink);
    padding: .55rem 0;
}

.filter-bar select {
    border: 0;
    background: var(--surface-2);
    border-radius: 999px;
    padding: .55rem 1rem;
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    cursor: pointer;
    outline: none;
}

@media (max-width: 640px) {
    .filter-bar {
        border-radius: 22px;
        padding: .8rem;
    }

    .filter-search {
        flex-basis: 100%;
        border-bottom: 1px solid var(--line);
        margin-bottom: .5rem;
    }

    .filter-bar select {
        flex: 1;
    }
}

/* =====================================================================
   MOBILE OPTIMIZATION LAYER — full-site phone polish
   ===================================================================== */

/* --- full-screen glass nav drawer --- */
@media (max-width: 860px) {
    .announcement-inner {
        font-size: .78rem;
        padding: .45rem 2.4rem .45rem .8rem;
        gap: .5rem;
    }

    .announcement-close {
        right: 4px;
    }

    .page-hero {
        padding: calc(var(--header-h) + 1.6rem) 0 1.6rem;
    }

    .hero-content h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .hero-sub {
        font-size: .96rem;
    }

    .breadcrumbs {
        margin-top: 1.2rem;
        padding-block: .7rem;
        font-size: .8rem;
    }

    .notice {
        font-size: .9rem;
    }
}

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 10, 20, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 94;
    opacity: 0;
    transition: opacity .25s ease;
}

@media (max-width: 860px) {
    .main-nav {
        inset: 0;
        height: 100dvh;
        height: 100vh;
        overflow-y: auto;
        padding: calc(var(--header-h) + 1.2rem) 1.2rem 3rem;
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
        backdrop-filter: blur(var(--glass-blur)) saturate(160%);
        border-bottom: 0;
    }

    .main-nav a {
        font-size: 1.1rem;
        padding: 1rem 1.1rem;
        min-height: 44px;
    }

    .main-nav a[data-nav="button"] {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.08rem;
        margin-top: .8rem;
    }

    body.nav-open .nav-backdrop {
        display: block;
        opacity: 1;
    }

    body.nav-open {
        overflow: hidden;
    }

    .site-header {
        z-index: 96;
        /* transparent over the hero; backdrop blur is expensive while
           scrolling on phones, so the scrolled state uses a plain
           translucent surface instead of a blur */
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom-color: transparent;
    }

    .site-header.scrolled {
        background: color-mix(in srgb, var(--surface) 95%, transparent);
        border-bottom-color: var(--line);
    }

    /* header: compact on scroll */
    .site-header.scrolled .header-inner {
        min-height: 62px;
    }

    .brand-text strong {
        font-size: .92rem;
    }

    /* top bar: single row, phone-sized contact chips */
    .topbar-inner {
        padding-block: .5rem;
        gap: .5rem;
    }

    .topbar-contacts {
        gap: .7rem;
        font-size: .78rem;
    }

    /* hero: faster readable text, no heavy animation.
       it still slides up behind the transparent header (see .hero margin-top) */
    .hero {
        padding: calc(var(--header-h) + clamp(1.8rem, 7vw, 3rem)) 0 clamp(2.6rem, 9vw, 4rem);
    }

    .hero::before {
        animation: none;
    }

    .hero::after {
        font-size: 13rem;
        right: -2rem;
        bottom: -4rem;
    }

    .hero h1 {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    .hero p.lead {
        font-size: 1rem;
        margin-bottom: 1.6rem;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .hero-stats {
        gap: .7rem;
    }

    .hero-stat {
        padding: 1rem 1rem;
    }

    .hero-stat strong {
        font-size: 1.55rem;
    }

    .hero-stat span {
        font-size: .78rem;
    }

    .hero-scroll {
        display: none;
    }

    /* marquee lighter */
    .marquee {
        padding: .6rem 0;
    }

    .marquee-track span {
        font-size: .86rem;
    }

    /* sections & heads */
    .section {
        padding: clamp(2.6rem, 9vw, 4rem) 0;
    }

    .section-head {
        margin-bottom: clamp(1.8rem, 6vw, 2.4rem);
    }

    .section-head h2 {
        font-size: clamp(1.45rem, 6.4vw, 1.9rem);
    }

    .section-head p {
        font-size: .96rem;
    }

    /* cards stack tighter */
    .feature-grid {
        gap: .9rem;
    }

    .feature-card {
        padding: 1.5rem 1.3rem;
    }

    .fc-icon {
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
        margin-bottom: .9rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .project-card:hover {
        transform: none;
    }

    .pc-body {
        padding: 1.2rem 1.2rem 1.4rem;
        gap: .5rem;
    }

    .pc-actions {
        gap: .5rem;
    }

    .pc-tag-letter {
        bottom: 12px;
        left: 12px;
        right: auto;
        font-size: .66rem;
    }

    /* stats band: 2-col, wraps to comfort */
    .stats-band {
        grid-template-columns: 1fr 1fr;
        gap: .8rem;
    }

    .stat-block {
        padding: 1.2rem .8rem;
    }

    .stat-block .stat-num {
        font-size: 1.7rem;
    }

    .stat-block .stat-label {
        font-size: .84rem;
    }

    /* split/working cards */
    .split {
        gap: 1.6rem;
    }

    .split-media::before {
        display: none;
    }

    .working-card {
        gap: 0;
        margin-bottom: 1.4rem;
    }

    .wc-body {
        padding: 1.4rem 1.2rem 1.6rem;
    }

    .wc-body h2 {
        font-size: 1.3rem;
    }

    .wc-stats {
        gap: 1rem;
        margin: 1rem 0;
    }

    .wc-stat strong {
        font-size: 1.15rem;
    }

    .wc-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* chart section */
    .chart-card {
        padding: 1rem .9rem;
        min-height: 260px;
    }

    .chart-card canvas {
        max-height: 230px;
    }

    .chart-facts {
        padding: 1.4rem 1.2rem;
    }

    .chart-facts h3 {
        margin-bottom: 1rem;
    }

    .chart-facts ul li {
        margin-bottom: .8rem;
    }

    .chart-facts strong {
        font-size: 1.05rem;
    }

    /* bank cards & cause pills */
    .bank-card {
        padding: 1.4rem 1.2rem;
    }

    .bank-row {
        font-size: .88rem;
        gap: .6rem;
    }

    .bank-row .v {
        text-align: right;
        word-break: break-word;
    }

    .cause-pill {
        flex: 1 1 100%;
    }

    /* contact panel */
    .contact-panel {
        gap: 1.6rem;
    }

    .info-card {
        padding: 1.6rem 1.3rem;
    }

    .info-list li {
        gap: .7rem;
        margin-bottom: 1rem;
    }

    .info-list .il-ico {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    /* forms: 16px inputs kill iOS auto-zoom */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px;
    }

    /* quotes */
    .quote-grid {
        gap: 1rem;
    }

    .quote-card {
        padding: 1.5rem 1.3rem;
    }

    .quote-card.ar blockquote {
        font-size: 1.25rem;
    }

    .quote-card::before {
        font-size: 3.4rem;
    }

    /* timeline */
    .timeline {
        padding-left: 2rem;
    }

    .tl-item::before {
        left: -2rem;
    }

    /* gallery grid: bigger taps, 2-col */
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: .7rem;
    }

    .gallery-card {
        aspect-ratio: 1/1;
    }

    .gallery-card .g-overlay {
        font-size: .85rem;
        padding: .8rem;
    }

    .gallery-card .g-count {
        font-size: .68rem;
    }

    /* lightbox: comfortable on phone */
    .lightbox {
        padding: 1rem;
    }

    .lightbox img {
        max-height: 70dvh;
        max-height: 70vh;
    }

    .lightbox .lb-prev,
    .lightbox .lb-next {
        font-size: 2.1rem;
        padding: .5rem .8rem;
    }

    /* CTA + newsletter */
    .cta-band {
        padding: clamp(2.6rem, 10vw, 4rem) 0;
    }

    .cta-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .newsletter-inner {
        gap: 1.4rem;
    }

    .newsletter-form {
        width: 100%;
    }

    .newsletter-form input[type="email"] {
        min-width: 0;
        flex: 1 1 100%;
        font-size: 16px;
    }

    .newsletter-form .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* footer single column, socials wrap */
    .footer-grid {
        gap: 1.8rem;
    }

    .footer-socials a {
        width: 34px;
        height: 34px;
    }

    .footer-socials a svg {
        width: 16px;
        height: 16px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .3rem;
    }

    /* floating widgets: above iOS home bar */
    .whatsapp-float {
        right: 14px;
        bottom: 18px;
    }

    .whatsapp-float a {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .back-to-top {
        right: 16px;
        bottom: 84px;
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
    }
}

/* --- very small phones (<400px) --- */
@media (max-width: 400px) {
    .brand-text strong {
        font-size: .84rem;
    }

    .brand-text small {
        font-size: .62rem;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .hero h1 {
        font-size: clamp(1.7rem, 8.5vw, 2.1rem);
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
    }

    .stats-band {
        gap: .6rem;
    }

    .pc-actions {
        flex-direction: column;
    }

    .pc-actions .btn {
        width: 100%;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .letter-figure img {
        max-height: 380px;
    }

    .footer-bottom-inner {
        font-size: .78rem;
    }

    .whatsapp-float a {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }
}

/* --- touch devices: disable hover-lift jitter --- */
@media (hover: none) {

    .project-card:hover,
    .feature-card:hover,
    .team-card:hover,
    .bank-card:hover,
    .working-card:hover,
    .cause-pill:hover {
        transform: none;
    }

    .main-nav a:hover::after {
        transform: scaleX(0);
    }
}

/* --- accessibility: visible focus on mobile taps --- */
@media (max-width: 860px) {

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent);
        outline-offset: 2px;
        border-radius: 6px;
    }
}

/* --- light iOS momentum scroll inside drawers --- */
.main-nav,
.lightbox {
    -webkit-overflow-scrolling: touch;
}

/* --- safe-area padding for notched phones --- */
@supports (padding: max(0px)) {
    @media (max-width: 860px) {
        .main-nav {
            padding-left: max(1.2rem, env(safe-area-inset-left));
            padding-right: max(1.2rem, env(safe-area-inset-right));
        }

        .whatsapp-float {
            bottom: max(18px, env(safe-area-inset-bottom));
        }
    }
}

/* =====================================================================
   PREMIUM IMPACT DASHBOARD — dual chart panels (v5, llhelpinghand style)
   ===================================================================== */
.chart-panel {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.6rem 1.7rem 1.4rem;
    box-shadow: 0 18px 50px rgba(5, 13, 26, .10);
    position: relative;
    overflow: hidden;
}

.chart-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #10b981, #f97316, #ec4899, #a855f7);
    opacity: .85;
}

.chart-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.chart-panel-head h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    color: var(--text);
    margin-bottom: .2rem;
}

.chart-panel-head p {
    color: var(--muted);
    font-size: .88rem;
}

.chart-pill {
    flex: none;
    padding: .32rem .85rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f97316, #f59e0b);
    color: #fff;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .35);
}

.chart-pill-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}

.chart-panel-body {
    position: relative;
    width: 100%;
}

.chart-noscript {
    padding: 1rem;
    columns: 2;
    font-size: .9rem;
    color: var(--muted);
}

.dash-facts {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.dash-fact {
    display: flex;
    align-items: center;
    gap: .95rem;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.05rem 1.15rem;
    box-shadow: 0 10px 30px rgba(5, 13, 26, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

.dash-fact:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(5, 13, 26, .12);
}

.dash-fact .cf-ico {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, .16), rgba(37, 99, 235, .08));
}

.dash-fact strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--text);
    line-height: 1.15;
}

.dash-fact span:not(.cf-ico) {
    color: var(--muted);
    font-size: .84rem;
}

@media (prefers-reduced-motion: reduce) {

    .dash-fact,
    .chart-panel {
        transition: none;
    }
}

@media (max-width: 640px) {
    .chart-panel {
        padding: 1.15rem 1rem 1rem;
        border-radius: 18px;
    }

    .chart-panel-head {
        flex-direction: column;
    }

    .chart-pill {
        align-self: flex-start;
    }

    .dash-facts {
        grid-template-columns: 1fr 1fr;
        gap: .7rem;
    }

    .dash-fact {
        padding: .85rem .8rem;
        gap: .7rem;
    }

    .dash-fact .cf-ico {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 1.05rem;
    }

    .dash-fact strong {
        font-size: 1.05rem;
    }

    .dash-fact span:not(.cf-ico) {
        font-size: .74rem;
    }
}

@media (max-width: 400px) {
    .dash-facts {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   HERO EMERGENCY-CAMPAIGN AD — premium glass spotlight (v5)
   ===================================================================== */
.hero-ad-wrap {
    position: relative;
    z-index: 5;
    margin-top: 2.4rem;
}

.hero-ad {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 1.25rem;
    align-items: center;
    background: var(--ad-glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--ad-glass-line);
    border-radius: 20px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--ad-shadow);
    transition: transform .25s ease, box-shadow .25s ease, opacity .28s ease;
}

.hero-ad:hover {
    transform: translateY(-3px);
    box-shadow: var(--ad-shadow-hover);
}

.hero-ad.closing {
    opacity: 0;
    transform: scale(.97);
}

.ha-media {
    position: relative;
    width: 150px;
    height: 112px;
    border-radius: 14px;
    overflow: hidden;
    flex: none;
}

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

.ha-icon-fallback {
    display: grid;
    place-items: center;
    font-size: 3rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, .35), rgba(201, 168, 76, .25));
}

.ha-pulse {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: rgba(220, 38, 38, .92);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, .5);
}

.ha-pulse i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: haPulse 1.4s ease-in-out infinite;
}

@keyframes haPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.72);
    }
}

.ha-status {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: rgba(2, 8, 24, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fbbf24;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ha-kicker {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--band-accent);
    margin-bottom: .3rem;
}

.ha-body h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    color: var(--band-ink);
    margin-bottom: .25rem;
    line-height: 1.3;
}

.ha-desc {
    color: var(--band-sub);
    font-size: .86rem;
    margin-bottom: .6rem;
    max-width: 62ch;
}

.ha-bar {
    height: 8px;
    border-radius: 99px;
    background: var(--band-card-line);
    overflow: hidden;
    margin-bottom: .35rem;
}

.ha-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #f97316);
    box-shadow: 0 0 12px rgba(251, 191, 36, .5);
    transition: width 1.1s cubic-bezier(.22, .8, .3, 1);
}

.ha-meta {
    display: flex;
    gap: 1.1rem;
    font-size: .78rem;
    color: var(--band-sub);
    margin-bottom: .7rem;
}

.ha-meta b {
    color: var(--band-ink);
}

.ha-actions {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
}

.ha-btn {
    padding: .5rem 1.15rem;
    font-size: .88rem;
}

.hero-ad .ha-close {
    align-self: flex-start;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--band-card-line);
    background: var(--band-icon-bg);
    color: var(--band-ink);
    font-size: 1rem;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
    flex: none;
}

.hero-ad .ha-close:hover {
    background: var(--band-card-bg-hover);
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .ha-pulse i {
        animation: none;
    }

    .hero-ad,
    .ha-bar i {
        transition: none;
    }
}

@media (max-width: 860px) {
    .hero-ad-wrap {
        margin-top: 1.4rem;
    }

    .hero-ad {
        grid-template-columns: 1fr;
        gap: .8rem;
        padding: 1rem;
    }

    .ha-media {
        width: 100%;
        height: 170px;
    }

    .ha-body h3 {
        font-size: 1.08rem;
    }

    .ha-close {
        position: absolute;
        top: .6rem;
        right: .6rem;
    }
}

/* =====================================================================
   HERO-CAMPAIGN MODE — urgent project IS the hero (llhelpinghand style)
   ===================================================================== */
.hero-campaign .hero-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 3.4rem;
}

.ad-badge {
    background: linear-gradient(135deg, rgba(220, 38, 38, .95), rgba(190, 18, 60, .9));
    box-shadow: 0 8px 24px rgba(220, 38, 38, .45);
    position: relative;
}

/* glow ring via pseudo-element (opacity animation, no shadow repaint) */
.ad-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 8px 34px rgba(220, 38, 38, .7);
    opacity: 0;
    animation: adGlow 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes adGlow {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.hero-campaign h1 {
    font-size: clamp(2rem, 4.4vw, 3.3rem);
}

.hero-campaign p.lead {
    font-size: 1.12rem;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .9rem;
    margin-top: 1.5rem;
}

.hero-trust span {
    padding: .32rem .8rem;
    border-radius: 999px;
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-line);
    color: var(--band-sub);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .3px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hero-media {
    position: relative;
}

.hm-frame {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--band-card-line);
    aspect-ratio: 4 / 3;
}

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

.hm-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(2, 8, 24, .55));
    pointer-events: none;
}

.hm-icon-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 5rem;
    background: var(--band-bg);
}

.ha-pulse {
    z-index: 2;
}

.hm-status {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    padding: .22rem .7rem;
    border-radius: 999px;
    background: rgba(2, 8, 24, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fbbf24;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.hm-progress {
    margin-top: 1rem;
}

.hm-progress .ha-bar {
    height: 10px;
}

.hm-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .84rem;
    color: var(--band-sub);
    margin-top: .45rem;
}

.hm-meta b {
    color: var(--band-ink);
}

.hm-float {
    position: absolute;
    background: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--band-card-line);
    border-radius: 16px;
    padding: .7rem 1.05rem;
    box-shadow: var(--shadow);
    z-index: 3;
    line-height: 1.15;
}

.hm-float strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hm-float span {
    font-size: .72rem;
    color: #51617c;
    font-weight: 600;
}

.hm-float-1 {
    top: -16px;
    left: -18px;
}

.hm-float-2 {
    bottom: 64px;
    right: -18px;
}

.hero-stats-wide {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--band-line);
}

@media (prefers-reduced-motion: reduce) {

    .ad-badge,
    .ad-badge::after {
        animation: none;
    }
}

@media (max-width: 960px) {
    .hero-campaign .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .hero-media {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }

    .hm-float-1 {
        top: -12px;
        left: -8px;
    }

    .hm-float-2 {
        bottom: auto;
        top: -12px;
        right: -8px;
    }

    .hero-stats-wide {
        grid-template-columns: repeat(2, 1fr);
        gap: .8rem;
    }
}

@media (max-width: 480px) {
    .hm-float {
        padding: .5rem .8rem;
    }

    .hm-float strong {
        font-size: 1.05rem;
    }

    .hero-trust span {
        font-size: .7rem;
        padding: .28rem .65rem;
    }
}

/* ═══════════════════════════════════════
   SITE LOADER
════════════════════════════════════════ */

#site-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    width: 100%;
    height: 100vh;

    background: var(--loader-bg);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.7s cubic-bezier(0.76, 0, 0.24, 1),
        visibility 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Hide Loader */

#site-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ═══════════════════════════════════════
   LOADER BACKGROUND
════════════════════════════════════════ */

.loader-bg {
    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        radial-gradient(ellipse 60% 50% at 30% 40%,
            rgba(46, 184, 160, 0.14) 0%,
            transparent 55%),

        radial-gradient(ellipse 55% 60% at 75% 60%,
            rgba(201, 168, 76, 0.10) 0%,
            transparent 55%),

        var(--loader-bg);
}


/* ═══════════════════════════════════════
   DOT BACKGROUND
════════════════════════════════════════ */

.loader-dots {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        radial-gradient(circle,
            var(--loader-dot) 1px,
            transparent 1px);

    background-size: 36px 36px;

    opacity: 0.6;

    animation: loaderDotsShift 6s linear infinite;
}


@keyframes loaderDotsShift {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 36px 36px;
    }

}


/* ═══════════════════════════════════════
   ANIMATED BACKGROUND RINGS
════════════════════════════════════════ */

.loader-rings {
    position: absolute;

    width: 500px;
    height: 500px;

    z-index: 1;

    pointer-events: none;
}


.loader-ring {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 1px solid var(--loader-ring-1);

    animation: loaderRingExpand 3s ease-in-out infinite;
}


.loader-ring:nth-child(2) {

    inset: 40px;

    animation-delay: 0.4s;

    border-color: var(--loader-ring-2);
}


.loader-ring:nth-child(3) {

    inset: 80px;

    animation-delay: 0.8s;

    border-color: var(--loader-ring-3);
}


@keyframes loaderRingExpand {

    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
    }

}


/* ═══════════════════════════════════════
   MAIN LOADER CONTENT
════════════════════════════════════════ */

.loader-logo-wrap {

    position: relative;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 22px;

}


/* ═══════════════════════════════════════
   LOGO RING
════════════════════════════════════════ */

.loader-logo-ring {

    position: relative;

    width: 120px;
    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* SVG Ring */

.loader-logo-ring .ring-svg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    animation: loaderRingSpin 4s linear infinite;

}


@keyframes loaderRingSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ═══════════════════════════════════════
   LOGO CONTAINER
════════════════════════════════════════ */

.loader-logo-inner {

    position: relative;

    z-index: 5;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: transparent;

    border: 2px solid rgba(201, 168, 76, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    box-shadow:
        0 0 30px rgba(201, 168, 76, 0.25),
        0 0 60px rgba(46, 184, 160, 0.15);

    animation: loaderLogoPulse 2s ease-in-out infinite;

}


/* ═══════════════════════════════════════
   LOGO IMAGE
════════════════════════════════════════ */

.loader-logo-inner img {

    display: block;

    position: relative;

    z-index: 10;

    width: 70px;
    height: 70px;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    opacity: 1;

    visibility: visible;

    animation: loaderLogoFade 0.6s ease forwards;

}


/* Logo Fade */

@keyframes loaderLogoFade {

    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* Logo Pulse */

@keyframes loaderLogoPulse {

    0%,
    100% {

        box-shadow:
            0 0 30px rgba(201, 168, 76, 0.25),
            0 0 60px rgba(46, 184, 160, 0.15);

    }

    50% {

        box-shadow:
            0 0 50px rgba(201, 168, 76, 0.5),
            0 0 90px rgba(46, 184, 160, 0.3);

    }

}


/* ═══════════════════════════════════════
   LOADER TITLE
════════════════════════════════════════ */

.loader-title {

    margin: 0;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--loader-ink);

    letter-spacing: 0.04em;

    text-align: center;

    line-height: 1.25;

    animation:
        loaderTextReveal 0.8s 0.3s ease both;

}


.loader-title span {

    background: var(--loader-title-grad);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


/* Text Animation */

@keyframes loaderTextReveal {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ═══════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════ */

.loader-progress-wrap {

    width: 220px;

    height: 3px;

    background: var(--loader-track);

    border-radius: 10px;

    overflow: hidden;

}


.loader-progress-bar {

    width: 0%;

    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(90deg,
            #c9a84c,
            #2eb8a0);

    box-shadow:
        0 0 10px rgba(201, 168, 76, 0.7);

    transition:
        width 0.08s linear;

}


/* ═══════════════════════════════════════
   PERCENTAGE
════════════════════════════════════════ */

.loader-pct {

    margin-top: -10px;

    font-family:
        'DM Sans',
        Arial,
        sans-serif;

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--loader-faint);

    letter-spacing: 0.1em;

    min-width: 50px;

    text-align: center;

}


/* ═══════════════════════════════════════
   PAGE REVEAL
════════════════════════════════════════ */

/* Opacity-only fade: never animates transform, so position:fixed children
   (mobile nav) keep working and no giant compositor layers are created. */
body>*:not(#site-loader):not(script):not(style) {

    opacity: 0;

    transition:
        opacity 0.5s ease;

}


/* Show page after loader */

body.loaded>*:not(#site-loader):not(script):not(style) {

    opacity: 1;

}


/* ═══════════════════════════════════════
   MOBILE
════════════════════════════════════════ */

@media (max-width: 600px) {

    .loader-rings {

        width: 360px;
        height: 360px;

    }

    .loader-logo-ring {

        width: 110px;
        height: 110px;

    }

    .loader-title {

        font-size: 1.35rem;

    }

    .loader-progress-wrap {

        width: 180px;

    }

}

/* ══════════════════════════════════════════════════════════════════
   COMPLETED PROJECTS — premium numbered list (no cards)
══════════════════════════════════════════════════════════════════ */
.completed-list {
    counter-reset: done;
    max-width: 860px;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.completed-list::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--teal), var(--accent));
    opacity: .85;
}

.completed-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.35rem;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background .2s ease, padding-left .25s ease;
}

.completed-item:last-child {
    border-bottom: 0;
}

.completed-item:hover {
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
    padding-left: 1.6rem;
}

.completed-item:hover .cl-num {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 6px 16px rgba(59, 130, 246, .35);
}

.completed-item:hover .cl-title {
    color: var(--brand);
}

.cl-num {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--brand) 9%, var(--surface-2));
    color: var(--brand);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .5px;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.cl-icon {
    flex: none;
    font-size: 1.05rem;
}

.cl-main {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.cl-title {
    font-weight: 600;
    font-size: .96rem;
    color: var(--ink);
    transition: color .2s ease;
}

.cl-cat {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: .1rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.cl-loc {
    flex: none;
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
}

.cl-go {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: .95rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.completed-item:hover .cl-go {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateX(2px);
}

@media (max-width: 640px) {
    .completed-item {
        padding: .75rem 1rem;
        gap: .7rem;
    }

    .cl-loc {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ULTRA-PREMIUM POLISH
══════════════════════════════════════════════════════════════════ */

/* Section headers: gradient kicker pill */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    padding: .3rem 1rem;
    border-radius: 999px;
}

/* Section head underline flourish */
.section-head {
    position: relative;
}

.section-head h2 {
    background: linear-gradient(120deg, var(--ink) 55%, var(--brand));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-green .section-head h2,
.cta-band .section-head h2 {
    background: linear-gradient(120deg, var(--band-ink) 55%, var(--band-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-green .section-kicker {
    background: var(--band-card-bg);
    border-color: var(--band-card-line);
}

/* Buttons: premium sheen */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}

.btn:hover::before {
    left: 130%;
}

/* Hero stat tiles: frosted premium */
.hero-stat {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.hero-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

/* Feature cards: gradient hairline top */
.feature-card {
    position: relative;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    opacity: 0;
    transition: opacity .25s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE — premium highlight band + mission/vision cards
══════════════════════════════════════════════════════════════════ */
.about-prose {
    max-width: 860px;
    margin-inline: auto;
    color: var(--muted);
    font-size: 1.02rem;
}

.about-prose p {
    margin-bottom: 1rem;
}

.about-highlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 980px;
    margin: 2.2rem auto 0;
    padding: 1.4rem 1.5rem;
    border-radius: 20px;
    background: var(--band-bg);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.about-highlight::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--teal), var(--brand));
}

.ah-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--band-sub);
}

.ah-ico {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    border-radius: 13px;
    background: var(--band-icon-bg);
    border: 1px solid var(--band-card-line);
}

.ah-item strong {
    display: block;
    color: var(--band-ink);
    font-size: .92rem;
}

.ah-item span {
    font-size: .8rem;
    color: var(--band-accent);
    font-weight: 600;
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
    max-width: 980px;
    margin-inline: auto;
}

.mv-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease;
}

.mv-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.mv-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--teal));
}

.mv-card.mv-accent::before {
    background: linear-gradient(90deg, var(--accent), #f0c86a);
}

.mv-ico {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
    margin-bottom: 1rem;
}

.mv-accent .mv-ico {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

.mv-label {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    padding: .18rem .7rem;
    border-radius: 999px;
    margin-bottom: .8rem;
}

.mv-accent .mv-label {
    color: var(--accent-2);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.mv-card h3 {
    margin-bottom: .55rem;
    font-size: 1.2rem;
}

.mv-card p {
    color: var(--muted);
    font-size: .94rem;
}

/* Team cards: premium ring + lift */
.team-card {
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

/* ══════════════════════════════════════════════════════════════════
   GALLERY IMAGES — premium photo cards (category page)
══════════════════════════════════════════════════════════════════ */
.gcard-frame {
    position: relative;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: .55rem;
    box-shadow: var(--shadow-sm);
    display: block;
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.gcard-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(10, 28, 51, .16);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

.gcard-frame figure {
    margin: 0;
    border-radius: 11px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--surface-2);
    position: relative;
}

.gcard-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.gcard-frame:hover img {
    transform: scale(1.07);
}

.gcard-frame .gcard-zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(5, 13, 26, .38);
    opacity: 0;
    transition: opacity .28s ease;
    color: #fff;
    font-size: 1.5rem;
    pointer-events: none;
}

.gcard-frame:hover .gcard-zoom {
    opacity: 1;
}

.gcard-frame figcaption {
    padding: .6rem .35rem .25rem;
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .about-highlight {
        grid-template-columns: 1fr 1fr;
        padding: 1.1rem;
    }
}

/* ═══════════════════════════════════════
   Accessibility — skip link
═══════════════════════════════════════ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000000;
    background: var(--brand);
    color: #fff;
    padding: .7rem 1.4rem;
    border-radius: 0 0 12px 0;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
}

/* ═══════════════════════════════════════
   Project category chips (projects page)
═══════════════════════════════════════ */
.cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
    max-width: 920px;
    margin: 0 auto 2.4rem;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 600;
    transition: .18s ease;
}

.cat-chip b {
    font-size: .72rem;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .05rem .45rem;
}

.cat-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
}

.cat-chip.active {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(59, 130, 246, .35);
}

.cat-chip.active b {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ═══════════════════════════════════════
   Homepage ads slider (index.php hero)
═══════════════════════════════════════ */
.ad-slider {
    position: relative;
    min-height: 420px;
}

.ad-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
    pointer-events: none;
}

.ad-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ad-copy {
    animation: adFadeUp .7s ease both;
}

@keyframes adFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ad-dots {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin-top: 2rem;
}

.ad-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--dot-bg);
    cursor: pointer;
    transition: width .3s ease, background .3s ease, border-radius .3s ease;
}

.ad-dot.active {
    width: 30px;
    border-radius: 999px;
    background: var(--dot-active);
}

@media (max-width: 760px) {
    .ad-slider {
        min-height: 0;
    }
}

/* =====================================================================
   LIGHT THEME — PREMIUM GLASS FINISH
   ---------------------------------------------------------------------
   The light theme is the default every visitor sees, so it gets the
   "premium" treatment: a soft aurora backdrop, frosted-glass surfaces
   with crisp light hairlines, a top highlight, layered depth shadows and
   a subtle gold sheen. Everything is scoped to [data-theme="light"] so the
   navy dark theme is completely untouched.
   ===================================================================== */

/* ---- Aurora backdrop ---- */
[data-theme="light"] body {
    background:
        radial-gradient(1100px 640px at 6% -8%, rgba(59, 130, 246, .16), transparent 62%),
        radial-gradient(980px 620px at 104% -4%, rgba(201, 168, 76, .15), transparent 58%),
        radial-gradient(920px 720px at 48% 120%, rgba(46, 184, 160, .12), transparent 62%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fd 100%);
    background-attachment: fixed;
}

/* ---- Glass surfaces (shared recipe) ---- */
[data-theme="light"] .feature-card,
[data-theme="light"] .project-card,
[data-theme="light"] .team-card,
[data-theme="light"] .bank-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .chart-facts,
[data-theme="light"] .quote-card,
[data-theme="light"] .working-card,
[data-theme="light"] .stat-block,
[data-theme="light"] .hero-stat,
[data-theme="light"] .notice,
[data-theme="light"] .chart-panel {
    background: linear-gradient(150deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .64));
    border-color: var(--premium-hairline);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow: var(--premium-shadow), var(--premium-ring);
}

[data-theme="light"] .feature-card:hover,
[data-theme="light"] .project-card:hover,
[data-theme="light"] .team-card:hover,
[data-theme="light"] .bank-card:hover,
[data-theme="light"] .quote-card:hover,
[data-theme="light"] .working-card:hover,
[data-theme="light"] .hero-stat:hover {
    box-shadow: var(--premium-shadow-hover), var(--premium-ring);
}

/* gold top sheen on hover for the feature / team cards */
[data-theme="light"] .feature-card::after,
[data-theme="light"] .team-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    border-radius: inherit;
    background: var(--glass-sheen);
    opacity: .7;
    pointer-events: none;
}

[data-theme="light"] .team-card::before {
    border-radius: var(--radius) var(--radius) 0 0;
}

/* keep the hover accent bar above the sheen */
[data-theme="light"] .feature-card::before,
[data-theme="light"] .team-card::after {
    z-index: 1;
}

/* ---- Frosted header + top bar ---- */
[data-theme="light"] .site-header {
    /* deliberately transparent while the visitor is at the top of the page —
       the hero artwork reads through the navigation */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
}

[data-theme="light"] .site-header.scrolled {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--premium-hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 20px 44px -26px rgba(13, 38, 76, .5);
}

[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, .6);
}

[data-theme="light"] .brand-mark {
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ---- Frosted form fields ---- */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
    background: rgba(255, 255, 255, .72);
    border-color: var(--premium-hairline);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--premium-ring);
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .form-group select:focus {
    border-color: var(--brand);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--premium-ring), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}

/* ---- Section bands ---- */
[data-theme="light"] .section-alt {
    background: color-mix(in srgb, var(--brand) 5%, transparent);
    border-block: 1px solid rgba(255, 255, 255, .6);
}

[data-theme="light"] .newsletter-band,
[data-theme="light"] .cta-band,
[data-theme="light"] .section-green {
    border-block: 1px solid var(--premium-hairline);
}

[data-theme="light"] .site-footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(232, 240, 251, .9));
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-top: 1px solid var(--premium-hairline);
}

/* ---- Premium buttons ---- */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-gold {
    background: var(--marquee-gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 24px -10px rgba(160, 127, 40, .7);
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-gold:hover {
    background: var(--marquee-gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 32px -10px rgba(160, 127, 40, .85);
}

[data-theme="light"] .btn-green {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px rgba(37, 99, 235, .8);
}

[data-theme="light"] .btn-green:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 18px 34px -12px rgba(37, 99, 235, .95);
}

[data-theme="light"] .btn-ghost {
    background: rgba(255, 255, 255, .5);
    border-color: var(--premium-hairline);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ---- Premium hero badge ---- */
[data-theme="light"] .hero-badge {
    background: rgba(255, 255, 255, .6);
    border-color: var(--premium-hairline);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: var(--premium-ring);
}

/* The mobile menu panel stays opaque-ish for readability on glass */
@media (max-width: 860px) {
    [data-theme="light"] .main-nav {
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        backdrop-filter: blur(20px) saturate(160%);
    }
}

/* =====================================================================
   PREMIUM HERO STAT TILES
   The four impact counters under the homepage hero. Each tile is a
   frosted glass card with a gradient accent rail, a soft corner glow, an
   icon chip and a gradient-number treatment. Works on both themes.
   ===================================================================== */

.hero-stats {
    gap: 1.15rem;
}

.hero-stat {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.6rem 1.35rem;
    border-radius: 18px;
    isolation: isolate;
}

/* gradient accent rail on the left edge */
.hero-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--brand), var(--accent));
    opacity: .9;
}

/* soft gold glow that blooms on hover */
.hero-stat::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -38px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%);
    opacity: .8;
    z-index: -1;
    transition: transform .45s ease, opacity .45s ease;
}

.hero-stat:hover::after {
    transform: scale(1.45);
    opacity: 1;
}

.hero-stat .hs-ico {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.15rem;
    line-height: 1;
    margin-bottom: .7rem;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    border: 1px solid var(--premium-hairline);
    box-shadow: var(--premium-ring);
    transition: transform .3s ease;
}

.hero-stat:hover .hs-ico {
    transform: translateY(-2px) rotate(-6deg);
}

.hero-stat strong {
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
    font-family: var(--font-display);
    background: linear-gradient(120deg, var(--brand) 0%, var(--accent) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* the animated counter span inside the number must inherit the big size */
.hero-stat strong span {
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
}

.hero-stat .hs-label {
    display: block;
    margin-top: .5rem;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--band-sub);
}

/* the wide (hero-with-ads) row gets slightly airier spacing */
.hero-stats-wide {
    gap: 1.15rem;
}

@media (max-width: 520px) {
    .hero-stat {
        padding: 1.15rem 1.2rem 1.05rem;
        border-radius: 15px;
    }

    .hero-stat .hs-ico {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        margin-bottom: .55rem;
    }

    .hero-stat strong {
        font-size: 1.7rem;
    }

    .hero-stat .hs-label {
        font-size: .7rem;
        letter-spacing: 1.1px;
    }
}

/* =====================================================================
   PREMIUM NAVIGATION LAYER — v2
   Frosted glass bar, animated gold underline, pill CTA, scroll progress
   line, hide-on-scroll, staggered glass mobile drawer.
   ===================================================================== */

/* ── Scroll progress line (top of header) ───────────────────────────── */
.nav-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
    z-index: 2;
}

.nav-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--grad-accent);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(201, 168, 76, .55);
    transition: width .12s linear;
    will-change: width;
}

/* ── Brand: gold ring + shine sweep ─────────────────────────────────── */
.site-header .brand-mark {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent);
}

.site-header .brand-mark::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
    pointer-events: none;
}

.site-header .brand:hover .brand-mark::after {
    left: 130%;
}

.site-header .brand-text strong {
    background: linear-gradient(100deg, var(--ink) 35%, color-mix(in srgb, var(--accent-2) 82%, var(--ink)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Nav links: pill hover + sliding gold underline ─────────────────── */
.main-nav a[data-nav="link"] {
    position: relative;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.main-nav a[data-nav="link"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    opacity: 0;
    transform: scale(.92);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}

.main-nav a[data-nav="link"]:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* ── CTA pill: gold gradient + shimmer sweep ────────────────────────── */
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 48px;
    min-height: 48px;
    padding: 0 1.15rem;
    border-radius: 999px;
    background: var(--grad-accent);
    color: #221503 !important;
    font-weight: 700;
    font-size: .93rem;
    box-shadow: 0 6px 18px rgba(217, 164, 65, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.nav-cta svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}

.nav-cta:hover::before {
    left: 130%;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(217, 164, 65, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
    color: #221503 !important;
}

/* ── WhatsApp round button (desktop) ────────────────────────────────── */
.header-call {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    color: #25d366;
    background: color-mix(in srgb, #25d366 8%, transparent);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.header-call svg {
    width: 20px;
    height: 20px;
}

.header-call:hover {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, .4);
}

/* ── Header actions cluster ─────────────────────────────────────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* ── Scrolled state: lifted glass + tighter bar ─────────────────────── */
.site-header {
    transition: box-shadow .25s ease, background .25s ease, border-color .25s ease, transform .35s ease;
}

.site-header.scrolled {
    box-shadow: 0 12px 32px -18px rgba(13, 38, 76, .35);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border-bottom-color: var(--line);
}

.site-header.scrolled .header-inner {
    min-height: 64px;
}

.site-header.nav-hidden {
    transform: translateY(-100%);
}

/* ── Mobile drawer: premium glass, staggered items ──────────────────── */
@media (max-width: 860px) {

    .header-call {
        display: none;
    }

    .nav-cta {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        flex: 0 0 48px;
        padding: 0;
        border-radius: 50%;
    }

    .nav-cta span {
        display: none;
    }

    .nav-panel {
        display: flex;
        flex-direction: column;
    }

    .nav-eyebrow {
        display: none;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: 2.2px;
        text-transform: uppercase;
        color: var(--muted);
        margin: 0 1.1rem .4rem;
    }

    .main-nav a[data-nav="link"] {
        overflow: hidden;
        border-radius: 12px;
    }

    .main-nav a[data-nav="link"]::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 0 4px 4px 0;
        background: var(--grad-accent);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .25s ease;
    }

    .main-nav a[data-nav="link"]:hover::after,
    .main-nav a[data-nav="link"].active::after {
        transform: scaleY(1);
    }

    .main-nav a[data-nav="link"] span {
        display: inline-block;
        transition: transform .2s ease;
    }

    .main-nav a[data-nav="link"]:hover span {
        transform: translateX(4px);
    }

    /* staggered entrance */
    .main-nav.open .nav-eyebrow,
    .main-nav.open a {
        animation: navItemIn .45s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: calc(var(--nav-i, 0) * 45ms + 60ms);
    }

    .main-nav.open .nav-mobile-foot {
        animation: navItemIn .45s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: calc(var(--nav-i, 8) * 45ms + 140ms);
    }

    .nav-mobile-foot {
        margin-top: auto;
        padding-top: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: .4rem;
        border-top: 1px solid var(--line);
    }

    .nav-foot-wa,
    .nav-foot-mail {
        padding: .8rem 1.1rem;
        border-radius: 12px;
        background: var(--surface-2);
        color: var(--ink);
        font-size: .95rem;
        font-weight: 500;
    }

    .nav-foot-wa {
        color: #157347;
        font-weight: 600;
    }

    [data-theme="dark"] .nav-foot-wa {
        color: #5eead4;
    }

    .nav-close {
        border-color: var(--line-strong);
    }
}

@media (min-width: 861px) {

    /* the menu sits between the brand and the action buttons and centres
       itself in that space, so the navigation reads as one balanced row */
    .main-nav {
        flex: 1 1 auto;
        justify-content: center;
    }

    .nav-panel {
        display: contents;
    }

    .nav-eyebrow,
    .nav-mobile-foot {
        display: none;
    }

    /* the dedicated gold .nav-cta pill in .header-actions replaces the
       in-nav button item on desktop — avoids a duplicate CTA */
    .main-nav a[data-nav="button"] {
        display: none;
    }
}

@keyframes navItemIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Small phones: shrink brand text, tighter actions ───────────────── */
@media (max-width: 400px) {
    .site-header .brand-text small {
        display: none;
    }

    .nav-toggle {
        padding: .45rem .6rem .45rem .55rem;
        gap: .4rem;
    }

    .nt-bars {
        width: 21px;
        gap: 4.5px;
    }

    .nt-label {
        font-size: .62rem;
        letter-spacing: .5px;
    }
}

/* ── Reduced motion: skip the theatrics ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .nav-progress span {
        transition: none;
    }

    .main-nav.open .nav-eyebrow,
    .main-nav.open a,
    .main-nav.open .nav-mobile-foot {
        animation: none;
    }

    .nav-cta::before,
    .site-header .brand-mark::after {
        display: none;
    }
}

/* =====================================================================
   PROJECT DETAIL PAGE — premium related-images gallery
   The gallery reuses the site's .gallery-grid / .gcard-frame cards.
   ===================================================================== */

.project .gallery-grid {
    max-width: 1120px;
}

.project .gcard-frame figcaption {
    font-size: .82rem;
}

/* =====================================================================
   MOBILE MENU — keep the brand + premium toggle above the drawer so the
   toggle stays visible, tappable and morphs to ✕ while the menu is open.
   The backdrop (z 94) and the drawer panel (z 95) otherwise sit above the
   header content inside the header's own stacking context.
   ===================================================================== */
@media (max-width: 860px) {

    /* lift the whole header row above the backdrop… */
    body.nav-open .site-header .header-inner {
        position: relative;
        z-index: 97;
    }

    /* …and the brand + premium toggle above the drawer panel (which is a
       child of .header-inner with z-index 95) so the toggle stays visible,
       tappable and shows its ✕ / "Close" state while the menu is open. */
    body.nav-open .site-header .brand,
    body.nav-open .site-header .header-actions {
        position: relative;
        z-index: 96;
    }
}

/* =====================================================================
   GLASS NAVIGATION — one style for the desktop bar and the phone drawer
   Pure type, never a box: every item is a centred label in the display
   font, a soft blurred gold sheen appears under the pointer, and the page
   you are already on is written in the gold gradient. The bar and the
   drawer differ only in size and layout, never in style.
   ===================================================================== */
.main-nav a,
.main-nav a[data-nav] {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-align: center;
    transition: color .25s ease, opacity .2s ease;
}

/* the older chrome — the sliding gold underline, the hover pill and the
   3 px rail — is replaced by the sheen below, on both breakpoints */
.main-nav a::after,
.main-nav a[data-nav="link"]::after,
.main-nav a[data-nav="link"]::before {
    display: none;
}

.main-nav a[data-nav="link"] span,
.main-nav a[data-nav="link"]:hover span {
    position: relative;
    z-index: 1;
    display: inline-block;
    transform: none;
}

.main-nav a:active {
    opacity: .62;
}

/* the sheen: a soft blurred glow, never a box — it appears under the
   pointer and under the page you are already on */
.main-nav a[data-nav="link"]::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(240px, calc(100% + 26px));
    height: min(46px, calc(100% + 10px));
    border-radius: 999px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent 78%);
    filter: blur(7px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.main-nav a[data-nav="link"]:hover::before,
.main-nav a[data-nav="link"].active::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* hover / keyboard focus: warm ink over the sheen */
.main-nav a:hover,
.main-nav a:focus-visible {
    color: color-mix(in srgb, var(--accent) 78%, var(--ink));
    background: transparent;
    box-shadow: none;
}

/* the page you are already on: the label itself turns to gold */
.main-nav a[data-nav="link"].active {
    color: var(--ink);
    font-weight: 700;
    background: transparent;
    box-shadow: none;
}

.main-nav a[data-nav="link"].active span {
    background: linear-gradient(100deg, color-mix(in srgb, var(--accent-2) 88%, var(--ink)), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── desktop bar: the same glass type, sized for the header row ──────── */
@media (min-width: 861px) {
    .main-nav a,
    .main-nav a[data-nav] {
        min-height: 44px;
        padding: .45rem .8rem;
        font-size: 1rem;
        white-space: nowrap;
    }

    /* the gold CTA lives in .header-actions on desktop (.nav-cta), so the
       in-menu button item stays hidden — and display:flex above must not
       bring it back */
    .main-nav a[data-nav="button"] {
        display: none;
    }
}

/* =====================================================================
   PHONE DRAWER — the glass pane the same navigation sits on
   A full-screen frosted sheet with one centred column of labels, sized up
   for thumbs, above a centred CSS-free glow. Nothing here is a box.
   ===================================================================== */
@media (max-width: 860px) {

    /* ── the sheet: warm glow at the top, frosted glass below ──────────
       [data-theme] is deliberate — it outranks the older light-theme rule
       so the glow shows on both themes. */
    [data-theme] .main-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(var(--header-h) + .6rem) max(1.05rem, env(safe-area-inset-left, 0px)) calc(1.05rem + env(safe-area-inset-bottom, 0px)) max(1.05rem, env(safe-area-inset-right, 0px));
        /* premium glass: a light sheen across the pane, a warm glow at the
           very top, then the frosted page showing through underneath */
        background:
            linear-gradient(115deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 44%),
            radial-gradient(120% 42% at 50% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
            linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface-2, var(--surface)) 82%, transparent));
        -webkit-backdrop-filter: blur(24px) saturate(175%);
        backdrop-filter: blur(24px) saturate(175%);
    }

    /* ── one centred column: vertically centred while it fits, scrollable
          from the very top once it does not (auto margins go to zero
          instead of clipping the first item) ─────────────────────────── */
    .main-nav .nav-panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: min(400px, 100%);
        margin: auto 0;
        gap: .12rem;
        text-align: center;
    }

    /* small gold eyebrow above the list */
    .nav-eyebrow {
        display: block;
        margin: 0 0 .7rem;
        color: color-mix(in srgb, var(--accent) 72%, var(--muted));
        font-size: .63rem;
        font-weight: 700;
        letter-spacing: 2.6px;
        text-transform: uppercase;
    }

    /* thumb-sized labels: full-width invisible tap targets, centred type */
    .main-nav a,
    .main-nav a[data-nav] {
        width: 100%;
        min-height: 50px;
        padding: .7rem 1rem;
        font-size: 1.14rem;
    }

    /* the CTA (Donate, …) stays a button — a centred gold pill, narrower than
       the sheet so it never reads as one more menu item */
    .main-nav a[data-nav="button"] {
        align-self: center;
        width: auto;
        min-width: 200px;
        max-width: 100%;
        min-height: 50px;
        margin: .9rem 0 0;
        padding: .7rem 1.9rem;
        border-radius: 999px;
        background: var(--grad-accent);
        color: #221503 !important;
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: .3px;
        box-shadow: 0 12px 30px -12px rgba(217, 164, 65, .85), inset 0 1px 0 rgba(255, 255, 255, .6);
    }

    .main-nav a[data-nav="button"]:hover {
        filter: brightness(1.06);
    }

    /* ── centred contact footer at the end of the drawer ─────────────── */
    .nav-mobile-foot {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .1rem;
        margin-top: 1.2rem;
        padding-top: 0;
        border-top: 0;
        text-align: center;
    }

    /* quiet contact links — no boxes either, just calm muted type */
    .main-nav .nav-mobile-foot a {
        width: auto;
        min-height: 44px;
        padding: .5rem 1rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-family: inherit;
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--muted);
    }

    .main-nav .nav-mobile-foot a:hover {
        color: var(--ink);
    }

    .main-nav .nav-mobile-foot .nav-foot-wa {
        color: #157347;
    }

    [data-theme="dark"] .main-nav .nav-mobile-foot .nav-foot-wa {
        color: #5eead4;
    }

    /* the footer fades in as one block — its links must not animate again */
    .main-nav.open .nav-mobile-foot a {
        animation: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE 2-COLUMN CARDS — small, compact cards on phones (≤640px)
   Applies to every card grid site-wide: feature, project, quote,
   gallery, team, bank, mission/vision.
═════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* --- all card grids become 2 columns --- */
    .feature-grid,
    .projects-grid,
    .quote-grid,
    .gallery-grid,
    .team-grid,
    .bank-cards,
    .mv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
    }

    .feature-grid>*,
    .projects-grid>*,
    .quote-grid>*,
    .gallery-grid>*,
    .team-grid>*,
    .bank-cards>*,
    .mv-grid>* {
        min-width: 0;
    }

    /* --- feature cards (home, about, campaign) --- */
    .feature-card {
        padding: 1.1rem .9rem;
        border-radius: 12px;
    }

    .feature-card .fc-icon {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
        border-radius: 13px;
        margin-bottom: .7rem;
    }

    .feature-card h3 {
        font-size: .95rem;
        margin-bottom: .3rem;
    }

    .feature-card p {
        font-size: .8rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .feature-card .fc-link {
        margin-top: .6rem;
        font-size: .78rem;
    }

    /* --- project cards (home, projects, project, completed) --- */
    .project-card {
        border-radius: 11px;
    }

    .pc-body {
        padding: .75rem .7rem .8rem;
        gap: .35rem;
    }

    .pc-body h3 {
        font-size: .85rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pc-body p {
        font-size: .72rem;
        line-height: 1.4;
    }

    .pc-bar {
        height: 6px;
    }

    .pc-meta {
        font-size: .66rem;
    }

    .pc-actions {
        gap: .4rem;
    }

    .pc-actions .btn {
        padding: .45rem .5rem;
        font-size: .72rem;
    }

    /* --- quote cards (home, about) --- */
    .quote-card {
        padding: 1.1rem .95rem;
        border-radius: 12px;
    }

    .quote-card::before {
        font-size: 2.8rem;
        right: .6rem;
        top: .3rem;
    }

    .quote-card .q-icon {
        font-size: 1.15rem;
        margin-bottom: .5rem;
    }

    .quote-card blockquote {
        font-size: .82rem;
        margin-bottom: .55rem;
    }

    .quote-card cite {
        font-size: .7rem;
    }

    .quote-card.ar blockquote {
        font-size: 1.1rem;
        line-height: 1.9;
    }

    /* --- gallery tiles (gallery, gallery-category, project) --- */
    .gallery-grid {
        gap: .55rem;
    }

    .gallery-card {
        border-radius: 11px;
    }

    .gallery-card .g-overlay {
        padding: .55rem .6rem;
        font-size: .7rem;
    }

    .gallery-card .g-count {
        top: 6px;
        right: 6px;
        font-size: .62rem;
        padding: .15rem .5rem;
    }

    /* --- team cards (about) --- */
    .team-card {
        padding: 1.2rem .8rem;
        border-radius: 12px;
    }

    .team-avatar {
        width: 68px;
        height: 68px;
        font-size: 1.5rem;
        margin-bottom: .7rem;
    }

    .team-avatar::after {
        inset: -5px;
    }

    .team-card h3 {
        font-size: .9rem;
    }

    .team-card .t-role {
        font-size: .64rem;
        letter-spacing: .6px;
    }

    .team-card p {
        font-size: .76rem;
    }

    /* --- bank cards (donate) --- */
    .bank-card {
        padding: 1.1rem .9rem;
        border-radius: 12px;
    }

    /* --- mission / vision cards (about) --- */
    .mv-card {
        padding: 1.2rem 1rem;
        border-radius: 14px;
    }

    /* tame hover lift on touch — cards sit tighter now */
    .feature-card:hover,
    .project-card:hover,
    .quote-card:hover,
    .team-card:hover,
    .bank-card:hover,
    .mv-card:hover {
        transform: none;
    }
}

/* --- very small phones (≤380px): keep 2 cols, tighten further --- */
@media (max-width: 380px) {

    .feature-grid,
    .projects-grid,
    .quote-grid,
    .team-grid,
    .bank-cards,
    .mv-grid {
        gap: .55rem;
    }

    .feature-card {
        padding: .9rem .7rem;
    }

    .feature-card .fc-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
        border-radius: 11px;
    }

    .feature-card h3 {
        font-size: .86rem;
    }

    .feature-card p {
        font-size: .74rem;
    }

    .pc-body {
        padding: .6rem .55rem .7rem;
    }

    .pc-body h3 {
        font-size: .78rem;
    }

    .pc-body p {
        font-size: .68rem;
    }

    .quote-card {
        padding: .9rem .75rem;
    }

    .quote-card.ar blockquote {
        font-size: 1rem;
    }

    .team-card {
        padding: 1rem .6rem;
    }

    .team-avatar {
        width: 58px;
        height: 58px;
        font-size: 1.3rem;
    }

    .bank-card,
    .mv-card {
        padding: .95rem .75rem;
    }
}

/* ── Mobile drawer visibility and touch target ──────────────────────── */
@media (max-width: 860px) {
    .main-nav {
        visibility: hidden;
        pointer-events: none;
        transition: transform .3s ease, visibility 0s linear .3s;
    }

    .main-nav.open {
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .nav-toggle {
        min-width: 48px;
        min-height: 48px;
        justify-content: center;
    }

    .main-nav a,
    .main-nav a[data-nav] {
        min-height: 50px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .main-nav {
        transition: none;
    }
}