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

   This file uses CSS LOGICAL PROPERTIES throughout (margin-inline-start,
   padding-inline, inset-inline-end, text-align:start). The site is
   English-only now, so nothing depends on mirroring — but the vocabulary is
   consistent across 1,700 lines, so keep writing it that way rather than
   leaving a mix of logical and physical properties behind.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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;
  --header-h-stuck: 68px;
  --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) outranks the UA stylesheet's
   [hidden]{display:none}, so hidden elements would still paint. The form's
   Back / Continue / Submit buttons depend on this, and it is also why the
   lead dialog only ever declares `display` on .leadmodal[open] — see 17a. */
[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); }

.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. 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; }

/* --------------------------------------------------------------------------
   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(3, 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);
}
.svc:hover { border-color: var(--teal-600); box-shadow: var(--shadow); transform: translateY(-2px); }

.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; }

/* --------------------------------------------------------------------------
   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__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;
}

/* --------------------------------------------------------------------------
   13. Why us
   -------------------------------------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(2, 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 {
  /* flex:none matters here. As a flex item this is otherwise free to shrink
     along the main axis, which squashes the circle into an oval as soon as
     the row gets tight. aspect-ratio keeps it round regardless. */
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  aspect-ratio: 1;
  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; }

/* --------------------------------------------------------------------------
   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, 1fr) auto;
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  align-items: center;
}

.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.66);
  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. */
/* The CTAs link straight to this card, so it needs clearance under the
   sticky header when scrolled to. */
.form {
  scroll-margin-block-start: calc(var(--header-h) + 20px);
  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;
}
/* Gated: a tap leaves :hover stuck on touch devices, and a highlighted but
   unselected tile reads as the chosen one. */
@media (hover: hover) {
  .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 field: a country selector welded to the number input.
   Mirrors correctly in RTL because the radii are logical. */
.phone-group { display: flex; position: relative; }
.phone-group input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  direction: ltr;
  text-align: start;
  min-inline-size: 0;   /* let it shrink inside the flex row */
}

/* --- country code listbox ---
   A custom listbox rather than a <select>, because a native select cannot
   render the flag SVGs and emoji flags do not display on Windows. */
.ccode { position: relative; flex: none; }

.ccode__toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  block-size: 100%;
  padding-inline: var(--s-3);
  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);
  color: var(--ink);
  font-size: 0.92rem;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.ccode__toggle:hover { background: var(--paper-2); }
.ccode.is-open .ccode__toggle { border-color: var(--teal-600); background: var(--white); }

.ccode__flag {
  inline-size: 22px;
  block-size: 16px;
  flex: none;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11, 27, 63, 0.14);
  display: block;
}
.ccode__flag svg { inline-size: 100%; block-size: 100%; display: block; }

.ccode__dial { font-size: 0.9rem; color: var(--ink); direction: ltr; }
.ccode__chev { inline-size: 13px; block-size: 13px; flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.ccode.is-open .ccode__chev { transform: rotate(180deg); }

.ccode__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 30;
  min-inline-size: 280px;
  max-block-size: 300px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2);
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.ccode.is-open .ccode__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.ccode__menu li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.93rem;
  transition: background-color .14s var(--ease);
}
.ccode__menu li:hover { background: var(--paper); }
.ccode__menu li:focus-visible { outline: 2px solid var(--teal-500); outline-offset: -2px; }
.ccode__menu li[aria-selected="true"] { background: var(--teal-100); font-weight: 600; }
.ccode__name { flex: 1; }
.ccode__menu .ccode__dial { color: var(--muted); font-size: 0.86rem; }

/* --- below the lender minimum ---
   Not an error: the visitor has done nothing wrong. Amber, with a way out. */
.disqualify {
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: #FDF7EC;
  border: 1px solid #EBD7AE;
  border-inline-start: 3px solid var(--gold);
  animation: step-in .3s var(--ease) both;
}
.disqualify__title {
  font-weight: 600;
  color: #7A5312;
  margin: 0 0 var(--s-2);
  font-size: 0.96rem;
}
.disqualify__body {
  margin: 0 0 var(--s-4);
  font-size: 0.9rem;
  color: #7A5312;
  line-height: 1.6;
}
.disqualify__call {
  background: var(--navy-700);
  color: #fff;
  border-color: transparent;
  white-space: normal;
  font-family: var(--font-mono);
  direction: ltr;
}
.disqualify__call:hover { background: var(--navy-800); color: #fff; text-decoration: none; }

/* The hard stop: below the absolute lender minimum. Read as a refusal rather
   than advice, so it does not share the amber "worth a call" palette. */
.disqualify--stop {
  background: #FDF3F2;
  border-color: #F0CFCB;
  border-inline-start-color: #C2413C;
}
.disqualify--stop .disqualify__title { color: #8A2F2B; }
.disqualify--stop .disqualify__body  { color: #8A2F2B; }
.disqualify__call svg { inline-size: 15px; block-size: 15px; flex: none; }

/* 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; }
.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 — in the DOM for bots, invisible to people. Checked in api/lead.js */
.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__errorcall {
  background: var(--navy-700);
  color: #fff;
  border-color: transparent;
  white-space: normal;
  font-family: var(--font-mono);
  direction: ltr;
}
.form__errorcall:hover { background: var(--navy-800); color: #fff; text-decoration: none; }
.form__errorcall svg { inline-size: 15px; block-size: 15px; flex: 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.66);
  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.62);
}
.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; }

/* Raised from .40 (~3.7:1). This is the risk-warning copy. */
.disclaimer {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  max-inline-size: 90ch;
  margin-block-start: var(--s-5);
}

/* --------------------------------------------------------------------------
   19. Floating elements
   -------------------------------------------------------------------------- */
/* 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; }
}


/* --------------------------------------------------------------------------
   9. SIGNATURE — the starter card

   Step 1 of the qualifier, asked in the hero rather than hidden behind a
   button. A light card on the navy ground so it reads as the thing to act on.
   -------------------------------------------------------------------------- */
.starter {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-5), 3.4vw, var(--s-6));
  box-shadow: var(--shadow-lg);
}
.starter__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-block-end: var(--s-2);
}
.starter__q {
  font-size: clamp(1.3rem, 2.1vw, 1.62rem);
  color: var(--navy-900);
  margin-block-end: var(--s-2);
}
.starter__hint {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
  margin-block-end: var(--s-5);
}

.starter__tiles { display: grid; gap: var(--s-3); }
.starter__tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  text-align: start;
  inline-size: 100%;
  min-block-size: 56px;
  padding: var(--s-4) var(--s-5);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--navy-900);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.starter__tile .arrow { color: var(--teal-700); flex: none; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .starter__tile:hover { border-color: var(--teal-600); background: var(--teal-100); transform: translateY(-1px); }
  .starter__tile:hover .arrow { transform: translateX(3px); }
}
/* Set by restore() so a returning visitor can see what they already said.
   Not aria-pressed — these are not toggles. */
.starter__tile.is-chosen { border-color: var(--teal-600); background: var(--teal-100); }

.starter__assure { display: grid; gap: var(--s-2); margin-block-start: var(--s-5); }
.starter__assure li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}
.starter__assure svg { inline-size: 15px; block-size: 15px; color: var(--teal-600); flex: none; margin-block-start: 3px; }
.starter__foot {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--muted-3);
  line-height: 1.5;
}
.starter__foot a { color: var(--teal-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   12a. Islamic structure cards

   Three cards rather than a tab widget: someone comparing the structures
   wants them side by side, and it drops a whole keyboard-nav widget.
   -------------------------------------------------------------------------- */
.isl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin-block-start: var(--s-7);
}
.isl__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.isl__card h3 { color: var(--white); font-size: 1.14rem; margin-block-end: var(--s-1); }
.isl__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-300);
  margin-block-end: var(--s-4);
}
.isl__body {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.93rem;
  line-height: 1.6;
  margin-block-end: var(--s-4);
}
.isl__facts { display: grid; gap: var(--s-3); }
.isl__facts li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.isl__facts svg { inline-size: 16px; block-size: 16px; color: var(--teal-300); flex: none; margin-block-start: 3px; }

/* Overflow line under the services grid, for the lower-volume products. */
.services__also { margin-block-start: var(--s-5); font-size: 0.9rem; color: var(--muted-3); }

/* --------------------------------------------------------------------------
   17a. Lead dialog — the qualifier lives in the top layer

   The DIALOG is the full-viewport layer and .form is the card inside it.
   That buys three things at once: one flex switch turns a centred modal into
   a bottom sheet, a click whose target IS the dialog is unambiguously a
   backdrop click, and there is no UA margin:auto to fight.

   NEVER put `display` on the bare .leadmodal selector. An author display
   rule outranks the UA sheet rule `dialog:not([open]) { display: none }` —
   the same trap the [hidden] rule in section 2 exists for — and the closed
   dialog would paint the whole form over the page before any JS runs.
   -------------------------------------------------------------------------- */
.leadmodal {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  /* Both are load-bearing. The UA stylesheet gives dialog:modal
     max-width/max-height: calc(100% - 6px - 2em), which silently clamped the
     layer to 806px on an 844px viewport and left the sheet floating 38px off
     the bottom edge. */
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: clip;                        /* the card scrolls, not the layer */
  block-size: 100vh;                     /* floor for Safari < 15.4 */
  block-size: 100dvh;
  /* js/main.js writes these two from window.visualViewport while the sheet
     is open. iOS offsets the visual viewport for the on-screen keyboard
     rather than shrinking the layout viewport, and dvh tracks toolbar
     collapse, not the keyboard — so without this the bottom of the sheet,
     Continue included, ends up behind the keyboard. */
  block-size: var(--vv-h, 100dvh);
  transform: translateY(var(--vv-top, 0px));
}
.leadmodal[open] { display: flex; align-items: center; justify-content: center; }

/* ::backdrop has no inheritance parent in the engines we support, so
   var(--navy-900) would resolve to nothing here. Literal values only. */
.leadmodal::backdrop { background: rgba(7, 16, 38, 0.62); }

/* Three regions: fixed head, scrolling middle, fixed foot. min-block-size:0
   at every level, or the flex items refuse to shrink below their content and
   the middle never scrolls. */
.leadmodal > .form {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  inline-size: 100%;
  max-inline-size: 560px;
  max-block-size: 92vh;
  max-block-size: 92dvh;
  padding: 0;                            /* padding moves onto the regions */
}
.leadmodal .form__progress {
  flex: none;
  margin-block-end: 0;
  padding: var(--s-5) var(--s-6) var(--s-4);
}
.leadmodal .form__ptop { align-items: center; justify-content: flex-start; margin-block-end: var(--s-3); }
.leadmodal .form__body { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }
.leadmodal .form__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  /* Both axes named deliberately. `overflow-y: auto` alone computes
     overflow-x to `auto`, and .hp sits -9999px to the inline start — the
     sheet would then pan sideways to reveal the honeypot. */
  overflow: hidden auto;
  overscroll-behavior: contain;          /* no scroll chaining to the page */
  padding: var(--s-2) var(--s-6) var(--s-5);
}
.leadmodal .form__scroll .field { scroll-margin-block: var(--s-5); }
.leadmodal .form__nav {
  flex: none;
  margin-block-start: 0;
  padding: var(--s-4) var(--s-6);
  /* env() is 0 until the page opts into viewport-fit=cover, so the literal
     is what actually clears the home bar today. Kept as max() so it becomes
     correct the day cover is enabled. */
  padding-block-end: max(var(--s-4), env(safe-area-inset-bottom));
  background: var(--white);
  border-block-start: 1px solid var(--line);
}
.leadmodal .form__done { overflow: hidden auto; padding: var(--s-6); }

/* A third .form__ptop child. Deliberately not position:absolute — that would
   make it a containing block for .hp. */
.form__close {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  flex: none;
  margin-inline-start: auto;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.form__close:hover { background: var(--paper-2); color: var(--navy-900); }
.form__close svg { inline-size: 18px; block-size: 18px; }

.form__notetoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-700);
  cursor: pointer;
  text-align: start;
}
.form__notetoggle:hover { text-decoration: underline; }
.form__notetoggle[aria-expanded="true"] { display: none; }

/* showModal() makes the rest of the document inert but does NOT lock its
   scroll. Lock on BODY, never html: html carries no overflow declaration, so
   the viewport-propagation rule hands body's overflow-x to the viewport and
   body is not itself a scroll container — which is what keeps the sticky
   header working. Declaring overflow on html breaks that propagation and
   turns body into a scroll container mid-session.

   A class rather than an inline style, so it composes with the mobile
   drawer's own inline lock in js/main.js instead of racing it. */
body.is-locked { overflow: hidden; }
/* The bar would otherwise show through the backdrop. .is-up is
   IntersectionObserver-driven, so this reverts on its own. */
body.is-locked .mobilebar { transform: translateY(110%); }

/* Closing CTA in #start — the form itself is in the dialog. */
.qual__cta { display: grid; gap: var(--s-4); justify-items: start; }
.qual__cta .btn { font-size: 1.02rem; padding: 15px var(--s-6); }
.qual__ctanote { font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); max-inline-size: 44ch; }
.qual__ctanote a { color: var(--teal-300); }

@media (prefers-reduced-motion: no-preference) {
  .leadmodal[open] > .form { animation: modal-in .26s var(--ease) both; }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three fact-lists side by side is too tight below this. */
  .isl { grid-template-columns: 1fr; }
  /* .mobilebar is position:fixed and ~66px tall once it slides up, and
     nothing else padded for it — the last footer links and the legal row
     sat underneath it. */
  .footer { padding-block-end: calc(var(--s-6) + 76px); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .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-stuck));
    block-size: calc(100dvh - var(--header-h-stuck));
    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 {
    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__phone:hover { border-color: var(--navy-700); text-decoration: none; }
  .nav__phone svg { inline-size: 16px; block-size: 16px; flex: none; }

  .header__actions { margin-inline-start: auto; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
  .mobilebar { display: flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer__about { grid-column: 1 / -1; }
  .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 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); }
  .footer__logo { block-size: 38px; }
  .services { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; gap: var(--s-5); }
  /* Marker in its own column, with the title and description stacked beside
     it. The previous flex row put all three children side by side, which left
     the headings a narrow column of their own and wrapped them badly. */
  .step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-4);
    row-gap: 6px;
    align-items: start;
  }
  .step__marker {
    grid-column: 1;
    grid-row: 1 / span 2;
    inline-size: 34px;
    block-size: 34px;
    font-size: 0.75rem;
  }
  .step h3 { grid-column: 2; grid-row: 1; }
  .step p  { grid-column: 2; grid-row: 2; }
  .choices { grid-template-columns: 1fr; }
  .ccode__toggle { padding-inline: var(--s-2); gap: 6px; }
  .ccode__menu { min-inline-size: min(280px, calc(100vw - 64px)); }
  .hero__points { flex-direction: column; gap: var(--s-3); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__legal .spacer { margin-inline-start: 0; }
  .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; }

  /* --- the lead dialog becomes a bottom sheet --- */
  .leadmodal[open] { align-items: flex-end; }
  .leadmodal > .form {
    max-inline-size: none;
    /* Steps 1 and 2 are short; without a floor the sheet resizes under the
       visitor between questions. */
    min-block-size: min(56dvh, 420px);
    max-block-size: 92dvh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .leadmodal .form__progress { padding: var(--s-4) var(--s-5) var(--s-3); }
  .leadmodal .form__scroll   { padding: var(--s-2) var(--s-5) var(--s-4); }
  .leadmodal .form__nav      { padding-inline: var(--s-5); }
  .leadmodal .form__done     { padding: var(--s-5); }

  /* iOS zooms the page when a focused control computes under 16px. The base
     rule is 0.97rem, and rem is the ROOT size — <html> sets no font-size, so
     that is 15.52px against the 16px browser default. The
     `body { font-size: 16px }` rule at the top of this block does not affect
     a rem, so every field tap zoomed the page before this. */
  .form .field input, .form .field textarea { font-size: 16px; }

  .isl { grid-template-columns: 1fr; }
  .starter__tile { min-block-size: 60px; }
}

/* The country listbox is absolutely positioned inside .form__scroll, so the
   scroller clips it. initCountryCode() scrolls it into view; this keeps it
   short enough to land somewhere useful with the keyboard up. */
@media (max-width: 620px) {
  .ccode__menu { max-block-size: 46dvh; }
}

@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .leadmodal[open] > .form { animation-name: sheet-in; }
}
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* --------------------------------------------------------------------------
   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, .mobilebar, .leadmodal, .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; }
}