/* New Life Q&A — one stylesheet, no external fonts (20 scripts use system fonts). */
:root {
  --teal: #008181; --teal-dark: #006b6b; --teal-deep: #004f4f; --teal-soft: #e6f2f2;
  --gold: #c9a24b; --gold-text: #82601a;
  --wa: #0f7a3d; --wa-hover: #0b6331;
  --ink: #122022; --muted: #4b5f60; --bg: #ffffff; --band: #f6f8f7; --line: #dfe7e6;
  --card: #ffffff; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,79,79,.07);
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial,
          "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Malayalam",
          "Noto Sans Tamil", "Noto Sans Sinhala", "Noto Sans Ethiopic", "PingFang SC", "Microsoft YaHei", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8efee; --muted: #a9bbbb; --bg: #0e1717; --band: #132020; --line: #243536;
    --card: #152323; --teal-soft: #173232; --gold-text: #dcc07f; --shadow: none;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.65; font-size: 1.0625rem; }
/* Arabic: a bundled font, so no device falls back to an Urdu (Nastaliq) face.
   Urdu keeps Nastaliq on purpose: it is how Urdu readers expect their script. */
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/plex-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(/assets/plex-arabic-700.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
/* Fallbacks are Naskh/sans Arabic faces only (Apple: SF Arabic via system-ui, Geeza Pro) - never Nastaliq. */
html[lang="ar"] body, [lang="ar"] { font-family: "Plex Arabic", system-ui, -apple-system, "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; }
body.rtl { line-height: 1.85; }
html[lang="ur"] body, [lang="ur"] { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", Tahoma, var(--font); }
html[lang="ur"] body { line-height: 2.1; }
img { max-width: 100%; height: auto; }
a { color: var(--teal-dark); }
@media (prefers-color-scheme: dark) { a { color: #6fd0cf; } }
a:focus-visible, summary:focus-visible, .cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.narrow { width: min(820px, 100% - 2rem); }
.skip { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--teal-deep); color: #fff; padding: .6rem 1rem; z-index: 10; }
.skip:focus { inset-inline-start: 1rem; top: 1rem; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 750; font-size: 1.15rem; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; font-size: .85rem; letter-spacing: .02em; }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; white-space: nowrap; }
.langs summary::-webkit-details-marker { display: none; }
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); margin: 0; padding: .4rem; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: .1rem; max-height: 70vh; overflow: auto; }
.langs li a { display: block; padding: .45rem .7rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.langs li a:hover, .langs li a[aria-current] { background: var(--teal-soft); }
.langs li a[aria-current] { font-weight: 700; }
@media (max-width: 520px) { .langs ul { grid-template-columns: 1fr 1fr; width: min(340px, 92vw); } .brand-name { font-size: 1rem; } }

/* hero */
.hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(201,162,75,.18), transparent 60%), linear-gradient(160deg, var(--teal-deep), var(--teal) 70%); color: #fff; padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.eyebrow { margin: 0 0 .8rem; font-weight: 600; opacity: .92; }
.hero h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.2; max-width: 20ch; }
.lead { font-size: clamp(1.08rem, 2vw, 1.3rem); max-width: 60ch; margin: 0 0 1.8rem; opacity: .96; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.cta { display: inline-flex; align-items: center; gap: .6rem; background: var(--wa); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 1.12rem; padding: .95rem 1.5rem; border-radius: 999px; box-shadow: 0 8px 22px rgba(0,0,0,.18); transition: background .15s, transform .15s; }
.cta:hover { background: var(--wa-hover); transform: translateY(-1px); }
.wa-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.wa-number { margin: 0; font-size: 1.05rem; }
.hero .wa-number a { color: #fff; font-weight: 700; }
.note { margin: 1.2rem 0 0; opacity: .88; font-size: .98rem; }

/* sections */
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band { background: var(--band); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 1.5rem; color: var(--teal-deep); line-height: 1.3; }
@media (prefers-color-scheme: dark) { h2 { color: #8fdad9; } }
h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { display: flex; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); }
.step p, .card p { margin: 0; color: var(--muted); }
.step-n { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--teal-soft); color: var(--teal-dark); font-weight: 800; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; box-shadow: var(--shadow); border-top: 4px solid var(--gold); }

/* about / proof */
.about { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1.15fr; } }
.org-logo { display: block; width: 200px; margin-bottom: 1rem; }
@media (prefers-color-scheme: dark) { .org-logo { background: #fff; padding: .6rem; border-radius: 10px; } }
.doc-link { font-weight: 700; }
.facts { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.facts div { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-weight: 700; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .facts div { grid-template-columns: 1fr; gap: .2rem; } }

/* faq */
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; }
.faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 650; list-style: none; position: relative; padding-inline-end: 2.6rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 1.1rem; top: .85rem; font-size: 1.3rem; color: var(--teal); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--muted); }
.closing { text-align: center; }

/* footer */
.footer { background: var(--teal-deep); color: #e6f2f2; padding: 2rem 0; font-size: .95rem; }
.footer a { color: #fff; }
.footer p { margin: .35rem 0; }
.small { opacity: .8; font-size: .88rem; }

/* privacy page */
.policy .prose { padding: 2.5rem 0 3.5rem; }
.prose h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--teal-deep); }
.prose h2 { font-size: 1.35rem; margin-top: 2rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose th, .prose td { text-align: start; border-bottom: 1px solid var(--line); padding: .55rem .4rem; vertical-align: top; }
.policy-langs a { margin: 0 .2rem; }
@media print { .topbar, .cta, .langs { display: none; } body { font-size: 12pt; } }

/* Gheras strip (top of page) + project permit */
.org-strip { background: var(--card); border-bottom: 1px solid var(--line); padding: .7rem 0; }
.org-strip-in { display: flex; align-items: center; gap: 1rem; }
.org-strip p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.org-strip strong { font-size: 1.15rem; color: var(--teal-deep); }
@media (prefers-color-scheme: dark) { .org-strip strong { color: #8fdad9; } }
.strip-logo { display: block; width: 140px; }
@media (prefers-color-scheme: dark) { .strip-logo { background: #fff; padding: .35rem; border-radius: 8px; } }
@media (max-width: 520px) { .strip-logo { width: 80px; } .org-strip p { font-size: .88rem; } }
.permit-badge { display: inline-block; margin: 1.3rem 0 0; padding: .5rem 1rem; border-radius: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); font-weight: 700; }
.permit-no { font-size: 1.15rem; color: var(--teal-dark); }
@media (prefers-color-scheme: dark) { .permit-no { color: #8fdad9; } }
.doc-link { display: inline-block; margin-top: 1rem; }