/* ==========================================================================
   Guidance Residential — "The guiding star"
   Lapis & illumination. See design-direction.md
   ========================================================================== */

:root {
  /* palette */
  --lapis: #14285A;
  --lapis-deep: #0E1D44;
  --blue: #005CAB;
  --porcelain: #F0F2F2;
  --white: #FFFFFF;
  --mist: #E4E9F1;
  --gold: #B8913A;
  --gold-light: #D8BE78;
  --gold-bright: #F3CF1E;
  --teal: #1B7A76;
  --ink: #1A2238;
  --ink-soft: #3A4460;
  --muted: #5B647C;
  --line: #D6DBE3;

  /* type */
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --arabic: "Amiri", "Traditional Arabic", serif;

  /* motion (strong custom curves: built-in easings are too weak) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* layout */
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(80px, 10vw, 140px);
  --utility-h: 36px;
  --masthead-h: 84px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --shadow-float: 0 32px 64px -36px rgba(20, 40, 90, .45);

  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12 L20.485 15.515 L20.485 20.485 L15.515 20.485 L12 24 L8.485 20.485 L3.515 20.485 L3.515 15.515 L0 12 L3.515 8.485 L3.515 3.515 L8.485 3.515 L12 0 L15.515 3.515 L20.485 3.515 L20.485 8.485 Z'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* safety net: nothing can push the page sideways. On the root only, so the window stays the
   scroll container and sticky panels keep working (hidden on body would break them). */
html { overflow-x: hidden; }
body.is-loading { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
cite { font-style: italic; }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 2000;
  background: var(--lapis); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-m);
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 16px; }

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

/* grid children may shrink below their content width; wide tables scroll inside .table-scroll */
.hero__grid > *, .how__grid > *, .compare__grid > *, .paths__grid > *, .rates__grid > *,
.shariah__grid > *, .voices__grid > *, .people__grid > *, .resources__grid > *, .faq__grid > *,
.footer__top > *, .section-head--split > * { min-width: 0; }

/* ---------- type ---------- */
.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--lapis);
  margin-bottom: 20px;
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--lapis);
  margin-bottom: 10px;
  text-wrap: balance;
}
.lede {
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
}
.fineprint {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 12px 0 0;
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-m);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s, transform 160ms var(--ease-out);
}
/* press feedback: pressables confirm they heard you */
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--lapis); color: #fff; }
.btn--primary:hover { background: var(--blue); }
.btn--gold { background: var(--gold-bright); color: var(--lapis); }
.btn--gold:hover { background: #FFE15A; }
.btn--outline { border: 1px solid var(--lapis); color: var(--lapis); }
.btn--outline:hover { background: var(--lapis); color: #fff; }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.link-arrow, .link-light, .link-quiet {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color .2s, color .2s;
}
.link-arrow { color: var(--lapis); text-decoration-color: var(--gold); }
.link-arrow:hover { color: var(--blue); text-decoration-color: var(--blue); }
.link-light { color: #fff; text-decoration-color: var(--gold-light); }
.link-light:hover { text-decoration-color: #fff; }
.link-quiet { color: var(--lapis); text-decoration-color: transparent; }
.link-quiet:hover { text-decoration-color: var(--gold); }

/* ---------- film grain on photography ---------- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .12;
  mix-blend-mode: overlay;
}

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader { display: none; }
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--lapis);
  color: #fff;
  will-change: transform;
}
.loader__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Previous ornament styles (star frame, glint), kept for reference:
.loader__star { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gold); opacity: .7; overflow: visible; }
.loader__line { stroke-width: .45; }
.loader__line--thin { opacity: .45; }
.loader__glint { opacity: 0; }
*/
.loader__logo {
  position: relative;
  width: min(330px, 60vw);
  height: auto;
  overflow: visible;
}
.loader__glow { mix-blend-mode: screen; }
.loader__progress {
  position: relative;
  width: min(220px, 40vw);
  height: 1px;
  margin-top: 44px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.loader__progress span {
  display: block;
  height: 100%;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
}
.loader__edge {
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  width: 100%;
  height: 16vh;
  fill: var(--lapis);
  overflow: visible;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: calc(var(--utility-h) * -1);
  z-index: 100;
}
.utility {
  height: var(--utility-h);
  background: var(--lapis);
  color: rgba(255, 255, 255, .8);
  font-size: .875rem;
}
.utility__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.utility__bismillah {
  margin: 0;
  font-family: var(--arabic);
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--gold-light);
}
.utility__links { display: flex; gap: 28px; }
.utility__links a { color: inherit; text-decoration: none; }
.utility__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.masthead {
  position: relative;
  background: rgba(240, 242, 242, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.site-header.is-scrolled .masthead {
  border-bottom-color: var(--line);
  background: rgba(240, 242, 242, .96);
}
.masthead__inner {
  height: var(--masthead-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
.masthead__logo { flex: none; color: var(--blue); }
/* The mark's gold dot floats far above the wordmark and RESIDENTIAL is ~1/8 of its height, so
   it is sized by legibility (RESIDENTIAL ~7px tall), not by its box. It eases smaller on scroll.
   (Previously: width 80px; height 43px.) */
.masthead__logo svg {
  width: 128px;
  height: 68px;
  /* the dot sits high in the box, so centring the box drops the wordmark below the menu text:
     nudge it up so "guidance" lines up with the navigation instead */
  transform: translateY(-3px);
  transition: width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1);
}
.site-header.is-scrolled .masthead__logo svg { width: 110px; height: 58px; }

.primary-nav { flex: 1; }
.primary-nav__list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-m);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s, background-color .2s;
}
.primary-nav__link:hover { color: var(--blue); }
button.primary-nav__link::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
}
.has-menu.is-open > .primary-nav__link::after { transform: translateY(1px) rotate(-135deg); }

.has-menu { position: relative; }
.has-menu::before { /* hover bridge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 20px;
}
.menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -24px;
  width: min(760px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 32px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.menu--narrow { width: 280px; grid-template-columns: 1fr; }
.has-menu.is-open > .menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .has-menu:hover > .menu { opacity: 1; visibility: visible; transform: none; }
}
.menu__col { display: flex; flex-direction: column; }
.menu__title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}
.menu a:not(.menu__feature) {
  padding: 6px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
}
.menu a:not(.menu__feature):hover { color: var(--blue); }
.menu__feature {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 22px;
  border-radius: var(--radius-m);
  background: var(--lapis);
  color: rgba(255, 255, 255, .8);
  font-size: .9375rem;
  line-height: 1.4;
  text-decoration: none;
  min-height: 170px;
  position: relative;
  overflow: hidden;
}
.menu__feature::before {
  content: "";
  position: absolute;
  right: -26px; top: -26px;
  width: 120px; height: 120px;
  background: var(--gold);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
  opacity: .35;
}
.menu__feature-title { font-family: var(--serif); font-size: 1.3125rem; color: #fff; line-height: 1.2; }

.masthead__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.menu-toggle {
  transition: transform 160ms var(--ease-out);
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-m);
  place-items: center;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--lapis);
  transition: transform .3s, background-color .3s;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Previous mobile menu, kept for reference (it was pinned at top: var(--masthead-h), which
   overlapped the header whenever the utility bar was showing at the top of the page):
.mobile-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--masthead-h);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px var(--gutter) 40px;
  background: var(--lapis);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a:not(.btn) {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mobile-nav .btn { margin-top: 24px; }
*/

/* ---------- full-screen mobile menu ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 100% 0%, #1F3A7E 0%, var(--lapis) 48%, var(--lapis-deep) 100%);
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* curtain: drops from the top on open, retracts upward on close */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .55s cubic-bezier(.7, 0, .25, 1) .14s, visibility 0s linear .7s;
}
.mobile-nav.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s;
}
.mobile-nav__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .18;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 100% 100%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 55% at 100% 100%, #000 10%, transparent 72%);
}
.mobile-nav__bar {
  position: relative;
  flex: none;
  height: var(--masthead-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav__logo { color: #fff; }
.mobile-nav__logo svg { width: 108px; height: 57px; transform: translateY(-2px); }
.mobile-nav__close {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border-radius: 50%;
  transition: background-color .2s, transform 160ms var(--ease-out);
}
.mobile-nav__close:hover { background: rgba(255, 255, 255, .08); }
.menu-toggle:active, .mobile-nav__close:active { transform: scale(0.95); }
.mobile-nav__close span,
.mobile-nav__close span::before {
  position: absolute;
  left: 11px;
  top: 21px;
  width: 22px;
  height: 1.5px;
  background: #fff;
  transform: rotate(45deg);
}
.mobile-nav__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
.mobile-nav__links {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.mobile-nav__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.25rem);
  line-height: 1.15;
  color: #fff;
  text-decoration: none;
}
.mobile-nav__links a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--gold-light);
  border-right: 1.5px solid var(--gold-light);
  transform: rotate(45deg);
  opacity: .7;
}
.mobile-nav__foot { position: relative; margin-top: auto; padding-top: 32px; }
.mobile-nav__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; font-size: .9375rem; }
.mobile-nav__meta a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.mobile-nav__meta a:hover { color: #fff; }
.mobile-nav :focus-visible { outline-color: var(--gold-bright); }

/* the bar fades in, then links rise one after another; closing is quick and together */
.mobile-nav__bar,
.mobile-nav__links a,
.mobile-nav__foot {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .2s ease, transform .2s ease;
}
.mobile-nav__bar { transform: translateY(-8px); }
.mobile-nav.is-open .mobile-nav__bar,
.mobile-nav.is-open .mobile-nav__links a,
.mobile-nav.is-open .mobile-nav__foot {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease calc(.3s + var(--i, 0) * .06s),
    transform .75s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i, 0) * .06s);
}
.mobile-nav.is-open .mobile-nav__bar { transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav.is-open,
  .mobile-nav__bar, .mobile-nav__links a, .mobile-nav__foot { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(28px, 4vw, 64px) 0 clamp(56px, 6vw, 80px);
  overflow: hidden;
}
.hero__pattern {
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: 100%;
  opacity: .42;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 62% 42%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 62% 42%, #000 10%, transparent 72%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 1.6rem + 5vw, 5.75rem);
  line-height: .98;
  letter-spacing: -0.025em;
  color: var(--lapis);
  margin-bottom: 28px;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__title .line > span { display: inline-block; }
.hero__lede {
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 31em;
  margin-bottom: 36px;
}

.quick {
  max-width: 640px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
}
/* equal-width tabs so one indicator can slide between them (was display: flex) */
.quick__tabs {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 4px 0;
}
.quick__tabs::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px; bottom: 0; left: 4px;
  width: calc((100% - 12px) / 2);
  border-radius: var(--radius-m);
  background: var(--mist);
  transform: translateX(calc(var(--tab-i, 0) * (100% + 4px)));
  transition: transform 240ms var(--ease-in-out);
}
.quick__tabs button {
  padding: 8px 14px;
  border-radius: var(--radius-m);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--muted);
  transition: color .2s, transform 160ms var(--ease-out);
}
/* Previously: .quick__tabs button[aria-selected="true"] { background: var(--mist); color: var(--lapis); } */
.quick__tabs button[aria-selected="true"] { color: var(--lapis); }
.quick__tabs button:active { transform: scale(0.97); }
.quick__fields {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 10px 8px 8px;
}
.quick__note { font-size: .9375rem; color: var(--muted); padding: 0 12px 6px; margin: 0; }
.quick__note a { color: var(--lapis); text-decoration-color: var(--gold); text-underline-offset: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: .875rem; font-weight: 500; color: var(--muted); }
.field input,
.field select {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #F7F8F9;
  font-size: 1.0625rem;
  color: var(--ink);
  transition: border-color .2s, background-color .2s;
}
.field select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--lapis) 50%), linear-gradient(135deg, var(--lapis) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input:hover, .field select:hover { border-color: #B9C1CE; }
.field input:focus, .field select:focus { background-color: #fff; border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 92, 171, .18); }

.hero__visual {
  position: relative;
  justify-self: end;
  /* keep the whole arch above the fold on short laptop screens */
  width: min(100%, 460px, calc((100svh - var(--utility-h) - var(--masthead-h) - 96px) * 5 / 7));
  margin: 22px 12px 0 0;
}
.hero__frame {
  position: absolute;
  top: -22px;
  left: 22px;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  overflow: visible;
}
.hero__frame-line { stroke-width: .28; stroke-dasharray: 1; }
.hero__arch {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 7;
  clip-path: url(#arch-clip);
  overflow: hidden;
  background: var(--mist);
}
.hero__arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.share-card {
  position: absolute;
  left: -56px;
  bottom: 48px;
  width: 256px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
}
.share-card__label { font-size: .875rem; color: var(--muted); margin-bottom: 10px; }
.share-card__bar { height: 8px; border-radius: 4px; background: var(--mist); overflow: hidden; }
.share-card__bar span { display: block; width: 20%; height: 100%; border-radius: 4px; background: var(--teal); }
.share-card__meta { font-size: .9375rem; line-height: 1.35; margin: 10px 0 0; color: var(--ink-soft); }
.share-card__meta strong { color: var(--teal); }

.facts {
  list-style: none;
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 24px;
  border-left: 1px solid var(--line);
}
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts strong { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--lapis); }
.facts span { font-size: .9375rem; color: var(--muted); }
.press { margin: 28px 0 0; font-size: .9375rem; color: var(--muted); }
.press cite { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink-soft); }

/* ==========================================================================
   HOW CO-OWNERSHIP WORKS
   ========================================================================== */
.how { padding-block: var(--section); background: var(--white); }
/* Original 2D version, kept for reference:
.how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro intro" "visual steps";
  column-gap: clamp(40px, 7vw, 120px);
}
*/
.how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  grid-template-areas: "intro intro" "visual steps";
  column-gap: clamp(40px, 5vw, 80px);
}
.how__intro { grid-area: intro; max-width: 760px; margin-bottom: 24px; }
.how__term {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 1rem;
}
.how__term [lang="ar"] { font-family: var(--arabic); font-size: 1.75rem; line-height: 1.3; color: var(--gold); }

.how__sticky {
  grid-area: visual;
  position: sticky;
  top: calc(var(--masthead-h) + 24px);
  align-self: start;
  margin-top: 6vh;
}
/* Original 2D version, kept for reference:
.ownership {
  display: grid;
  grid-template-columns: minmax(170px, 250px) 1fr;
  gap: 36px;
  align-items: end;
  padding: 28px;
  background: var(--porcelain);
  border-radius: var(--radius-l);
}
.ownership__arch {
  position: relative;
  aspect-ratio: 5 / 7;
  clip-path: url(#arch-clip);
  background: var(--lapis);
  overflow: hidden;
}
*/
.ownership {
  display: grid;
  grid-template-columns: minmax(250px, 1.5fr) minmax(200px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 16px 32px 16px 12px;
  background: radial-gradient(ellipse 60% 70% at 30% 45%, #FBFCFC 0%, var(--porcelain) 70%);
  border-radius: var(--radius-l);
}
/* 3D stage: a WebGL canvas over the 2D arch, which stays as the no-WebGL fallback */
.ownership__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--masthead-h) - 120px);
}
.ownership__stage .ownership__arch {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 50%;
  aspect-ratio: 5 / 7;
  transform: translateX(-50%);
  transition: opacity .6s, visibility .6s;
}
.ownership__arch {
  position: relative;
  aspect-ratio: 5 / 7;
  clip-path: url(#arch-clip);
  background: var(--lapis);
  overflow: hidden;
}
.ownership__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
  touch-action: pan-y;
  /* soft, shape-accurate shadow of the floating panel */
  filter: drop-shadow(16px 26px 26px rgba(20, 40, 90, .16)) drop-shadow(3px 6px 6px rgba(20, 40, 90, .1));
}
.ownership__stage.is-3d .ownership__canvas { opacity: 1; }
.ownership__stage.is-3d .ownership__arch { opacity: 0; visibility: hidden; }
.ownership__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  background: var(--teal);
}
.ownership__fill::before { /* waterline */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--gold-bright);
}
.ownership__pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; }
.ownership__labels { margin-bottom: 24px; }
.ownership__labels p { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 1rem; color: var(--muted); }
.ownership__labels span { font-family: var(--serif); font-weight: 500; font-size: 2.75rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ownership__you span { color: var(--teal); }
.ownership__them span { color: var(--lapis); font-size: 1.75rem; }
.ownership__year { display: block; font-weight: 500; margin-bottom: 8px; }
.ownership__year output { font-variant-numeric: tabular-nums; }
.ownership__split { margin: 20px 0 0; display: grid; gap: 8px; }
.ownership__split div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.ownership__split dt { color: var(--muted); }
.ownership__split dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lapis); }

/* ---------- the 100% moment: WebGL confetti overlay + share card pulse ---------- */
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 110; /* above the sticky header, so the shower enters at the very top; never takes clicks */
}
.estate__viewport.is-complete .estate__share { animation: gr-complete 1.6s cubic-bezier(.2, .8, .2, 1); }
.estate__viewport.is-complete .estate__you span { animation: gr-complete-num 1.6s cubic-bezier(.2, .8, .2, 1); }
@keyframes gr-complete {
  0% { transform: scale(1); box-shadow: 0 10px 28px -18px rgba(20, 40, 90, .45); }
  22% { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(243, 207, 30, .55), 0 18px 40px -16px rgba(20, 40, 90, .5); }
  100% { transform: scale(1); box-shadow: 0 10px 28px -18px rgba(20, 40, 90, .45); }
}
@keyframes gr-complete-num {
  0%, 100% { color: var(--teal); }
  25% { color: #0F6B64; text-shadow: 0 0 18px rgba(243, 207, 30, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .estate__viewport.is-complete .estate__share, .estate__viewport.is-complete .estate__you span { animation: none; }
}

/* ---------- "Your home becomes real": studio viewport + readout ---------- */
.estate { margin: 0; }
.estate__viewport {
  position: relative;
  aspect-ratio: 16 / 11;
  max-height: calc(100svh - var(--masthead-h) - 250px);
  min-height: 300px;
  width: 100%;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: linear-gradient(#F6F7F7, #EDF0F1 55%, #DFE3E6);
  isolation: isolate;
}
.estate__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  touch-action: pan-y;
}
.estate__viewport.is-3d .estate__canvas { opacity: 1; }
.estate__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* no-WebGL reveal: the real home is uncovered from the bottom up */
.estate__photo--real {
  clip-path: inset(calc((1 - var(--share, .2)) * 100%) 0 0 0);
  transition: clip-path .9s cubic-bezier(.2, .7, .2, 1);
}
.estate__viewport.no-photos .estate__photo { display: none; }
.estate__viewport .ownership__arch {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  aspect-ratio: 5 / 7;
  transform: translateX(-50%);
  transition: opacity .6s, visibility .6s;
}
.estate__viewport.is-3d .ownership__arch { opacity: 0; visibility: hidden; }

/* glass overlays on the viewport */
.estate__chip,
.estate__key,
.estate__share {
  position: absolute;
  z-index: 2;
  margin: 0;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 10px 28px -18px rgba(20, 40, 90, .45);
}
.estate__chip {
  top: 16px; left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--lapis);
}
.estate__chip output { font-variant-numeric: tabular-nums; font-weight: 700; }
.estate__key {
  top: 16px; right: 16px;
  display: flex;
  gap: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  list-style: none;
  font-size: .8125rem;
  color: var(--ink-soft);
}
.estate__key li { display: flex; align-items: center; gap: 7px; }
.estate__swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.estate__swatch--yours {
  background:
    linear-gradient(90deg, transparent 45%, rgba(205, 198, 186, .9) 45% 55%, transparent 55%) 0 0 / 7px 5px,
    linear-gradient(transparent 80%, rgba(205, 198, 186, .9) 80%) 0 0 / 7px 5px,
    #9A5641;
}
.estate__swatch--theirs { background: #EEEBE5; box-shadow: inset 0 0 0 1px #D2CEC6; }
.estate__share {
  left: 16px; bottom: 16px;
  width: min(250px, calc(100% - 32px));
  padding: 14px 16px 12px;
  border-radius: var(--radius-l);
}
.estate__you { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 1rem; color: var(--ink-soft); }
.estate__you span {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.estate__bar {
  position: relative;
  height: 6px;
  margin: 10px 0 8px;
  border-radius: 3px;
  background: #E3E1DB;
  overflow: hidden;
}
.estate__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), #1E8A82);
}
.estate__bar span::after { /* the gold line where your share ends */
  content: "";
  position: absolute;
  right: 0; top: -2px; bottom: -2px;
  width: 2px;
  background: var(--gold-bright);
}
.estate__them { margin: 0; font-size: .875rem; color: var(--muted); }
.estate__them span { font-weight: 700; color: var(--lapis); font-variant-numeric: tabular-nums; }

.estate__timeline { margin-top: 18px; }

/* ---------- timeline scrubber ---------- */
.scrub {
  --thumb: 36px;
  --mark-on: var(--teal);
  position: relative;
  height: 44px;
}
.scrub__track {
  position: absolute;
  left: calc(var(--thumb) / 2);
  right: calc(var(--thumb) / 2);
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: #E3E7EC;
  box-shadow: inset 0 1px 1px rgba(20, 40, 90, .08);
}
/* a tick for every year below the rail, taller every ten */
.scrub__ticks {
  position: absolute;
  left: 0; right: 0;
  top: 11px;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(20, 40, 90, .28) 0 1px, transparent 1px calc(100% / 3)) 0 0 / calc(100% + 1px) 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(20, 40, 90, .14) 0 1px, transparent 1px calc(100% / 30)) 0 0 / calc(100% + 1px) 4px no-repeat;
}
.scrub__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--p) * 100%);
  border-radius: 3px;
  background: linear-gradient(90deg, #135F5A, var(--teal) 55%, #2FA095 85%, var(--gold-bright));
  box-shadow: 0 0 12px -2px rgba(27, 122, 118, .45);
}
/* milestones at each step's year: they light up as you pass them */
.scrub__mark {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px #C4CBD6;
  transition: background-color .3s, box-shadow .3s, transform .3s;
}
.scrub__mark.is-passed {
  background: var(--mark-on);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(243, 207, 30, .9);
  transform: scale(1.05);
}

.scrub__thumb {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(var(--p) * (100% - var(--thumb)));
  width: var(--thumb); height: var(--thumb);
  margin-top: calc(var(--thumb) / -2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #27418A, var(--lapis) 60%, #0E1D44);
  box-shadow: 0 0 0 3px #fff, 0 6px 16px -4px rgba(14, 29, 68, .55), 0 2px 4px rgba(14, 29, 68, .25);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
  pointer-events: none;
}
.scrub__star {
  width: 18px; height: 18px;
  fill: var(--gold-bright);
  transform: rotate(calc(var(--p) * 360deg));
  filter: drop-shadow(0 0 4px rgba(243, 207, 30, .45));
}
.scrub__tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px 7px;
  border-radius: 10px;
  background: var(--lapis);
  color: rgba(255, 255, 255, .8);
  font-size: .8125rem;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(14, 29, 68, .6);
  opacity: 0;
  /* --tip-x (set in main.js) keeps the readout inside the timeline at either end */
  transform: translate(calc(-50% + var(--tip-x, 0px)), 6px) scale(.96);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.scrub__tip::after {
  content: "";
  position: absolute;
  top: 100%; left: calc(50% - var(--tip-x, 0px));
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--lapis);
}
.scrub__tip b { font-family: var(--serif); font-weight: 500; font-size: 1rem; color: #fff; }
.scrub.is-moving .scrub__thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(27, 122, 118, .18), 0 10px 22px -6px rgba(14, 29, 68, .6);
}
.scrub.is-moving .scrub__tip { opacity: 1; transform: translate(calc(-50% + var(--tip-x, 0px)), 0) scale(1); }
.estate__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: .8125rem;
  color: var(--muted);
}
.estate__split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
}
.estate__split div { padding: 12px 16px 0 0; }
.estate__split div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.estate__split dt { font-size: .8125rem; color: var(--muted); }
.estate__split dd { margin: 2px 0 0; font-size: 1.1875rem; font-weight: 700; color: var(--lapis); font-variant-numeric: tabular-nums; }
.estate .fineprint { margin-top: 12px; }

.how__steps { grid-area: steps; list-style: none; margin: 0; padding: 0; }
.step {
  min-height: 62vh;
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 20px;
  align-content: center;
  opacity: .32;
  transition: opacity .5s;
}
.step.is-active { opacity: 1; }
/* scroll-bound emphasis (main.js sets --near 0..1 and --drift per step) */
.how__steps .step {
  opacity: calc(.26 + .74 * var(--near, 0));
  transform: translateY(var(--drift, 0px));
  transition: none;
  will-change: opacity, transform;
}
.how__steps .step__star { transform: scale(calc(.8 + .35 * var(--near, 0))) rotate(calc(var(--near, 0) * 45deg)); transform-origin: 50% 50%; }
.step__star { width: 22px; height: 22px; fill: var(--gold); margin-top: 6px; grid-row: 1; }
.step .h3 { grid-column: 2; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.step p { grid-column: 2; max-width: 30em; color: var(--ink-soft); margin: 0; }

/* range input */
input[type="range"] {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--teal) var(--p), var(--line) var(--p));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--teal); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--lapis);
  box-shadow: 0 2px 6px rgba(20, 40, 90, .25);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--lapis);
}
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0, 92, 171, .3); }

/* ==========================================================================
   COMPARISON
   ========================================================================== */
.compare { padding-block: var(--section); }
.compare__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.compare__table th, .compare__table td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.compare__table thead th { font-size: .9375rem; font-weight: 500; color: var(--muted); vertical-align: bottom; line-height: 1.3; }
.compare__table tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.compare__table .is-us { background: var(--lapis); color: #fff; border-bottom-color: rgba(255, 255, 255, .12); }
.compare__table thead .is-us { font-family: var(--serif); font-size: 1.3125rem; color: #fff; border-radius: var(--radius-l) var(--radius-l) 0 0; padding-top: 22px; }
.compare__table tbody tr:last-child .is-us { border-radius: 0 0 var(--radius-l) var(--radius-l); border-bottom: 0; }
/* the row labels stay pinned while the comparison scrolls sideways */
.compare__table tbody th,
.compare__table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--porcelain);
  transition: box-shadow .3s;
}
.scroll-frame.can-left .compare__table tbody th,
.scroll-frame.can-left .compare__table thead th:first-child { box-shadow: 12px 0 14px -14px rgba(20, 40, 90, .45); }

/* ---------- horizontal scroll hints: a fade + nudging chevron on any side with more to see ---------- */
.scroll-frame { position: relative; }
.scroll-hint {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 60px;
  display: grid;
  place-items: center;
  pointer-events: none;           /* never blocks swiping the table */
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.scroll-hint--right { right: 0; background: linear-gradient(to left, var(--porcelain) 18%, rgba(240, 242, 242, 0)); }
.scroll-hint--left { left: var(--stick, 0px); background: linear-gradient(to right, var(--porcelain) 18%, rgba(240, 242, 242, 0)); }
.scroll-frame.can-right .scroll-hint--right,
.scroll-frame.can-left .scroll-hint--left { opacity: 1; visibility: visible; }
.scroll-hint__chev {
  pointer-events: auto;           /* the chevron itself is tappable */
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--lapis);
  opacity: .85;
  cursor: pointer;
  box-shadow: 0 3px 10px -5px rgba(20, 40, 90, .35), 0 0 0 1px rgba(20, 40, 90, .05);
  /* a small, occasional nudge rather than a constant swing */
  animation: hint-nudge-right 3s cubic-bezier(.45, 0, .55, 1) infinite;
}
.scroll-hint--left .scroll-hint__chev { animation-name: hint-nudge-left; }
.scroll-hint__chev svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-hint--left .scroll-hint__chev svg { transform: scaleX(-1); }
@keyframes hint-nudge-right { 0%, 55%, 100% { transform: translateX(0); } 72% { transform: translateX(3px); } 85% { transform: translateX(0); } }
@keyframes hint-nudge-left { 0%, 55%, 100% { transform: translateX(0); } 72% { transform: translateX(-3px); } 85% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint__chev { animation: none; } }
.yes, .no, .maybe { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: var(--gold-bright);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}
.no { color: var(--muted); }
.no::before { content: ""; width: 12px; height: 1.5px; background: currentColor; }
.maybe { color: var(--muted); font-style: italic; }

/* ==========================================================================
   COMMITMENTS
   ========================================================================== */
.commitments { padding-block: var(--section); background: var(--white); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: end;
}
.section-head--split .h2, .section-head--split .lede { margin-bottom: 0; }
.seals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 40px;
}
.seal img { width: 104px; height: 104px; object-fit: contain; mix-blend-mode: multiply; margin-bottom: 18px; }
.seal h3 { font-family: var(--serif); font-size: 1.3125rem; color: var(--lapis); margin-bottom: 6px; line-height: 1.2; }
.seal p { font-size: 1rem; color: var(--muted); margin: 0; max-width: 26em; }

/* ==========================================================================
   PATHS
   ========================================================================== */
.paths { padding-block: var(--section); }
.paths__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 0 clamp(32px, 4vw, 64px);
}
.path { color: inherit; text-decoration: none; }
.path__media { margin: 0; overflow: hidden; border-radius: var(--radius-s); background: var(--mist); }
.path__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .path:hover .path__media img { transform: scale(1.035); }
  .path:hover .h3 { color: var(--blue); }
}
.path__body p { color: var(--muted); font-size: 1.0625rem; margin-bottom: 12px; }
.path--lead { grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 28px; }
.path--lead .path__media { aspect-ratio: 5 / 4; }
.path--lead .h3 { font-size: 2rem; }
.path:not(.path--lead) {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.path:not(.path--lead) .path__media { aspect-ratio: 1; }
.paths__grid > .path:nth-child(2) { padding-top: 0; }

/* ==========================================================================
   RATES & CALCULATOR
   ========================================================================== */
.rates { padding-block: var(--section); background: var(--white); }
.rates__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.panel {
  background: var(--porcelain);
  border-radius: var(--radius-l);
  padding: clamp(22px, 3vw, 36px);
}
.rates__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 12px; }
.field--inline { flex-direction: row; align-items: center; gap: 12px; }
.field--inline select { height: 44px; width: auto; min-width: 200px; background-color: #fff; }
.rates__stamp { margin: 0; font-size: .875rem; color: var(--muted); }
.rates__table { width: 100%; min-width: 440px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rates__table th { text-align: left; font-size: .875rem; font-weight: 500; color: var(--muted); padding: 12px 10px; border-bottom: 1px solid var(--line); }
.rates__table td { padding: 18px 10px; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
.rates__table td:first-child { font-family: var(--serif); font-size: 1.3125rem; color: var(--lapis); }
.rates__table td:nth-child(2) { font-weight: 700; color: var(--lapis); }
.sample-flag {
  display: inline-block;
  margin: 18px 0 0;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  background: #FFF4CC;
  color: #5E4A0E;
  font-size: .875rem;
}

.calc .h3 { margin-bottom: 24px; }
.calc { position: relative; }
.calc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0, 92, 171, .4), 0 0 0 7px rgba(0, 92, 171, .1);
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.calc.is-prefilled::after { opacity: 1; transition-duration: 180ms; }
.calc__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 8px; margin-bottom: 20px; }
.calc__row label, .calc__label { font-weight: 500; font-size: 1rem; }
.calc__row output { font-weight: 700; color: var(--lapis); font-variant-numeric: tabular-nums; }
.calc__row input[type="range"], .calc__row .segmented { grid-column: 1 / -1; }
.segmented { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--radius-m); background: var(--mist); }
.segmented::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 16px) / 3);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 40, 90, .18);
  transform: translateX(calc(var(--seg-i, 2) * (100% + 4px)));
  transition: transform 240ms var(--ease-in-out);
}
.segmented button { padding: 10px 6px; border-radius: 6px; font-size: .9375rem; font-weight: 500; color: var(--muted); transition: color .2s, transform 160ms var(--ease-out); }
/* Previously: .segmented button[aria-checked="true"] { background: #fff; color: var(--lapis); box-shadow: 0 1px 3px rgba(20, 40, 90, .18); } */
.segmented button[aria-checked="true"] { color: var(--lapis); }
.segmented button:active { transform: scale(0.97); }
.calc__result { margin: 28px 0 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.calc__big { margin: 0 0 16px; font-family: var(--serif); font-weight: 500; font-size: 3.5rem; line-height: 1; color: var(--lapis); font-variant-numeric: tabular-nums; }
.calc__big small { margin-left: 10px; font-family: var(--sans); font-size: 1rem; color: var(--muted); }
.calc__bar { display: flex; height: 10px; border-radius: 5px; background: var(--lapis); overflow: hidden; }
.calc__bar span { display: block; height: 100%; width: 15%; background: var(--teal); transition: width .4s; }
.calc__legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; color: var(--ink-soft); }
.calc__legend li { display: flex; align-items: center; gap: 10px; }
.calc__legend strong { color: var(--lapis); font-variant-numeric: tabular-nums; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dot--teal { background: var(--teal); }
.dot--lapis { background: var(--lapis); }

/* ==========================================================================
   JOURNEY
   ========================================================================== */
.journey { padding-block: var(--section); }
.journey__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  counter-reset: step;
}
.journey__list li { position: relative; counter-increment: step; padding-top: 64px; }
.journey__list svg { position: absolute; top: 0; left: 0; width: 40px; height: 40px; fill: var(--gold-bright); }
.journey__list li::before {
  content: counter(step);
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--lapis);
  z-index: 1;
}
.journey__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 52px;
  right: -20px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}
.journey__list h3 { font-family: var(--serif); font-size: 1.3125rem; color: var(--lapis); margin-bottom: 6px; }
/* main.js adds [data-draw] (motion allowed) and later .is-drawn (once in view); text never hides */
.journey__list[data-draw] li:not(:last-child)::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--ease-in-out) calc(120ms + var(--i, 0) * 80ms);
}
.journey__list[data-draw] svg,
.journey__list[data-draw] li::before {
  opacity: .3;
  transform: scale(.9);
  transition: opacity 300ms var(--ease-out) calc(var(--i, 0) * 80ms), transform 300ms var(--ease-out) calc(var(--i, 0) * 80ms);
}
.journey__list[data-draw].is-drawn li:not(:last-child)::after { clip-path: inset(0 0 0 0); }
.journey__list[data-draw].is-drawn svg,
.journey__list[data-draw].is-drawn li::before { opacity: 1; transform: none; }
.journey__list p { font-size: 1rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   SHARIAH BOARD
   ========================================================================== */
.shariah {
  position: relative;
  padding-block: var(--section);
  background: var(--lapis);
  color: rgba(232, 236, 245, .86);
  overflow: hidden;
}
.shariah__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .34;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
  mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
}
.shariah__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}
.shariah :focus-visible { outline-color: var(--gold-bright); }
.shariah .h2 { color: #fff; }
.shariah .lede { color: rgba(232, 236, 245, .82); }
.shariah__ar { font-family: var(--arabic); font-size: 2.25rem; line-height: 1.3; color: var(--gold-light); margin-bottom: 12px; text-align: left; }
.shariah__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.board li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.board h3 { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.25; color: #fff; }
.board h3 [lang="ar"] { font-family: var(--arabic); font-size: .95em; color: var(--gold-light); margin-left: 4px; }
.board p { margin: 2px 0 0; font-size: .9375rem; color: rgba(232, 236, 245, .62); }
.board__mono {
  flex: none;
  position: relative;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gold-light);
}
.board__mono::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216, 190, 120, .55);
  transform: rotate(45deg) scale(.72);
}
.board__mono::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216, 190, 120, .55);
  transform: scale(.72);
}
/* portraits: the originals are black-and-white headshots on mixed backgrounds, so they are
   cropped to circles, faces centred, bright backgrounds eased down, each set in a thin gold ring */
.board__photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.06) brightness(.95);
  box-shadow: 0 0 0 2px var(--lapis), 0 0 0 3px rgba(216, 190, 120, .75);
}
.board__chair .board__photo {
  width: 84px;
  height: 84px;
  box-shadow: 0 0 0 3px var(--lapis), 0 0 0 4.5px var(--gold-bright), 0 12px 28px -12px rgba(0, 0, 0, .5);
}
.board__chair { grid-column: 1 / -1; padding: 8px 0 24px !important; }
.board__chair .board__mono { width: 76px; height: 76px; font-size: 1.375rem; color: var(--gold-bright); }
.board__chair h3 { font-size: 1.75rem; }

/* ==========================================================================
   FIRST MORNING
   ========================================================================== */
.morning {
  position: relative;
  min-height: clamp(520px, 88vh, 860px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--lapis-deep);
}
.morning__media { position: absolute; inset: 0; margin: 0; }
.morning__media img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 55%;
}
.morning__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(14, 29, 68, .78) 0%, rgba(14, 29, 68, .2) 42%, transparent 65%);
}
.morning__copy { position: relative; z-index: 2; padding-bottom: clamp(48px, 7vw, 88px); }
.morning__line {
  margin: 0;
  max-width: 15em;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

/* ==========================================================================
   VOICES
   ========================================================================== */
.voices { padding-block: var(--section); }
.voices__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 24px clamp(32px, 5vw, 80px);
}
.voice { margin: 0; display: flex; flex-direction: column; }
.voice blockquote { margin: 0; }
.voice blockquote p { font-family: var(--serif); color: var(--ink); line-height: 1.4; margin: 0; }
.voice figcaption { margin-top: 16px; font-size: .9375rem; color: var(--muted); }
.voice figcaption strong { color: var(--lapis); font-weight: 700; }
.voice--lead { grid-row: 1 / span 2; padding-top: 12px; }
.voice--lead::before {
  content: "";
  width: 36px; height: 36px;
  margin-bottom: 28px;
  background: var(--gold);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}
.voice--lead blockquote p { font-size: clamp(1.625rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.3; color: var(--lapis); }
.voice:not(.voice--lead) { padding: 28px; background: var(--white); border-radius: var(--radius-l); }
.voice:not(.voice--lead) blockquote p { font-size: 1.25rem; }

/* ==========================================================================
   PEOPLE: community + advisor
   ========================================================================== */
.people { padding-block: var(--section); background: var(--white); }
.people__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.people .h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); }
.people__media { margin: 0 0 32px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-s); }
.people__media img { width: 100%; height: 100%; object-fit: cover; }
.people__community p { color: var(--ink-soft); max-width: 32em; }
.people__portrait { margin: 0 0 32px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-s); }
.people__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.people__advisor-body p { color: var(--ink-soft); }
.zip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 24px 0 16px; max-width: 520px; }
.zip__msg { grid-column: 1 / -1; }
.zip__msg { min-height: 1.5em; margin: 0; font-size: .9375rem; color: var(--teal); }
.zip__msg.is-error { color: #A3302A; }
.people__call { font-size: 1rem; }
.people__call a { color: var(--lapis); font-weight: 700; }

/* ==========================================================================
   RESOURCES
   ========================================================================== */
.resources { padding-block: var(--section); }
.resources__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.resources .lede { margin-bottom: 28px; }
.articles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.articles a {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  column-gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.articles__meta { grid-row: span 2; display: flex; flex-direction: column; margin: 4px 0 0; font-size: .875rem; color: var(--muted); }
.articles h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--lapis); margin-bottom: 8px; transition: color .2s; }
.articles a p:last-child { margin: 0; font-size: 1rem; color: var(--muted); }
.articles a:hover h3 { color: var(--blue); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }

/* ==========================================================================
   CUSTOMERS
   ========================================================================== */
.customers { padding-block: 32px; background: var(--mist); }
.customers__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.customers .h3 { margin: 0; font-size: 1.375rem; }
.customers__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.customers__links a { color: var(--lapis); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.customers__links a:hover { color: var(--blue); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding-block: var(--section); background: var(--white); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq .lede a { color: var(--lapis); text-decoration-color: var(--gold); text-underline-offset: 5px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 24px 48px 24px 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--lapis);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before,
.faq__list summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px; height: 1.5px;
  background: var(--gold);
  transition: transform .3s;
}
.faq__list summary::after { transform: rotate(90deg); }
.faq__list details[open] summary::after { transform: rotate(0deg); }
.faq__list summary:hover { color: var(--blue); }
.faq__answer { overflow: hidden; }
.faq__answer p { margin: 0 0 26px; max-width: 40em; color: var(--ink-soft); }

/* ==========================================================================
   CLOSING
   ========================================================================== */
.closing { padding-block: var(--section); }
.closing__arch {
  position: relative;
  overflow: hidden;
  padding: clamp(140px, 16vw, 220px) clamp(24px, 6vw, 96px) clamp(64px, 8vw, 104px);
  background: var(--lapis);
  clip-path: url(#arch-clip);
  text-align: center;
  color: rgba(255, 255, 255, .82);
}
.closing__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 80%);
}
.closing__star { position: relative; width: 44px; height: 44px; margin: 0 auto 28px; fill: var(--gold-bright); }
.closing .h2 { position: relative; color: #fff; max-width: 14em; margin-inline: auto; }
.closing p { position: relative; max-width: 30em; margin: 0 auto 36px; font-size: 1.3125rem; }
.closing__actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 32px; }
.closing :focus-visible { outline-color: var(--gold-bright); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { padding-top: clamp(64px, 8vw, 96px); background: var(--lapis-deep); color: rgba(255, 255, 255, .7); font-size: 1rem; }
.site-footer :focus-visible { outline-color: var(--gold-bright); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 48px;
  padding-bottom: 56px;
}
.footer__logo { width: 112px; height: 60px; color: #fff; margin-bottom: 20px; }
.footer__brand p { margin-bottom: 20px; }
.footer__contact { font-size: .9375rem; line-height: 1.6; }
.footer__contact a { color: #fff; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__cols h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer__cols a { display: block; padding: 5px 0; color: inherit; text-decoration: none; }
.footer__cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__legal { padding-bottom: 48px; font-size: .875rem; }
.footer__legal p { max-width: 78ch; }
.footer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 20px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.eho { display: inline-flex; align-items: center; gap: 8px; }
.eho svg { width: 22px; height: 22px; }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0; }
.footer__legal-links a { color: inherit; }
.footer__legal-links a:hover { color: #fff; }
.footer__cookie-btn { color: inherit; text-decoration: underline; }
.footer__cookie-btn:hover { color: #fff; }
.footer__copy { margin: 0; color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   COOKIE CONSENT
   Asks once, after the loader lifts. Reject sits beside Accept with the same weight;
   Cookie settings in the footer reopens it with the choices already open.
   ========================================================================== */
.consent {
  position: fixed;
  /* bottom right: over the hero photo rather than the quick form (was left: clamp(16px, 2.5vw, 32px)) */
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 90; /* under the header (100), so the full-screen menu covers it */
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 22px;
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20, 40, 90, .08), 0 28px 56px -24px rgba(14, 29, 68, .5);
  /* resting state; leaving returns here, so it exits the way it came in */
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transform-origin: 100% 100%; /* rises out of its corner */
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.is-open {
  opacity: 1;
  transform: none;
  transition: opacity 320ms var(--ease-out), transform 560ms var(--ease-drawer);
}

/* the content settles in just behind the card, a beat apart */
.consent__head,
.consent__text,
.consent__manage,
.consent__actions {
  opacity: 0;
  transform: translateY(8px);
}
.consent.is-open :is(.consent__head, .consent__text, .consent__manage, .consent__actions),
.consent.is-leaving :is(.consent__head, .consent__text, .consent__manage, .consent__actions) {
  opacity: 1;
  transform: none;
}
.consent.is-open :is(.consent__head, .consent__text, .consent__manage, .consent__actions) {
  transition:
    opacity 360ms var(--ease-out) calc(90ms + var(--i, 0) * 50ms),
    transform 480ms var(--ease-out) calc(90ms + var(--i, 0) * 50ms);
}

.consent__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* the khatam star turns an eighth into place: it lands looking exactly as it started */
.consent__star {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--gold);
  opacity: 0;
  transform: rotate(-45deg) scale(.5);
}
.consent.is-open .consent__star,
.consent.is-leaving .consent__star { opacity: 1; transform: none; }
.consent.is-open .consent__star { transition: transform 720ms var(--ease-out) 150ms, opacity 280ms var(--ease-out) 150ms; }
.consent__title { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; color: var(--lapis); }
.consent__title:focus { outline: none; } /* only ever focused by script, on reopen */
.consent__close {
  display: none;
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  margin: -6px -10px -6px auto;
  border-radius: 50%;
  color: var(--muted);
  transition: background-color .2s, color .2s, transform 160ms var(--ease-out);
}
.consent.can-dismiss .consent__close { display: block; }
.consent__close:active { transform: scale(.92); }
.consent__close span,
.consent__close span::before {
  position: absolute;
  left: 11px;
  top: 17px;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}
.consent__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }

.consent__text { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-soft); }

.consent__manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--blue);
  transition: color .2s;
}
.consent__manage svg { width: 12px; height: 12px; transition: transform 260ms var(--ease-in-out); }
.consent.is-expanded .consent__manage svg { transform: rotate(180deg); }

/* choices: the panel opens to its natural height, rows arrive one after another;
   closing is quicker and all together */
.consent__prefs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-in-out); }
.consent.is-expanded .consent__prefs { grid-template-rows: 1fr; transition-duration: 380ms; }
.consent__prefs-inner { min-height: 0; overflow: hidden; margin: 0 -4px; padding: 0 4px; }
.consent__row,
.consent__save {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.consent.is-expanded :is(.consent__row, .consent__save) {
  opacity: 1;
  transform: none;
  transition:
    opacity 300ms var(--ease-out) calc(70ms + var(--i, 0) * 40ms),
    transform 420ms var(--ease-out) calc(70ms + var(--i, 0) * 40ms);
}
.consent__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.consent__label { font-size: 1rem; font-weight: 500; color: var(--ink); }
label.consent__label { cursor: pointer; }
.consent__row p { grid-column: 1 / -1; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.consent__always { font-size: .875rem; font-weight: 500; color: var(--teal); }
.consent__save { padding: 6px 0 4px; }

/* switch: the thumb slides across and stretches a little while pressed */
.consent__switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background: #C3CAD6;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out);
}
.consent__switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 29, 68, .3);
  transition: transform 220ms var(--ease-out), width 160ms var(--ease-out);
}
.consent__switch:checked { background: var(--lapis); }
.consent__switch:checked::before { transform: translateX(18px); }
.consent__switch:active::before { width: 24px; }
.consent__switch:checked:active::before { transform: translateX(14px); }
.consent__switch:focus-visible { outline-offset: 2px; border-radius: 13px; }

.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.consent__actions .btn { min-height: 46px; padding: 10px 14px; }

@media (hover: hover) and (pointer: fine) {
  .consent__manage:hover { color: var(--lapis); }
  .consent__close:hover { background: var(--mist); color: var(--lapis); }
}

/* phones: a sheet that comes up from the bottom edge and goes back down there */
@media (max-width: 600px) {
  .consent {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 18px 20px 20px;
    transform: translateY(calc(100% + 24px));
    transform-origin: 50% 100%;
    transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
  }
  .consent__title { font-size: 1.25rem; }
}

/* reduced motion: gentler, not zero. Everything still fades; nothing travels */
@media (prefers-reduced-motion: reduce) {
  .consent,
  .consent :is(.consent__head, .consent__text, .consent__manage, .consent__actions, .consent__star, .consent__row, .consent__save) { transform: none !important; }
  .consent__prefs,
  .consent.is-expanded .consent__prefs { transition: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1140px) {
  .primary-nav { display: none; }
  .menu-toggle { display: grid; }
  .masthead__actions .link-quiet { display: none; }
}

@media (max-width: 960px) {
  :root { --masthead-h: 72px; }
  .masthead__logo svg { width: 108px; height: 57px; transform: translateY(-2px); }
  .site-header.is-scrolled .masthead__logo svg { width: 96px; height: 51px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { justify-self: center; width: min(84%, 420px); margin: 24px auto 0; }
  .share-card { left: -8%; bottom: 32px; width: 230px; }
  .hero__pattern { width: 100%; opacity: .2; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }

  .how__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "visual" "steps"; }
  .how__sticky { margin-top: 8px; top: calc(var(--masthead-h) + 8px); z-index: 2; }
  /* Original 2D version: .ownership { grid-template-columns: 96px 1fr; gap: 18px; padding: 16px; align-items: center; box-shadow: var(--shadow-float); } */
  .ownership { grid-template-columns: 124px 1fr; gap: 14px; padding: 8px 16px 8px 4px; align-items: center; box-shadow: var(--shadow-float); }
  .ownership__stage { max-height: none; }
  .estate { background: var(--white); padding: 8px 0 10px; box-shadow: 0 18px 30px -24px rgba(20, 40, 90, .35); }
  .estate__viewport { aspect-ratio: 16 / 10; min-height: 0; max-height: 34vh; }
  .estate__key, .estate__split, .estate .fineprint, .estate__ticks { display: none; }
  .how__sticky { top: var(--masthead-h); }
  .estate__share { left: 8px; bottom: 8px; width: 132px; padding: 7px 10px 6px; }
  .estate__you { font-size: .8125rem; }
  .estate__you span { font-size: 1.625rem; }
  .estate__bar { margin: 5px 0 1px; height: 4px; }
  .estate__them { display: none; }
  .estate__chip { top: 10px; left: 10px; font-size: .8125rem; padding: 4px 10px; }
  .estate__timeline { margin-top: 8px; }
  .scrub { --thumb: 30px; height: 38px; }
  .scrub__ticks { display: none; }
  .scrub__star { width: 15px; height: 15px; }
  .ownership__labels { margin-bottom: 6px; }
  .ownership__labels span { font-size: 2rem; }
  .ownership__them span { font-size: 1.25rem; }
  .ownership__split, .ownership .fineprint { display: none; }
  /* Mobile: the pinned panel sits above the steps, so tall step blocks read as empty screen.
     Steps are compact and joined by a timeline rail; scroll-binding interpolates between
     step centres, so it needs no extra height. (Previously: .step { min-height: 56vh; }) */
  .how { padding-bottom: 32px; }
  .how__steps { position: relative; padding: 12px 0 0; }
  .how__steps::before {
    content: "";
    position: absolute;
    left: 10.5px;
    top: 44px;
    bottom: 64px;
    width: 1px;
    background: linear-gradient(var(--gold), rgba(184, 145, 58, .25));
    opacity: .5;
  }
  .how__steps .step { min-height: 0; padding: 30px 0; align-content: start; }
  .step__star { position: relative; z-index: 1; background: var(--white); border-radius: 50%; box-shadow: 0 0 0 5px var(--white); }

  .compare__grid, .resources__grid, .faq__grid, .shariah__grid { grid-template-columns: minmax(0, 1fr); }
  .section-head--split { grid-template-columns: minmax(0, 1fr); }
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paths__grid { grid-template-columns: minmax(0, 1fr); }
  .path--lead { grid-row: auto; margin-bottom: 24px; }
  .rates__grid { grid-template-columns: minmax(0, 1fr); }
  .journey__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .journey__list li { padding: 0 0 32px 64px; min-height: 40px; }
  .journey__list li:not(:last-child)::after { top: 48px; bottom: 8px; left: 20px; right: auto; width: 1px; height: auto; }
  .journey__list[data-draw] li:not(:last-child)::after { clip-path: inset(0 0 100% 0); }
  .journey__list[data-draw].is-drawn li:not(:last-child)::after { clip-path: inset(0 0 0 0); }
  .voices__grid { grid-template-columns: minmax(0, 1fr); }
  .voice--lead { grid-row: auto; }
  .people__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .utility__links a:not([href^="tel"]) { display: none; }
  .masthead__actions .btn { display: none; }
  .quick__fields { grid-template-columns: minmax(0, 1fr); }
  .compare__table { min-width: 560px; }
  .compare__table tbody th, .compare__table thead th:first-child { width: 150px; min-width: 150px; max-width: 150px; padding-left: 12px; padding-right: 10px; font-size: .9375rem; }
  .quick__fields .btn { width: 100%; }
  .share-card { position: relative; left: auto; bottom: auto; width: auto; margin: -40px 12px 0; }
  .hero__frame { top: -14px; left: 14px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li { padding: 0 12px; }
  .facts strong { font-size: 1.25rem; }
  .seals { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .path:not(.path--lead) { grid-template-columns: 112px 1fr; gap: 16px; }
  .path:not(.path--lead) .path__body p { display: none; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .zip { grid-template-columns: minmax(0, 1fr); }
  .articles a { grid-template-columns: minmax(0, 1fr); }
  .articles__meta { grid-row: auto; flex-direction: row; gap: 12px; margin-bottom: 8px; }
  .calc__big { font-size: 2.75rem; }
  .rates__table { min-width: 0; }
  .rates__table th, .rates__table td { padding-inline: 4px; }
  .rates__table td { font-size: 1rem; }
  .rates__table td:first-child { font-size: 1.0625rem; }
  .field--inline select { min-width: 0; }
  .seal { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
  .seal img { width: 64px; height: 64px; margin: 0; grid-row: span 2; }
  .closing__arch { padding-top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .quick__tabs button:active, .segmented button:active,
  .menu-toggle:active, .mobile-nav__close:active { transform: none; }
  .js .loader { display: none; }
  body.is-loading { overflow: auto; }
  .step, .how__steps .step { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}