/* ==========================================================================
   smartmortgage.ae — Dubai mortgage brokerage
   One-page landing. Vanilla CSS, no build step.

   RTL RULE: this file uses CSS LOGICAL PROPERTIES only.
   Never write left/right/margin-left/text-align:right — the page flips to
   dir="rtl" for Arabic and Persian and physical properties will not mirror.
   Use: margin-inline-start, padding-inline, inset-inline-end, text-align:start
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from assets/logo.png */
  --navy-900: #0B1B3F;
  --navy-800: #0F2050;
  --navy-700: #14265C;
  --navy-600: #1E3577;
  --teal-700: #0A6F68;
  --teal-600: #0E8C84;
  --teal-500: #12A79C;
  /* Button fill only. The logo teal (#0E8C84) gives white text just 4.12:1,
     under the 4.5:1 AA floor; this is a shade darker and passes at 4.9:1,
     while staying visually indistinguishable from the brand accent. */
  --teal-cta:  #0C7F78;
  --teal-300: #4FC3B5;
  --teal-100: #D6F0EC;

  /* Neutrals — cool, not cream */
  --paper:    #F2F5F8;
  --paper-2:  #E8EDF3;
  --white:    #FFFFFF;
  --ink:      #0D1526;
  --muted:    #5A6880;
  --muted-2:  #8896AB;  /* decorative only — 3.0:1 on white, below AA */
  --muted-3:  #66738C;  /* smallest readable copy — 4.8:1 on white */
  --line:     #DCE3EC;
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Single-use signal colour: the "approved" state. Nowhere else. */
  --gold:     #C08B3E;

  /* Type */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Rhythm — 8px scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(11, 27, 63, 0.06), 0 2px 8px rgba(11, 27, 63, 0.04);
  --shadow:    0 2px 4px rgba(11, 27, 63, 0.06), 0 8px 24px rgba(11, 27, 63, 0.08);
  --shadow-lg: 0 8px 16px rgba(11, 27, 63, 0.08), 0 24px 64px rgba(11, 27, 63, 0.16);

  --wrap: 1200px;
  --measure: 68ch;

  --header-h: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* An author `display` rule (.btn, .form__back, .tabs__panel) outranks the UA
   stylesheet's [hidden]{display:none}, so hidden elements would still paint.
   The form's Back / Continue / Submit buttons depend on this. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: 200;
  background: var(--navy-700);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: 0; text-decoration: none; }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

/* Display face: Archivo at expanded width — reads like carved bank signage.
   This is the page's typographic signature. */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112, "wght" 650;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--navy-900);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); letter-spacing: -0.014em; line-height: 1.25; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-block-end: 0; }

/* The eyebrow encodes section identity in the utility face */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  background: var(--teal-600);
  flex: none;
}

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--muted);
  max-inline-size: var(--measure);
  line-height: 1.68;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Dark-ground inversions */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .lede { color: rgba(255, 255, 255, 0.74); }
.on-dark .eyebrow { color: var(--teal-300); }
.on-dark .eyebrow::before { background: var(--teal-300); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: clamp(var(--s-8), 8vw, var(--s-10)); }
.section--tight { padding-block: clamp(var(--s-7), 5vw, var(--s-8)); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy-900); }

.section-head { max-inline-size: 760px; margin-block-end: var(--s-8); }
.section-head .lede { margin-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px var(--s-6);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--teal-cta); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--teal-700); box-shadow: var(--shadow); }

.btn--navy { background: var(--navy-700); color: var(--white); }
.btn--navy:hover { background: var(--navy-800); }

.btn--ghost { border-color: var(--line); color: var(--navy-700); background: var(--white); }
.btn--ghost:hover { border-color: var(--navy-700); background: var(--white); }

.btn--ghost-light { border-color: rgba(255,255,255,.28); color: var(--white); }
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.btn--sm { padding: 9px var(--s-4); font-size: 0.87rem; }
.btn--block { inline-size: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Arrow glyph flips with writing direction */
.btn .arrow, .link-arrow .arrow { transition: transform .2s var(--ease); display: inline-block; }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow,
[dir="rtl"] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--teal-700);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.header.is-stuck {
  border-block-end-color: var(--line);
  box-shadow: 0 2px 20px rgba(11, 27, 63, 0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  block-size: var(--header-h);
  transition: block-size .25s var(--ease);
}
.header.is-stuck .header__inner { block-size: 68px; }

.brand { flex: none; display: flex; align-items: center; }
.brand img {
  /* logo-wordmark.png is cropped to its ink bounds (5.6:1), so this number is
     the actual visible wordmark height — the original file was ~50% padding,
     which is why a larger CSS value there still looked small. */
  block-size: 46px;
  inline-size: auto;
  transition: block-size .25s var(--ease);
}
.header.is-stuck .brand img { block-size: 38px; }

.nav { margin-inline-start: auto; }
/* nowrap matters: without it a header that is one word too wide silently
   wraps nav items onto a second line instead of visibly overflowing, which
   is easy to miss. Dutch and German labels are the tightest fit. */
.nav__links { display: flex; align-items: center; gap: 20px; }
.nav__links a { white-space: nowrap; }
.nav__foot { display: none; }   /* drawer-only; revealed in the mobile query */
.nav__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy-700);
  padding-block: var(--s-2);
  position: relative;
}
.nav__links a:hover { text-decoration: none; color: var(--teal-700); }
.nav__links a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background: var(--teal-600);
  transition: inline-size .22s var(--ease);
}
.nav__links a:hover::after { inline-size: 100%; }

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy-700);
  white-space: nowrap;
}
.header__phone:hover { color: var(--teal-700); text-decoration: none; }
.header__phone svg { inline-size: 15px; block-size: 15px; flex: none; }

/* --------------------------------------------------------------------------
   7. Language switcher
   -------------------------------------------------------------------------- */
.lang { position: relative; flex: none; }

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-700);
  background: var(--white);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.lang__toggle:hover { border-color: var(--navy-600); }
.lang__toggle svg { inline-size: 15px; block-size: 15px; flex: none; }
.lang__current { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; }
.lang__chev { transition: transform .22s var(--ease); }
.lang__toggle[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-inline-size: 190px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  inline-size: 100%;
  padding: 9px var(--s-3);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-align: start;
  color: var(--ink);
  transition: background-color .16s var(--ease);
}
.lang__item:hover { background: var(--paper); }
.lang__item[aria-current="true"] { color: var(--teal-700); font-weight: 600; background: var(--teal-100); }
.lang__native { font-size: 0.8rem; color: var(--muted-3); font-family: var(--font-mono); }
.lang__item[aria-current="true"] .lang__native { color: var(--teal-700); }

/* Mobile menu toggle */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  align-items: center;
  flex: none;
}
.burger span {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background: var(--navy-700);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(var(--s-8), 7vw, var(--s-9)) clamp(var(--s-8), 8vw, var(--s-10));
}

/* Ambient ground: a soft teal wash plus a faint grid derived from the
   logo mark's geometry. Deliberately low-contrast — the file panel is the
   thing that should be noticed. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: 70%;
  block-size: 150%;
  background: radial-gradient(closest-side, rgba(18, 167, 156, 0.20), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  align-items: center;
}

.hero h1 { color: var(--white); margin-block-end: var(--s-5); }
.hero h1 em {
  font-style: normal;
  color: var(--teal-300);
}

.hero__sub {
  font-size: clamp(1.04rem, 1.4vw, 1.19rem);
  color: rgba(255, 255, 255, 0.76);
  max-inline-size: 54ch;
  margin-block-end: var(--s-6);
  line-height: 1.65;
}

.hero__cta { margin-block-end: var(--s-7); }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line-dark);
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}
.hero__points svg { inline-size: 16px; block-size: 16px; color: var(--teal-300); flex: none; }

/* --------------------------------------------------------------------------
   9. SIGNATURE — the "Your file" panel
   -------------------------------------------------------------------------- */
.filecard {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.filecard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--line-dark);
  margin-block-end: var(--s-5);
}
.filecard__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-block-end: var(--s-1);
}
.filecard__ref {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: var(--white);
  letter-spacing: 0.01em;
}

/* The single gold moment on the page */
.filecard__stamp {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(192, 139, 62, 0.5);
  border-radius: 4px;
  padding: 5px var(--s-2);
  white-space: nowrap;
  flex: none;
  background: rgba(192, 139, 62, 0.09);
}

.filecard__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-block-end: var(--s-5);
}
.filecard__metaitem {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: var(--s-3);
}
.filecard__metaitem dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
  margin-block-end: 3px;
}
.filecard__metaitem dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.94rem;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.filecard__stages { display: flex; flex-direction: column; gap: 2px; }

.fstage {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px var(--s-3);
  border-radius: var(--radius-sm);
  transition: background-color .3s var(--ease);
}
.fstage__dot {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.42);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.fstage__name {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.46);
  transition: color .3s var(--ease);
}
.fstage__tag {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-300);
  opacity: 0;
  transition: opacity .3s var(--ease);
  flex: none;
}

.fstage.is-active { background: rgba(18, 167, 156, 0.11); }
.fstage.is-active .fstage__dot {
  border-color: var(--teal-500);
  background: var(--teal-600);
  color: var(--white);
}
.fstage.is-active .fstage__name { color: var(--white); font-weight: 600; }
.fstage.is-active .fstage__tag { opacity: 1; }

.filecard__foot {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-dark);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.44);
  line-height: 1.55;
}

/* Load-in sequence */
@media (prefers-reduced-motion: no-preference) {
  .filecard { animation: card-in .7s var(--ease) both; }
  .fstage { opacity: 0; animation: stage-in .5s var(--ease) both; }
  .fstage:nth-child(1) { animation-delay: .40s; }
  .fstage:nth-child(2) { animation-delay: .52s; }
  .fstage:nth-child(3) { animation-delay: .64s; }
  .fstage:nth-child(4) { animation-delay: .76s; }
  .fstage:nth-child(5) { animation-delay: .88s; }
  .hero__inview > * { animation: rise-in .65s var(--ease) both; }
  .hero__inview > *:nth-child(1) { animation-delay: .02s; }
  .hero__inview > *:nth-child(2) { animation-delay: .09s; }
  .hero__inview > *:nth-child(3) { animation-delay: .16s; }
  .hero__inview > *:nth-child(4) { animation-delay: .23s; }
  .hero__inview > *:nth-child(5) { animation-delay: .30s; }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes stage-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Stats strip
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
.stat { padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--teal-600); }
.stat__num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--s-2);
}
.stat__label { font-size: 0.88rem; color: var(--muted); line-height: 1.4; }

/* --------------------------------------------------------------------------
   11. Services — expanding cards
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }

.svc {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  text-align: start;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
/* The card is a div (a <button> may not contain an <h3>). The toggle button
   at the foot stretches its hit area over the whole card instead. */
.svc__hint::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.svc:has(.svc__hint:focus-visible) { outline: 3px solid var(--teal-500); outline-offset: 3px; }
.svc__hint:focus-visible { outline: none; }
.svc:hover { border-color: var(--teal-600); box-shadow: var(--shadow); transform: translateY(-2px); }
.svc.is-open { border-color: var(--teal-600); box-shadow: var(--shadow); }

.svc__icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-sm);
  background: var(--teal-100);
  color: var(--teal-700);
  display: grid;
  place-items: center;
  flex: none;
}
.svc__icon svg { inline-size: 20px; block-size: 20px; }

.svc h3 { font-size: 1.05rem; }

.svc__hint {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-block-start: auto;
  transition: color .2s var(--ease);
  text-align: start;
  padding: 0;
}
.svc:hover .svc__hint, .svc.is-open .svc__hint { color: var(--teal-700); }
.svc__plus { transition: transform .25s var(--ease); }
.svc.is-open .svc__plus { transform: rotate(45deg); }

.svc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.svc.is-open .svc__body { grid-template-rows: 1fr; }
.svc__bodyinner { overflow: hidden; }
.svc__body p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  padding-block-start: var(--s-3);
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Islamic home finance band
   -------------------------------------------------------------------------- */
.islamic { position: relative; overflow: hidden; }
.islamic::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -8%;
  inline-size: 46%;
  block-size: 120%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(18, 167, 156, 0.16), transparent 70%);
  pointer-events: none;
}
.islamic .wrap { position: relative; z-index: 1; }

.islamic__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  align-items: start;
}

.islamic__note {
  margin-block-start: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border-inline-start: 2px solid var(--teal-500);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.tabs__list {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  margin-block-end: var(--s-5);
}
.tabs__tab {
  flex: 1;
  padding: 11px var(--s-3);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  transition: background-color .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--white); }
.tabs__tab[aria-selected="true"] { background: var(--white); color: var(--navy-900); }

/* Reserve room for the tallest panel so switching tabs does not make the
   whole section jump. */
.tabs__panels { min-block-size: 300px; }
.tabs__panel { animation: fade-in .3s var(--ease) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tabs__panel h3 { color: var(--white); margin-block-end: var(--s-2); font-size: 1.3rem; }
.tabs__arabic {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-300);
  margin-block-end: var(--s-4);
}
.tabs__panel p { color: rgba(255, 255, 255, 0.76); font-size: 0.97rem; margin-block-end: var(--s-5); }

.tabs__facts { display: grid; gap: var(--s-3); }
.tabs__facts li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}
.tabs__facts svg { inline-size: 17px; block-size: 17px; color: var(--teal-300); flex: none; margin-block-start: 3px; }

/* --------------------------------------------------------------------------
   13. Why us
   -------------------------------------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
.why__item { display: flex; flex-direction: column; gap: var(--s-3); }
.why__icon {
  inline-size: 38px;
  block-size: 38px;
  color: var(--teal-700);
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--teal-100);
}
.why__icon svg { inline-size: 19px; block-size: 19px; }
.why__item p { font-size: 0.94rem; color: var(--muted); line-height: 1.62; margin: 0; }

/* --------------------------------------------------------------------------
   14. Process — the five Dubai stages
   -------------------------------------------------------------------------- */
.process { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }

/* Connecting rail sits behind the markers. It must terminate at the centre of
   the first and last marker, not at an arbitrary percentage, or it dangles
   past step 05. Column width = (100% - 4 gaps) / 5; marker centre = +20px. */
.process::before {
  content: "";
  position: absolute;
  inset-block-start: 19px;
  inset-inline-start: 20px;
  inset-inline-end: calc((100% - (4 * var(--s-5))) / 5 - 20px);
  block-size: 2px;
  background: var(--line);
  z-index: 0;
}

.step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s-3); }
.step__marker {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  color: var(--muted-2);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.step.is-lit .step__marker { border-color: var(--teal-600); background: var(--teal-600); color: var(--white); }
.step h3 { font-size: 1rem; }
.step p { font-size: 0.89rem; color: var(--muted); line-height: 1.58; margin: 0; }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.quotes { position: relative; }
.quotes__viewport { overflow: hidden; }
.quotes__track {
  display: flex;
  transition: transform .5s var(--ease);
}
/* Track offset is set inline by JS as a logical-safe translate percentage */
.quote {
  flex: 0 0 100%;
  padding-inline-end: var(--s-5);
}
.quote__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  box-shadow: var(--shadow-sm);
}
.quote__stars { display: flex; gap: 3px; color: var(--gold); margin-block-end: var(--s-4); }
.quote__stars svg { inline-size: 17px; block-size: 17px; }
.quote__text {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 106, "wght" 500;
  font-size: clamp(1.14rem, 2vw, 1.48rem);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--navy-900);
  margin-block-end: var(--s-5);
  text-wrap: pretty;
}
.quote__who { display: flex; align-items: center; gap: var(--s-3); }
.quote__avatar {
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  flex: none;
}
.quote__name { font-weight: 600; font-size: 0.95rem; color: var(--navy-900); }
.quote__role { font-size: 0.83rem; color: var(--muted); }

.quotes__controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}
.quotes__btn {
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-700);
  display: grid;
  place-items: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.quotes__btn:hover { border-color: var(--navy-700); background: var(--navy-700); color: var(--white); }
.quotes__btn svg { inline-size: 17px; block-size: 17px; }
[dir="rtl"] .quotes__btn svg { transform: scaleX(-1); }

.quotes__dots { display: flex; gap: var(--s-2); margin-inline-start: auto; }
.quotes__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .22s var(--ease), inline-size .22s var(--ease);
}
.quotes__dot[aria-current="true"] { background: var(--teal-600); inline-size: 24px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { max-inline-size: 860px; }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__item:first-child { border-block-start: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  inline-size: 100%;
  padding: var(--s-5) 0;
  text-align: start;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108, "wght" 600;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  letter-spacing: -0.012em;
  color: var(--navy-900);
  line-height: 1.35;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--teal-700); }

.faq__sign {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--teal-700);
  transition: transform .28s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
  margin-block-start: 2px;
}
.faq__q[aria-expanded="true"] .faq__sign {
  transform: rotate(45deg);
  border-color: var(--teal-600);
  background: var(--teal-100);
}

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__ainner { overflow: hidden; }
.faq__a p {
  padding-block-end: var(--s-5);
  padding-inline-end: var(--s-8);
  color: var(--muted);
  font-size: 0.97rem;
  margin: 0;
  max-inline-size: var(--measure);
}

/* --------------------------------------------------------------------------
   17. Qualifier form
   -------------------------------------------------------------------------- */
.qual { position: relative; overflow: hidden; }
.qual::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: 50%;
  inline-size: 60%;
  block-size: 160%;
  background: radial-gradient(closest-side, rgba(18, 167, 156, 0.17), transparent 70%);
  pointer-events: none;
}
.qual .wrap { position: relative; z-index: 1; }

.qual__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  align-items: start;
}

.qual__assure { display: grid; gap: var(--s-4); margin-block-start: var(--s-6); }
.qual__assure li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
}
.qual__assure svg { inline-size: 17px; block-size: 17px; color: var(--teal-300); flex: none; margin-block-start: 3px; }

.qual__alt {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line-dark);
}
.qual__altlabel {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
  margin-block-end: var(--s-3);
}

/* The form card.

   It is a LIGHT card sitting inside `section.qual.on-dark`, which sets
   color:#fff on the section. Anything in here without its own colour would
   inherit white and vanish against the white card — the choice-tile labels
   did exactly that, and so did text typed into the inputs, because the reset
   gives form controls `color: inherit`. Re-assert the light palette at the
   card boundary so nothing downstream can inherit white. */
.form {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  box-shadow: var(--shadow-lg);
}
.form h1, .form h2, .form h3 { color: var(--navy-900); }
.form input, .form textarea, .form select { color: var(--ink); }

.form__progress { margin-block-end: var(--s-6); }
.form__ptop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-3);
}
.form__pstep {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.form__ptitle { font-weight: 600; font-size: 0.95rem; color: var(--navy-900); }
.form__pbar { block-size: 4px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.form__pfill {
  block-size: 100%;
  inline-size: 33.33%;
  background: var(--teal-600);
  border-radius: 99px;
  transition: inline-size .4s var(--ease);
}

/* Fieldsets carry a default border, padding and min-inline-size:min-content
   that would break the grid children. Reset all three. */
.form__step {
  display: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.form__step.is-active { display: block; animation: step-in .35s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.form__legend {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 110, "wght" 620;
  font-size: clamp(1.24rem, 2.2vw, 1.55rem);
  letter-spacing: -0.02em;
  color: var(--navy-900);
  line-height: 1.2;
  margin: 0 0 var(--s-2);
  padding: 0;
}
.form__hint { font-size: 0.9rem; color: var(--muted); margin-block-end: var(--s-5); }

/* Choice tiles */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choices--sub { margin-block-start: var(--s-5); }

.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
}
.choice__face {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  block-size: 100%;
  pointer-events: none;
}
.choice input:hover + .choice__face { border-color: var(--teal-600); }
.choice input:focus-visible + .choice__face { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.choice input:checked + .choice__face {
  border-color: var(--teal-600);
  background: var(--teal-100);
  box-shadow: inset 0 0 0 1px var(--teal-600);
}
.choice__tick {
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex: none;
  display: grid;
  place-items: center;
  color: transparent;
  background: var(--white);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.choice input:checked + .choice__face .choice__tick {
  border-color: var(--teal-600);
  background: var(--teal-600);
  color: var(--white);
}
.choice__tick svg { inline-size: 11px; block-size: 11px; }
.choice__text { font-size: 0.94rem; font-weight: 500; line-height: 1.35; }

.subhead {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--s-3);
}

/* Text fields */
.fields { display: grid; gap: var(--s-4); }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.87rem; font-weight: 600; color: var(--navy-900); }
.field .req { color: var(--teal-700); }

.field input, .field textarea {
  inline-size: 100%;
  padding: 13px var(--s-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.97rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-3); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(18, 167, 156, 0.16);
}
.field textarea { resize: vertical; min-block-size: 84px; }
.field.has-error input, .field.has-error textarea { border-color: #C2413C; }

.field__err {
  font-size: 0.82rem;
  color: #C2413C;
  display: none;
  align-items: center;
  gap: 5px;
}
.field.has-error .field__err { display: flex; }

/* Phone input with fixed country prefix — mirrors correctly in RTL */
.phone-group { display: flex; }
.phone-group__prefix {
  display: grid;
  place-items: center;
  padding-inline: var(--s-4);
  border: 1.5px solid var(--line);
  border-inline-end: none;
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--muted);
  flex: none;
  direction: ltr;
}
.phone-group input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  direction: ltr;
  text-align: start;
}
[dir="rtl"] .phone-group input { text-align: start; }

/* Consent */
.consent { display: flex; gap: var(--s-3); align-items: flex-start; margin-block-start: var(--s-2); }
.consent input {
  inline-size: 19px;
  block-size: 19px;
  margin: 2px 0 0;
  accent-color: var(--teal-600);
  flex: none;
}
.consent label { font-size: 0.84rem; color: var(--muted); line-height: 1.5; font-weight: 400; }
.consent.has-error label { color: #C2413C; }

.form__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}
.form__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  padding: var(--s-2);
}
.form__back:hover { color: var(--navy-700); }
.form__back svg { inline-size: 15px; block-size: 15px; }
[dir="rtl"] .form__back svg { transform: scaleX(-1); }
.form__nav .btn { margin-inline-start: auto; }

.form__note {
  font-size: 0.79rem;
  color: var(--muted-3);
  text-align: center;
  margin-block-start: var(--s-4);
  line-height: 1.5;
}

/* Honeypot — present for Netlify, invisible to people */
.hp { position: absolute; inset-inline-start: -9999px; opacity: 0; block-size: 0; overflow: hidden; }

/* Success state */
.form__done { display: none; text-align: center; padding-block: var(--s-5); }
.form__done.is-active { display: block; animation: step-in .4s var(--ease) both; }
.form__doneicon {
  inline-size: 62px;
  block-size: 62px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-700);
  display: grid;
  place-items: center;
  margin: 0 auto var(--s-5);
}
.form__doneicon svg { inline-size: 28px; block-size: 28px; }
.form__done h3 { font-size: 1.5rem; margin-block-end: var(--s-3); }
.form__done p { color: var(--muted); max-inline-size: 42ch; margin-inline: auto; margin-block-end: var(--s-5); }

.form__error {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: #FDF2F2;
  border: 1px solid #F3CFCF;
  font-size: 0.89rem;
  color: #8F2E2A;
  margin-block-start: var(--s-4);
  line-height: 1.55;
}
.form__error.is-active { display: flex; }
.form__errortext { margin: 0; }

/* The failure state must offer a way through, not just an apology. */
.form__errorwa {
  background: #075E54;   /* WhatsApp dark brand — white text at 7.7:1 */
  color: #fff;
  border-color: transparent;
  white-space: normal;
}
.form__errorwa:hover { background: #04463F; color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.66); padding-block: var(--s-8) var(--s-6); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-7);
  padding-block-end: var(--s-7);
  border-block-end: 1px solid var(--line-dark);
}
.footer__logo {
  block-size: 46px;
  inline-size: auto;
  margin-block-end: var(--s-4);
  /* The wordmark is navy-on-white; invert it for the dark ground */
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
.footer__about { font-size: 0.9rem; line-height: 1.65; max-inline-size: 46ch; margin-block-end: var(--s-5); }

.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
  margin: 0 0 var(--s-4);
  font-weight: 500;
}
.footer__list { display: grid; gap: var(--s-3); }
.footer__list a, .footer__list span { font-size: 0.91rem; color: rgba(255, 255, 255, 0.72); }
.footer__list a:hover { color: var(--teal-300); text-decoration: none; }
.footer__list .mono { font-size: 0.89rem; }

.social { display: flex; gap: var(--s-2); }
.social a {
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.social a:hover { border-color: var(--teal-500); color: var(--teal-300); background: rgba(18,167,156,.1); }
.social svg { inline-size: 17px; block-size: 17px; }

.footer__legal {
  padding-block-start: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.44);
}
.footer__legal a { color: rgba(255, 255, 255, 0.6); }
.footer__legal a:hover { color: var(--teal-300); }
.footer__legal .spacer { margin-inline-start: auto; }

.disclaimer {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
  max-inline-size: 90ch;
  margin-block-start: var(--s-5);
}

/* --------------------------------------------------------------------------
   19. Floating elements
   -------------------------------------------------------------------------- */
.wa {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 90;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: #1DA851;   /* white glyph at 3.1:1, clears the 3:1 graphics floor */
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(29, 168, 81, 0.42);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.wa:hover { transform: scale(1.06); box-shadow: 0 8px 30px rgba(29, 168, 81, 0.55); text-decoration: none; }
.wa svg { inline-size: 28px; block-size: 28px; }

/* Sticky mobile CTA — appears once the hero has scrolled past */
.mobilebar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 95;
  display: none;
  gap: var(--s-2);
  padding: var(--s-3);
  padding-block-end: max(var(--s-3), env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.mobilebar.is-up { transform: translateY(0); }
.mobilebar .btn { flex: 1; padding-inline: var(--s-3); }

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
  .reveal-stagger.is-in > * { opacity: 1; transform: none; }
  .reveal-stagger.is-in > *:nth-child(1) { transition-delay: .00s; }
  .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .06s; }
  .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .12s; }
  .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .18s; }
  .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .24s; }
  .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .30s; }
  .reveal-stagger.is-in > *:nth-child(7) { transition-delay: .36s; }
  .reveal-stagger.is-in > *:nth-child(8) { transition-delay: .42s; }
}

/* --------------------------------------------------------------------------
   21. Script-specific language faces
   -------------------------------------------------------------------------- */
:lang(ar), :lang(ar) .display, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) .quote__text, :lang(ar) .form__legend, :lang(ar) .faq__q {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  font-variation-settings: normal;
  letter-spacing: 0;
}
:lang(fa), :lang(fa) .display, :lang(fa) h1, :lang(fa) h2, :lang(fa) h3,
:lang(fa) .quote__text, :lang(fa) .form__legend, :lang(fa) .faq__q {
  font-family: "Vazirmatn", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-variation-settings: normal;
  letter-spacing: 0;
}
/* Arabic and Persian need a touch more leading and slightly larger body size */
:lang(ar) body, :lang(fa) body { line-height: 1.85; font-size: 17.5px; }
:lang(ar) h1, :lang(fa) h1 { line-height: 1.28; }
:lang(ar) h2, :lang(fa) h2 { line-height: 1.32; }
:lang(ar) h3, :lang(fa) h3 { line-height: 1.45; }

/* Latin figures and identifiers stay LTR inside RTL text.
   Phone numbers are matched by attribute so every instance is covered —
   header, mobile drawer, the qualifier CTA and the footer alike. Without
   this a number renders as "0000 000 50 971+". */
[dir="rtl"] .mono,
[dir="rtl"] .filecard__ref,
[dir="rtl"] .stat__num,
[dir="rtl"] .header__phone,
[dir="rtl"] .nav__phone,
[dir="rtl"] [data-config="phoneLabel"],
[dir="rtl"] [data-config="email"],
[dir="rtl"] .footer__list .mono { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] [data-config="phoneLabel"],
[dir="rtl"] [data-config="email"] { display: inline-block; }
[dir="rtl"] .stat { text-align: start; }
[dir="rtl"] .stat__num { text-align: start; }

/* Keep the eyebrow rule on the correct side and the uppercase off Arabic script */
[dir="rtl"] .eyebrow { letter-spacing: 0; }
:lang(ar) .eyebrow, :lang(fa) .eyebrow,
:lang(ar) .subhead, :lang(fa) .subhead,
:lang(ar) .form__pstep, :lang(fa) .form__pstep,
:lang(ar) .footer h4, :lang(fa) .footer h4,
:lang(ar) .filecard__label, :lang(fa) .filecard__label,
:lang(ar) .qual__altlabel, :lang(fa) .qual__altlabel,
:lang(ar) .svc__hint, :lang(fa) .svc__hint,
:lang(ar) .tabs__arabic, :lang(fa) .tabs__arabic { text-transform: none; letter-spacing: 0.02em; }

/* Google Translate widget — mounted but never shown; we only use its engine */
#google_translate_element { display: none !important; }
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .islamic__grid, .qual__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .process::before { display: none; }

  /* The full nav plus the enlarged logo will not fit below ~1100px, so the
     links collapse into the drawer here rather than being crammed. */
  .burger { display: flex; }
  .header__phone,
  .header__cta { display: none; }

  /* Only the anchor links collapse into the drawer. The language switcher
     stays in the header bar — this site's whole point is being multilingual,
     so it must not be buried behind a menu tap.

     The drawer is `absolute`, not `fixed`: .header carries a backdrop-filter,
     which makes it the containing block for fixed descendants too, and a
     fixed drawer would be clipped to the header's own height. */
  .nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    block-size: calc(100vh - var(--header-h));
    block-size: calc(100dvh - var(--header-h));
    background: var(--white);
    display: block;
    padding: var(--s-5);
    margin: 0;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    border-block-start: 1px solid var(--line);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Anchors are inline by default, so the rule would only span the text */
  .nav__links a {
    display: block;
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav__links a::after { display: none; }

  .nav__foot { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
  .nav__phone, .nav__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 13px var(--s-4);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy-700);
    font-family: var(--font-mono);
  }
  .nav__wa { font-family: var(--font-body); }
  .nav__phone:hover, .nav__wa:hover { border-color: var(--navy-700); text-decoration: none; }
  .nav__phone svg { inline-size: 16px; block-size: 16px; flex: none; }

  /* Language switcher and burger sit together at the inline end */
  .header__actions { margin-inline-start: auto; }
  .lang__menu { inline-size: max-content; min-inline-size: 200px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
  .mobilebar { display: flex; }
  .wa { inset-block-end: 84px; inline-size: 50px; block-size: 50px; }
  .wa svg { inline-size: 25px; block-size: 25px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer__about { grid-column: 1 / -1; }
  .tabs__list { flex-direction: column; }
  .faq__a p { padding-inline-end: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }

  /* The wordmark is 5.6:1, so 46px would be 260px wide — more than a phone
     header can hold alongside the language switcher and the burger. Scale it
     down and tighten the row so nothing overflows. */
  .brand img,
  .header.is-stuck .brand img { block-size: 32px; }
  .header__inner { gap: var(--s-3); }
  .lang__toggle { padding-inline: var(--s-2); gap: 4px; }
  .lang__toggle > svg:first-of-type { display: none; }   /* globe icon */
  .footer__logo { block-size: 38px; }
  .services { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; gap: var(--s-5); }
  .step { flex-direction: row; align-items: flex-start; gap: var(--s-4); }
  .step__marker { inline-size: 34px; block-size: 34px; font-size: 0.75rem; }
  .choices { grid-template-columns: 1fr; }
  .filecard__meta { grid-template-columns: 1fr; }
  .filecard__metaitem { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
  .filecard__metaitem dt { margin-block-end: 0; }
  .hero__points { flex-direction: column; gap: var(--s-3); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__legal .spacer { margin-inline-start: 0; }
  .quotes__dots { display: none; }
  .btn-row .btn { inline-size: 100%; }
  .form__nav { flex-wrap: wrap; }
  .form__nav .btn { inline-size: 100%; margin-inline-start: 0; order: -1; }
  .form__back { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   23. Reduced motion — nothing moves, nothing auto-advances
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
  .svc:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .wa, .mobilebar, .quotes__controls, .form__nav { display: none !important; }
  .hero, .section--navy, .footer { background: #fff !important; color: #000 !important; }
  .on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: #000 !important; }
}

@media (max-width: 400px) {
  .brand img,
  .header.is-stuck .brand img { block-size: 28px; }
}