/* Aya · Quran lessons, version 2: "illuminated manuscript".
   Lapis, gold and ink on burnished paper, after Mamluk Qur'an illumination.
   Night theme: gold on lapis. Tajweed colours are used only for the verse. */

:root {
  color-scheme: light;

  --paper: #f6f0e1;
  --paper-raised: #fcf9f0;
  --vellum: #efe6d0;
  --ink: #1b1a33;
  --ink-soft: #524e68;
  --rule: #dccfb1;
  --rule-strong: #b8a67d;
  --lapis: #20398a;
  --lapis-deep: #142660;
  --lapis-tint: #e3e7f4;
  --on-lapis: #fcf9f0;
  --gold: #b28a36;
  --gold-ink: #7b5a17;
  --gold-bright: #e2c171;

  --accent: var(--lapis);
  --accent-hover: var(--lapis-deep);
  --on-accent: #fcf9f0;
  --btn-hair: rgba(226, 193, 113, 0.85);
  --focus: #c2560f;

  --band-bg: #142660;
  --band-ink: #f6f0e1;
  --band-soft: #cdd4ee;
  --band-gold: #e2c171;
  --band-rule: rgba(226, 193, 113, 0.32);

  --tbc-bg: #fff0c2;
  --tbc-ink: #4f3b00;
  --tbc-line: #c99a1a;
  --proposed: #6b4fb0;
  --danger: #a8261e;
  --success: #1e6b45;
  --header-bg: rgba(246, 240, 225, 0.93);
  --shadow-soft: 0 1px 0 rgba(27, 26, 51, 0.04), 0 22px 44px -32px rgba(27, 26, 51, 0.5);
  --pattern-opacity: 0.06;

  --tj-qalqalah: #1d63b0;
  --tj-madd: #b0271e;
  --tj-silent: #6a6e76;
  --tj-ghunnah: #19763b;

  --f-ar-display: "Amiri", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", "FreeSerif", serif;
  --f-ar-body: "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", Tahoma, "DejaVu Sans", sans-serif;
  --f-quran: "Amiri Quran", "Amiri", "Noto Naskh Arabic", "Traditional Arabic", "FreeSerif", serif;
  --f-ruqaa: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", "FreeSerif", serif;
  --f-en-display: "EB Garamond", "Lora", Georgia, "Times New Roman", serif;
  --f-en-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --font-body: var(--f-en-body);
  --font-display: var(--f-en-display);
  --leading: 1.65;
  --leading-display: 1.14;
  --body-size: 1.0625rem;

  --step--1: 0.875rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.8rem, 1.35rem + 1.7vw, 2.55rem);

  --radius: 3px;
  --gutter: clamp(16px, 4.5vw, 48px);
  --measure: 38rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d1230;
    --paper-raised: #141a3f;
    --vellum: #11173a;
    --ink: #f1e9d6;
    --ink-soft: #bab4cb;
    --rule: #283067;
    --rule-strong: #4a548e;
    --lapis: #a9bbf7;
    --lapis-deep: #c9d4fb;
    --lapis-tint: #1c2459;
    --on-lapis: #10153a;
    --gold: #cdab5c;
    --gold-ink: #e2c57c;
    --gold-bright: #e8cb84;
    --accent: #e2c57c;
    --accent-hover: #f0d89e;
    --on-accent: #151a3c;
    --btn-hair: rgba(21, 26, 60, 0.55);
    --focus: #f2a65a;
    --band-bg: #19205a;
    --band-ink: #f1e9d6;
    --band-soft: #c4cbe8;
    --band-gold: #e8cb84;
    --band-rule: rgba(232, 203, 132, 0.28);
    --tbc-bg: #4a3a0e;
    --tbc-ink: #ffe7a3;
    --tbc-line: #d9ad3c;
    --proposed: #b9a2f2;
    --danger: #ff8a7a;
    --success: #7ad7a0;
    --header-bg: rgba(13, 18, 48, 0.93);
    --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.2), 0 24px 48px -30px rgba(0, 0, 0, 0.8);
    --pattern-opacity: 0.07;
    --tj-qalqalah: #8cb9f2;
    --tj-madd: #f29a8e;
    --tj-silent: #a9b0b8;
    --tj-ghunnah: #7fd6a0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1230;
  --paper-raised: #141a3f;
  --vellum: #11173a;
  --ink: #f1e9d6;
  --ink-soft: #bab4cb;
  --rule: #283067;
  --rule-strong: #4a548e;
  --lapis: #a9bbf7;
  --lapis-deep: #c9d4fb;
  --lapis-tint: #1c2459;
  --on-lapis: #10153a;
  --gold: #cdab5c;
  --gold-ink: #e2c57c;
  --gold-bright: #e8cb84;
  --accent: #e2c57c;
  --accent-hover: #f0d89e;
  --on-accent: #151a3c;
  --btn-hair: rgba(21, 26, 60, 0.55);
  --focus: #f2a65a;
  --band-bg: #19205a;
  --band-ink: #f1e9d6;
  --band-soft: #c4cbe8;
  --band-gold: #e8cb84;
  --band-rule: rgba(232, 203, 132, 0.28);
  --tbc-bg: #4a3a0e;
  --tbc-ink: #ffe7a3;
  --tbc-line: #d9ad3c;
  --proposed: #b9a2f2;
  --danger: #ff8a7a;
  --success: #7ad7a0;
  --header-bg: rgba(13, 18, 48, 0.93);
  --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.2), 0 24px 48px -30px rgba(0, 0, 0, 0.8);
  --pattern-opacity: 0.07;
  --tj-qalqalah: #8cb9f2;
  --tj-madd: #f29a8e;
  --tj-silent: #a9b0b8;
  --tj-ghunnah: #7fd6a0;
}

/* Per-language type. Letter-spacing is never applied to Arabic: it breaks the joins. */
[lang="ar"] {
  --font-body: var(--f-ar-body);
  --font-display: var(--f-ar-display);
  --leading: 1.95;
  --leading-display: 1.5;
  --body-size: 1.125rem;
  font-family: var(--font-body);
}
[lang="en"] {
  --font-body: var(--f-en-body);
  --font-display: var(--f-en-display);
  --leading: 1.65;
  --leading-display: 1.14;
  --body-size: 1.0625rem;
  font-family: var(--font-body);
}
/* The "English" links on Arabic pages use the Arabic body font's Latin letters,
   so Arabic pages don't download the English font for one word. */
[dir="rtl"] a[hreflang="en"] {
  font-family: var(--f-ar-body);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
}

.page {
  background: var(--paper);
  color: var(--ink);
  font-size: var(--body-size);
  line-height: var(--leading);
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  color: var(--ink);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: var(--leading-display);
}
[lang="en"] h2 {
  font-weight: 600;
}
h3 {
  font-size: var(--step-1);
  line-height: 1.35;
  font-weight: 700;
}
[lang="ar"] h3 {
  line-height: 1.6;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--accent-hover);
}

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

::selection {
  background: color-mix(in srgb, var(--gold) 34%, transparent);
}

[hidden] {
  display: none !important;
}

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

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
[dir="rtl"] .icon--arrow {
  transform: scaleX(-1);
}

.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: 52rem;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.6rem 1rem;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
  color: var(--on-accent);
}

main:focus {
  outline: none;
}

/* Keep anchored sections clear of the sticky header. */
section[id],
.explorer__panel,
.trace {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 8rem);
}
@media (min-width: 1060px) {
  section[id],
  .explorer__panel,
  .trace {
    scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 5.5rem);
  }
}

/* ---------- Review marks (removed from launch builds) ---------- */

.tbc {
  background: var(--tbc-bg);
  color: var(--tbc-ink);
  box-shadow: inset 0 -2px 0 var(--tbc-line);
  border-radius: 2px;
  padding: 0 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.proposed {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--proposed);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.review-badge {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.12rem 0.7rem;
  border: 1px dashed var(--proposed);
  border-radius: 999px;
  color: var(--proposed);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.6;
}
.review-note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
}
.hide-review .tbc {
  background: none;
  box-shadow: none;
  color: inherit;
  padding: 0;
}
.hide-review .proposed {
  text-decoration: none;
}
html.hide-review .review-badge,
html.hide-review .review-note {
  display: none;
}

/* ---------- Ornaments ---------- */

.rosette {
  width: 24px;
  height: 24px;
  color: var(--gold);
  overflow: visible;
}
.rosette__g rect,
.rosette__g circle {
  fill: var(--rosette-fill, none);
  stroke: var(--rosette-stroke, currentColor);
  stroke-width: var(--rosette-width, 1.6);
  stroke-linejoin: round;
}
.rosette--brand {
  width: 40px;
  height: 40px;
  --rosette-fill: var(--lapis);
  --rosette-stroke: var(--gold-bright);
  --rosette-width: 1.4;
}
.rosette--brand circle {
  fill: var(--gold-bright);
}
.rosette--corner {
  width: 18px;
  height: 18px;
  --rosette-fill: var(--lapis);
  --rosette-stroke: var(--gold);
  --rosette-width: 2;
}
.rosette--corner circle {
  fill: var(--gold);
}
.rosette--ornament {
  width: 26px;
  height: 26px;
  --rosette-fill: var(--paper);
  --rosette-width: 1.5;
}
.rosette--band {
  width: 22px;
  height: 22px;
  color: var(--band-gold);
}
.rosette--node {
  width: 60px;
  height: 60px;
  --rosette-fill: var(--lapis);
  --rosette-stroke: var(--gold-bright);
  --rosette-width: 1.2;
}
.rosette--node circle {
  display: none;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--gold);
  margin: 0 0 1rem;
}
.ornament--start {
  justify-content: flex-start;
}
.ornament--start .ornament__rule--start {
  display: none;
}
.ornament__rule {
  height: 1px;
  width: min(7.5rem, 20vw);
}
.ornament__rule--start {
  background: linear-gradient(90deg, transparent, var(--gold));
  transform-origin: right;
}
.ornament__rule--end {
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left;
}
[dir="rtl"] .ornament__rule--start {
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left;
}
[dir="rtl"] .ornament__rule--end {
  background: linear-gradient(90deg, transparent, var(--gold));
  transform-origin: right;
}

/* An illuminated frame: a faint double rule that is always there, with gold drawn over it. */
.illum {
  position: relative;
}
.illum::before,
.illum::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.illum::before {
  inset: 0;
  border: 1px solid var(--rule-strong);
}
.illum::after {
  inset: 6px;
  border: 1px solid var(--rule);
}
.illum__line {
  position: absolute;
  z-index: 1;
  background: var(--gold);
  pointer-events: none;
}
.illum__line--top,
.illum__line--bottom {
  left: -1px;
  right: -1px;
  height: 2px;
}
.illum__line--top {
  top: -1px;
  transform-origin: left;
}
.illum__line--bottom {
  bottom: -1px;
  transform-origin: right;
}
.illum__line--start,
.illum__line--end {
  top: -1px;
  bottom: -1px;
  width: 2px;
}
.illum__line--end {
  inset-inline-end: -1px;
  transform-origin: top;
}
.illum__line--start {
  inset-inline-start: -1px;
  transform-origin: bottom;
}
[dir="rtl"] .illum__line--top {
  transform-origin: right;
}
[dir="rtl"] .illum__line--bottom {
  transform-origin: left;
}
.illum__corner {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  line-height: 0;
}
.illum__corner--ts {
  top: -9px;
  inset-inline-start: -9px;
}
.illum__corner--te {
  top: -9px;
  inset-inline-end: -9px;
}
.illum__corner--be {
  bottom: -9px;
  inset-inline-end: -9px;
}
.illum__corner--bs {
  bottom: -9px;
  inset-inline-start: -9px;
}

.pattern {
  position: relative;
  isolation: isolate;
}
.pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--gold);
  opacity: var(--pattern-opacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--header-bg);
  border-bottom: 1px solid var(--rule);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    backdrop-filter: saturate(1.1) blur(10px);
  }
}
/* Where the menu takes a second row, the header tucks away while the reader scrolls down
   and comes back on the way up (site.js). */
@media (max-width: 1059.98px) {
  .site-header {
    transition: transform 0.25s ease;
  }
  .site-header.is-tucked {
    transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
  }
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.5rem;
  padding-block: 0.55rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
}
.brand:hover {
  color: var(--ink);
}
.brand__text {
  display: grid;
  line-height: 1.05;
}
.brand__name {
  font-family: var(--f-ruqaa);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--lapis);
}
.brand__sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}
[lang="en"] .brand__sub {
  letter-spacing: 0.04em;
}

.nav {
  order: 5;
  flex: 0 0 calc(100% + 2 * var(--gutter));
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar {
  display: none;
}
.nav ul {
  display: flex;
  gap: 0.2rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.1rem;
  white-space: nowrap;
}
.nav a {
  display: inline-block;
  white-space: nowrap;
  padding-block: 0.35rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.nav a:hover {
  color: var(--lapis);
  border-bottom-color: var(--rule-strong);
}
.nav a[aria-current="page"] {
  color: var(--lapis);
  border-bottom-color: var(--gold);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
}
.lang-switch:hover {
  border-color: var(--gold);
  color: var(--lapis);
}
.site-header .header-cta {
  display: none;
}
@media (min-width: 600px) {
  .site-header .header-cta {
    display: inline-flex;
  }
}
@media (min-width: 1060px) {
  .nav {
    order: 0;
    flex: 0 1 auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .nav ul {
    padding: 0;
  }
}

/* ---------- Buttons and links ---------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
[lang="en"] .btn {
  font-weight: 600;
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px var(--btn-hair);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: inset 0 0 0 3px var(--accent-hover), inset 0 0 0 4px var(--btn-hair);
  color: var(--on-accent);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 244, 214, 0.32) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  background: var(--paper-raised);
  border-color: var(--gold);
  color: var(--accent-hover);
}
.btn--small {
  min-height: 40px;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
}
.btn--large {
  min-height: 54px;
  padding: 0.75rem 1.65rem;
  font-size: 1.05rem;
}
.btn--block {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.1rem;
}
.link-arrow:hover {
  border-bottom-color: var(--gold);
}
[lang="en"] .link-arrow {
  font-weight: 600;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  justify-self: start;
}
.center-link {
  text-align: center;
  margin: 2.25rem 0 0;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(3.25rem, 7vw, 6rem);
}
.section--tight {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.section--vellum {
  background: var(--vellum);
}
.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head h2 {
  margin: 0 0 0.5rem;
}
.section-head__intro {
  margin: 0;
  color: var(--ink-soft);
}
.eyebrow {
  margin: 0;
  color: var(--gold-ink);
  font-weight: 700;
  font-size: 0.95rem;
}
[lang="en"] .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
}
.eyebrow--center {
  text-align: center;
}
.lead {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 36em;
  margin: 0;
}
.lead--small {
  font-size: 1.1rem;
}
.muted {
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}
.notice {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-inline-start: 3px solid var(--gold);
  background: var(--paper-raised);
  font-weight: 700;
}
[lang="en"] .notice {
  font-weight: 600;
}
.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
}

.diamonds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.diamonds li {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}
.diamonds li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--gold);
  transform: translateY(-0.1em) rotate(45deg);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: min(60%, 820px);
  height: 100%;
  z-index: -1;
  background-color: var(--gold);
  opacity: var(--pattern-opacity);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to left, #000 20%, transparent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to left, #000 20%, transparent);
  -webkit-mask-size: 60px 60px, 100% 100%;
  mask-size: 60px 60px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
[dir="rtl"] .hero::before {
  inset: 0 auto auto 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right, #000 20%, transparent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right, #000 20%, transparent);
}
.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.35rem, 1.35rem + 3.4vw, 4.1rem);
  line-height: var(--leading-display);
  margin: 0.4em 0 0.45em;
  color: var(--ink);
}
[lang="en"] .display {
  font-weight: 600;
  letter-spacing: -0.012em;
}
[lang="ar"] .display {
  font-size: clamp(2.2rem, 1.3rem + 3vw, 3.7rem);
}
.display--page {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem);
}
[lang="ar"] .display--page {
  font-size: clamp(1.95rem, 1.3rem + 2.3vw, 3rem);
}
.display--center {
  text-align: center;
}
.display .proposed {
  text-underline-offset: 0.25em;
}
.name-note {
  margin: -0.4rem 0 1rem;
  color: var(--gold-ink);
  font-style: italic;
  font-family: var(--f-en-display);
  font-size: 1.15rem;
}
.lang-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.2rem 0 0;
  padding: 0.45rem 0.9rem;
  background: var(--lapis-tint);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius);
}
[lang="en"] .lang-note {
  font-weight: 600;
}
.lang-note .icon {
  color: var(--lapis);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.facts {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.facts li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---------- Verse card ---------- */

.verse-card {
  margin: 12px;
  padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.1rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2rem);
  background: var(--paper-raised);
  box-shadow: var(--shadow-soft);
  container-type: inline-size;
}
.surah-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--band-bg);
  color: var(--band-gold);
  box-shadow: 0 0 0 1px var(--gold), inset 0 0 0 3px var(--band-bg), inset 0 0 0 4px var(--band-rule);
}
.surah-band__name {
  font-family: var(--f-ar-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--band-gold);
}
.surah-band__orn {
  line-height: 0;
}
.verse-card .verse {
  margin: 1.3rem 0 0.6rem;
  padding: 0;
  text-align: center;
  font-family: var(--f-quran);
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.7rem);
  line-height: 2.25;
  color: var(--ink);
}
.verse-card .verse p {
  margin: 0;
}
.tj {
  color: var(--rule-color);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
  text-decoration-skip-ink: none;
  text-decoration-style: var(--rule-line, solid);
}
.tj--qalqalah,
.rule--qalqalah {
  --rule-color: var(--tj-qalqalah);
  --rule-line: dotted;
}
.tj--madd,
.rule--madd {
  --rule-color: var(--tj-madd);
  --rule-line: double;
}
.tj--silent,
.rule--silent {
  --rule-color: var(--tj-silent);
  --rule-line: dashed;
}
.tj--ghunnah,
.rule--ghunnah {
  --rule-color: var(--tj-ghunnah);
  --rule-line: solid;
}
.tj--madd {
  text-decoration-thickness: 3px;
}
.ayah-mark {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.12em;
  margin-inline-start: 0.1em;
}
.ayah-mark__ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
}
.ayah-mark__ring--inner {
  stroke-width: 0.9;
}
.ayah-mark__petals circle {
  fill: var(--gold);
}
.ayah-mark text {
  font-family: var(--f-ar-body);
  font-size: 14px;
  font-weight: 700;
  fill: var(--ink);
}
.verse-caption {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.verse-ref {
  font-weight: 700;
}
.verse-translation {
  font-family: var(--f-en-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  max-width: 30em;
}
.verse-source {
  font-size: 0.8rem;
}
.tj-key {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.tj-key__title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}
.tj-key__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1rem;
}
@container (min-width: 34rem) {
  .tj-key__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tj-key__item {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  align-items: center;
  font-size: 0.88rem;
  line-height: 1.4;
}
.tj-swatch {
  grid-row: span 2;
  width: 1.4rem;
  height: 0.7rem;
  border-bottom: 3px var(--rule-line) var(--rule-color);
}
.tj-key__name {
  font-weight: 700;
  color: var(--rule-color);
}
.tj-key__word {
  font-family: var(--f-quran);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.tj-key__note {
  margin: 0.6rem 0 0;
  text-align: center;
}
.tj-details {
  margin-top: 0.8rem;
  font-size: 0.9rem;
}
.tj-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  list-style-position: inside;
}
.tj-details dl {
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.tj-details__row {
  padding-inline-start: 0.75rem;
  border-inline-start: 3px var(--rule-line) var(--rule-color);
}
.tj-details dt {
  font-weight: 700;
  color: var(--rule-color);
}
.tj-details dd {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- Doors ---------- */

.doors {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 880px) {
  .doors {
    grid-template-columns: 1fr 1fr;
  }
}
.door {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
.door__art {
  display: flex;
  justify-content: center;
  padding: 1.75rem 1.5rem 0;
  background: linear-gradient(var(--vellum), transparent 85%);
}
.arch {
  display: block;
  width: min(100%, 250px);
  height: auto;
}
@media (max-width: 560px) {
  .door__art {
    padding-top: 1.1rem;
  }
  .door__art .arch {
    width: min(100%, 170px);
  }
}
.arch__fill {
  fill: var(--paper-raised);
}
.arch__line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
}
.arch__inner {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
}
.arch__spark {
  fill: var(--gold);
}
.arch__letter {
  font-family: var(--f-ar-display);
  font-weight: 700;
}
.arch__letter--main {
  font-size: 92px;
  fill: var(--lapis);
}
.arch__letter--side {
  font-size: 50px;
  fill: var(--gold-ink);
}
.arch__stand path {
  fill: none;
  stroke: var(--lapis);
  stroke-width: 6.5;
  stroke-linecap: round;
}
.arch__stand .arch__stand-bar {
  stroke: var(--gold);
  stroke-width: 2.5;
}
.arch__cover {
  fill: var(--lapis);
}
.arch__page {
  fill: var(--paper-raised);
  stroke: var(--gold);
  stroke-width: 1.3;
}
.arch__text-line {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.arch__spine {
  stroke: var(--gold);
  stroke-width: 1.3;
}
.door__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.4rem clamp(1.25rem, 3vw, 2.1rem) clamp(1.5rem, 3vw, 2.1rem);
}
.door__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
}
[lang="en"] .door__body h3 {
  font-weight: 600;
}
.door__body p {
  margin: 0;
}
.door__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

/* ---------- Letter from Aya ---------- */

.letter-card {
  padding: clamp(1.9rem, 5vw, 3.4rem) clamp(1.25rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 2.6rem);
  background: var(--paper-raised);
  box-shadow: var(--shadow-soft);
}
.letter-card > p {
  max-width: 38rem;
  margin: 0 auto 1rem;
}
.letter-card .eyebrow {
  margin-bottom: 1.2rem;
}
.letter-card .review-badge {
  display: table;
  margin-inline: auto;
}
.letter-card__greeting {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--lapis);
}
[lang="en"] .letter-card__greeting {
  font-style: italic;
}
.signature {
  margin: 0.4rem auto 0 !important;
  font-family: var(--f-ruqaa);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.4;
  color: var(--gold-ink);
  text-align: end;
}
[lang="en"] .signature {
  text-align: right;
}
.letter-card__more {
  text-align: center;
  margin-top: 1rem !important;
}
.letter-card--full {
  margin-top: 1.5rem;
}

/* ---------- Journey ---------- */

.journey {
  --node: 60px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.journey::before,
.journey::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  bottom: calc(var(--node) / 2);
  inset-inline-start: calc(var(--node) / 2 - 1px);
  width: 2px;
}
.journey::before {
  background: repeating-linear-gradient(var(--rule-strong) 0 4px, transparent 4px 10px);
}
.journey::after {
  background: var(--gold);
  transform-origin: top;
}
.journey__stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: 1.1rem;
  align-content: start;
}
.journey__node {
  grid-row: span 3;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
}
.journey__node .rosette {
  position: absolute;
  inset: 0;
}
.journey__num {
  position: relative;
  font-family: var(--f-ar-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gold-bright);
}
:root[data-theme="dark"] .journey__num {
  color: var(--on-lapis);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .journey__num {
    color: var(--on-lapis);
  }
}
.journey__stage h3 {
  margin: 0.55rem 0 0.1rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
}
[lang="en"] .journey__stage h3 {
  font-weight: 600;
}
.journey__for {
  margin: 0;
  color: var(--gold-ink);
  font-weight: 700;
  font-size: 0.92rem;
}
.journey__stage p:last-child {
  margin: 0.4rem 0 0;
}
@media (min-width: 900px) {
  .journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75rem;
  }
  .journey::before,
  .journey::after {
    top: calc(var(--node) / 2 - 1px);
    bottom: auto;
    height: 2px;
    width: auto;
    inset-inline: calc(100% / 6);
  }
  .journey::before {
    background: repeating-linear-gradient(90deg, var(--rule-strong) 0 4px, transparent 4px 10px);
  }
  .journey::after {
    transform-origin: left;
  }
  [dir="rtl"] .journey::after {
    transform-origin: right;
  }
  .journey__stage {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .journey__node {
    grid-row: auto;
  }
}

/* ---------- Form fields ---------- */

.booking select,
.booking input[type="text"],
.cert-box input[type="text"],
.booking input[type="email"],
.booking input[type="tel"],
.booking textarea {
  min-height: 46px;
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

/* ---------- Bands (lapis) ---------- */

.band {
  position: relative;
  isolation: isolate;
  background: var(--band-bg);
  color: var(--band-ink);
  --focus: var(--band-gold);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--band-gold);
  opacity: 0.07;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Cpath d='M0 30H13M47 30H60M30 0V13M30 47V60'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
}
.band h2 {
  color: var(--band-ink);
  margin: 0.5rem 0;
}
.band p {
  color: var(--band-soft);
}
.band a {
  color: var(--band-gold);
}
.band .link-arrow {
  border-bottom-color: var(--band-rule);
}
.band .review-badge {
  color: var(--band-gold);
  border-color: var(--band-gold);
}
.band .rosette {
  color: var(--band-gold);
}
.rosette--band-head {
  width: 34px;
  height: 34px;
}
.band-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .band-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: start;
    gap: 4rem;
  }
}
.band-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.band-list li {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--band-rule);
  background: rgba(255, 255, 255, 0.035);
  color: var(--band-ink);
}
.band-list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--band-gold);
  transform: translateY(-0.1em) rotate(45deg);
}

/* ---------- Letters teaser ---------- */

.teaser {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 780px) {
  .teaser {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3rem;
  }
}
.teaser__tiles {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 0.6rem;
  justify-content: center;
}
.mini-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  font-family: var(--f-ar-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lapis);
}
.mini-tile--star {
  background: var(--lapis);
  color: var(--on-lapis);
  border-color: var(--lapis);
}
.mini-tile .icon--star {
  position: absolute;
  top: -9px;
  inset-inline-end: -9px;
  width: 24px;
  height: 24px;
  fill: var(--gold);
  stroke: var(--paper-raised);
  stroke-width: 1.2;
}
.teaser__text h2 {
  margin: 0 0 0.5rem;
  font-size: var(--step-2);
}
.teaser__text p {
  margin: 0 0 1.2rem;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 0 3.5rem;
  align-items: start;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .faq {
    grid-template-columns: 1fr 1fr;
  }
}
.faq__item {
  border-top: 1px solid var(--rule);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold-ink);
}
.faq__item[open] summary::after {
  content: "−";
  content: "−" / "";
}
.faq__item h3 {
  margin: 0;
  font-size: 1.1rem;
}
.faq__item p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

/* ---------- Request section ---------- */

.request {
  background: linear-gradient(var(--paper), var(--vellum));
}
.request-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1000px) {
  .request-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
    gap: 4rem;
    align-items: start;
  }
}
.request__intro h2 {
  margin: 0 0 0.6rem;
}
.request__next-title {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.1rem;
}
.request__direct {
  margin: 1.75rem 0 0.5rem;
  font-weight: 700;
}
.request__form {
  margin: 10px;
  padding: clamp(1.25rem, 3.5vw, 2.3rem);
  background: var(--paper-raised);
  box-shadow: var(--shadow-soft);
}
.next-steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.next-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--lapis);
  color: var(--on-lapis);
  box-shadow: inset 0 0 0 2px var(--lapis), inset 0 0 0 3px var(--gold-bright);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}
[lang="ar"] .next-steps li::before {
  content: counter(step, arabic-indic);
}
.direct-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.direct-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.direct-list .icon {
  color: var(--gold-ink);
}

/* ---------- Booking form ---------- */

.booking {
  display: grid;
  gap: 1.15rem;
}
.booking__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.booking__count {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}
.booking__progress {
  display: flex;
  flex: 1;
  gap: 6px;
  max-width: 12rem;
}
.booking__progress span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
  transition: background-color 0.3s ease;
}
.booking__progress span.is-on {
  background: var(--gold);
}
.booking__step {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.booking__legend {
  padding: 0;
  margin: 0 0 0.1rem;
}
.booking__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.45;
}
[lang="en"] .booking__title {
  font-weight: 600;
  line-height: 1.2;
}
.booking__title:focus {
  outline: none;
}
.field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field__label {
  padding: 0;
  font-weight: 700;
}
[lang="en"] .field__label {
  font-weight: 600;
}
.optional {
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.booking input[type="text"],
.booking input[type="email"],
.booking input[type="tel"],
.booking textarea,
.booking select {
  width: 100%;
}
.booking textarea {
  resize: vertical;
  min-height: 5.5rem;
}
.booking [aria-invalid="true"] {
  border-color: var(--danger);
}
[lang="ar"] .booking input[dir="ltr"] {
  text-align: right;
}
.error {
  margin: 0;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 700;
}
.form-status {
  padding: 0.8rem 1rem;
  border: 1px solid var(--danger);
  border-inline-start-width: 4px;
  background: color-mix(in srgb, var(--danger) 7%, var(--paper-raised));
}
.form-status p {
  margin: 0;
}

.choice-grid {
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 520px) {
  .choice-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .choice-grid--levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.panel .choice-grid--3 {
  grid-template-columns: 1fr;
}
.choice-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  padding-inline-end: 2.3rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.choice-card input,
.chip input,
.segmented__opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.choice-card::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  inset-inline-end: 0.95rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 1.5px solid var(--rule-strong);
  transform: rotate(45deg);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.choice-card:hover {
  border-color: var(--gold);
}
.choice-card.is-checked {
  border-color: var(--lapis);
  background: var(--lapis-tint);
  box-shadow: inset 0 0 0 1px var(--lapis);
}
.choice-card.is-checked::after {
  background: var(--gold);
  border-color: var(--gold);
}
.choice-card:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.choice-card__label {
  font-weight: 700;
}
[lang="en"] .choice-card__label {
  font-weight: 600;
}
.choice-card__hint {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.choice-card__sample {
  font-family: var(--f-ar-display);
  font-size: 1.55rem;
  line-height: 1.7;
  color: var(--lapis);
}
.field[data-invalid] .choice-card {
  border-color: var(--danger);
}

.kids {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: var(--vellum);
  border: 1px solid var(--rule);
}
.kids__count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  border-radius: var(--radius);
}
.stepper__btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.stepper__btn:disabled {
  color: var(--rule-strong);
  cursor: default;
}
.stepper__value {
  min-width: 2.4rem;
  text-align: center;
  font-weight: 700;
}
.ages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}
.age {
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
}
.age__label {
  color: var(--ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.chip {
  position: relative;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.3rem 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  font-size: 0.95rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip span:hover {
  border-color: var(--gold);
}
.chip input:checked + span {
  background: var(--lapis);
  border-color: var(--lapis);
  color: var(--on-lapis);
}
.chip input:focus-visible + span,
.segmented__opt input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  justify-self: start;
}
.segmented__opt {
  position: relative;
}
.segmented__opt span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 1.05rem;
  cursor: pointer;
}
.segmented__opt input:checked + span {
  background: var(--lapis);
  color: var(--on-lapis);
}
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.7rem;
  align-items: start;
}
.consent input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.35em 0 0;
  accent-color: var(--lapis);
}
.consent .error {
  grid-column: 1 / -1;
}
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  margin: 0;
  padding: 0.2rem 0.3rem 0.2rem 0.85rem;
  padding-inline: 0.85rem 0.3rem;
  border: 1px solid var(--lapis);
  border-radius: 999px;
  background: var(--lapis-tint);
  font-size: 0.9rem;
  font-weight: 700;
}
.goal-chip__remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.booking__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.booking__nav [data-next],
.booking__nav [data-submit] {
  margin-inline-start: auto;
}
.booking__done {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 1rem 0 0.5rem;
  text-align: center;
}
.booking__done:focus {
  outline: none;
}
.booking__done h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
}
.booking__done p {
  margin: 0;
  max-width: 30rem;
}
.booking__done .next-steps {
  text-align: start;
  margin: 0.5rem 0;
  max-width: 30rem;
}
.rosette--done {
  width: 64px;
  height: 64px;
  --rosette-fill: var(--lapis);
  --rosette-stroke: var(--gold-bright);
  --rosette-width: 1.3;
}
.rosette--done circle {
  fill: var(--gold-bright);
}
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Side panel ---------- */

.panel {
  --panel-from: 100%;
  position: fixed;
  inset: 0;
  width: min(34rem, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
[dir="rtl"] .panel {
  --panel-from: -100%;
}
.panel::backdrop {
  background: rgba(10, 13, 38, 0.55);
}
.panel__frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper-raised);
  border-inline-start: 2px solid var(--gold);
  box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.55);
  transform: translateX(var(--panel-from));
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.panel.is-open .panel__frame {
  transform: none;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(env(safe-area-inset-top, 0px) + 0.9rem) 1.25rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.rosette--panel {
  width: 30px;
  height: 30px;
  --rosette-fill: var(--lapis);
  --rosette-stroke: var(--gold-bright);
}
.rosette--panel circle {
  fill: var(--gold-bright);
}
.panel__title {
  flex: 1;
  margin: 0;
  font-size: var(--step-2);
}
.panel__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.panel__close:hover {
  border-color: var(--gold);
}
.panel__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
}
html.has-panel {
  overflow: hidden;
}
@media (max-width: 640px) {
  .panel {
    width: 100vw;
  }
  .panel__frame {
    border-inline-start: 0;
  }
}

/* ---------- Sticky phone button ---------- */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.7rem var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 0.7rem);
  background: var(--paper-raised);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -14px 30px -24px rgba(0, 0, 0, 0.45);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.sticky-cta.is-visible {
  transform: none;
}
@media (min-width: 761px) {
  .sticky-cta {
    display: none !important;
  }
}

/* ---------- Page heroes ---------- */

.page-hero {
  padding-block: clamp(2.25rem, 5vw, 4.25rem) clamp(2.25rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.page-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero--art .page-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr);
    gap: 3rem;
  }
}
.page-hero__art .arch {
  width: min(100%, 300px);
  margin-inline: auto;
}
.page-hero--letter {
  border-bottom: 0;
  background: var(--vellum);
}

/* ---------- Women: goals ---------- */

.goals {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .goals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1120px) {
  .goals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.goal {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.35rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-soft);
}
.goal h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
}
[lang="en"] .goal h3 {
  font-weight: 600;
}
.goal p {
  margin: 0;
  color: var(--ink-soft);
}
.goal .btn {
  margin-top: auto;
  align-self: flex-start;
}
.rosette--goal {
  width: 30px;
  height: 30px;
}
.glance-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 860px) {
  .glance-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.glance h2 {
  margin: 0 0 1rem;
  font-size: var(--step-2);
}

/* ---------- Lessons ---------- */

.details {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.details__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.details dt {
  font-weight: 700;
  color: var(--ink-soft);
}
.details dd {
  margin: 0;
}
@media (max-width: 540px) {
  .details__row {
    grid-template-columns: 1fr;
  }
}
.fees__note {
  margin: 1rem 0 0;
  text-align: center;
  color: var(--ink-soft);
}
.policies__title {
  margin: 2.5rem 0 0.8rem;
}

/* ---------- Hadith ---------- */

.band--hadith {
  text-align: center;
}
.hadith {
  margin: 0;
}
.hadith blockquote {
  margin: 0;
  font-family: var(--f-ar-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.9;
  color: var(--band-gold);
}
.hadith blockquote p {
  margin: 0;
  color: var(--band-gold);
}
.hadith__translation {
  margin: 0.6rem auto 0;
  max-width: 34rem;
  font-family: var(--f-en-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--band-ink) !important;
}
.hadith figcaption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--band-soft);
}
.ornament--band .ornament__rule--start {
  background: linear-gradient(90deg, transparent, var(--band-gold));
}
.ornament--band .ornament__rule--end {
  background: linear-gradient(90deg, var(--band-gold), transparent);
}
.ornament--band {
  color: var(--band-gold);
}
.ornament--band .rosette--ornament {
  --rosette-fill: var(--band-bg);
}

/* ---------- Letters explorer ---------- */

.explorer {
  display: grid;
  gap: 1.5rem;
}
/* In one column, the letters to choose from come first; choosing one scrolls to it (site.js). */
@media (max-width: 999.98px) {
  .explorer__side {
    order: -1;
  }
}
@media (min-width: 1000px) {
  .explorer {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
  }
  .explorer__side {
    position: sticky;
    top: 6rem;
  }
}
.explorer__panel {
  display: grid;
  gap: 1.6rem;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
.explorer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.explorer__title {
  display: grid;
  justify-items: center;
}
.explorer__glyph {
  font-family: var(--f-ar-display);
  font-weight: 700;
  font-size: clamp(4.4rem, 3rem + 6vw, 6.8rem);
  line-height: 1.35;
  color: var(--lapis);
}
.explorer__name {
  font-weight: 700;
  font-size: 1.2rem;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  cursor: pointer;
}
.icon-btn:hover {
  border-color: var(--gold);
}
.icon-btn--prev .icon {
  transform: scaleX(-1);
}
[dir="rtl"] .icon-btn--prev .icon {
  transform: none;
}
[dir="rtl"] .icon-btn--next .icon {
  transform: scaleX(-1);
}
.explorer__block {
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
}
.explorer__h {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-ink);
}
[lang="en"] .explorer__h {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}
.forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
  gap: 0.6rem;
}
.form-box {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.6rem 0.4rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.form-box__glyph {
  font-family: var(--f-ar-display);
  font-size: 2.6rem;
  line-height: 1.5;
  color: var(--ink);
}
.form-box__label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.4;
}
.forms__note {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.jawf-pill {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.1rem 0.8rem;
  border: 1px dashed var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.jawf-pill.is-active {
  border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--ink);
  font-weight: 700;
}
.track {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.track__curve {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.track__dot {
  fill: var(--paper-raised);
  stroke: var(--rule-strong);
  stroke-width: 2;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.track__dot.is-same {
  fill: var(--lapis-tint);
  stroke: var(--lapis);
}
.track__bracket {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.5;
}
.track__region text {
  font-family: var(--font-body);
  font-size: 17px;
  fill: var(--ink-soft);
}
.track__region.is-active text {
  fill: var(--lapis);
  font-weight: 700;
}
.track__region.is-active .track__bracket {
  stroke: var(--gold);
  stroke-width: 2;
}
.track__halo {
  fill: var(--gold);
  opacity: 0.28;
}
.track__pin {
  fill: var(--gold);
  stroke: var(--paper-raised);
  stroke-width: 2.5;
}
.track__char {
  font-family: var(--f-ar-display);
  font-weight: 700;
  font-size: 30px;
  fill: var(--lapis);
}
.track__marker {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.where__text {
  margin: 0.4rem 0 0;
  font-weight: 700;
}
.where__same,
.where__note {
  margin: 0.3rem 0 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.where__same b {
  font-family: var(--f-ar-display);
  font-size: 1.3rem;
  color: var(--lapis);
}
.trace__board {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin: 0.8rem auto 0;
  background-color: var(--paper);
  background-image: radial-gradient(var(--rule) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  border: 1px solid var(--rule-strong);
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--rule);
  touch-action: none;
}
.trace__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.trace__star {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.trace__star .icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.4;
  transition: fill 0.5s ease, stroke 0.5s ease, transform 0.5s ease;
}
.trace__board.is-earned .trace__star .icon {
  fill: var(--gold);
  stroke: var(--gold-ink);
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 55%, transparent));
}
.trace__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 0.9rem;
  min-height: 2.6rem;
}
.trace__msg {
  margin: 0;
  font-weight: 700;
  color: var(--lapis);
}
.trace__msg.is-success {
  color: var(--success);
}
.stars-box {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
}
.stars-box__text {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stars-box__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--vellum);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.stars-box__bar span {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width 0.5s ease;
}
.explorer__grid-title {
  margin: 0 0 0.7rem;
  font-size: var(--step-2);
}
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: 0.45rem;
}
.tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tile__char {
  font-family: var(--f-ar-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
}
.tile:hover {
  border-color: var(--gold);
}
.tile[aria-pressed="true"] {
  background: var(--lapis);
  border-color: var(--lapis);
  color: var(--on-lapis);
}
.tile__star {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  line-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tile__star .icon {
  width: 15px;
  height: 15px;
  fill: var(--gold);
}
.tile.is-earned .tile__star {
  opacity: 1;
}
.parent-note {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 44rem;
}

/* ---------- Legal and not found ---------- */

.legal {
  padding-block: clamp(2rem, 6vw, 4rem);
}
.legal h1 {
  margin: 0.6rem 0 0.35rem;
}
.legal h2 {
  font-size: var(--step-2);
  margin: 2rem 0 0.5rem;
}
.legal p {
  max-width: var(--measure);
  margin: 0 0 0.85rem;
}
.back-link {
  font-size: var(--step--1);
}
.not-found {
  padding-block: clamp(3rem, 10vw, 7rem);
  text-align: center;
}
.not-found__pair {
  display: grid;
  gap: 2.5rem;
  justify-items: center;
}
.not-found h1,
.not-found h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  margin: 0 0 0.5rem;
}
.rosette--large {
  width: 64px;
  height: 64px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--band-bg);
  color: var(--band-soft);
  padding-block: 2.75rem calc(env(safe-area-inset-bottom, 0px) + 2.75rem);
  font-size: 0.95rem;
  --focus: var(--band-gold);
}
.site-footer a {
  color: var(--band-gold);
}
.footer-grid {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 860px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1.2fr;
    align-items: start;
  }
  .footer-meta {
    grid-column: 1 / -1;
  }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.footer-brand p {
  margin: 0;
}
.footer-brand__name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--band-ink);
}
.footer-brand__name [lang="ar"] {
  font-family: var(--f-ruqaa);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--band-gold);
}
.rosette--footer {
  width: 40px;
  height: 40px;
  color: var(--band-gold);
}
.footer-nav ul,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-contact .icon {
  color: var(--band-gold);
}
.footer-meta {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--band-rule);
  font-size: 0.85rem;
}
.site-footer .tbc {
  color: var(--tbc-ink);
}

/* ---------- Review copy bar (preview file only) ---------- */

.review-bar {
  background: #1b1a33;
  color: #f6f0e1;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.review-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.55rem var(--gutter);
}
.review-bar__label {
  margin: 0;
  margin-inline-end: auto;
}
.review-bar__label span {
  color: #e2c171;
}
.review-bar label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.review-bar select {
  font: inherit;
  color: #1b1a33;
  background: #f6f0e1;
  border: 0;
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  min-height: 32px;
}
.review-bar__langs {
  display: inline-flex;
  border: 1px solid rgba(246, 240, 225, 0.4);
  border-radius: 999px;
  overflow: hidden;
}
.review-bar__langs button {
  font: inherit;
  color: #f6f0e1;
  background: transparent;
  border: 0;
  padding: 0.2rem 0.8rem;
  min-height: 32px;
  cursor: pointer;
}
.review-bar__langs button[aria-pressed="true"] {
  background: #e2c171;
  color: #1b1a33;
}
.review-bar input {
  accent-color: #e2c171;
  width: 1.1rem;
  height: 1.1rem;
}
.review-bar :focus-visible {
  outline: 2px solid #e2c171;
  outline-offset: 2px;
}

/* ---------- Motion (only when the visitor has not asked for less) ---------- */

.motion .illum .illum__line {
  transition: transform 0.55s cubic-bezier(0.55, 0.05, 0.35, 1);
}
.motion .illum .illum__line--end {
  transition-delay: 0.5s;
}
.motion .illum .illum__line--bottom {
  transition-delay: 1s;
}
.motion .illum .illum__line--start {
  transition-delay: 1.5s;
}
.motion .illum .illum__corner {
  transition: opacity 0.5s ease 1.9s, transform 0.5s ease 1.9s;
}
.motion .illum[data-state="pending"] .illum__line--top,
.motion .illum[data-state="pending"] .illum__line--bottom {
  transform: scaleX(0);
}
.motion .illum[data-state="pending"] .illum__line--start,
.motion .illum[data-state="pending"] .illum__line--end {
  transform: scaleY(0);
}
.motion .illum[data-state="pending"] .illum__corner {
  opacity: 0;
  transform: scale(0.4);
}
.motion .ornament .ornament__rule {
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.motion .ornament[data-state="pending"] .ornament__rule {
  transform: scaleX(0);
}
.motion .journey::after {
  transition: transform 1.6s cubic-bezier(0.45, 0.05, 0.3, 1) 0.2s;
}
.motion .journey[data-state="pending"]::after {
  transform: scaleY(0);
}
@media (min-width: 900px) {
  .motion .journey[data-state="pending"]::after {
    transform: scaleX(0);
  }
}
@media (hover: hover) {
  .motion .btn--primary:hover::after {
    transform: translateX(120%);
    transition: transform 0.9s ease;
  }
}
.motion .panel::backdrop {
  animation: fade-in 0.3s ease;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Request form: "Send on WhatsApp" ---------- */

.booking__alt {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rule);
}
.booking__alt .btn {
  gap: 0.45rem;
}

/* ---------- Testimonials (shown only when families have given permission) ---------- */

.quotes {
  display: grid;
  gap: 1rem;
}
@media (min-width: 760px) {
  .quotes {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
}
.quote {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  margin: 0;
  padding: 1.4rem 1.35rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--gold);
  box-shadow: var(--shadow-soft);
}
.quote blockquote {
  margin: 0;
}
.quote blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.7;
}
.quote figcaption {
  color: var(--gold-ink);
  font-weight: 700;
  font-size: 0.92rem;
}
.rosette--quote {
  width: 24px;
  height: 24px;
}
.quotes__note {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---------- Letters explorer: vowel marks, sound, paper practice, certificate ---------- */

.forms--vowels .form-box__glyph {
  color: var(--lapis);
}
.sound-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.9rem;
  min-height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sound-btn:hover {
  border-color: var(--gold);
}
.sound-by {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.print-block .hint {
  margin-bottom: 0.8rem;
}
.print-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.print-block__actions .btn,
.cert-box .btn {
  gap: 0.45rem;
}
.print-block__msg {
  margin: 0.5rem 0 0;
  min-height: 1.4em;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.cert-box {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--paper-raised);
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 4px var(--paper-raised), inset 0 0 0 5px var(--rule);
}
.cert-box[hidden] {
  display: none;
}
.cert-box p {
  margin: 0;
}
.cert-box__title {
  margin: 0;
  font-size: var(--step-1);
}
.cert-box input {
  width: 100%;
}
.cert-box .btn {
  justify-self: start;
  margin-top: 0.3rem;
}
.rosette--cert {
  width: 34px;
  height: 34px;
}

/* ---------- Printing: tracing sheets and the certificate ----------
   The sheets are built by site.js only when asked for, and exist only while printing. */

.print-sheet {
  display: none;
}
@media print {
  html.is-printing body > :not(.print-sheet) {
    display: none !important;
  }
  html.is-printing,
  html.is-printing body {
    background: #fff !important;
  }
  html.is-printing .print-sheet {
    display: block;
    color: #1b1a33;
    font-family: var(--font-body);
  }
  @page {
    size: A4;
    margin: 12mm;
  }
  .print-sheet__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 3mm;
    border-bottom: 0.6mm solid #b28a36;
  }
  .print-sheet__brand {
    font-family: var(--f-ruqaa);
    font-size: 20pt;
    color: #20398a;
  }
  .print-sheet__title {
    font-weight: 700;
    font-size: 13pt;
  }
  .print-sheet__host {
    font-size: 9pt;
    color: #524e68;
  }
  .print-sheet__note {
    margin: 2mm 0 4mm;
    font-size: 10pt;
    color: #524e68;
  }
  .print-row {
    display: flex;
    align-items: center;
    gap: 3mm;
    padding: 2mm 0;
    border-bottom: 0.2mm dashed #dccfb1;
    break-inside: avoid;
  }
  .print-row__model {
    display: grid;
    justify-items: center;
    margin: 0;
    padding: 1mm;
    border: 0.3mm solid #b28a36;
    border-radius: 1mm;
  }
  .print-row__model img,
  .print-row__trace {
    width: 31mm;
    height: 31mm;
  }
  .print-row__model figcaption {
    font-size: 8pt;
    color: #524e68;
  }
  .print-sheet--cert {
    page: cert;
  }
  @page cert {
    size: A4 landscape;
    margin: 10mm;
  }
  .cert {
    display: grid;
    min-height: 180mm;
    padding: 4mm;
    border: 1.2mm solid #20398a;
    break-inside: avoid;
  }
  .cert__frame {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4mm;
    padding: 10mm 16mm;
    border: 0.5mm solid #b28a36;
    text-align: center;
  }
  .cert .rosette {
    width: 22mm;
    height: 22mm;
  }
  .cert__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30pt;
    color: #20398a;
  }
  .cert__awarded {
    margin: 0;
    font-size: 13pt;
    color: #524e68;
  }
  .cert__name {
    min-width: 120mm;
    margin: 0;
    padding: 0 6mm 1mm;
    border-bottom: 0.4mm solid #b28a36;
    font-family: var(--f-ar-body);
    font-size: 28pt;
    font-weight: 700;
  }
  .cert__name--blank {
    border-bottom-style: dotted;
    min-height: 16mm;
  }
  .cert__for {
    max-width: 200mm;
    margin: 0;
    font-size: 14pt;
    line-height: 1.6;
  }
  .cert__foot {
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    margin-top: 6mm;
    font-size: 10pt;
    color: #524e68;
  }
  .cert__sig {
    display: grid;
    justify-items: center;
  }
  .cert__sig-name {
    font-family: var(--f-ruqaa);
    font-size: 24pt;
    color: #20398a;
  }
}

/* ---------- Floating contact button (every page except Letters) ---------- */

.contact-fab {
  position: fixed;
  inset-inline-end: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  justify-items: end;
  gap: 0.6rem;
  transition: bottom 0.3s ease;
}
/* Above the phone's request bar while it shows; out of the way while the request panel is open. */
html.has-sticky .contact-fab {
  bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
}
html.has-panel .contact-fab {
  display: none;
}
.contact-fab__btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  background: var(--lapis);
  color: var(--on-lapis);
  box-shadow: 0 10px 24px -10px rgba(20, 38, 96, 0.75);
  cursor: pointer;
}
.contact-fab__btn:hover {
  background: var(--lapis-deep);
}
.contact-fab__btn .icon {
  width: 26px;
  height: 26px;
}
.contact-fab__icon {
  display: grid;
}
.contact-fab__icon--close,
.contact-fab.is-open .contact-fab__icon--open {
  display: none;
}
.contact-fab.is-open .contact-fab__icon--close {
  display: grid;
}
.contact-fab__menu {
  width: min(19rem, calc(100vw - 32px));
  padding: 0.9rem 0.9rem 0.6rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--gold);
  box-shadow: 0 18px 40px -18px rgba(27, 26, 51, 0.55);
}
.contact-fab__menu[hidden] {
  display: none;
}
.contact-fab__title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--gold-ink);
}
.contact-fab__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.contact-fab__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.4rem 0.3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.contact-fab__list li:first-child .contact-fab__item {
  border-top: 0;
}
a.contact-fab__item:hover .contact-fab__value {
  text-decoration: underline;
}
.contact-fab__item .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.contact-fab__text {
  display: grid;
  min-width: 0;
}
.contact-fab__label {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.contact-fab__value {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.contact-fab__item.is-pending .icon {
  color: var(--ink-soft);
}

/* ---------- About page: contact card ---------- */

.contact-card {
  display: grid;
  gap: 0.8rem;
}
@media (min-width: 860px) {
  .contact-card {
    grid-column: 1 / -1;
  }
}
.contact-card h2,
.contact-card p {
  margin: 0;
}
.contact-card__cta {
  margin-top: 0.2rem;
}

@media print {
  .contact-fab {
    display: none !important;
  }
}