/* ============================================================
   ASHARA NAIROBI 1448H — v4
   Real photography · deep Husaini crimson · luxurious depth
   ============================================================ */

/* Kanz al-Marjaan — supplied Bohra Arabic display font.
   Drop the font files at fonts/Kanz-al-Marjaan.woff2 and .ttf.
   Falls back to Amiri / Scheherazade / Noto Naskh until then. */
@font-face {
  font-family: "Kanz al-Marjaan";
  src: url("fonts/Kanz-al-Marjaan.woff2") format("woff2"),
       url("fonts/Kanz-al-Marjaan.ttf") format("truetype");
  font-display: swap;
  font-weight: 400 900;
  font-style: normal;
}

:root {
  /* === ASHARA NAIROBI 1448 — official logo palette === */
  --ink:           #0F3A48;  /* deep teal — primary dark, from logo brushwork */
  --ink-emerald:   #0F3A48;
  --ink-royal:     #0F2A3A;
  --ink-soft:      #355560;
  --ink-mute:      #7A8A8E;

  --paper:         #F2DFBE;  /* logo background — matches the emblem's cream */
  --paper-warm:    #EBD6B0;
  --cream:         #EFD7AC;
  --bone:          #E5C998;

  --rule:          #C9B68E;
  --rule-soft:     #DCC8A0;

  /* Husaini crimson — the sun-mandala red of the logo */
  --bukaa:         #4A0E12;
  --bukaa-deep:    #2D080A;
  --husaini:       #7A2025;
  --husaini-mid:   #9C2A33;
  --crimson:       #7A2025;
  --crimson-pale:  #D7A09C;

  /* Tan / mustard — the logo's outer band colour */
  --tan:           #B98A2E;
  --tan-deep:      #8E6A1F;
  --tan-pale:      #D9B98E;

  /* Terracotta — the logo sun's orange-warm */
  --terra:         #D67D3C;
  --terra-deep:    #C25F1B;
  --terra-pale:    #E8AA75;

  /* Other jewel tones (kept, used sparingly) */
  --emerald:       #1F7A5C;
  --emerald-deep:  #0F4D3C;
  --emerald-pale:  #B6D6C7;

  --royal:         #2D5C9E;
  --royal-deep:    #1B3A6B;

  --coast:         #3E8A9E;
  --coast-deep:    #1E5566;

  --savanna:       #C8966A;
  --savanna-deep:  #8E6230;

  /* Metals */
  --gold:          #C8A455;
  --gold-deep:     #8C6B22;
  --gold-pale:     #E8D4A0;
  --silver:        #C9CCD1;
  --silver-deep:   #8E96A0;

  /* Kenya flag (deep teal replaces the black stripe — per "no black") */
  --kf-red:        #BE0027;
  --kf-green:      #006B3F;
  --kf-dark:       var(--ink);

  /* Type */
  --f-display:     "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --f-arabic:      "Kanz al-Marjaan", "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
  --f-body:        "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:        "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --maxw:          1320px;
  --col-pad:       32px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle parchment depth on body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(92,15,20,0.06), transparent 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(124,90,20,0.08), transparent 65%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }

/* ============== Type ============== */
.display {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.02;
}
.arabic {
  font-family: var(--f-arabic);
  direction: rtl;
  line-height: 1.35;
  font-feature-settings: "kern", "liga";
}
.mono {
  font-family: var(--f-mono);
  font-feature-settings: "tnum", "zero";
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow .num { color: var(--ink-mute); margin-right: 10px; }
.lede {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.husaini-mark {
  color: var(--husaini);
  font-style: normal;
}

/* ============== Layout ============== */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--col-pad);
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
}

section { position: relative; padding: 120px 0; z-index: 1; }
section.tight { padding: 80px 0; }
section.cream { background: var(--cream); }
section.warm  { background: var(--paper-warm); }
section.bone  { background: var(--bone); }

section.emerald-ink { background: var(--ink-emerald); color: #EFEADB; }
section.emerald-ink .eyebrow,
section.emerald-ink .lede { color: rgba(232,212,160,0.84); }

section.royal-ink { background: var(--ink-royal); color: #EFEADB; }
section.royal-ink .eyebrow,
section.royal-ink .lede { color: rgba(232,212,160,0.84); }

/* The Husaini section — for gham / bukaa / azaadari */
section.husaini-ink { background: var(--bukaa); color: #F2E2D8; }
section.husaini-ink .eyebrow { color: var(--crimson-pale); }
section.husaini-ink .lede { color: rgba(242,226,216,0.78); }

@media (max-width: 720px) {
  section { padding: 72px 0; }
}

/* ============== Rules ============== */
.rule       { height: 1px; background: var(--rule); width: 100%; }
.rule-gold  { height: 1px; background: var(--gold); width: 64px; }
.rule-husaini { height: 1px; background: var(--husaini); width: 64px; }

/* ============== Kenya flag bar ============== */
.kf-bar { display: flex; height: 5px; width: 100%; }
.kf-bar .seg { flex: 1; }
.kf-bar .red   { background: var(--kf-red); }
.kf-bar .dark  { background: var(--kf-dark); }
.kf-bar .white { background: var(--paper-warm); }
.kf-bar .green { background: var(--kf-green); }
.kf-bar .gold  { background: var(--gold); flex: 0 0 12%; }

/* ============== Buttons ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: transparent;
  transition: background 200ms, color 200ms;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn.emerald { background: var(--emerald-deep); border-color: var(--emerald-deep); color: var(--paper); }
.btn.emerald:hover { background: var(--emerald); border-color: var(--emerald); }
.btn.gold { border-color: var(--gold); color: var(--gold-deep); }
.btn.gold:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }
.btn.husaini { background: var(--husaini); border-color: var(--husaini); color: var(--gold-pale); }
.btn.husaini:hover { background: var(--bukaa); border-color: var(--gold); color: var(--gold-pale); }
.btn.lite { border-color: var(--gold-pale); color: var(--gold-pale); }
.btn.lite:hover { background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* ============== Ya Husain mark ============== */
.ya-husain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-arabic);
  color: var(--husaini);
  line-height: 0.9;
  letter-spacing: 0;
  font-weight: 700;
}
.ya-husain.small { font-size: 26px; }
.ya-husain.med   { font-size: 36px; }
.ya-husain.large { font-size: 56px; }
.ya-husain.xl    { font-size: 84px; }
.ya-husain.invert { color: var(--gold-pale); }

/* ============== Logo & decorative band assets ============== */
.logo-img {
  display: block;
  height: auto;
  object-fit: contain;
}
.band-sun {
  background-image: url("assets/sun-band.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  height: 36px;
  width: 100%;
}
.band-triangle {
  background-image: url("assets/triangle-band.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  height: 22px;
  width: 100%;
}
.band-triangle.flip { transform: scaleY(-1); }
.brush-rule {
  background-image: url("assets/brush-stroke.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  height: 26px;
  width: 100%;
}
.water-drop {
  background-image: url("assets/water-drop.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
}
.dots-fade {
  background-image: url("assets/dots-fade.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  height: 18px;
  width: 220px;
}

/* ============== Nav ============== */
.nav-shell {
  position: sticky; top: 0; z-index: 40;
  background: rgba(242, 223, 190, 0.95);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--rule);
}
.nav-shell .top-flag { position: absolute; top: 0; left: 0; right: 0; }
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px 16px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.nav-item {
  padding: 10px 14px;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink-soft);
  position: relative;
  transition: color 200ms;
}
.nav-item.on { color: var(--husaini); }
.nav-item.on::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--gold);
}

/* ============== Helpline pill ============== */
.helpline {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bukaa);
  color: var(--paper);
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--gold);
  box-shadow: 0 18px 38px -18px rgba(45,6,8,0.6);
}
.helpline .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7DD3A1;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(125,211,161,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(125,211,161,0); }
  100% { box-shadow: 0 0 0 0 rgba(125,211,161,0); }
}

/* ============== Raza band ============== */
.raza {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--bukaa);
  color: var(--paper);
  padding: 24px 30px;
  border-top: 4px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.raza .seal {
  font-family: var(--f-arabic);
  font-size: 42px;
  color: var(--gold-pale);
  text-align: center;
  line-height: 1;
  font-weight: 700;
}

/* ============== Photo slot (real images with frame) ============== */
.photo {
  position: relative;
  overflow: hidden;
  color: var(--gold-deep);
  background: var(--bone);
  border: 1px solid var(--rule);
}
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
/* Subtle warm wash to unify photos to the page palette */
.photo .ph-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(45,6,8,0.0) 0%,
      rgba(45,6,8,0.0) 60%,
      rgba(45,6,8,0.24) 100%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(45,6,8,0.18), transparent 60%);
  pointer-events: none;
}
.photo.dark .ph-wash {
  background:
    linear-gradient(180deg, rgba(15,5,8,0.10) 0%, transparent 30%, rgba(15,5,8,0.6) 100%);
}
.photo .ph-tag {
  position: absolute;
  left: 14px; top: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-pale);
  background: rgba(45,6,8,0.78);
  border: 1px solid rgba(232,212,160,0.4);
  padding: 6px 10px;
  z-index: 2;
}
.photo .ph-caption {
  position: absolute;
  left: 14px; bottom: 14px; right: 14px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-pale);
  z-index: 2;
}
.photo .ph-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  pointer-events: none;
  z-index: 3;
}
.photo .ph-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.photo .ph-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.photo .ph-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.photo .ph-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.photo .ph-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(124,90,20,0.08) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, var(--bone) 0%, var(--paper-warm) 100%);
  color: var(--gold-deep);
}
.photo .ph-fallback .label {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 10px;
  max-width: 90%;
}
.photo .ph-fallback .sublabel {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.photo.dark .ph-fallback {
  background:
    repeating-linear-gradient(135deg, rgba(232,212,160,0.08) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #1A0A0E 0%, var(--bukaa) 100%);
}
.photo.dark .ph-fallback .label { color: var(--gold-pale); }
.photo.dark .ph-fallback .sublabel { color: var(--gold-pale); opacity: 0.7; }

/* ============== Tabs ============== */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
section.emerald-ink .tabs,
section.royal-ink .tabs,
section.husaini-ink .tabs { border-color: rgba(232,212,160,0.3); }
.tab {
  position: relative;
  padding: 18px 24px 16px 0;
  margin-right: 28px;
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
  transition: color 200ms;
}
section.emerald-ink .tab,
section.royal-ink .tab,
section.husaini-ink .tab { color: rgba(239,234,219,0.5); }
.tab.on { color: var(--husaini); }
section.emerald-ink .tab.on,
section.royal-ink .tab.on,
section.husaini-ink .tab.on { color: var(--gold-pale); }
.tab.on::after {
  content: "";
  position: absolute;
  left: 0; right: 28px; bottom: -1px;
  height: 1px;
  background: var(--gold);
}

/* ============== Chips ============== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 7px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  transition: all 200ms;
}
.chip.on, .chip:hover {
  border-color: var(--husaini);
  color: var(--husaini);
  background: var(--paper);
}

/* ============== FAQ ============== */
.faq-item {
  border-top: 1px solid var(--rule);
  padding: 22px 0;
}
.faq-q {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 18px;
  align-items: baseline;
  font-family: var(--f-display);
  font-size: 26px;
  cursor: pointer;
  user-select: none;
  letter-spacing: -0.01em;
}
.faq-q .num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
}
.faq-q .glyph {
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--husaini);
  text-align: right;
  transition: transform 280ms;
}
.faq-item.open .faq-q .glyph { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms cubic-bezier(.2,.7,.2,1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a-body {
  padding: 14px 32px 4px 74px;
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 720px;
}

/* ============== Husaini grief band — shown above nav on all pages ============== */
.bukaa-band {
  background: var(--husaini);
  color: var(--terra-pale);
  padding: 14px 32px 12px;
  text-align: center;
  position: relative;
  border-bottom: 2px solid var(--tan);
}
.bukaa-band::before,
.bukaa-band::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  background-image: url("assets/sun-band.png");
  background-repeat: repeat-x;
  background-size: auto 80%;
  background-position: center;
  opacity: 0.85;
  pointer-events: none;
}
.bukaa-band::before { left: 0; mask-image: linear-gradient(90deg, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 100%); }
.bukaa-band::after  { right: 0; mask-image: linear-gradient(270deg, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(270deg, black 0%, transparent 100%); }
.bukaa-band .ar {
  font-family: var(--f-arabic);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--paper);
  position: relative;
  z-index: 1;
}

/* ============== Image background sections (with crimson tint overlay) ============== */
.bg-photo {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--paper);
}
.bg-photo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(45,6,8,0.68) 0%, rgba(45,6,8,0.42) 40%, rgba(45,6,8,0.82) 100%);
  z-index: 0;
}
.bg-photo > * { position: relative; z-index: 1; }

.bg-photo.emerald-tint::before {
  background: linear-gradient(180deg, rgba(15,42,34,0.7) 0%, rgba(15,42,34,0.4) 40%, rgba(15,42,34,0.85) 100%);
}
.bg-photo.royal-tint::before {
  background: linear-gradient(180deg, rgba(15,31,56,0.72) 0%, rgba(15,31,56,0.42) 40%, rgba(15,31,56,0.86) 100%);
}
.bg-photo.lite-tint::before {
  background: linear-gradient(180deg, rgba(45,6,8,0.55) 0%, rgba(45,6,8,0.25) 50%, rgba(45,6,8,0.72) 100%);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); }
::-webkit-scrollbar-track { background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   v4.1 — Animations & decorative pattern backgrounds
   ============================================================ */

html { scroll-behavior: smooth; }

/* ----- Reveal-on-scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(.16,.84,.32,1), transform 900ms cubic-bezier(.16,.84,.32,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }

/* ----- Hover lifts ----- */
.photo {
  transition: transform 420ms cubic-bezier(.16,.84,.32,1),
              box-shadow 420ms cubic-bezier(.16,.84,.32,1);
}
.photo:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -28px rgba(15,58,72,0.45);
}

.btn { transition: background 220ms, color 220ms, border-color 220ms, transform 220ms; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.nav-item { transition: color 220ms, transform 220ms; }
.nav-item:hover { color: var(--husaini); }

.chip { transition: all 220ms; }
.chip:hover { transform: translateY(-1px); }

/* ----- Subtle ambient body wash ----- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 700px 400px at 15% -10%, rgba(122,32,37,0.06), transparent 70%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(15,58,72,0.05), transparent 70%);
}

/* ----- Decorative pattern backgrounds (use the supplied asset elements) ----- */

/* A faint dots-fade strip used as section terminator */
.dots-decor {
  display: block;
  height: 26px;
  background-image: url("assets/dots-fade.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.55;
  margin: 32px auto 0;
  max-width: 320px;
}

/* Sun-band as a thin top/bottom rule on light sections */
.sun-rule {
  display: block;
  height: 28px;
  background-image: url("assets/sun-band.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  width: 100%;
}

/* Brush-stroke divider */
.brush-divider {
  display: block;
  height: 22px;
  background-image: url("assets/brush-stroke.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% auto;
  width: 100%;
  margin: 24px 0;
}

/* Triangle band at the bottom edge of any section */
.triangle-edge {
  position: absolute;
  left: 0; right: 0;
  height: 18px;
  background-image: url("assets/triangle-band.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  pointer-events: none;
}
.triangle-edge.top    { top: 0; }
.triangle-edge.bottom { bottom: 0; transform: scaleY(-1); }

/* Authentic light wash — faint sun-band watermark on key sections */
section.pattern-sun {
  position: relative;
}
section.pattern-sun::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/sun-band.png");
  background-repeat: repeat;
  background-size: 360px auto;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
section.pattern-sun > * { position: relative; z-index: 1; }

/* Soft warm gradient overlay for cream sections */
section.cream-glow {
  background:
    radial-gradient(ellipse 1200px 600px at 50% 100%, rgba(214,125,60,0.10), transparent 70%),
    radial-gradient(ellipse 800px 400px at 0% 0%, rgba(122,32,37,0.06), transparent 70%),
    var(--cream);
}

/* ----- Hero photo zoom (very subtle) ----- */
.bg-photo {
  overflow: hidden;
}
.bg-photo > [data-bg-zoom] {
  animation: heroZoom 28s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

/* ----- Bukaa band shimmer ----- */
.bukaa-band .ar {
  animation: arShimmer 6s ease-in-out infinite;
}
@keyframes arShimmer {
  0%, 100% { color: var(--paper); text-shadow: 0 0 0 transparent; }
  50%      { color: var(--gold-pale); text-shadow: 0 0 18px rgba(232,212,160,0.4); }
}

/* ----- Helpline transition for footer-aware lift ----- */
.helpline { transition: transform 380ms cubic-bezier(.16,.84,.32,1); }

/* ----- Accent tap on FAQ items ----- */
.faq-item { transition: background 220ms; }
.faq-item:hover { background: rgba(201,182,142,0.10); }

/* ----- Smooth page-load ----- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-in { animation: pageIn 700ms cubic-bezier(.16,.84,.32,1) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .bg-photo > [data-bg-zoom],
  .bukaa-band .ar,
  .helpline,
  .page-in { animation: none !important; }
}