/* =====================================================================
   صناع الغد — Sunaa Alghad · Design system
   ---------------------------------------------------------------------
   • One stylesheet for both directions: logical properties only
     (margin-inline, inset-inline-start, padding-block…).
   • Brand colours and fonts come from the admin settings as CSS
     custom properties injected in <head> (see layouts/app).
   • Orange / coral / teal are accents (large text, icons, fills).
     Body text and links always use --ink / --teal-dark (≥ 4.5:1).
   • Arabic: no letter-spacing, no uppercase, no stretched kashida.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* brand (overridden from settings) */
    --orange: #E7921C;
    --coral: #DD6966;
    --teal: #4B8C88;
    --teal-dark: #2F5F5C;
    --ink: #1F3B39;
    --paper: #FBF7F0;

    /* derived */
    --teal-deep: color-mix(in srgb, var(--teal-dark) 82%, #000);
    --muted: color-mix(in srgb, var(--ink) 78%, var(--paper));
    --line: color-mix(in srgb, var(--teal-dark) 16%, transparent);
    --line-strong: color-mix(in srgb, var(--teal-dark) 30%, transparent);
    --card: color-mix(in srgb, #fff 72%, var(--paper));
    --teal-tint: color-mix(in srgb, var(--teal) 12%, var(--paper));
    --orange-tint: color-mix(in srgb, var(--orange) 14%, var(--paper));
    --coral-tint: color-mix(in srgb, var(--coral) 14%, var(--paper));
    --peach: color-mix(in srgb, var(--coral) 30%, #F7D9BE);

    /* type */
    --font-ar: 'GE Dinar One', 'Poppins', sans-serif;
    --font-en: 'Poppins', 'GE Dinar One', sans-serif;
    --font: var(--font-ar);
    --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
    --fs-small: .9rem;
    --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
    --fs-h3: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
    --lh: 1.8;

    /* shape */
    --r-sm: 10px;
    --r: 18px;
    --r-lg: 28px;
    --shadow-sm: 0 1px 2px rgba(31, 59, 57, .06), 0 2px 8px rgba(31, 59, 57, .05);
    --shadow: 0 10px 30px -12px rgba(31, 59, 57, .25);
    --shadow-lg: 0 30px 60px -28px rgba(31, 59, 57, .45);

    /* layout */
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --header-h: 72px;
    --section: clamp(56px, 8vw, 112px);

    /* direction helpers (washes and decorations) */
    --start: 100%;
    --end: 0%;
    --flip: -1;
}

[dir="ltr"] {
    --start: 0%;
    --end: 100%;
    --flip: 1;
    --font: var(--font-en);
    --lh: 1.7;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh);
    color: var(--ink);
    background: var(--paper) url("../images/paper.webp");
    background-blend-mode: multiply;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal-dark); text-decoration: none; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
/* Links inside running text stay underlined: colour alone is not enough (WCAG 1.4.1) */
:where(p, dd, blockquote) a:not([class]) { text-decoration: underline; }
/* Plain text links in UI lists: underline only as a hover/focus hint */
:where(.breadcrumb, .structure__list, .footer-contact, .contact-list) a:not(.btn):is(:hover, :focus-visible) { text-decoration: underline; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { color: var(--teal-dark); line-height: 1.35; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
[lang="ar"] { font-family: var(--font-ar); }
[lang="en"] { font-family: var(--font-en); }
[dir="ltr"] [lang="ar"] { line-height: 1.8; }
.ltr-text { direction: ltr; unicode-bidi: isolate; display: inline-block; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--orange) 35%, transparent); color: var(--ink); }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
    background: var(--teal-dark); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
    text-decoration: none; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.section { padding-block: var(--section); position: relative; }
.section--tint { background: color-mix(in srgb, var(--teal) 6%, transparent); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.stack > * + * { margin-block-start: 1em; }
.grid { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
    .split { grid-template-columns: 1.05fr .95fr; }
    .split--reverse > :first-child { order: 2; }
}

/* ---------- Section heading ---------- */
.sec-head { max-width: 760px; margin-block-end: clamp(28px, 4vw, 48px); }
.sec-head--center { text-align: center; margin-inline: auto; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--teal-dark); font-weight: 600; font-size: .95rem; margin-block-end: .6rem;
}
.eyebrow::before {
    content: ""; width: 28px; height: 10px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M1 7c5-5 9-5 13-1s8 4 13-2' fill='none' stroke='%23E7921C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sec-head--center .eyebrow { justify-content: center; }
:lang(en) .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.sec-title { font-size: var(--fs-h2); }
.sec-sub { color: var(--muted); margin-block-start: .75rem; font-size: 1.05em; }
.sec-foot { margin-block-start: clamp(24px, 3vw, 40px); display: flex; justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--teal-dark); --btn-fg: #fff; --btn-bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 48px; padding: .6em 1.35em; border-radius: 999px;
    background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd);
    font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: none; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--primary { --btn-bg: var(--orange); --btn-fg: var(--ink); }
.btn--primary:hover { --btn-bg: color-mix(in srgb, var(--orange) 88%, #fff); }
.btn--dark { --btn-bg: var(--teal-dark); --btn-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--teal-dark); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--card); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--teal-dark); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.6); }
.btn--outline-light:hover { --btn-bg: rgba(255,255,255,.12); }
.btn--wa { --btn-bg: #1F7A4D; --btn-fg: #fff; }
.btn--sm { min-height: 40px; padding: .35em 1em; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow {
    display: inline-flex; align-items: center; gap: .4em; font-weight: 600;
    color: var(--teal-dark); text-decoration: none;
}
.link-arrow svg { width: 1.1em; height: 1.1em; transform: scaleX(var(--flip)); transition: translate .2s; }
.link-arrow:hover svg { translate: calc(4px * var(--flip)) 0; }
.dir-icon { transform: scaleX(var(--flip)); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(12px);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    border-block-end: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(31, 59, 57, .5); }
.nav { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 56px; height: 56px; }
.brand__name { font-family: var(--font-en); font-weight: 600; color: var(--teal-dark); font-size: 1.15rem; line-height: 1.1; }
.nav__links { display: none; }
.nav__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.lang-switch {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 10px;
    border-radius: 999px; border: 1px solid var(--line-strong);
    font-weight: 600; text-decoration: none; color: var(--teal-dark); line-height: 1;
}
.lang-switch:hover { background: var(--card); color: var(--teal-dark); }
.lang-switch[lang="en"] { font-family: var(--font-en); }
.nav__cta { display: none; }
.nav-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: var(--teal-dark); color: #fff; border: 0;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (min-width: 1180px) {
    .nav { gap: 24px; }
    .nav__links { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin-inline: auto; }
    .nav__links a {
        display: block; padding: .5em .8em; border-radius: 999px; text-decoration: none;
        color: var(--ink); font-weight: 500; font-size: .98rem; white-space: nowrap;
    }
    .nav__links a:hover { background: var(--teal-tint); color: var(--teal-dark); }
    .nav__links a[aria-current="page"] { color: var(--teal-dark); background: var(--teal-tint); font-weight: 600; }
    .nav__actions { margin-inline-start: 0; }
    .nav__cta { display: inline-flex; }
    .nav-toggle { display: none; }
}
@media (min-width: 640px) and (max-width: 1179.98px) { .nav__cta--volunteer { display: inline-flex; } }

/* mobile drawer */
.drawer {
    position: fixed; inset: 0; z-index: 60; display: none;
    background: rgba(20, 40, 38, .45);
}
.drawer.is-open { display: block; }
.drawer__panel {
    position: absolute; inset-block: 0; inset-inline-end: 0; width: min(88vw, 380px);
    background: var(--paper) url("../images/paper.webp"); background-blend-mode: multiply;
    padding: 18px var(--gutter) 32px; overflow-y: auto; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 18px;
}
@media (prefers-reduced-motion: no-preference) {
    .drawer.is-open .drawer__panel { animation: drawer-in .28s ease-out; }
    @keyframes drawer-in { from { transform: translateX(calc(100% * var(--flip))); } }
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; display: grid; place-items: center; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__links { list-style: none; padding: 0; display: grid; gap: 2px; }
.drawer__links a {
    display: block; padding: .7em .9em; border-radius: 12px; text-decoration: none;
    color: var(--ink); font-weight: 500; font-size: 1.08rem;
}
.drawer__links a:hover, .drawer__links a[aria-current="page"] { background: var(--teal-tint); color: var(--teal-dark); }
.drawer .btn { width: 100%; }

/* ---------- Watercolour washes & decorations ---------- */
.wash {
    background:
        radial-gradient(42% 60% at calc(var(--start) * .96 + 2%) -4%, color-mix(in srgb, var(--teal-dark) 62%, transparent), transparent 70%),
        radial-gradient(55% 75% at var(--start) 0%, color-mix(in srgb, var(--teal) 48%, transparent), color-mix(in srgb, var(--teal) 14%, transparent) 48%, transparent 72%),
        radial-gradient(60% 70% at calc(var(--end) * .9 + 5%) 108%, color-mix(in srgb, var(--coral) 46%, transparent), color-mix(in srgb, var(--peach) 30%, transparent) 46%, transparent 74%),
        radial-gradient(30% 40% at calc(var(--end) * .7 + 15%) 100%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 70%);
}
.wash--soft {
    background:
        radial-gradient(50% 80% at var(--start) 0%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 70%),
        radial-gradient(45% 80% at var(--end) 100%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 72%);
}
.olive {
    position: absolute; pointer-events: none; color: var(--teal); opacity: .16;
    width: clamp(160px, 26vw, 360px); height: auto; z-index: 0;
}
.olive--top { top: clamp(10px, 4vw, 40px); inset-inline-end: -40px; transform: scaleX(var(--flip)) rotate(8deg); }
.olive--bottom { bottom: -20px; inset-inline-start: -30px; transform: scaleX(calc(var(--flip) * -1)) rotate(-12deg); }
.arc { position: absolute; pointer-events: none; color: var(--orange); opacity: .8; z-index: 0; }
.relative { position: relative; }
.layer { position: relative; z-index: 1; }

/* ---------- Photo frames (handmade print look) ---------- */
.photo { position: relative; overflow: hidden; background: var(--teal-tint); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.photo--placeholder { display: grid; place-items: center; color: var(--teal); }
.photo--placeholder svg { width: 40%; max-width: 120px; opacity: .45; }
.frame {
    background: #fff; padding: clamp(8px, 1.2vw, 14px); border-radius: 6px;
    box-shadow: 0 2px 4px rgba(31, 59, 57, .08), 0 22px 44px -22px rgba(31, 59, 57, .55);
}
.frame .photo { border-radius: 2px; }
.frame--tilt { rotate: calc(-1.6deg * var(--flip)); }
.frame--tilt-alt { rotate: calc(2deg * var(--flip)); }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-1x1 { aspect-ratio: 1; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x5 { aspect-ratio: 4 / 5; }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(28px, 5vw, 72px) clamp(56px, 8vw, 104px); }
.hero__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1fr 1fr; } }
.hero__mark { width: clamp(132px, 18vw, 200px); height: auto; margin-block-end: 14px; filter: drop-shadow(0 8px 18px rgba(31, 59, 57, .12)); }
.hero__eyebrow { color: var(--teal-dark); font-weight: 600; margin-block-end: .5rem; }
.hero h1 { font-size: var(--fs-h1); color: var(--teal-dark); line-height: 1.3; }
.hero__lead { margin-block: 1.1rem 1.6rem; font-size: 1.08em; max-width: 34em; color: var(--ink); }
.hero__media { position: relative; max-width: 620px; margin-inline: auto; width: 100%; }
.hero__media .frame { position: relative; z-index: 1; }
.hero__media .arc { width: 120%; inset-inline-start: -14%; bottom: -14%; }
.hero__badge {
    position: absolute; z-index: 2; inset-inline-start: -8px; bottom: -22px;
    display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
    background: var(--card); border-radius: 16px; box-shadow: var(--shadow); font-size: .9rem; line-height: 1.4;
}
.hero__badge svg { width: 34px; height: 34px; color: var(--teal-dark); flex: none; }
.hero__badge strong { display: block; color: var(--teal-dark); }
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; }
.hero-slide[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
.hero-controls { display: flex; align-items: center; gap: 10px; margin-block-start: 28px; }
.hero-controls button {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
    background: var(--card); display: grid; place-items: center; color: var(--teal-dark);
}
.hero-controls svg { width: 20px; height: 20px; transform: scaleX(var(--flip)); }
.hero-controls__count { font-size: .9rem; color: var(--muted); min-width: 4.5em; text-align: center; }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; overflow: clip; padding-block: clamp(28px, 4vw, 52px) clamp(40px, 6vw, 80px); }
.page-hero h1 { font-size: var(--fs-h1); max-width: 22em; }
.page-hero__intro { margin-block-start: 1rem; max-width: 46em; font-size: 1.08em; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; font-size: .9rem; color: var(--muted); margin-block-end: 1rem; }
.breadcrumb a { color: var(--teal-dark); display: inline-block; padding-block: 4px; }
.breadcrumb li + li::before {
    content: ""; display: inline-block; width: .5em; height: .5em; margin-inline-end: 6px;
    border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor;
    transform: rotate(calc(45deg * var(--flip))); opacity: .6; translate: 0 -1px;
}
.breadcrumb [aria-current] { color: var(--ink); }

/* ---------- Cards ---------- */
.card {
    position: relative; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow-sm);
}
.card h3 { font-size: var(--fs-h3); }
.card p { color: var(--ink); }
.card--link { transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link { text-decoration: none; color: inherit; }
.card__link:hover { color: inherit; }
.icon-badge {
    --c: var(--teal);
    width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--c) 16%, var(--paper)); color: color-mix(in srgb, var(--c) 70%, var(--ink));
}
.icon-badge svg { width: 28px; height: 28px; }
.icon-badge--orange { --c: var(--orange); }
.icon-badge--coral { --c: var(--coral); }
.icon-badge--teal { --c: var(--teal); }
.tone-orange { --c: var(--orange); }
.tone-coral { --c: var(--coral); }
.tone-teal { --c: var(--teal); }
.badge {
    display: inline-flex; align-items: center; gap: 6px; padding: .2em .75em; border-radius: 999px;
    font-size: .82rem; font-weight: 600; line-height: 1.6;
    background: var(--teal-tint); color: var(--teal-dark);
}
.badge svg { width: 1em; height: 1em; }
.meta-list { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .9rem; list-style: none; padding: 0; }
.meta-list li { display: inline-flex; align-items: center; gap: 6px; }
.meta-list svg { width: 1.1em; height: 1.1em; color: var(--teal); flex: none; }

/* focus areas */
.area-card { display: flex; flex-direction: column; gap: 14px; border-top: 4px solid color-mix(in srgb, var(--c, var(--teal)) 70%, transparent); }
.area-card h3 { font-size: 1.15rem; }

/* units */
.unit-card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.unit-card h3 { font-size: 1.1rem; margin-block-end: .2rem; }
.unit-card p { color: var(--muted); font-size: .95rem; line-height: 1.7; }
.unit-card__program { color: var(--teal-dark) !important; font-weight: 500; }

/* initiative cards */
.i-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.i-card .photo { aspect-ratio: 4 / 3; }
.i-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.i-card h3 { font-size: 1.12rem; line-height: 1.5; }
.i-card__excerpt { color: var(--muted) !important; font-size: .95rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.i-card__foot { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.i-card__count { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 1; background: rgba(20, 40, 38, .72); color: #fff; }

/* stats */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); list-style: none; padding: 0; }
.stat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 22px 18px; text-align: center; position: relative; overflow: hidden;
}
.stat::after {
    content: ""; position: absolute; inset-inline: 22% ; bottom: 0; height: 4px; border-radius: 4px 4px 0 0;
    background: var(--c, var(--orange)); opacity: .8;
}
.stat__icon { width: 28px; height: 28px; margin: 0 auto 8px; color: var(--teal); }
.stat__value { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 700; color: var(--teal-dark); line-height: 1.15; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.stat__label { display: block; color: var(--ink); margin-block-start: 6px; font-size: .95rem; line-height: 1.5; }
/* Impact, "a year of giving": four totals in even rows (2 x 2, then 4 across) */
.stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: clamp(20px, 3vw, 32px); }
@media (min-width: 900px) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band--teal .eyebrow, .band--teal .sec-sub { color: #fff; }

/* trust badge */
.license-badge {
    display: flex; gap: 14px; align-items: center; padding: 16px 18px; margin-block-start: 1.5rem;
    border-radius: var(--r); background: var(--card); border: 1px dashed var(--line-strong); max-width: 520px;
}
.license-badge svg { width: 44px; height: 44px; color: var(--teal-dark); flex: none; }
.license-badge strong { display: block; color: var(--teal-dark); font-size: 1.05rem; }
.license-badge span { color: var(--muted); font-size: .92rem; line-height: 1.6; display: block; }

/* collage (gallery highlights) */
.collage { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.collage a { display: block; border-radius: var(--r-sm); overflow: hidden; position: relative; }
.collage .photo { height: 100%; aspect-ratio: 1; }
.collage img { transition: transform .5s ease; }
.collage a:hover img { transform: scale(1.04); }
@media (min-width: 768px) {
    .collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
    .collage .photo { aspect-ratio: auto; }
    .collage > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* CTA bands */
.band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px); }
.band h2 { font-size: var(--fs-h2); }
.band p { max-width: 40em; margin-block: .8rem 1.4rem; }
.band--teal { background: linear-gradient(135deg, var(--teal-dark), var(--teal-deep)); color: #fff; }
.band--teal h2 { color: #fff; }
.band--teal .olive { color: #fff; opacity: .12; }
.band--peach {
    background:
        radial-gradient(60% 90% at var(--end) 100%, color-mix(in srgb, var(--coral) 34%, transparent), transparent 70%),
        radial-gradient(60% 90% at var(--start) 0%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%),
        var(--card);
    border: 1px solid var(--line);
}
.bands { display: grid; gap: 20px; }
@media (min-width: 960px) { .bands { grid-template-columns: 1.15fr .85fr; } }

/* ---------- Accordions ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; font-weight: 600; color: var(--teal-dark); font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; width: 12px; height: 12px; flex: none; margin-inline-start: auto;
    border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s; translate: 0 -3px;
}
.faq details[open] summary::after { transform: rotate(-135deg); translate: 0 3px; }
.faq summary:hover { background: var(--teal-tint); }
.faq__body { padding: 0 22px 20px; }
.faq__body ul { padding-inline-start: 1.2em; display: grid; gap: .4em; }
.faq__body li::marker { color: var(--orange); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-grid { display: grid; gap: 20px 18px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
/* align-content: start keeps each control at its own height when the neighbour in its row has a hint underneath */
.field { display: grid; gap: 6px; align-content: start; min-inline-size: 0; }
fieldset.field { border: 0; padding: 0; }
.field label, .field .label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.field legend.label { padding: 0; margin-block-end: 6px; }
.field .req { color: #A33A37; }
.field .hint { color: var(--muted); font-size: .85rem; line-height: 1.6; }
.input, .select, .textarea {
    width: 100%; min-height: 50px; padding: .65em .95em; border-radius: 12px;
    border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 130px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--teal-dark) 55%, transparent); }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted) 90%, #fff); opacity: 1; }
/* Typed text follows its own language, line by line: an English name in the Arabic form starts on the left,
   Arabic in the English form on the right, and punctuation stays at the end. An empty field keeps the page direction. */
.input:not([type="tel"], [type="email"], [type="url"], [type="number"]), .textarea { unicode-bidi: plaintext; }
/* An empty textarea is one empty paragraph, which plaintext resolves as LTR (no strong letter): the caret
   started on the left of the Arabic form. While the placeholder shows, follow the page direction instead. */
.textarea:placeholder-shown { unicode-bidi: normal; }
.select {
    appearance: none; padding-inline-end: 2.4em;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%232F5F5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
    background-size: 18px; background-position: left .8em center; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[dir="ltr"] .select { background-position: right .8em center; }
/* "Choose…" reads as a prompt, not an answer, until something is picked */
.select:has(> option[data-placeholder]:checked) { color: var(--muted); }
.select option { color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal-dark); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #B3403C; background-color: #FFFBFA; }
:is(.input, .select, .textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(179 64 60 / .18); }
.input[type="tel"], .input[type="email"] { direction: ltr; }
[dir="rtl"] .input[type="tel"], [dir="rtl"] .input[type="email"] { text-align: right; }

/* Customisable select (Chromium 135+): a styled list that keeps the native keyboard, typeahead and form behaviour.
   Other browsers keep their own list under the styled box above. */
@supports (appearance: base-select) {
    .select, .select::picker(select) { appearance: base-select; }
    .select { display: flex; align-items: center; gap: .6em; padding-inline-end: .95em; background-image: none; }
    .select::picker-icon {
        content: ""; inline-size: 18px; block-size: 18px; flex: none; margin-inline-start: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%232F5F5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
        transition: rotate .2s;
    }
    .select:open { border-color: var(--teal-dark); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent); }
    .select:open::picker-icon { rotate: 180deg; }
    .select::picker(select) {
        margin-block: 6px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px;
        background: #fff; color: var(--ink); box-shadow: var(--shadow-lg);
        max-block-size: min(26rem, 60dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
        position-try-fallbacks: flip-block;
        opacity: 0; transition: opacity .16s, display .16s allow-discrete, overlay .16s allow-discrete;
    }
    .select:open::picker(select) { opacity: 1; }
    @starting-style { .select:open::picker(select) { opacity: 0; } }
    .select option {
        display: flex; align-items: center; gap: .6em; min-block-size: 44px; padding: .45em .8em;
        border-radius: 10px; line-height: 1.5; cursor: pointer; transition: background-color .12s;
    }
    .select option[data-placeholder] { color: var(--muted); }
    .select option:is(:hover, :focus-visible) { background: var(--teal-tint); outline: none; }
    .select option:focus-visible { box-shadow: inset 0 0 0 2px var(--teal-dark); }
    .select option:checked { background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-dark); font-weight: 600; }
    .select option::checkmark {
        order: 1; margin-inline-start: auto; content: ""; inline-size: 18px; block-size: 18px; flex: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%232F5F5C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
    }
    .select option:not(:checked)::checkmark { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .select::picker-icon, .select::picker(select) { transition: none; }
    .btn.is-sending::after { animation-duration: 2.4s; }
}

.field-error { display: flex; gap: 6px; align-items: flex-start; color: #A33A37; font-size: .88rem; font-weight: 500; }
.field-error::before {
    content: ""; inline-size: 16px; block-size: 16px; flex: none; margin-block-start: .2em; background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.9.9 0 01.9.9v4.2a.9.9 0 01-1.8 0V5.9A.9.9 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.6; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin-block-start: .15em; accent-color: var(--teal-dark); }
/* Choice tiles: same height, radius and focus ring as the inputs beside them, in equal columns.
   Rows are always even: five tiles share one row or stack one per row, four go 2 × 2 or one per row,
   two stay side by side (and line up with the five-tile columns when there is room). */
.choice { container-type: inline-size; }
.radio-row { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.radio-row--4, .radio-row--5 { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 28rem) { .radio-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 42rem) { .radio-row--5, .radio-row--2 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.radio-row label {
    display: flex; align-items: center; gap: 8px; min-height: 50px; min-width: 0; padding: .65em .8em;
    border-radius: 12px; border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; white-space: nowrap;
    font-size: var(--fs-body); font-weight: 500; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
fieldset[aria-invalid="true"] .radio-row label { border-color: #B3403C; background-color: #FFFBFA; }
.radio-row label:hover { border-color: color-mix(in srgb, var(--teal-dark) 55%, transparent); }
.radio-row input { accent-color: var(--teal-dark); width: 18px; height: 18px; flex: none; margin: 0; }
.radio-row input:focus-visible { outline: none; }
.radio-row label:has(input:checked) { border-color: var(--teal-dark); background: var(--teal-tint); color: var(--teal-dark); font-weight: 600; }
.radio-row label:has(input:focus-visible) { border-color: var(--teal-dark); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent); }
/* Submit: one press only; the icon turns into a spinner while the page posts */
.btn.is-sending { pointer-events: none; opacity: .85; }
.btn.is-sending svg { display: none; }
.btn.is-sending::after {
    content: ""; inline-size: 1.2em; block-size: 1.2em; flex: none;
    border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: lightbox-spin .8s linear infinite;
}
.hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { border-radius: var(--r); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.alert svg { width: 28px; height: 28px; flex: none; }
.alert--success { background: color-mix(in srgb, var(--teal) 14%, #fff); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); color: var(--ink); }
.alert--success svg { color: var(--teal-dark); }
.alert--error { background: #FBEDEC; border: 1px solid #E8B8B6; color: #6E2523; }
.alert--error ul { padding-inline-start: 1.2em; margin-block-start: 6px; }
.alert strong { display: block; margin-block-end: 2px; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 40px); box-shadow: var(--shadow-sm); }
[data-guardian][hidden] { display: none; }

/* ---------- Bank card / copy ---------- */
.bank-card {
    position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(22px, 4vw, 34px);
    background: linear-gradient(140deg, var(--teal-dark), var(--teal-deep)); color: #fff; box-shadow: var(--shadow);
}
.bank-card h2, .bank-card h3 { color: #fff; }
.bank-card dl { display: grid; gap: 16px; margin-block-start: 18px; position: relative; z-index: 1; }
.bank-card dt { font-size: .85rem; opacity: .85; }
.bank-card dd { margin: 0; font-weight: 600; font-size: 1.1rem; }
.bank-card .account { font-family: var(--font-en); font-size: clamp(1.05rem, .9rem + 1vw, 1.45rem); letter-spacing: .02em; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.bank-card .olive { color: #fff; opacity: .1; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.copy-btn[data-copied="true"] { --btn-bg: var(--orange); --btn-fg: var(--ink); }

/* ---------- QR ---------- */
.qr-card { display: grid; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); }
@media (min-width: 640px) { .qr-card { grid-template-columns: 180px 1fr; } }
.qr-card__code { background: #fff; padding: 10px; border-radius: 14px; width: 180px; border: 1px solid var(--line); }
.qr-card__code svg { width: 100%; height: auto; }

/* ---------- Filters & pagination ---------- */
.filters { display: grid; gap: 12px; align-items: end; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-block-end: 28px; }
@media (min-width: 760px) { .filters { grid-template-columns: repeat(3, 1fr) auto; } }
.filters .field label { font-size: .85rem; }
.filters__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.results-line { color: var(--muted); margin-block-end: 16px; font-size: .95rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-block-start: 36px; list-style: none; padding: 0; }
.pagination a, .pagination span {
    display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 12px; border-radius: 12px;
    border: 1px solid var(--line-strong); text-decoration: none; color: var(--teal-dark); font-weight: 600; background: var(--card);
}
.pagination [aria-current] span { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
.pagination .is-disabled span { opacity: .45; }
.pagination svg { width: 18px; height: 18px; transform: scaleX(var(--flip)); }

/* ---------- Initiative detail ---------- */
.article-head { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .article-head { grid-template-columns: 1.1fr .9fr; } }
.article-body { font-size: 1.05em; }
.article-body > * + * { margin-block-start: 1em; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.share__label { font-weight: 600; color: var(--teal-dark); }
.share a, .share button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .4em 1em; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--card); color: var(--teal-dark); text-decoration: none; font-weight: 500; font-size: .92rem;
}
.share svg { width: 18px; height: 18px; }
.share [data-copied="true"] { background: var(--teal-dark); color: #fff; }
.photo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); }
.photo-grid button { padding: 0; border: 0; background: none; border-radius: var(--r-sm); overflow: hidden; display: block; width: 100%; }
.photo-grid .photo { aspect-ratio: 1; }
.photo-grid img { transition: transform .4s ease; }
.photo-grid a:hover img { transform: scale(1.05); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }

/* ---------- Lightbox ---------- */
/* Fills the viewport without 100vw (which includes the scrollbar and pushed the dialog off-screen in RTL).
   Rows: top bar · photo stage · caption. The stage track is minmax(0, 1fr), so the photo's
   max-height: 100% resolves against a definite height and it never overflows. */
.lightbox {
    position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain;
    background: #0b1413; color: #fff;
}
.lightbox[open] {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 84px;
    grid-template-rows: 68px minmax(0, 1fr) auto;
    grid-template-areas: "bar bar bar" "prev stage next" "caption caption caption";
}
.lightbox::backdrop { background: rgb(10 20 19 / .7); }
html:has(.lightbox[open]) { overflow: hidden; scrollbar-gutter: stable; }

.lightbox__stage { grid-area: stage; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.lightbox__img {
    display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    border-radius: 6px; box-shadow: 0 18px 50px -12px rgb(0 0 0 / .6); transition: opacity .2s ease;
}
.lightbox.is-loading .lightbox__img { opacity: .25; }
.lightbox.is-loading .lightbox__stage::after {
    content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: lightbox-spin .8s linear infinite;
}
@keyframes lightbox-spin { to { rotate: 1turn; } }

.lightbox__btn {
    position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0;
    display: grid; place-items: center; align-self: center; justify-self: center;
    background: rgb(255 255 255 / .12); color: #fff; transition: background-color .2s ease;
}
.lightbox__btn[hidden] { display: none; }
.lightbox__btn:hover { background: rgb(255 255 255 / .24); }
.lightbox__btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 50%; }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__close { grid-area: bar; justify-self: end; margin-inline-end: 14px; }
.lightbox__prev { grid-area: prev; }
.lightbox__next { grid-area: next; }
.lightbox__prev svg, .lightbox__next svg { transform: scaleX(var(--flip)); }
.lightbox__counter {
    grid-area: bar; justify-self: start; align-self: center; margin-inline-start: 22px;
    font-size: .95rem; font-weight: 600; word-spacing: .2em; color: rgb(255 255 255 / .85); font-variant-numeric: tabular-nums;
}
.lightbox__caption {
    grid-area: caption; justify-self: center; max-width: min(72ch, 100%); margin: 0;
    padding: 14px 20px max(18px, env(safe-area-inset-bottom));
    text-align: center; font-size: .98rem; line-height: 1.6; color: rgb(255 255 255 / .92);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lightbox__caption:empty { padding: 0 0 max(14px, env(safe-area-inset-bottom)); }

/* Phones: arrows float over the photo so it gets the full width */
@media (max-width: 640px) {
    .lightbox[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60px minmax(0, 1fr) auto; grid-template-areas: "bar" "stage" "caption"; }
    .lightbox__prev, .lightbox__next { grid-area: stage; background: rgb(0 0 0 / .45); width: 44px; height: 44px; }
    .lightbox__prev { justify-self: start; margin-inline-start: 8px; }
    .lightbox__next { justify-self: end; margin-inline-end: 8px; }
    .lightbox__img { border-radius: 0; }
}
/* Short landscape screens: 44px buttons in a 56px bar (the 48px close button sat 2px from the top
   and its focus ring was cut off) and a one-line caption */
@media (max-height: 520px) {
    .lightbox[open] { grid-template-rows: 56px minmax(0, 1fr) auto; }
    .lightbox__btn { width: 44px; height: 44px; }
    .lightbox__caption { -webkit-line-clamp: 1; padding-block: 8px max(10px, env(safe-area-inset-bottom)); font-size: .9rem; }
}

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--teal-deep); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
    position: absolute; inset: 0; width: 100%; border: 0; padding: 0; color: #fff; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--teal-dark), var(--teal-deep));
}
.video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.video__play-icon { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--orange); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .2s; }
.video__play:hover .video__play-icon { transform: scale(1.08); }
.video__play-icon svg { width: 30px; height: 30px; margin-inline-start: 4px; }
.video__note { position: absolute; bottom: 10px; inset-inline: 12px; font-size: .78rem; opacity: .9; text-align: center; }

/* ---------- About: structure diagram ---------- */
.structure { display: grid; gap: 20px; }
@media (min-width: 900px) { .structure { grid-template-columns: repeat(3, 1fr); } }
.structure__num { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); color: var(--orange); font-weight: 700; line-height: 1; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.structure__list { list-style: none; padding: 0; display: grid; gap: 6px; margin-block-start: 12px; }
.structure__list li { display: flex; gap: 10px; align-items: baseline; }
.structure__list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; translate: 0 -2px; }

/* vision / mission */
.vm { display: grid; gap: 20px; }
@media (min-width: 820px) { .vm { grid-template-columns: 1fr 1fr; } }
.vm .card { padding: clamp(24px, 3vw, 36px); }
.vm h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 12px; margin-block-end: .6rem; }
.goal { display: flex; gap: 16px; align-items: flex-start; }
.goal__num { font-weight: 700; color: var(--orange); font-size: 1.6rem; line-height: 1.2; min-width: 1.4em; }
.goal h3 { font-size: 1.08rem; margin-block-end: .25rem; }
.goal p { color: var(--muted); font-size: .96rem; line-height: 1.7; }

/* unit detail */
.facts { display: grid; gap: 14px; }
.fact { display: flex; gap: 14px; align-items: flex-start; }
.fact h3 { font-size: 1rem; color: var(--teal-dark); }
.fact p { margin-block-start: 2px; }

/* contact */
.contact-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .label { color: var(--muted); font-size: .88rem; display: block; }
.contact-list a:not(.btn), .contact-list strong { font-weight: 600; color: var(--teal-dark); }
.socials { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.socials a {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--teal-tint); color: var(--teal-dark); transition: background-color .2s, color .2s;
}
.socials a:hover { background: var(--teal-dark); color: #fff; }
.socials svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; margin-block-start: var(--section); background: var(--teal-deep); color: rgba(255,255,255,.88); padding-block: clamp(48px, 6vw, 72px) 24px; }
.site-footer .olive { color: #fff; opacity: .07; }
.site-footer a { color: #fff; }
.site-footer h2 { color: #fff; font-size: 1.05rem; margin-block-end: 14px; }
.footer-grid { display: grid; gap: 32px; position: relative; z-index: 1; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand img { width: 96px; height: 96px; margin-block-end: 12px; }
.footer-brand__name { font-family: var(--font-en); font-weight: 600; color: #fff; font-size: 1.2rem; margin-block-end: 8px; }
.footer-brand p { font-size: .95rem; line-height: 1.8; max-width: 30em; }
.footer-links { list-style: none; padding: 0; display: grid; gap: 4px; grid-template-columns: 1fr 1fr; }
.footer-links a { text-decoration: none; opacity: .9; display: inline-block; padding-block: 4px; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.site-footer .socials a { background: rgba(255,255,255,.12); color: #fff; }
.site-footer .socials a:hover { background: var(--orange); color: var(--ink); }
.footer-contact { list-style: none; padding: 0; display: grid; gap: 2px; font-size: .95rem; }
.footer-contact a { display: inline-block; padding-block: 3px; }
.footer-bottom {
    position: relative; z-index: 1; margin-block-start: 36px; padding-block-start: 20px; border-block-start: 1px solid rgba(255,255,255,.16);
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .88rem; color: rgba(255,255,255,.78);
}

/* ---------- Floating WhatsApp ---------- */
.fab-wa {
    position: fixed; z-index: 40; bottom: 18px; inset-inline-end: 18px;
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    background: #1F7A4D; color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
    transition: transform .2s;
}
.fab-wa:hover { transform: scale(1.06); color: #fff; }
.fab-wa svg { width: 28px; height: 28px; }

/* ---------- Reveal on scroll (JS adds .js to <html>) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s ease; }
    .js [data-reveal].is-visible { opacity: 1; translate: 0 0; }
}

/* ---------- Error / maintenance pages ---------- */
.error-page { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 40px var(--gutter); position: relative; overflow: hidden; }
.error-page__inner { position: relative; z-index: 1; max-width: 640px; display: grid; justify-items: center; gap: 14px; }
.error-page__code { font-family: var(--font-en); font-size: clamp(4rem, 3rem + 8vw, 8rem); line-height: 1; color: var(--teal); font-weight: 700; }
.error-page h1 { font-size: clamp(1.8rem, 1.3rem + 2.5vw, 3rem); }
.error-page__logo { width: 120px; height: 120px; }
.soon { font-family: var(--font-en); font-weight: 700; color: var(--teal); font-size: clamp(3rem, 2rem + 7vw, 7rem); line-height: .95; rotate: -5deg; }

/* ---------- Print ---------- */
@media print {
    .site-header, .site-footer, .fab-wa, .drawer, .share, .filters { display: none !important; }
    body { background: #fff; }
}