/* وهج public site, v2: the brand's own identity. Light only: a marketing page
   keeps its colours whatever the device setting. Fonts: Reem Kufi 700 for the
   wordmark (as the approved logos), Readex Pro for everything else (as the
   approved marketing masters). Both SIL OFL, served from this origin. */
@font-face {
  font-family: 'ReadexPro';
  src: url('/fonts/ReadexPro-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'ReemKufi';
  src: url('/fonts/ReemKufi-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --green: #126a60;
  --green-600: #18796c;
  --green-800: #0d5049;
  --glow: #2e9483;
  --facade: #0a3f39;
  --yellow: #ffb300;
  --amber: #f59e0b;
  --sun-light: #ffc83d;
  --cream: #fff7e8;
  --mint: #cfe6df;
  --night: #0f1513;
  --champagne: #ebddbb;
  --halo: #ffe7b0;
  --ink: #183b36;
  --ink-soft: #526660;
  --bg: #fffdf8;
  --card: #ffffff;
  --tonal: #fbf4e6;
  --line: #e9e3d6;
  --line-strong: #7d8a85;
  --font-text: 'ReadexPro', Tahoma, Arial, sans-serif;
  --font-mark: 'ReemKufi', 'ReadexPro', sans-serif;
  --touch: 48px;
  --radius: 14px;
  --radius-lg: 20px;
  --content: 1120px;
  --gutter: max(16px, calc((100% - var(--content)) / 2 + 16px));
  font-family: var(--font-text);
  font-size: 100%;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
}
/* Keyboard focus: the brand green on the light grounds (at least 5.8:1), the
   yellow on the hero's green and the footer's night (at least 3.5:1); the
   amber is about 2:1 on the light grounds. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--yellow);
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--green);
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
h1,
h2,
h3 {
  line-height: 1.25;
  overflow-wrap: anywhere;
  font-weight: 600;
  margin: 0 0 12px;
}
h1 {
  font-size: clamp(1.9rem, 2.2vw + 1.2rem, 2.6rem);
}
h2 {
  font-size: clamp(1.5rem, 1vw + 1.1rem, 1.9rem);
}
h3 {
  font-size: 1.15rem;
  margin-top: 12px;
}
p {
  max-width: 68ch;
  margin: 0 0 12px;
}
.skip-link {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: 16px;
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus {
  transform: none;
}

/* The lockup: green «وهج» in Reem Kufi and WAHAJ in Readex Pro on white; yellow
   and mint on green or night (the approved logos). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand img {
  width: 58px;
  height: auto;
}
.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.wordmark {
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: 2rem;
  color: var(--green);
  line-height: 1.1;
}
.brand-lines {
  display: grid;
  gap: 4px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--line);
}
.brand-sub {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.latin {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px var(--gutter);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 var(--yellow);
}
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: 14px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover {
  background: var(--tonal);
  color: var(--green);
}
/* Inside the link: on a phone the row scrolls and would clip a ring drawn
   outside it. */
.site-nav a:focus-visible {
  outline-offset: -3px;
}

/* Hero: the icon's green with its glow, the yellow wordmark, cream and mint text.
   The glow sits behind the icon, away from the text. Gradient positions are
   physical, and right to left puts the icon in the left column: its centre is
   21.25% + 2px of the hero up to the 1120px content width (16px gutter, 32px
   gap, 0.85fr of 2fr), then 50% - 320px. On a phone the icon tops the
   column. */
.hero {
  --glow-at: max(calc(50% - 320px), calc(21.25% + 2px)) 35%;
  position: relative;
  isolation: isolate;
  color: var(--cream);
  padding: 56px var(--gutter) 64px;
  background:
    radial-gradient(
      circle at var(--glow-at),
      rgba(46, 148, 131, 0.65) 0,
      rgba(46, 148, 131, 0) 320px
    ),
    linear-gradient(180deg, var(--green) 0%, var(--green-800) 100%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 32px;
  max-width: var(--content);
  margin: 0 auto;
}
.hero-lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 12px 0 4px;
}
.hero-wordmark {
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: clamp(3.2rem, 6vw + 1rem, 5.5rem);
  line-height: 1;
  color: var(--yellow);
  margin: 0;
}
.hero-sub {
  font-weight: 500;
  font-size: clamp(1.3rem, 1.4vw + 0.8rem, 1.9rem);
  color: var(--cream);
  margin: 0;
}
.hero h1 {
  color: var(--cream);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem);
  margin-bottom: 16px;
}
.hero-intro {
  color: var(--mint);
  font-size: 1.1rem;
}
.hero .mark {
  justify-self: center;
  width: min(100%, 380px);
  filter: drop-shadow(0 18px 40px rgba(6, 8, 7, 0.25));
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 8px 24px;
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.hero a.link-light {
  color: var(--cream);
  font-weight: 500;
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  text-decoration-color: var(--yellow);
}

.section {
  padding: 56px var(--gutter);
}
.section-inner {
  max-width: var(--content);
  margin: 0 auto;
}
.section-head {
  max-width: 62ch;
  margin-bottom: 28px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 8px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
}
.lede {
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 0;
  box-shadow: 0 1px 0 rgba(24, 59, 54, 0.04);
}
.card h3 {
  margin-top: 0;
}
.card p {
  margin-bottom: 0;
  color: var(--ink-soft);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 12px;
}
.tonal {
  background: var(--tonal);
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px;
  align-items: start;
}
.note {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  border-inline-start: 4px solid var(--amber);
  font-size: 0.95rem;
}
ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
ul.plain li {
  padding-inline-start: 24px;
  position: relative;
}
ul.plain li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--yellow);
}

.faq {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  padding-block: 12px;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  margin-inline-start: auto;
  color: var(--green);
  font-weight: 700;
  font-size: 1.3rem;
}
.faq[open] summary::after {
  content: '−';
}
.faq p {
  color: var(--ink-soft);
  margin-bottom: 16px;
}

/* Footer: the night ground of the dark logo, the yellow wordmark, mint links. */
.site-footer {
  padding: 40px var(--gutter);
  background: var(--night);
  color: var(--mint);
  font-size: 0.95rem;
}
.footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
  align-items: start;
}
.site-footer .wordmark {
  color: var(--yellow);
}
.site-footer .brand-sub {
  color: var(--cream);
}
.site-footer .brand-lines {
  border-inline-start-color: var(--glow);
}
.site-footer .latin {
  color: var(--mint);
}
.site-footer nav {
  display: grid;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--halo);
}
.site-footer .brand img {
  width: 46px;
}
.copyright {
  color: var(--champagne);
  margin: 0;
}

@media (max-width: 760px) {
  /* The icon's centre: 32px down, plus half of its 220px width at 333:270. */
  .hero {
    --glow-at: 50% 121px;
    padding-block: 32px 40px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero .mark {
    order: -1;
    width: min(100%, 220px);
  }
  .hero-wordmark {
    font-size: 3.4rem;
  }
  .section {
    padding-block: 36px;
  }
  .site-nav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .brand img {
    width: 48px;
  }
  .wordmark {
    font-size: 1.7rem;
  }
}