/*==================================================================
  AL-FAJR FOUNDATION — DESIGN SYSTEM

  Palette: the foundation's original navy + gold.
  Structure: a conventional multi-page NGO site, modelled on
  pchf.org.pk — utility bar, dropdown navigation, a prominent
  Donate action, a homepage of teaser sections that link out to
  real detail pages, counter strips, cause cards and a
  multi-column footer.

  Typography is clean sans throughout (Poppins for headings, Inter
  for body and all numerals) rather than a display serif.
==================================================================*/

/*==============================
  0. LOCAL FONTS
  Amiri carries Arabic scripture, bundled rather than fetched so
  the sacred text never depends on a CDN.
==============================*/

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/amiri/Amiri-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/amiri/Amiri-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Local Nastaliq fallback if Google Fonts is unreachable. */
@font-face {
    font-family: 'Jameel Noori Nastaleeq';
    src: url('../fonts/jameel-noori/JameelNooriNastaleeq.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/*==============================
  1. TOKENS
==============================*/

:root {
    /* ---- Colour: the original navy + gold ---- */
    --navy-950:  #041225;
    --navy-900:  #06142D;
    --navy:      #071A36;
    --navy-800:  #0C2647;
    --navy-700:  #123561;
    --navy-500:  #2E5C9E;

    --gold:       #C9A227;   /* fills and dark-background text        */
    --gold-light: #E5C768;   /* gold text on navy — 10.5:1            */

    /*
     * Gold text on cream. #A5831A only reached 3.3–3.5:1, which fails AA
     * for the small uppercase eyebrows and section labels it is used on.
     * This is 4.83:1 on cream and 4.55:1 on cream-200, and still reads
     * as gold rather than brown.
     */
    --gold-dark:  #8A6D0E;

    --gold-tint:  rgba(201, 162, 39, 0.10);

    --white:  #FFFFFF;
    --cream:  #FFFDF8;
    --cream-200: #FAF6EC;
    --sand:   #EFE7D6;
    --sand-600: #D6C9AE;

    --text:      #213347;
    --text-mid:  #4A5A6E;

    /* Was #66748A — 4.39:1 on cream-200, just under AA. */
    --muted:     #616E83;

    /* Placeholders. Was #8794A6 at 3.08:1 on white, which failed. */
    --muted-400: #616E83;

    --success: #1E7A44;
    --danger:  #B4342A;

    /* Semantic aliases */
    --bg:          var(--cream);
    --bg-alt:      var(--cream-200);
    --bg-invert:   var(--navy);
    --rule:        var(--sand);
    --rule-strong: var(--sand-600);
    --rule-invert: rgba(255, 255, 255, 0.16);
    --on-invert:       #EAF0F8;
    --on-invert-muted: rgba(234, 240, 248, 0.74);
    --link:        var(--navy-700);

    /* ---- Type ---- */
    --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
    --font-arabic: 'Amiri', 'Traditional Arabic', serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
    --step-0:  clamp(0.97rem, 0.95rem + 0.12vw, 1.04rem);
    --step-1:  clamp(1.13rem, 1.08rem + 0.26vw, 1.30rem);
    --step-2:  clamp(1.34rem, 1.24rem + 0.50vw, 1.68rem);
    --step-3:  clamp(1.60rem, 1.40rem + 0.92vw, 2.24rem);
    --step-4:  clamp(1.92rem, 1.58rem + 1.55vw, 2.95rem);
    --step-5:  clamp(2.25rem, 1.70rem + 2.50vw, 3.75rem);

    --leading-tight: 1.16;
    --leading-snug:  1.32;
    --leading-body:  1.7;
    --leading-urdu:  2.05;

    /* ---- Space ---- */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
    --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 2rem;
    --sp-7: 3rem;    --sp-8: 4rem;    --sp-9: 5.5rem;

    --section-y: clamp(3.5rem, 7vw, 6rem);

    /* ---- Structure ---- */
    --measure:   70ch;
    --container: 1240px;
    --container-narrow: 880px;
    --gutter:    clamp(1.15rem, 4vw, 2.5rem);

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --pill:      999px;

    --topbar-h: 40px;
    --header-h: 82px;

    --shadow-sm: 0 4px 14px rgba(6, 20, 45, 0.07);
    --shadow:    0 10px 30px rgba(6, 20, 45, 0.10);
    --shadow-lg: 0 22px 60px rgba(6, 20, 45, 0.16);

    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur:  .3s;
}

/*==============================
  2. RESET
==============================*/

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, svg, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--link); text-underline-offset: .18em; }

/*
 * Focus ring uses gold-dark, not gold: plain gold measured 2.38:1 on
 * cream, well under the 3:1 WCAG 1.4.11 requires for a non-text
 * indicator. gold-dark is 4.83:1 on cream and 3.53:1 on navy, so one
 * value stays visible on both light and dark sections.
 */
:focus-visible {
    outline: 3px solid var(--gold-dark);
    outline-offset: 2px;
    border-radius: 2px;
}

/* On navy the light gold reads better and still clears 3:1. */
.section--invert :focus-visible,
.topbar :focus-visible,
.site-footer :focus-visible,
.page-header :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible {
    outline-color: var(--gold-light);
}

::selection { background: var(--gold); color: var(--navy); }

/*==============================
  3. TYPOGRAPHY
==============================*/

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    color: var(--navy);
    text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); }
h5 { font-size: var(--step-0); }

/* Gold accent fragment inside a heading. */
h1 em, h2 em, h3 em, .hl {
    font-style: normal;
    color: var(--gold-dark);
}

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: var(--sp-3);
}

/* Short gold rule under a section heading. */
.rule-gold {
    width: 68px;
    height: 3px;
    margin-top: var(--sp-4);
    border-radius: var(--pill);
    background: var(--gold);
}

.section-head--center .rule-gold { margin-inline: auto; }

.lede {
    font-size: var(--step-1);
    line-height: 1.75;
    color: var(--muted);
    max-width: var(--measure);
}

.prose-narrow, .body-text { max-width: var(--measure); }
.body-text + .body-text { margin-top: var(--sp-4); }

.small { font-size: var(--step--1); color: var(--muted); }

.num {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-body); }

[lang="ar"] { font-family: var(--font-arabic); line-height: 1.95; }

/*==============================
  4. LAYOUT
==============================*/

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.25rem); }

.section--alt  { background: var(--bg-alt); }
.section--sand { background: var(--sand); }

.section--invert {
    background: var(--bg-invert);
    color: var(--on-invert);
}

.section--invert h1, .section--invert h2,
.section--invert h3, .section--invert h4 { color: var(--white); }

.section--invert .eyebrow { color: var(--gold-light); }
.section--invert .lede, .section--invert .small { color: var(--on-invert-muted); }
.section--invert a { color: var(--gold-light); }

.section-head { margin-bottom: var(--sp-7); }
.section-head h2 { max-width: 26ch; }
.section-head .lede { margin-top: var(--sp-4); }

.section-head--center {
    text-align: center;
    max-width: 62ch;
    margin-inline: auto;
}

.section-head--center h2, .section-head--center .lede { margin-inline: auto; }

/* Heading on the left, action on the right. */
.section-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
}

.split {
    display: grid;
    gap: var(--sp-7);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
    .split--wide-left  { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}

.stack > * + *    { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

hr, .rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin-block: var(--sp-6);
}

/*==============================
  5. BUTTONS
==============================*/

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--navy);
    --btn-bd: currentColor;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: .85em 1.7em;
    border: 2px solid var(--btn-bd);
    border-radius: var(--pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-head);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-2px); }

/* Gold — donations and the single primary action on a page */
.btn--gold {
    --btn-bg: var(--gold);
    --btn-fg: var(--navy);
    --btn-bd: var(--gold);
}
.btn--gold:hover, .btn--gold:focus-visible {
    --btn-bg: var(--gold-light);
    --btn-bd: var(--gold-light);
}

.btn--navy {
    --btn-bg: var(--navy);
    --btn-fg: var(--white);
    --btn-bd: var(--navy);
}
.btn--navy:hover, .btn--navy:focus-visible {
    --btn-bg: var(--navy-800);
    --btn-bd: var(--navy-800);
}

.btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--navy);
    --btn-bd: var(--navy);
}
.btn--outline:hover, .btn--outline:focus-visible {
    --btn-bg: var(--navy);
    --btn-fg: var(--white);
}

.btn--outline-gold {
    --btn-bg: transparent;
    --btn-fg: var(--gold-dark);
    --btn-bd: var(--gold);
}
.btn--outline-gold:hover, .btn--outline-gold:focus-visible {
    --btn-bg: var(--gold);
    --btn-fg: var(--navy);
}

/* On dark backgrounds */
.section--invert .btn--outline,
.btn--light {
    --btn-bg: transparent;
    --btn-fg: var(--white);
    --btn-bd: rgba(255, 255, 255, .5);
}
.section--invert .btn--outline:hover,
.btn--light:hover, .btn--light:focus-visible {
    --btn-bg: var(--white);
    --btn-fg: var(--navy);
    --btn-bd: var(--white);
}

.btn--sm  { padding: .62em 1.2em; }
.btn--lg  { padding: 1em 2.1em; font-size: var(--step-0); }
.btn--block { width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.link-more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--navy-700);
    text-decoration: none;
}

.link-more::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-more:hover { color: var(--gold-dark); }
.link-more:hover::after { transform: translateX(.3em); }

.section--invert .link-more { color: var(--gold-light); }

/*==============================
  6. BADGES & TAGS
==============================*/

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .32em .85em;
    border: 1px solid var(--rule-strong);
    border-radius: var(--pill);
    background: var(--white);
    font-size: var(--step--1);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-mid);
}

.chip--gold {
    background: var(--gold-tint);
    border-color: rgba(201, 162, 39, .38);
    color: var(--gold-dark);
    font-weight: 600;
}

.chip--navy { background: var(--navy); border-color: var(--navy); color: var(--white); }

.chip-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }

.section--invert .chip {
    background: rgba(255, 255, 255, .07);
    border-color: var(--rule-invert);
    color: var(--on-invert);
}

/*==============================
  7. CARDS
==============================*/

.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

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

.card-media { position: relative; overflow: hidden; background: var(--cream-200); }

.card-media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.card:hover .card-media img { transform: scale(1.05); }

.card-flag {
    position: absolute;
    inset-block-start: var(--sp-3);
    inset-inline-start: var(--sp-3);
    padding: .28em .8em;
    border-radius: var(--pill);
    background: var(--gold);
    color: var(--navy);
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.card-flag--navy { background: rgba(6, 20, 45, .88); color: var(--white); }

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--sp-5);
}

.card-body h3 { font-size: var(--step-1); }
.card-body h3 a { color: inherit; text-decoration: none; }
.card-body h3 a:hover { color: var(--gold-dark); }

.card-body p { margin-top: var(--sp-3); color: var(--muted); font-size: .95rem; }

.card-spacer { flex: 1 1 auto; min-height: var(--sp-4); }

.card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
    font-size: var(--step--1);
    color: var(--muted);
}

.card-meta-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.card-meta-item i { color: var(--gold-dark); font-size: .9em; }

.card-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }

/*==============================
  8. ICON FEATURE CARD
==============================*/

.feature {
    padding: var(--sp-6);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

.feature-icon {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: var(--sp-4);
    border-radius: var(--radius);
    background: var(--gold-tint);
    color: var(--gold-dark);
    font-size: 1.35rem;
}

.feature h3 { font-size: var(--step-1); }
.feature p  { margin-top: var(--sp-3); color: var(--muted); font-size: .95rem; }

.section--invert .feature {
    background: rgba(255, 255, 255, .05);
    border-color: var(--rule-invert);
    box-shadow: none;
}

.section--invert .feature-icon { background: rgba(201, 162, 39, .18); color: var(--gold-light); }
.section--invert .feature p { color: var(--on-invert-muted); }

/*==============================
  9. COUNTERS
  The statistics strip, as on PCHF.
==============================*/

.counters {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* One stat should not sit in a half-width cell. */
.counters--1 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 860px) {
    .counters--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .counters--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .counters--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.counter { text-align: center; }

.counter-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--sp-3);
    border-radius: 50%;
    background: var(--gold-tint);
    color: var(--gold-dark);
    font-size: 1.1rem;
}

.counter-figure {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--gold-dark);
    font-variant-numeric: tabular-nums;
}

.counter-label {
    display: block;
    margin-top: var(--sp-3);
    font-family: var(--font-head);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text);
}

.counter-note {
    display: block;
    margin-top: var(--sp-2);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--muted);
}

.section--invert .counter-icon  { background: rgba(201, 162, 39, .18); color: var(--gold-light); }
.section--invert .counter-figure { color: var(--gold-light); }
.section--invert .counter-label { color: var(--white); }
.section--invert .counter-note  { color: var(--on-invert-muted); }

/*==============================
  10. FORMS
==============================*/

.field { display: block; margin-bottom: var(--sp-5); }

.field-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--step--1);
    font-weight: 600;
}

.field-label .req { color: var(--danger); }

.field-hint { font-weight: 400; color: var(--muted); }

.input, .textarea, .select {
    width: 100%;
    padding: .8em 1em;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: var(--step-0);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.textarea { resize: vertical; min-height: 8rem; line-height: var(--leading-body); }

.input::placeholder, .textarea::placeholder { color: var(--muted-400); }

.input:focus, .textarea:focus, .select:focus {
    outline: 0;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-tint);
}

.input.has-error, .textarea.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(180, 52, 42, .12);
}

.field-error {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--danger);
}

.field-row { display: grid; gap: 0 var(--sp-5); grid-template-columns: 1fr; }

@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Honeypot — off-screen, not display:none (bots skip that). */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden; opacity: 0; pointer-events: none;
}

/*==============================
  11. NOTICES
==============================*/

.notice {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--rule-strong);
    border-inline-start: 4px solid var(--gold);
    border-radius: var(--radius);
    background: var(--white);
    font-size: .95rem;
}

.notice i { flex: 0 0 auto; margin-top: .18em; color: var(--gold-dark); }
.notice p { margin: 0; }

.section--invert .notice {
    background: rgba(255, 255, 255, .06);
    border-color: var(--rule-invert);
    border-inline-start-color: var(--gold);
    color: var(--on-invert);
}
.section--invert .notice i { color: var(--gold-light); }

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
    border: 1px solid var(--rule-strong);
    border-inline-start: 4px solid var(--success);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.flash--error { border-inline-start-color: var(--danger); }
.flash i { flex: 0 0 auto; margin-top: .2em; color: var(--success); }
.flash--error i { color: var(--danger); }
.flash p { margin: 0; font-size: .95rem; }

.flash-close {
    margin-inline-start: auto;
    padding: 0; border: 0; background: none;
    color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer;
}

/*==============================
  12. EMPTY STATE
==============================*/

.empty {
    grid-column: 1 / -1;
    padding: var(--sp-8) var(--sp-5);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-lg);
    background: var(--white);
    text-align: center;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 4rem; height: 4rem;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    background: var(--gold-tint);
    color: var(--gold-dark);
    font-size: 1.5rem;
}

.empty h3 { font-size: var(--step-2); }
.empty p  { margin-top: var(--sp-3); color: var(--muted); max-width: 46ch; margin-inline: auto; }
.empty .btn { margin-top: var(--sp-5); }

.section--invert .empty {
    background: rgba(255, 255, 255, .05);
    border-color: var(--rule-invert);
}

/*==============================
  13. UTILITIES
==============================*/

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    inset-inline-start: var(--sp-4);
    z-index: 9999;
    padding: var(--sp-3) var(--sp-5);
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--dur) var(--ease);
}

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

.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/*==============================
  14. REVEAL
==============================*/

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .reveal { opacity: 1; transform: none; }
    .btn:hover, .card:hover, .feature:hover { transform: none; }
}

/*==============================
  15. PRINT
==============================*/

@media print {
    .site-header, .topbar, .site-footer, .skip-link,
    .btn, .scroll-top, .hero-slider-nav { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    .section { padding-block: 1rem; }
}