/* Base, container, grid and section layout */
html {
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
}

/* Hide content briefly while a stored Arabic preference loads */
.i18n-pending body {
  opacity: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.section {
  position: relative;
  padding-block: var(--section-pad);
}

.section--dark {
  background: var(--grad-navy);
  color: var(--color-on-dark);
  isolation: isolate;
  overflow: hidden;
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.section--dark .section-head p {
  color: var(--color-on-dark-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.section-head--center .eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

/* SplitText line and word masks: a little room so descenders (g, y, p) are not clipped */
h2 > div,
.hero__title > div,
.mission__text > div {
  padding-block: 0.1em 0.16em;
  margin-block: -0.1em -0.16em;
}

/* --line is animated by animations.js so the gold side lines grow in */
.eyebrow::before,
.eyebrow::after {
  transform: scaleX(var(--line, 1));
}

.section--dark .eyebrow {
  color: var(--gold);
}

.text-gold {
  color: var(--gold);
}

.grid {
  display: grid;
  gap: var(--space-3);
}

/* Islamic geometric pattern layer, the tile lives in the SVG sprite */
.pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--gold);
  opacity: 0.07;
  pointer-events: none;
}

/* Taller than the section so the slow scroll parallax never shows an edge */
.pattern {
  top: -15%;
  height: 130%;
}

.pattern--light {
  opacity: 0.05;
}

/* Decor: background ornaments, always behind content (parent section needs isolation: isolate) */
.decor-glow,
.decor-edge,
.decor-jaali,
.decor-watermark,
.decor-divider {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.decor-glow {
  display: block;
  width: clamp(260px, 40vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
}

.decor-glow--gold {
  background: radial-gradient(circle, var(--gold-35) 0%, transparent 70%);
}

.decor-glow--teal {
  background: radial-gradient(circle, var(--teal-14) 0%, transparent 70%);
}

@media (max-width: 767px) {
  .decor-glow {
    width: clamp(200px, 60vw, 300px);
  }
}

/* Pattern only near the section edges, empty in the centre */
.decor-edge {
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 45%, var(--navy) 90%);
  mask-image: radial-gradient(ellipse at center, transparent 45%, var(--navy) 90%);
}

.decor-edge--faint {
  opacity: 0.15;
}

/* Mashrabiya lattice in both top corners, fades toward the centre and the bottom */
.decor-jaali {
  top: 0;
  inset-inline: 0;
  width: 100%;
  height: clamp(120px, 12vw, 180px);
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(to right, var(--navy), transparent 28%, transparent 72%, var(--navy)), linear-gradient(to bottom, var(--navy) 50%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, var(--navy), transparent 28%, transparent 72%, var(--navy)), linear-gradient(to bottom, var(--navy) 50%, transparent);
  mask-composite: intersect;
}

@media (max-width: 639px) {
  .decor-jaali {
    display: none;
  }
}

/* Calligraphy watermark "الغزالي", outline only, split across a section border with two identical copies:
   last child of the upper section (--edge-bottom) and first child of the lower section (--edge-top).
   Each section clips its own copy, and each takes its own color: navy on light, white on .section--dark and .footer (automatic).
   Markup: <div class="decor-watermark decor-watermark--edge-bottom" aria-hidden="true" lang="ar" translate="no">الغزالي</div>
   Both copies of a pair must use the same --wm-size. */
.decor-watermark {
  inset-inline: 0;
  font-family: var(--font-decor);
  font-weight: 700;
  font-size: var(--wm-size, clamp(120px, 18vw, 260px));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--navy);
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
  opacity: 0.12;
  user-select: none;
}

.section--dark .decor-watermark,
.footer .decor-watermark {
  color: var(--white);
  opacity: 0.1;
}

/* Vertical center on the section's bottom edge (upper copy) or top edge (lower copy) */
.decor-watermark--edge-bottom {
  inset-block-end: 0;
  transform: translateY(50%);
}

.decor-watermark--edge-top {
  inset-block-start: 0;
  transform: translateY(-50%);
}

@media (max-width: 639px) {
  .decor-watermark {
    font-size: clamp(80px, 26vw, 130px);
  }
}

/* Star divider: thin gold line, 8-point star, thin gold line */
.decor-divider {
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: min(560px, 70%);
  margin-inline: auto;
}

.decor-divider__line {
  flex: 1;
  height: 1px;
}

.decor-divider__line:first-child {
  background: linear-gradient(to right, transparent, var(--gold));
}

.decor-divider__line:last-child {
  background: linear-gradient(to left, transparent, var(--gold));
}

.decor-divider__star {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: none;
}

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

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

/* Hidden only while a #section link is being jumped to (see index.html and animations.js) */
.hash-jump body > :not(#siteLoader) {
  opacity: 0;
}