/* ============================================================
   HORIZON — Islamic Design Language (v4)
   Philosophy: Premium, modern Islamic inspiration.
   Subtle geometric structure. No kitschy ornament.
   Referenced: World Economic Forum, DCCI, IDB, OECD-tier design.
   ============================================================ */

/* ── 1. BISMILLAH DIVIDER ────────────────────────────────────
   Elegant gold horizontal ornament inspired by Islamic
   geometric centre-mark. Used above major CTAs.            */

.bismillah-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  opacity: 0;
  transform: scaleX(.6);
  transition:
    opacity 600ms cubic-bezier(0.22,1,0.36,1),
    transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.bismillah-bar.in-view {
  opacity: 1;
  transform: scaleX(1);
}
.bismillah-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,168,32,.6) 40%,
    rgba(243,211,91,.9) 100%
  );
}
.bismillah-bar:nth-child(1) .bismillah-line { /* left side — reverses gradient */
  background: linear-gradient(
    90deg,
    rgba(243,211,91,.9) 0%,
    rgba(201,168,32,.6) 60%,
    transparent 100%
  );
}
.bismillah-center {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.bismillah-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.bismillah-diamond {
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── 2. ISLAMIC EYEBROW ───────────────────────────────────────
   Small label with gold side marks before section headings  */

.eyebrow-islamic {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow-islamic::before,
.eyebrow-islamic::after {
  content: '';
  display: block;
  width: 18px; height: 1.5px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 2px;
  flex-shrink: 0;
}
.eyebrow-islamic-light { color: rgba(243,211,91,.9); }
.eyebrow-islamic-light::before,
.eyebrow-islamic-light::after {
  background: linear-gradient(90deg, rgba(243,211,91,.5), rgba(243,211,91,.9));
}

/* ── 3. GEOMETRIC SECTION PATTERN — unified motif ────────────
   One consistent Islamic geometric motif site-wide: interlocking
   6-point stars (hexagrams) and the hexagons they leave between
   them — the classic woven star-and-hexagon tessellation. Every
   .geo-* class below now renders the SAME pattern (previously
   four different motifs — star, rosette, hex-interlace, diamond
   lattice — which read as inconsistent across pages). Class names
   are kept as-is so no markup changes were needed anywhere.
   Light sections: navy/blue lines, low opacity, transparent base.
   Dark sections: warm-white/gold-tinted lines, transparent base. */

.geo-star,
.geo-rosette,
.geo-hex,
.geo-pattern-light,
.geo-diamond {
  position: relative;
}
.geo-star::before,
.geo-rosette::before,
.geo-hex::before,
.geo-pattern-light::before,
.geo-diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83.1' height='48.0'%3E%3Cg transform='translate(41.6,24.0)' fill='none' stroke='rgba(31,90,166,0.16)' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M-41.6,-56.0 L-32.3,-40.0 L-13.9,-40.0 L-23.1,-24.0 L-13.9,-8.0 L-32.3,-8.0 L-41.6,8.0 L-50.8,-8.0 L-69.3,-8.0 L-60.0,-24.0 L-69.3,-40.0 L-50.8,-40.0 Z'/%3E%3Cpath d='M41.6,-56.0 L50.8,-40.0 L69.3,-40.0 L60.0,-24.0 L69.3,-8.0 L50.8,-8.0 L41.6,8.0 L32.3,-8.0 L13.9,-8.0 L23.1,-24.0 L13.9,-40.0 L32.3,-40.0 Z'/%3E%3Cpath d='M124.7,-56.0 L133.9,-40.0 L152.4,-40.0 L143.2,-24.0 L152.4,-8.0 L133.9,-8.0 L124.7,8.0 L115.5,-8.0 L97.0,-8.0 L106.2,-24.0 L97.0,-40.0 L115.5,-40.0 Z'/%3E%3Cpath d='M-83.1,-32.0 L-73.9,-16.0 L-55.4,-16.0 L-64.7,-0.0 L-55.4,16.0 L-73.9,16.0 L-83.1,32.0 L-92.4,16.0 L-110.9,16.0 L-101.6,0.0 L-110.9,-16.0 L-92.4,-16.0 Z'/%3E%3Cpath d='M0.0,-32.0 L9.2,-16.0 L27.7,-16.0 L18.5,-0.0 L27.7,16.0 L9.2,16.0 L0.0,32.0 L-9.2,16.0 L-27.7,16.0 L-18.5,0.0 L-27.7,-16.0 L-9.2,-16.0 Z'/%3E%3Cpath d='M83.1,-32.0 L92.4,-16.0 L110.9,-16.0 L101.6,-0.0 L110.9,16.0 L92.4,16.0 L83.1,32.0 L73.9,16.0 L55.4,16.0 L64.7,0.0 L55.4,-16.0 L73.9,-16.0 Z'/%3E%3Cpath d='M-41.6,-8.0 L-32.3,8.0 L-13.9,8.0 L-23.1,24.0 L-13.9,40.0 L-32.3,40.0 L-41.6,56.0 L-50.8,40.0 L-69.3,40.0 L-60.0,24.0 L-69.3,8.0 L-50.8,8.0 Z'/%3E%3Cpath d='M41.6,-8.0 L50.8,8.0 L69.3,8.0 L60.0,24.0 L69.3,40.0 L50.8,40.0 L41.6,56.0 L32.3,40.0 L13.9,40.0 L23.1,24.0 L13.9,8.0 L32.3,8.0 Z'/%3E%3Cpath d='M124.7,-8.0 L133.9,8.0 L152.4,8.0 L143.2,24.0 L152.4,40.0 L133.9,40.0 L124.7,56.0 L115.5,40.0 L97.0,40.0 L106.2,24.0 L97.0,8.0 L115.5,8.0 Z'/%3E%3Cpath d='M-83.1,16.0 L-73.9,32.0 L-55.4,32.0 L-64.7,48.0 L-55.4,64.0 L-73.9,64.0 L-83.1,80.0 L-92.4,64.0 L-110.9,64.0 L-101.6,48.0 L-110.9,32.0 L-92.4,32.0 Z'/%3E%3Cpath d='M0.0,16.0 L9.2,32.0 L27.7,32.0 L18.5,48.0 L27.7,64.0 L9.2,64.0 L0.0,80.0 L-9.2,64.0 L-27.7,64.0 L-18.5,48.0 L-27.7,32.0 L-9.2,32.0 Z'/%3E%3Cpath d='M83.1,16.0 L92.4,32.0 L110.9,32.0 L101.6,48.0 L110.9,64.0 L92.4,64.0 L83.1,80.0 L73.9,64.0 L55.4,64.0 L64.7,48.0 L55.4,32.0 L73.9,32.0 Z'/%3E%3C/g%3E%3Ccircle cx='83.1' cy='48.0' r='2.0' fill='rgba(201,168,32,0.3)'/%3E%3C/svg%3E");
  background-size: 83px 48px;
  background-attachment: fixed; /* tiles relative to viewport → seamless across section boundaries */
  pointer-events: none;
  z-index: 0;
  opacity: 0.12; /* reduced — pattern is texture, not content */
}
.geo-star > *,
.geo-rosette > *,
.geo-hex > *,
.geo-pattern-light > *,
.geo-diamond > * {
  position: relative;
  z-index: 1;
}

/* Dark navy sections — same motif, light-on-dark colorway */
.geo-pattern-dark {
  position: relative;
  overflow: hidden;
}
.geo-pattern-dark::before {
  content: '';
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83.1' height='48.0'%3E%3Cg transform='translate(41.6,24.0)' fill='none' stroke='rgba(0,0,0,0.10)' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M-41.6,-56.0 L-32.3,-40.0 L-13.9,-40.0 L-23.1,-24.0 L-13.9,-8.0 L-32.3,-8.0 L-41.6,8.0 L-50.8,-8.0 L-69.3,-8.0 L-60.0,-24.0 L-69.3,-40.0 L-50.8,-40.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M41.6,-56.0 L50.8,-40.0 L69.3,-40.0 L60.0,-24.0 L69.3,-8.0 L50.8,-8.0 L41.6,8.0 L32.3,-8.0 L13.9,-8.0 L23.1,-24.0 L13.9,-40.0 L32.3,-40.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M124.7,-56.0 L133.9,-40.0 L152.4,-40.0 L143.2,-24.0 L152.4,-8.0 L133.9,-8.0 L124.7,8.0 L115.5,-8.0 L97.0,-8.0 L106.2,-24.0 L97.0,-40.0 L115.5,-40.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M-83.1,-32.0 L-73.9,-16.0 L-55.4,-16.0 L-64.7,-0.0 L-55.4,16.0 L-73.9,16.0 L-83.1,32.0 L-92.4,16.0 L-110.9,16.0 L-101.6,0.0 L-110.9,-16.0 L-92.4,-16.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M0.0,-32.0 L9.2,-16.0 L27.7,-16.0 L18.5,-0.0 L27.7,16.0 L9.2,16.0 L0.0,32.0 L-9.2,16.0 L-27.7,16.0 L-18.5,0.0 L-27.7,-16.0 L-9.2,-16.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M83.1,-32.0 L92.4,-16.0 L110.9,-16.0 L101.6,-0.0 L110.9,16.0 L92.4,16.0 L83.1,32.0 L73.9,16.0 L55.4,16.0 L64.7,0.0 L55.4,-16.0 L73.9,-16.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M-41.6,-8.0 L-32.3,8.0 L-13.9,8.0 L-23.1,24.0 L-13.9,40.0 L-32.3,40.0 L-41.6,56.0 L-50.8,40.0 L-69.3,40.0 L-60.0,24.0 L-69.3,8.0 L-50.8,8.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M41.6,-8.0 L50.8,8.0 L69.3,8.0 L60.0,24.0 L69.3,40.0 L50.8,40.0 L41.6,56.0 L32.3,40.0 L13.9,40.0 L23.1,24.0 L13.9,8.0 L32.3,8.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M124.7,-8.0 L133.9,8.0 L152.4,8.0 L143.2,24.0 L152.4,40.0 L133.9,40.0 L124.7,56.0 L115.5,40.0 L97.0,40.0 L106.2,24.0 L97.0,8.0 L115.5,8.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M-83.1,16.0 L-73.9,32.0 L-55.4,32.0 L-64.7,48.0 L-55.4,64.0 L-73.9,64.0 L-83.1,80.0 L-92.4,64.0 L-110.9,64.0 L-101.6,48.0 L-110.9,32.0 L-92.4,32.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M0.0,16.0 L9.2,32.0 L27.7,32.0 L18.5,48.0 L27.7,64.0 L9.2,64.0 L0.0,80.0 L-9.2,64.0 L-27.7,64.0 L-18.5,48.0 L-27.7,32.0 L-9.2,32.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M83.1,16.0 L92.4,32.0 L110.9,32.0 L101.6,48.0 L110.9,64.0 L92.4,64.0 L83.1,80.0 L73.9,64.0 L55.4,64.0 L64.7,48.0 L55.4,32.0 L73.9,32.0 Z' transform='translate(1.0,1.0)'/%3E%3C/g%3E%3Cg transform='translate(41.6,24.0)' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M-41.6,-56.0 L-32.3,-40.0 L-13.9,-40.0 L-23.1,-24.0 L-13.9,-8.0 L-32.3,-8.0 L-41.6,8.0 L-50.8,-8.0 L-69.3,-8.0 L-60.0,-24.0 L-69.3,-40.0 L-50.8,-40.0 Z'/%3E%3Cpath d='M41.6,-56.0 L50.8,-40.0 L69.3,-40.0 L60.0,-24.0 L69.3,-8.0 L50.8,-8.0 L41.6,8.0 L32.3,-8.0 L13.9,-8.0 L23.1,-24.0 L13.9,-40.0 L32.3,-40.0 Z'/%3E%3Cpath d='M124.7,-56.0 L133.9,-40.0 L152.4,-40.0 L143.2,-24.0 L152.4,-8.0 L133.9,-8.0 L124.7,8.0 L115.5,-8.0 L97.0,-8.0 L106.2,-24.0 L97.0,-40.0 L115.5,-40.0 Z'/%3E%3Cpath d='M-83.1,-32.0 L-73.9,-16.0 L-55.4,-16.0 L-64.7,-0.0 L-55.4,16.0 L-73.9,16.0 L-83.1,32.0 L-92.4,16.0 L-110.9,16.0 L-101.6,0.0 L-110.9,-16.0 L-92.4,-16.0 Z'/%3E%3Cpath d='M0.0,-32.0 L9.2,-16.0 L27.7,-16.0 L18.5,-0.0 L27.7,16.0 L9.2,16.0 L0.0,32.0 L-9.2,16.0 L-27.7,16.0 L-18.5,0.0 L-27.7,-16.0 L-9.2,-16.0 Z'/%3E%3Cpath d='M83.1,-32.0 L92.4,-16.0 L110.9,-16.0 L101.6,-0.0 L110.9,16.0 L92.4,16.0 L83.1,32.0 L73.9,16.0 L55.4,16.0 L64.7,0.0 L55.4,-16.0 L73.9,-16.0 Z'/%3E%3Cpath d='M-41.6,-8.0 L-32.3,8.0 L-13.9,8.0 L-23.1,24.0 L-13.9,40.0 L-32.3,40.0 L-41.6,56.0 L-50.8,40.0 L-69.3,40.0 L-60.0,24.0 L-69.3,8.0 L-50.8,8.0 Z'/%3E%3Cpath d='M41.6,-8.0 L50.8,8.0 L69.3,8.0 L60.0,24.0 L69.3,40.0 L50.8,40.0 L41.6,56.0 L32.3,40.0 L13.9,40.0 L23.1,24.0 L13.9,8.0 L32.3,8.0 Z'/%3E%3Cpath d='M124.7,-8.0 L133.9,8.0 L152.4,8.0 L143.2,24.0 L152.4,40.0 L133.9,40.0 L124.7,56.0 L115.5,40.0 L97.0,40.0 L106.2,24.0 L97.0,8.0 L115.5,8.0 Z'/%3E%3Cpath d='M-83.1,16.0 L-73.9,32.0 L-55.4,32.0 L-64.7,48.0 L-55.4,64.0 L-73.9,64.0 L-83.1,80.0 L-92.4,64.0 L-110.9,64.0 L-101.6,48.0 L-110.9,32.0 L-92.4,32.0 Z'/%3E%3Cpath d='M0.0,16.0 L9.2,32.0 L27.7,32.0 L18.5,48.0 L27.7,64.0 L9.2,64.0 L0.0,80.0 L-9.2,64.0 L-27.7,64.0 L-18.5,48.0 L-27.7,32.0 L-9.2,32.0 Z'/%3E%3Cpath d='M83.1,16.0 L92.4,32.0 L110.9,32.0 L101.6,48.0 L110.9,64.0 L92.4,64.0 L83.1,80.0 L73.9,64.0 L55.4,64.0 L64.7,48.0 L55.4,32.0 L73.9,32.0 Z'/%3E%3C/g%3E%3Ccircle cx='83.1' cy='48.0' r='2.0' fill='rgba(243,211,91,0.32)'/%3E%3C/svg%3E");
  background-size: 83px 48px;
  pointer-events: none;
  animation: geoPatternDrift 60s linear infinite;
  will-change: transform;
  opacity: 0.12; /* reduced — pattern should not compete with content */
}
@keyframes geoPatternDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(83px, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .geo-pattern-dark::before { animation: none; }
}

/* .geo-diamond (or any .geo-* motif class) on a navy/dark section
   background needs the light-on-dark colorway instead of the
   default navy-on-light one. */
.section-dark.geo-star::before, .section-navy.geo-star::before,
.section-dark.geo-rosette::before, .section-navy.geo-rosette::before,
.section-dark.geo-hex::before, .section-navy.geo-hex::before,
.section-dark.geo-pattern-light::before, .section-navy.geo-pattern-light::before,
.section-dark.geo-diamond::before, .section-navy.geo-diamond::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83.1' height='48.0'%3E%3Cg transform='translate(41.6,24.0)' fill='none' stroke='rgba(0,0,0,0.10)' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M-41.6,-56.0 L-32.3,-40.0 L-13.9,-40.0 L-23.1,-24.0 L-13.9,-8.0 L-32.3,-8.0 L-41.6,8.0 L-50.8,-8.0 L-69.3,-8.0 L-60.0,-24.0 L-69.3,-40.0 L-50.8,-40.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M41.6,-56.0 L50.8,-40.0 L69.3,-40.0 L60.0,-24.0 L69.3,-8.0 L50.8,-8.0 L41.6,8.0 L32.3,-8.0 L13.9,-8.0 L23.1,-24.0 L13.9,-40.0 L32.3,-40.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M124.7,-56.0 L133.9,-40.0 L152.4,-40.0 L143.2,-24.0 L152.4,-8.0 L133.9,-8.0 L124.7,8.0 L115.5,-8.0 L97.0,-8.0 L106.2,-24.0 L97.0,-40.0 L115.5,-40.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M-83.1,-32.0 L-73.9,-16.0 L-55.4,-16.0 L-64.7,-0.0 L-55.4,16.0 L-73.9,16.0 L-83.1,32.0 L-92.4,16.0 L-110.9,16.0 L-101.6,0.0 L-110.9,-16.0 L-92.4,-16.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M0.0,-32.0 L9.2,-16.0 L27.7,-16.0 L18.5,-0.0 L27.7,16.0 L9.2,16.0 L0.0,32.0 L-9.2,16.0 L-27.7,16.0 L-18.5,0.0 L-27.7,-16.0 L-9.2,-16.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M83.1,-32.0 L92.4,-16.0 L110.9,-16.0 L101.6,-0.0 L110.9,16.0 L92.4,16.0 L83.1,32.0 L73.9,16.0 L55.4,16.0 L64.7,0.0 L55.4,-16.0 L73.9,-16.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M-41.6,-8.0 L-32.3,8.0 L-13.9,8.0 L-23.1,24.0 L-13.9,40.0 L-32.3,40.0 L-41.6,56.0 L-50.8,40.0 L-69.3,40.0 L-60.0,24.0 L-69.3,8.0 L-50.8,8.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M41.6,-8.0 L50.8,8.0 L69.3,8.0 L60.0,24.0 L69.3,40.0 L50.8,40.0 L41.6,56.0 L32.3,40.0 L13.9,40.0 L23.1,24.0 L13.9,8.0 L32.3,8.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M124.7,-8.0 L133.9,8.0 L152.4,8.0 L143.2,24.0 L152.4,40.0 L133.9,40.0 L124.7,56.0 L115.5,40.0 L97.0,40.0 L106.2,24.0 L97.0,8.0 L115.5,8.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M-83.1,16.0 L-73.9,32.0 L-55.4,32.0 L-64.7,48.0 L-55.4,64.0 L-73.9,64.0 L-83.1,80.0 L-92.4,64.0 L-110.9,64.0 L-101.6,48.0 L-110.9,32.0 L-92.4,32.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M0.0,16.0 L9.2,32.0 L27.7,32.0 L18.5,48.0 L27.7,64.0 L9.2,64.0 L0.0,80.0 L-9.2,64.0 L-27.7,64.0 L-18.5,48.0 L-27.7,32.0 L-9.2,32.0 Z' transform='translate(1.0,1.0)'/%3E%3Cpath d='M83.1,16.0 L92.4,32.0 L110.9,32.0 L101.6,48.0 L110.9,64.0 L92.4,64.0 L83.1,80.0 L73.9,64.0 L55.4,64.0 L64.7,48.0 L55.4,32.0 L73.9,32.0 Z' transform='translate(1.0,1.0)'/%3E%3C/g%3E%3Cg transform='translate(41.6,24.0)' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='3.2' stroke-linejoin='round'%3E%3Cpath d='M-41.6,-56.0 L-32.3,-40.0 L-13.9,-40.0 L-23.1,-24.0 L-13.9,-8.0 L-32.3,-8.0 L-41.6,8.0 L-50.8,-8.0 L-69.3,-8.0 L-60.0,-24.0 L-69.3,-40.0 L-50.8,-40.0 Z'/%3E%3Cpath d='M41.6,-56.0 L50.8,-40.0 L69.3,-40.0 L60.0,-24.0 L69.3,-8.0 L50.8,-8.0 L41.6,8.0 L32.3,-8.0 L13.9,-8.0 L23.1,-24.0 L13.9,-40.0 L32.3,-40.0 Z'/%3E%3Cpath d='M124.7,-56.0 L133.9,-40.0 L152.4,-40.0 L143.2,-24.0 L152.4,-8.0 L133.9,-8.0 L124.7,8.0 L115.5,-8.0 L97.0,-8.0 L106.2,-24.0 L97.0,-40.0 L115.5,-40.0 Z'/%3E%3Cpath d='M-83.1,-32.0 L-73.9,-16.0 L-55.4,-16.0 L-64.7,-0.0 L-55.4,16.0 L-73.9,16.0 L-83.1,32.0 L-92.4,16.0 L-110.9,16.0 L-101.6,0.0 L-110.9,-16.0 L-92.4,-16.0 Z'/%3E%3Cpath d='M0.0,-32.0 L9.2,-16.0 L27.7,-16.0 L18.5,-0.0 L27.7,16.0 L9.2,16.0 L0.0,32.0 L-9.2,16.0 L-27.7,16.0 L-18.5,0.0 L-27.7,-16.0 L-9.2,-16.0 Z'/%3E%3Cpath d='M83.1,-32.0 L92.4,-16.0 L110.9,-16.0 L101.6,-0.0 L110.9,16.0 L92.4,16.0 L83.1,32.0 L73.9,16.0 L55.4,16.0 L64.7,0.0 L55.4,-16.0 L73.9,-16.0 Z'/%3E%3Cpath d='M-41.6,-8.0 L-32.3,8.0 L-13.9,8.0 L-23.1,24.0 L-13.9,40.0 L-32.3,40.0 L-41.6,56.0 L-50.8,40.0 L-69.3,40.0 L-60.0,24.0 L-69.3,8.0 L-50.8,8.0 Z'/%3E%3Cpath d='M41.6,-8.0 L50.8,8.0 L69.3,8.0 L60.0,24.0 L69.3,40.0 L50.8,40.0 L41.6,56.0 L32.3,40.0 L13.9,40.0 L23.1,24.0 L13.9,8.0 L32.3,8.0 Z'/%3E%3Cpath d='M124.7,-8.0 L133.9,8.0 L152.4,8.0 L143.2,24.0 L152.4,40.0 L133.9,40.0 L124.7,56.0 L115.5,40.0 L97.0,40.0 L106.2,24.0 L97.0,8.0 L115.5,8.0 Z'/%3E%3Cpath d='M-83.1,16.0 L-73.9,32.0 L-55.4,32.0 L-64.7,48.0 L-55.4,64.0 L-73.9,64.0 L-83.1,80.0 L-92.4,64.0 L-110.9,64.0 L-101.6,48.0 L-110.9,32.0 L-92.4,32.0 Z'/%3E%3Cpath d='M0.0,16.0 L9.2,32.0 L27.7,32.0 L18.5,48.0 L27.7,64.0 L9.2,64.0 L0.0,80.0 L-9.2,64.0 L-27.7,64.0 L-18.5,48.0 L-27.7,32.0 L-9.2,32.0 Z'/%3E%3Cpath d='M83.1,16.0 L92.4,32.0 L110.9,32.0 L101.6,48.0 L110.9,64.0 L92.4,64.0 L83.1,80.0 L73.9,64.0 L55.4,64.0 L64.7,48.0 L55.4,32.0 L73.9,32.0 Z'/%3E%3C/g%3E%3Ccircle cx='83.1' cy='48.0' r='2.0' fill='rgba(243,211,91,0.32)'/%3E%3C/svg%3E");
  opacity: 0.12; /* reduced for dark backgrounds */
}

/* ── 4. SECTION TITLE GEO ─────────────────────────────────────
   Premium editorial heading style — title with short
   centred gold rule underneath                              */

.section-title-geo {
  position: relative;
  display: inline-block;
}
.section-title-geo::after {
  content: '';
  display: block;
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 2px;
  margin: .875rem auto 0;
}

/* ── 5. CARD GOLD CORNER ACCENT ──────────────────────────────
   Ultra-subtle top-left gold triangle on featured cards    */

[data-geo-card] {
  position: relative;
  overflow: hidden;
}
[data-geo-card]::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 28px 28px 0 0;
  border-color: rgba(243,211,91,.18) transparent transparent transparent;
  pointer-events: none;
  z-index: 0;
}

/* ── 6. HERO GEOMETRIC SHAPES ────────────────────────────────
   The floating diamond/parallelogram shapes in the hero
   are the primary Islamic-inspired geometry motif          */

.hero-shape {
  position: absolute;
  border-radius: 4px;
  opacity: .055;
  pointer-events: none;
}
.hero-shape-a {
  width: 280px; height: 80px;
  background: linear-gradient(135deg, var(--gold), var(--blue));
  top: 18%; right: 8%;
  transform: rotate(-18deg) skewX(-12deg);
}
.hero-shape-b {
  width: 200px; height: 60px;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  top: 42%; right: 14%;
  transform: rotate(-18deg) skewX(-12deg);
}
.hero-shape-c {
  width: 120px; height: 36px;
  background: var(--red);
  top: 60%; right: 10%;
  transform: rotate(-18deg) skewX(-12deg);
}

/* ── 7. ISLAMICALLY-INSPIRED SECTION DIVIDER ─────────────────
   Gold gradient horizontal rule between sections           */

.islamic-divider {
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,168,32,.4) 20%,
    rgba(243,211,91,.85) 50%,
    rgba(201,168,32,.4) 80%,
    transparent 100%
  );
  margin: var(--sp-8) 0;
  border-radius: 2px;
}

/* ── 8. PROGRAM CATEGORY BADGE ───────────────────────────────
   Gold pill badge with geometric diamond prefix            */

.program-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: rgba(243,211,91,.12);
  border: 1px solid rgba(243,211,91,.32);
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
}
.program-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── 9. PREMIUM GOLD QUOTE MARK ──────────────────────────────
   For testimonial / story cards                            */

.story-card::before {
  content: '\201C';
  position: absolute;
  top: 1.25rem; left: 1.5rem;
  font-size: 4rem;
  line-height: 1;
  color: rgba(243,211,91,.15);
  font-family: Georgia, serif;
  pointer-events: none;
  z-index: 0;
}

/* ── 10. HERO ATMO GLOW ──────────────────────────────────────
   Atmospheric radial glow over hero — adds depth          */

.hero-atmo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 80% 40%, rgba(31,90,166,.28) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 15% 70%, rgba(243,211,91,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 11. CTA BANNER GEOMETRIC ACCENTS ────────────────────────
   Two large faded diamonds in CTA section corners         */

.cta-geo-l,
.cta-geo-r {
  position: absolute;
  width: 320px; height: 320px;
  transform: rotate(45deg);
  pointer-events: none;
}
.cta-geo-l {
  bottom: -100px; left: -80px;
  border: 1.5px solid rgba(243,211,91,.1);
}
.cta-geo-r {
  top: -100px; right: -80px;
  border: 1.5px solid rgba(255,64,64,.12);
}

/* ── 12. ISLAMIC STAR WATERMARK ──────────────────────────────
   Faint 8-point star centred behind stats / economy section */

.islamic-star-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.islamic-star-bg svg {
  width: min(480px, 80vw);
  height: auto;
  opacity: .035;
}

/* ── 14. FOOTER ORNAMENTAL TOP BAND ──────────────────────────
   Targets the existing `.footer-geo-band` hook already present
   in every page's markup. A slender gold gradient seam with a
   centred diamond mark — the same "centre ornament" language as
   the bismillah-bar, used once, at the single most natural
   structural seam on the page (content → footer).            */

.footer-geo-band {
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,168,32,.45) 22%,
    rgba(243,211,91,.8) 50%,
    rgba(201,168,32,.45) 78%,
    transparent 100%
  );
}
.footer-geo-band::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(243,211,91,.5);
}

/* ── 15. ARCH-INSPIRED FRAME ──────────────────────────────────
   A single faint pointed-arch outline used behind feature
   imagery (e.g. the About section portrait) to nod toward
   Islamic architecture without becoming literal ornament.
   Pure background decoration — sits behind real content,
   never competes with it for attention.                      */

.arch-accent {
  position: relative;
}
.arch-accent::before {
  content: '';
  position: absolute;
  top: -2.5rem; left: 50%;
  width: 84%; height: 68%;
  transform: translateX(-50%);
  border: 2px solid rgba(243,211,91,.4);
  border-radius: 50% 50% 8px 8px / 38% 38% 8px 8px;
  pointer-events: none;
  z-index: -1;
}

/* ── 16. ORNAMENTAL BORDER (sparing use) ─────────────────────
   A refined double-line gold border with small corner ticks,
   reserved for the one or two most important callouts on a
   page (e.g. a featured testimonial or highlighted offer) —
   not a general-purpose card border.                         */

.ornament-border {
  position: relative;
  border: 1px solid rgba(243,211,91,.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(243,211,91,.16),
    var(--sh-md);
}
.ornament-border::before,
.ornament-border::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
  border: 2.5px solid var(--gold);
  opacity: .8;
}
.ornament-border::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
  border-radius: 4px 0 0 0;
}
.ornament-border::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
  border-radius: 0 0 4px 0;
}

/* ── 17. CRESCENT MOTIF ──────────────────────────────────────
   A minimal crescent-and-star mark, sized for inline use next
   to an eyebrow label or section kicker. Used sparingly — at
   most once or twice per page — as a quiet cultural nod rather
   than a repeated decorative flourish.                       */

.crescent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em; height: 1em;
  flex-shrink: 0;
}
.crescent-mark svg { width: 100%; height: 100%; display: block; }

/* ── 18. SECTION SEAM DIVIDER (diamond) ──────────────────────
   A quieter alternative to .islamic-divider for seams that
   should feel like a pause rather than a statement — a short
   centred line flanked by a single gold diamond.             */

.seam-divider {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  margin: 0 auto;
  max-width: 220px;
}
.seam-divider::before,
.seam-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,32,.55));
}
.seam-divider::after { background: linear-gradient(90deg, rgba(201,168,32,.55), transparent); }
.seam-divider-diamond {
  width: 8px; height: 8px; flex-shrink: 0;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(243,211,91,.5);
}

/* ── 13. REDUCED MOTION ──────────────────────────────────────
   All decorative animations respect the user preference   */

@media (prefers-reduced-motion: reduce) {
  .bismillah-bar {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .geo-pattern-dark::before { animation: none; }
}