/* ============================================================
   PROJECT PAGES — light theme (October 2026)

   White pages, charcoal text, the logo's gold for buttons and accents
   only. Dark is kept for the footer, where the original logo sits on the
   background it was made for. Headings in Newsreader, text in Inter, both
   served from this site (the CSP allows fonts from here only).
   ============================================================ */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-display-450.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-display-560.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Amiri cut to the basic Arabic block (U+0600-06FF), 108 to 74 KB, so it
   arrives before first paint; every Arabic character on the site is in it. */
@font-face { font-family: "Amiri"; src: url("/assets/fonts/amiri-arabic-core-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Amiri"; src: url("/assets/fonts/amiri-arabic-core-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("/assets/fonts/cairo-arabic-variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* Turkish letters (ğ, ş, ı, İ) and other Latin Extended characters, and the
   Armenian alphabet (5 Oct 2026). Same family names with a unicode-range:
   the browser only fetches these where a page uses such a character, and
   checks them before the Latin files above for those characters. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-ext-variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/notosansarmenian-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/notoserifarmenian-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }

:root {
  --white: #FFFFFF;
  --ivory: #F8F6F1;          /* bands and the form card's section */
  --ink: #17191C;            /* text, 17.6:1 on white */
  --ink-2: #4B5057;          /* secondary text, 8:1 */
  --ink-3: #6B7077;          /* captions, 5:1 */
  --line: #E6E1D7;
  --gold: #C4A062;           /* buttons, ink on gold 7.2:1 */
  --gold-hover: #B38F51;
  --gold-text: #86642A;      /* gold used as text, 5.4:1 on white */
  --gold-tint: #F5EEDF;
  --night: #16181B;          /* footer */
  --error: #A23B2A;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* hidden must win over every component display rule (the evidence panel showed
   empty on load because .evidence sets display: grid). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 17px/1.6 var(--text); }
img { max-width: 100%; display: block; }
a { color: var(--gold-text); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.02; }
h1.long { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.06; }
h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
p { margin: 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius);
  font: 600 16px/1 var(--text); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .2s, border-color .2s, color .2s;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-hover); }
.btn-quiet { background: transparent; color: var(--ink); border-color: #CFC8BA; }
.btn-quiet:hover { border-color: var(--ink); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter); background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.2) blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 44px; height: auto; }
.brand-name { display: grid; font-family: var(--display); font-size: 21px; letter-spacing: 0.28em; line-height: 1.1; }
.brand-name span { font-family: var(--text); font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); }
.head-actions { display: flex; align-items: center; gap: 22px; }
.head-lang { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 2px; border-bottom: 1px solid transparent; }
.head-lang:hover { border-bottom-color: var(--gold); }
/* Six languages (5 Oct 2026): a menu that works without script. */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 15px; font-weight: 500; color: var(--ink); border-bottom: 1px solid transparent; white-space: nowrap; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang-menu[open] summary::after { transform: translateY(1px) rotate(225deg); }
.lang-menu summary:hover, .lang-menu[open] summary { border-bottom-color: var(--gold); }
.lang-code { display: none; letter-spacing: 0.06em; }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(23, 25, 28, 0.35); }
.lang-menu li a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.3; }
.lang-menu li a:hover, .lang-menu li a:focus-visible { background: var(--ivory); }
.lang-menu li a[aria-current="page"] { font-weight: 600; color: var(--gold-text); }
.cta-short { display: none; }
@media (max-width: 520px) { .cta-full { display: none; } .cta-short { display: inline; } }
.head-phone { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.head-nav { display: flex; gap: 26px; margin-inline-start: auto; margin-inline-end: 14px; }
.head-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; border-bottom: 1px solid transparent; }
.head-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
@media (max-width: 1100px) { .head-nav { display: none; } }

/* ---------- hero: full-bleed picture, large type ----------
   The one dark band on the page: a short text over a photograph, readable
   through a soft gradient. Everything that is read at length stays light. */
.hero { position: relative; isolation: isolate; min-height: min(88vh, 780px); display: flex; align-items: flex-end; overflow: hidden; background: #1A1B1A; }
.hero-media { position: absolute; inset: 0; margin: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(14, 15, 14, 0.86) 0%, rgba(14, 15, 14, 0.5) 40%, rgba(14, 15, 14, 0.1) 75%, rgba(14, 15, 14, 0.18) 100%),
  linear-gradient(to right, rgba(14, 15, 14, 0.5) 0%, rgba(14, 15, 14, 0.18) 45%, rgba(14, 15, 14, 0) 70%); }
html[dir="rtl"] .hero-media::after { background:
  linear-gradient(to top, rgba(14, 15, 14, 0.86) 0%, rgba(14, 15, 14, 0.5) 40%, rgba(14, 15, 14, 0.1) 75%, rgba(14, 15, 14, 0.18) 100%),
  linear-gradient(to left, rgba(14, 15, 14, 0.5) 0%, rgba(14, 15, 14, 0.18) 45%, rgba(14, 15, 14, 0) 70%); }
.hero-media figcaption { position: absolute; inset-inline-end: var(--gutter); bottom: 16px; z-index: 1; max-width: 46ch; font-size: 12px; color: rgba(255, 255, 255, 0.78); text-align: end; }
.hero-text { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(56px, 8vh, 88px); color: #FFFFFF; }
.hero .eyebrow { color: #E2C68E; }
.hero h1 { font-size: clamp(48px, 7.6vw, 104px); line-height: 0.98; letter-spacing: -0.02em; max-width: 14ch; }
.hero h1.long { font-size: clamp(42px, 5.6vw, 80px); max-width: 18ch; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; margin-top: 20px; max-width: 46ch; color: rgba(255, 255, 255, 0.9); }
/* Pills, not a line with dots: three facts wrap at almost any width, and a
   separator dot then ends up at the start of a line. */
.hero-price { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; font-weight: 600; font-size: 15px; }
.hero-price span { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(6px); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 30px; }
.text-link { color: var(--ink); font-weight: 500; font-size: 15px; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.text-link:hover { color: var(--gold-text); }
.hero .text-link { color: #FFFFFF; }
.hero .text-link:hover { color: #E2C68E; }
.hero-note { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.72); max-width: 52ch; }
.hero-hub .hero-media img { object-position: 30% 55%; }

/* ---------- facts ---------- */
.facts { background: var(--ivory); border-block: 1px solid var(--line); padding: 36px var(--gutter); }
.facts-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.facts-grid > dl { min-width: 0; margin: 0; }
.facts-grid > dl > dt { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.facts-grid > dl > dd { margin: 6px 0 0; font-family: var(--display); font-size: 21px; line-height: 1.25; }
.facts-source { max-width: var(--wrap); margin: 22px auto 0; font-size: 13px; color: var(--ink-3); }

/* ---------- facts as evidence buttons ---------- */
/* The whole figure is the button, with its own "See source" line, so it is a
   comfortable touch target and says what it does. */
button.fact { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 2px 0 8px; font: inherit; color: inherit; line-height: inherit; border-bottom: 1px dotted var(--gold); transition: border-color .2s, color .2s; }
.fact-src { font-family: var(--text); font-size: 12px; font-weight: 600; color: var(--gold-text); }
.fact-src::after { content: " \2193"; }
button.fact:hover, button.fact.is-open { color: var(--gold-text); border-bottom: 2px solid var(--gold-text); }
button.fact:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 2px; }
.evidence { position: relative; max-width: var(--wrap); margin: 22px auto 0; padding: 20px 22px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 10px; }
/* A pointer on the panel's edge marks the figure it belongs to. */
.evidence::before { content: ""; position: absolute; top: -9px; inset-inline-start: calc(var(--from, 24px) - 8px); border: 8px solid transparent; border-top: 0; border-bottom: 9px solid var(--gold-text); }
.evidence-for { font-size: 14px; color: var(--ink-2); }
.evidence-for b { color: var(--ink); }
/* On phones the panel opens inside the grid, right under the tapped row. */
.facts-grid > .evidence { grid-column: 1 / -1; margin: 4px 0 8px; }
.evidence-line { position: absolute; top: -1px; inset-inline-start: 0; height: 2px; width: 100%; background: var(--gold-text); transform-origin: var(--from, 0) 50%; transform: scaleX(0); }
html[dir="rtl"] .evidence-line { transform-origin: calc(100% - var(--from, 0px)) 50%; }
.evidence.is-open .evidence-line { animation: evidence-draw .55s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes evidence-draw { to { transform: scaleX(1); } }
.evidence dl { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.evidence dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); min-height: 1em; }
.evidence dd { margin: 4px 0 0; }
.evidence-status, .status { display: inline-block; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-text); }
.status-thirdparty { background: #EEF0F2; color: var(--ink-2); }
.status-official { background: #E8EEF0; color: #2D4650; }
/* A figure we could not confirm: outlined, not filled, so it never reads as settled. */
.status-pending { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.evidence-all { font-size: 14px; justify-self: start; }
.facts-hint { color: var(--ink-3); }
html[dir="rtl"] .evidence dt { letter-spacing: 0; text-transform: none; }

/* ---------- source ledger ---------- */
.ledger-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
.ledger-table th, .ledger-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger-table thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--ivory); }
.ledger-table tbody th { font-weight: 600; }
.ledger-table tbody tr:last-child th, .ledger-table tbody tr:last-child td { border-bottom: 0; }
.ledger-table tr.is-marked { animation: ledger-mark 2.4s ease-out; }
@keyframes ledger-mark { 0%, 40% { background: var(--gold-tint); box-shadow: inset 3px 0 0 var(--gold-text); } 100% { background: transparent; box-shadow: none; } }
.changes-title { margin: 28px 0 10px; font-family: var(--display); font-weight: 500; font-size: 20px; }
.changes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); max-width: 90ch; }
.changes li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.changes time { font-weight: 600; color: var(--ink); }
html[dir="rtl"] .ledger-table thead th { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .changes-title { font-family: "Amiri", var(--display); }
@media (prefers-reduced-motion: reduce) { .evidence.is-open .evidence-line { animation: none; transform: scaleX(1); } .ledger-table tr.is-marked { animation: none; } }

/* ---------- shortlist + form ---------- */
.shortlist {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 80px); align-items: start;
}
.shortlist-text { min-width: 0; grid-row: span 2; }
/* Credentials and who answers sit under the form, next to the submit. */
.shortlist-trust { min-width: 0; grid-column: 2; }
.shortlist-trust .credentials { margin-top: 0; }
/* Sample shortlist: a real record set like the written reply it stands for. */
.sample { margin-top: 22px; background: var(--white); border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: 10px; padding: 20px 22px 18px; }
.sample-title { margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.25; }
.sample-label { margin: 4px 0 14px; font-size: 13px; color: var(--ink-3); }
.sample-doc { margin: 0; display: grid; gap: 0; }
.sample-doc > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.sample-doc dt { font-size: 13px; color: var(--ink-3); }
.sample-doc dd { margin: 0; font-size: 15px; line-height: 1.5; min-width: 0; }
.sample-num { display: block; font-variant-numeric: tabular-nums; font-weight: 600; }
.sample-doc dd .sample-num:first-child { margin-bottom: 2px; }
.sample-doc dd .sample-num:not(:first-child) { margin-top: 2px; }
.sample-more { margin-top: 4px; border-top: 1px solid var(--line); }
.sample-more summary { cursor: pointer; padding: 10px 0 4px; font-size: 14px; font-weight: 600; color: var(--gold-text); list-style: none; }
.sample-more summary::-webkit-details-marker { display: none; }
.sample-more summary::after { content: " +"; }
.sample-more[open] summary::after { content: " \2212"; }
.sample-more .sample-doc > div:first-child { border-top: 0; }
.form-reply { margin: 4px 0 12px; font-size: 14px; color: var(--ink-2); }
.sample-contents { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.sample-response { margin: 16px 0 0; font-weight: 600; }
.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 22px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; color: var(--ink-2); }
.steps li::before { content: counter(step); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-text); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.steps b { color: var(--ink); font-weight: 600; display: block; }
.credentials { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.who-answers { margin-top: 20px; max-width: 52ch; font-size: 15px; color: var(--ink-2); }
.who-answers b { color: var(--ink); }
.credentials li { font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }

.form-card { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: clamp(22px, 3vw, 34px); box-shadow: 0 18px 40px -28px rgba(23, 25, 28, 0.25); }
.lead-form { display: grid; gap: 18px; }
.lead-form[hidden], .lead-done[hidden] { display: none !important; }
.field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field[hidden] { display: none; }
.field label, .channel-pick legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; }
.optional { font-weight: 400; color: var(--ink-3); }
.field input, .field select {
  width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #CFC8BA; border-radius: var(--radius);
  background: var(--white); color: var(--ink); font: 16px var(--text);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus, .field select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.field input::placeholder { color: #9A9EA4; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.channel-pick legend { margin-bottom: 8px; }
/* A segmented control: three equal parts that never wrap inside the card. */
.channel-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #CFC8BA; border-radius: var(--radius); overflow: hidden; }
.channel-options label { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 8px; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.channel-options label + label { border-inline-start: 1px solid #CFC8BA; }
/* The radios must not pick up the text-field look from .field input. */
.channel-options input { width: auto; min-height: 0; padding: 0; border: 0; accent-color: var(--gold-text); margin: 0; }
.channel-options label:has(input:checked) { background: var(--gold-tint); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold-text); }
.lead-status { margin: 0; font-size: 14px; color: var(--ink-2); }
.lead-status:empty { display: none; }
.lead-status.is-error { color: var(--error); }
.lead-fallback { font-size: 14px; font-weight: 600; }
.form-note { font-size: 13px; color: var(--ink-3); }
.lead-done { display: grid; gap: 16px; }
.lead-done:focus { outline: none; }
.lead-done-title { font-family: var(--display); font-size: 28px; line-height: 1.2; }
.lead-done-body { color: var(--ink-2); }
.lead-done-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lead-done-actions .btn { flex: 1 1 200px; }

/* ---------- payment plan ---------- */
.plan, .why, .faq, .gallery, .sources { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
/* Sparse sections get less air, so the page does not feel stretched. */
.gallery, .why { padding-bottom: clamp(48px, 6vw, 72px); }
.section-head { margin-bottom: 28px; }
.plan-bar { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
/* Segment widths follow the percentages. Classes, not inline styles: the CSP
   allows no style attributes. */
.plan-10-70-20 { grid-template-columns: 10fr 70fr 20fr; }
.plan-20-40-40 { grid-template-columns: 20fr 40fr 40fr; }
.plan-bar li { padding: 18px 16px 16px; display: grid; gap: 4px; min-width: 0; }
.plan-bar b { font-family: var(--display); font-size: 24px; font-weight: 500; }
.plan-bar span { font-size: 13px; color: var(--ink-2); }
.plan-book { background: var(--gold); }
.plan-book span { color: var(--ink); }
.plan-build { background: var(--gold-tint); }
.plan-hand { background: var(--ivory); border: 1px solid var(--line); }
.plan-example { margin-top: 18px; color: var(--ink-2); max-width: 72ch; }

/* ---------- hub: project cards ---------- */
.cards { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--gutter); }
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { min-width: 0; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); scroll-margin-top: 96px; }
.card-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s; }
.card:hover .card-media img { transform: scale(1.02); }
.card-body { padding: 22px; display: grid; gap: 10px; align-content: start; }
.card-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
.card h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.15; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.card-price { font-weight: 600; }
.card-facts { margin: 4px 0 8px; display: grid; gap: 6px; font-size: 14px; }
.card-facts div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
.card-facts dt { color: var(--ink-3); }
.card-facts dd { margin: 0; color: var(--ink-2); }
.card .btn { justify-self: start; }
html[dir="rtl"] .card-meta { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .card h3 { font-family: "Amiri", var(--display); }

/* ---------- hub: comparison ---------- */
.compare { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { font-family: var(--display); font-weight: 500; font-size: 20px; background: var(--ivory); }
.compare-table thead th a { color: var(--ink); text-decoration: none; }
.compare-table thead td { background: var(--ivory); }
.compare-table tbody th { font-size: 13px; font-weight: 600; color: var(--ink-3); width: 18%; }
.compare-table td.hl { background: var(--gold-tint); font-weight: 600; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
html[dir="rtl"] .compare-table thead th { font-family: "Amiri", var(--display); }

/* ---------- project pages: the community first, then its homes (5 Oct 2026) ---------- */
.community { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(48px, 6vw, 72px); }
.community-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.community-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.cl-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cl-item p { margin: 0; color: var(--ink); }
.cl-status { display: inline-flex; align-items: center; gap: 8px; align-self: start; padding-top: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cl-status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 1.5px dashed var(--ink-3); }
.cl-item.is-today .cl-status { color: var(--gold-text); }
.cl-item.is-today .cl-status::before { border: 0; background: var(--gold); }
.cl-item.is-building .cl-status { color: var(--ink-2); }
.cl-item.is-building .cl-status::before { border: 1.5px solid var(--gold); background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); }
html[dir="rtl"] .cl-item.is-building .cl-status::before { background: linear-gradient(270deg, var(--gold) 50%, transparent 50%); }
html[dir="rtl"] .cl-status { letter-spacing: 0; text-transform: none; font-size: 13px; }
.community-side { background: var(--ivory); border-radius: 10px; padding: 22px 24px; display: grid; gap: 12px; }
.community-side h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .community-side h3 { letter-spacing: 0; text-transform: none; font-size: 14px; }
.times { margin: 0; display: grid; }
.times div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.times div:last-child { border-bottom: 0; }
.times dt { color: var(--ink-2); min-width: 0; }
.times dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.times-note { font-size: 14px; color: var(--ink-2); }
.community-shots { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.community-shots figure, .compare-pics figure { margin: 0; min-width: 0; }
.community-shots img, .compare-pics img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.community-shots figcaption, .compare-pics figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.compare-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.compare-pics.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare-pics figcaption b { color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 19px; margin-inline-end: 6px; }
html[dir="rtl"] .compare-pics figcaption b { font-family: "Amiri", var(--display); }
.compare-table.cols-2 { min-width: 560px; }
.compare-table.cols-2 tbody th { width: 22%; }
.compare-cta { margin-top: 22px; }
.compare-cta .btn { display: inline-flex; }
@media (max-width: 900px) {
  .community-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cl-item { grid-template-columns: minmax(0, 1fr); }
  .community-shots, .compare-pics, .compare-pics.cols-3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 6px; }
  .community-shots figure, .compare-pics figure { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- reference catalogue (/projects) ---------- */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { width: auto; height: auto; clip: auto; inset-inline-start: 12px; top: 12px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 6px; font-weight: 600; }
/* An old anchor name kept for links that still use it. */
.anchor-alias { display: block; height: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cat-head { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) 24px; }
.cat-filters { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.cat-filters input, .cat-filters select { width: 100%; min-height: 50px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background-color: var(--white); border: 1px solid #CFC8BA; border-radius: var(--radius); }
.cat-filters select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.cat-filters input:focus, .cat-filters select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.cat-count { margin-top: 14px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cat-count span { color: var(--ink); font-weight: 600; }
.cat-source { margin-top: 4px; font-size: 13px; color: var(--ink-3); max-width: 80ch; }
.cat-groups { max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gutter) clamp(40px, 6vw, 72px); }
/* A folio index: the community on the left, its projects on the right. */
.cat-group { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px 48px; padding: 36px 0; border-top: 1px solid var(--line); }
.cat-group[hidden] { display: none; }
.cat-group-head { align-self: start; position: sticky; top: 96px; display: grid; gap: 6px; justify-items: start; }
.cat-group-head h2 { font-size: clamp(26px, 2.4vw, 32px); }
.cat-group-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); }
.cat-group-head .text-link { margin-top: 6px; font-size: 14px; }
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; }
.cat-row { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cat-row[hidden] { display: none; }
.cat-name { min-width: 0; font-family: var(--display); font-size: 19px; line-height: 1.3; }
.cat-name a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.cat-ask { flex: none; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--gold-text); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.cat-ask::after { content: " \2192"; }
.cat-ask:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-none { padding: 28px 0; color: var(--ink-2); border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .cat-group { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0; }
  .cat-group-head { position: static; }
  .cat-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cat-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cat-search { grid-column: 1 / -1; }
}
html[dir="rtl"] .cat-group-meta { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .cat-group-head h2 { font-family: "Amiri", var(--display); }
html[dir="rtl"] .cat-ask::after { content: " \2190"; }
html[dir="rtl"] .cat-filters select { background-position: 14px 22px, 20px 22px; padding-right: 14px; padding-left: 36px; }

/* ---------- homepage ----------
   Split hero (text on ivory, the arch photograph), a ledger card on the
   photograph, then the ledger explained with a real row, the documented
   projects, the published launches, a photo band and the catalogue by
   community. */
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: min(90vh, 860px); background: var(--ivory); border-bottom: 1px solid var(--line); }
.home-hero-text { align-self: center; min-width: 0; padding-block: clamp(56px, 8vw, 112px); padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)) clamp(24px, 4vw, 64px); }
.home-hero h1 { font-size: clamp(44px, 5.2vw, 80px); line-height: 1.02; letter-spacing: -0.022em; max-width: 13ch; }
.home-lede { margin-top: 24px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.home-hero .hero-cta { margin-top: 32px; }
.home-hero .credentials { margin-top: 36px; }
.home-hero-media { position: relative; margin: 0; min-height: 100%; overflow: hidden; }
.home-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 24% 50%; }
.home-hero-media figcaption { position: absolute; inset-inline-end: 16px; bottom: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.82); }
.proof-card { position: absolute; z-index: 2; inset-inline-start: calc(52.5% + 32px); bottom: clamp(48px, 9vh, 96px); width: min(360px, calc(47.5% - 64px)); display: grid; gap: 6px; padding: 20px 22px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 28px 60px -30px rgba(23, 25, 28, 0.5); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.proof-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.proof-project { font-size: 13px; color: var(--ink-3); }
.proof-value { font-family: var(--display); font-size: 25px; line-height: 1.18; }
.proof-cash { font-size: 14px; line-height: 1.45; color: var(--ink); }
.proof-line { display: block; height: 2px; margin: 6px 0 4px; background: var(--gold); transform: scaleX(0); transform-origin: left center; animation: evidence-draw .9s .5s cubic-bezier(.2, .7, .2, 1) forwards; }
.proof-doc { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.proof-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--ink-3); }
.proof-figure { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .proof-figure { letter-spacing: 0; text-transform: none; font-size: 13px; }
.proof-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 6px; }
.proof-link { font-size: 14px; font-weight: 600; color: var(--ink); background: var(--gold); padding: 8px 14px; border-radius: var(--radius); text-decoration: none; }
.proof-link:hover { background: var(--gold-hover); }
.proof-ledger { font-size: 14px; font-weight: 600; color: var(--gold-text); }
html[dir="rtl"] .proof-line { transform-origin: right center; }
html[dir="rtl"] .proof-label { letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .proof-line { animation: none; transform: none; } }

.home-updates { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 7vw, 80px) var(--gutter) clamp(40px, 6vw, 64px); }
.home-log { max-width: 920px; }
.home-log summary { list-style: none; cursor: pointer; position: relative; padding-block: 6px; padding-inline: 0 40px; }
.home-log summary::-webkit-details-marker { display: none; }
.home-log summary::after { content: ""; position: absolute; inset-inline-end: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.home-log[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.home-log summary h2 { margin: 0; }
.home-log[open] .log-list { margin-top: 18px; }
.log-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.log-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.log-date { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-text b { margin-inline-end: 6px; color: var(--ink); font-weight: 600; }
.log-text a { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cards-more { margin-top: 28px; }

.launches { background: var(--ivory); border-block: 1px solid var(--line); padding: clamp(64px, 9vw, 112px) var(--gutter); }
.launches > * { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-inline: auto; }
.launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.launch { min-width: 0; display: grid; grid-template-rows: auto 1fr; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.launch-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.launch-body { padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; }
.launch h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.15; }
html[dir="rtl"] .launch h3 { font-family: "Amiri", var(--display); }
.launch-checked { font-size: 13px; color: var(--ink-3); }
.card-body .launch-checked { margin-top: -2px; }
.launch .cat-ask { justify-self: start; }
/* Arrows and position for the launch row; shown only where it scrolls. */
.launch-nav { display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.launch-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.launch-nav button:disabled { opacity: 0.4; cursor: default; }
html[dir="rtl"] .launch-nav button span { display: inline-block; transform: scaleX(-1); }
.launch-pos { min-width: 4.5em; text-align: center; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-hero-text { padding: 48px var(--gutter) 40px; }
  .home-hero-media { height: clamp(380px, 70vw, 560px); }
  .proof-card { position: relative; inset: auto; width: auto; margin: -140px var(--gutter) 40px; }
  .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* The photo credit wraps to two lines here; keep the headline clear of it. */
  /* Six cards stacked were about 4,000 px on a phone. One row to swipe,
     the next card showing at the edge, keeps them a thumb's move away. */
  /* position: relative keeps the buttons' screen-reader text, which is
     absolutely positioned, inside the row; without it the page grew 1,358 px. */
  /* Label above value, so the values keep the full width of the card. */
  .sample { padding: 16px 16px 14px; }
  .sample-doc > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
  .launch-grid { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 14px; }
  .launch { scroll-snap-align: start; }
  .launch-nav { display: flex; }
  .log-list li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- buying guide ---------- */
.guide-head { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) 24px; }
.guide-head h1 { max-width: 20ch; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.contact-card { margin: 0; max-width: 860px; border-top: 2px solid var(--gold); }
.contact-card div { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-card dt { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.contact-card dd { margin: 0; font-size: 17px; }
html[dir="rtl"] .contact-card dd[dir="ltr"] { text-align: end; }
@media (max-width: 640px) { .contact-card div { grid-template-columns: minmax(0, 1fr); } }
.guide-stamp { margin-top: 18px; }
.guide-block { max-width: var(--wrap); margin: 0 auto; padding: 32px var(--gutter) clamp(32px, 5vw, 56px); }
.guide-block h2 { margin-bottom: 18px; }
.guide-table td { font-size: 15px; }
.guide-amount { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.guide-examples { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.guide-examples li { min-width: 0; padding: 22px 24px; background: var(--ivory); border-radius: 10px; border-top: 2px solid var(--gold); display: grid; gap: 8px; align-content: start; }
.guide-example-name { font-family: var(--display); font-size: 22px; color: var(--ink); text-decoration: none; }
.guide-example-name:hover { text-decoration: underline; text-decoration-color: var(--gold); }
html[dir="rtl"] .guide-example-name { font-family: "Amiri", var(--display); }
.guide-examples p { color: var(--ink-2); font-size: 16px; }
.faq-more { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.guide-next { max-width: var(--wrap); margin: -24px auto 0; padding: 0 var(--gutter) clamp(40px, 6vw, 64px); }
.checks { list-style: none; counter-reset: chk; margin: 0; padding: 0; border-top: 2px solid var(--gold); max-width: 860px; }
.checks li { counter-increment: chk; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.checks li::before { content: counter(chk); grid-row: span 2; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--gold-text); }
.checks h2 { margin: 0; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.25; }
.checks p { color: var(--ink-2); max-width: 66ch; }
@media (max-width: 760px) { .guide-examples { grid-template-columns: minmax(0, 1fr); } }

/* ---------- units table ---------- */
.units { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.units-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.units table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 520px; }
.units th, .units td { padding: 16px 20px; text-align: start; border-bottom: 1px solid var(--line); }
.units thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); background: var(--ivory); }
.units tbody th { font-family: var(--display); font-weight: 500; font-size: 19px; }
.units tbody tr:last-child th, .units tbody tr:last-child td { border-bottom: 0; }
.units-note { margin-top: 14px; font-size: 14px; color: var(--ink-3); max-width: 80ch; }
html[dir="rtl"] .units thead th { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .units tbody th { font-family: "Amiri", var(--display); }

/* ---------- check stamp ---------- */
.stamp { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--gold-text); border-radius: 999px; color: var(--gold-text); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; vertical-align: 1px; }
.stamp::before { content: ""; width: 9px; height: 5px; border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-1px); }
html[dir="rtl"] .stamp::before { transform: rotate(45deg) translateY(-1px); }

/* ---------- cost timeline (calc.js) ---------- */
.cost { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.section-lede { margin-top: 12px; color: var(--ink-2); max-width: 62ch; }
.cost-body { border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 26px; background: var(--white); }
.cost-controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.cost-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cost-field label, .cost-field legend { font-size: 14px; font-weight: 600; padding: 0; }
.cost-price { font-family: var(--display); font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cost-field input[type=range] { width: 100%; accent-color: var(--gold-text); }
.cost-field select { min-height: 46px; padding: 0 12px; border: 1px solid #CFC8BA; border-radius: var(--radius); background: var(--white); font: 15px var(--text); color: var(--ink); }
.cost-variants { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #CFC8BA; border-radius: var(--radius); overflow: hidden; gap: 0; }
.cost-variants legend { margin-bottom: 8px; }
.cost-variants label { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; }
.cost-variants label + label { border-inline-start: 1px solid #CFC8BA; }
.cost-variants label:has(input:checked) { background: var(--gold-tint); box-shadow: inset 0 -2px 0 var(--gold-text); }
.cost-variants input { accent-color: var(--gold-text); margin: 0; }
.cost-summary { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cost-summary div { background: var(--ivory); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.cost-summary dt { font-size: 13px; color: var(--ink-3); }
.cost-summary dd { margin: 4px 0 0; font-family: var(--display); font-size: clamp(18px, 4.6vw, 22px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-summary div:last-child { background: var(--gold-tint); }
.cost-summary div:last-child dt { color: var(--ink-2); }
.cost-prefix { display: block; font-family: var(--text); font-size: 12px; color: var(--ink-3); white-space: normal; }
.cost-chart { margin: 0; }
.cost-chart svg { width: 100%; height: auto; display: block; }
.cost-chart figcaption { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.cost-axis { stroke: var(--line); stroke-width: 1; }
.cost-bar { fill: var(--gold); }
.cost-bar.small { fill: #D9C29A; }
.cost-bar.approx { fill: var(--gold-tint); stroke: var(--gold); stroke-dasharray: 3 3; }
.cost-bar.fee { fill: var(--ink-2); }
.cost-bar.undated { fill: var(--gold-tint); stroke: var(--gold); stroke-dasharray: 4 3; }
.cost-rule { stroke: var(--ink-3); stroke-dasharray: 2 4; }
.cost-tick { fill: var(--ink-3); font: 12px var(--text); }
.cost-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.cost-table th, .cost-table td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.cost-table th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cost-table td:last-child, .cost-table th:last-child { text-align: end; }
.cost-table tr.fee td { color: var(--ink-2); }
.cost-table tr.approx td { font-style: italic; }
.cost-notes { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); max-width: 80ch; }
.cost-body > .btn { justify-self: start; }
html[dir="rtl"] .cost-table th { letter-spacing: 0; text-transform: none; }

/* ---------- what we do not know yet ---------- */
.unknowns { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.unknowns-box { border-inline-start: 3px solid var(--gold); background: var(--ivory); padding: 24px 28px; border-radius: 0 10px 10px 0; display: grid; gap: 10px; max-width: 860px; }
html[dir="rtl"] .unknowns-box { border-radius: 10px 0 0 10px; }
.unknowns-box h2 { font-size: clamp(22px, 2.2vw, 28px); }
.unknowns-box p { color: var(--ink-2); }
.unknowns-box ul { margin: 6px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--ink); }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.gallery.has-tall { grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr); }  /* 4:3 next to 3:4 at equal height */
.gallery.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery.one { grid-template-columns: minmax(0, 1fr); }
.gallery.one img { aspect-ratio: 21 / 9; object-position: 50% 70%; }
.gallery figure { margin: 0; min-width: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
/* The width/height attributes stay in the HTML for layout stability; height:
   auto lets the aspect-ratio above decide instead of the attribute. */
.gallery figure.tall img { aspect-ratio: 3 / 4; object-position: 50% 70%; }

/* ---------- why ---------- */
.why-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.why-list li { padding: 20px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.why-list b { color: var(--ink); font-weight: 600; }
sup { font-size: 0.7em; line-height: 0; }
sup a { text-decoration: none; }

/* ---------- faq ---------- */
.faq-list { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding-block: 20px; padding-inline: 0 40px; position: relative; font-weight: 600; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; inset-inline-end: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; }

/* ---------- closing ---------- */
.closing { background: var(--ivory); border-block: 1px solid var(--line); padding: clamp(48px, 7vw, 80px) var(--gutter); text-align: center; display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(48px, 7vw, 80px); }
.closing p { color: var(--ink-2); margin-bottom: 10px; }

/* ---------- sources ---------- */
.sources h2 { font-size: 22px; margin-bottom: 14px; }
.sources ol { padding-inline-start: 20px; margin: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); max-width: 90ch; }
.disclaimer { margin-top: 18px; font-size: 13px; color: var(--ink-3); max-width: 90ch; }

/* ---------- footer ---------- */
.site-foot { background: var(--night); color: #C9C5BC; padding: 44px var(--gutter) 120px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; text-align: left; }
.foot-logo { width: 120px; height: auto; }
.foot-text { display: grid; gap: 6px; font-size: 13px; max-width: 760px; }
.foot-text a { color: #E2C68E; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-credit { color: #8F8B83; }

/* ---------- sticky bar (phones) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -20px rgba(23, 25, 28, 0.35); font-size: 14px;
}
.sticky-cta[hidden] { display: none; }
@media (min-width: 900px) { .sticky-cta { display: none !important; } }

/* ---------- consent banner (tracking.js) ---------- */
.consent {
  position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 40; max-width: 420px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 18px;
  box-shadow: 0 20px 50px -24px rgba(23, 25, 28, 0.4); display: grid; gap: 14px; font-size: 14px; color: var(--ink-2);
}
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent .btn { min-height: 42px; font-size: 14px; padding: 0 14px; }
.consent .btn-ghost { background: transparent; border-color: #CFC8BA; color: var(--ink); }
.consent .btn-gold { background: var(--gold); color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  /* Phones: the offer sits on the picture, so it is the first thing seen. */
  .hero { min-height: 640px; }
  .hero-media::after, html[dir="rtl"] .hero-media::after { background: linear-gradient(to top, rgba(14, 15, 14, 0.9) 0%, rgba(14, 15, 14, 0.62) 50%, rgba(14, 15, 14, 0.38) 100%); }
  .hero-text { padding-top: 140px; padding-bottom: 72px; }
  .hero-media figcaption { inset-inline: var(--gutter); text-align: start; bottom: 12px; }
  /* Phones read what happens after the request before the fields (it was
     the other way round until 4 Oct 2026). */
  .shortlist .steps { gap: 14px; margin-top: 20px; }
  .shortlist { gap: 32px; }
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .shortlist { grid-template-columns: minmax(0, 1fr); }
  .shortlist-text { grid-row: auto; }
  .shortlist-trust { grid-column: auto; }
  .why-list { grid-template-columns: minmax(0, 1fr); }
  .gallery, .gallery.three { grid-template-columns: minmax(0, 1fr); }
  .cards-grid { grid-template-columns: minmax(0, 1fr); }
  .cost-controls { grid-template-columns: minmax(0, 1fr); }
  .evidence dl { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cost-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-summary dd { font-size: 19px; }
  .cost-price { font-size: 28px; }
  .cost-table { font-size: 14px; }
  .cost-table th, .cost-table td { padding: 10px 4px; }
  .gallery figure.tall img { aspect-ratio: 4 / 3; }
  .head-phone { display: none; }
  .consent { inset-inline: 12px; bottom: 76px; max-width: none; }
  .head-lang { font-size: 14px; }
  .lang-name { display: none; }
  .lang-code { display: inline; }
  .lang-menu summary { font-size: 14px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .site-head { padding-block: 10px; gap: 10px; }
  .brand { gap: 8px; }
  .brand img { width: 34px; }
  .brand-name { font-size: 16px; letter-spacing: 0.22em; white-space: nowrap; }
  .brand-name span { font-size: 9px; white-space: nowrap; }
  .head-actions { gap: 12px; }
  .head-actions .btn-small { min-height: 38px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .changes li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .field-row { grid-template-columns: 1fr; }
  .plan-bar { grid-template-columns: minmax(0, 1fr); }
  .plan-bar li { padding: 14px 16px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-price { font-size: 14px; }
}
/* ---------- Arabic ---------- */
html[dir="rtl"] body { font-family: "Cairo", var(--text); line-height: 1.75; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] .facts-grid > dl > dd, html[dir="rtl"] .plan-bar b,
html[dir="rtl"] .lead-done-title, html[dir="rtl"] .brand-name { font-family: "Amiri", var(--display); letter-spacing: 0; }
html[dir="rtl"] h1 { line-height: 1.25; }
html[dir="rtl"] h2 { line-height: 1.35; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .facts-grid > dl > dt, html[dir="rtl"] .brand-name span { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .brand-name { font-size: 24px; }
html[dir="rtl"] .brand-name span { font-family: "Cairo", var(--text); font-size: 12px; }
html[dir="rtl"] .field select { background-position: 14px 22px, 20px 22px; padding-right: 14px; padding-left: 36px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Arabic figures in Cairo, not Amiri: Amiri did not mirror parentheses in
   RTL lines (4 Oct 2026), and figures read more evenly in Cairo. Headings
   keep Amiri. "%4" after Arabic words is the normal bidi order, not a bug. */
html[dir="rtl"] .facts-grid > dl > dd, html[dir="rtl"] .proof-value, html[dir="rtl"] .cost-summary dd, html[dir="rtl"] .cost-price { font-family: "Cairo", var(--text); font-weight: 600; letter-spacing: 0; }
html[dir="rtl"] .facts-grid > dl > dd { font-size: 19px; line-height: 1.45; }
html[dir="rtl"] .proof-value { font-size: 21px; line-height: 1.45; }

/* ---------- homepage: Dubai in 3D first (5 Oct 2026) ----------
   /explore in a frame (its own styles and scripts stay apart from these). */
.home-3d { position: relative; height: min(86vh, 860px); min-height: 520px; background: #0c0e11; }
.home-3d-frame { display: block; width: 100%; height: 100%; border: 0; }
.home-3d-open { position: absolute; inset-inline-end: 20px; bottom: 20px; z-index: 2; padding: 10px 16px; border-radius: 999px; background: rgba(23, 25, 28, 0.72); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.home-3d-open:hover { background: rgba(23, 25, 28, 0.9); }
@media (max-width: 640px) {
  .home-3d { height: auto; min-height: 0; }
  .home-3d-frame { height: 68svh; min-height: 420px; }
  .home-3d-open { position: static; display: block; border-radius: 0; padding: 14px var(--gutter); text-align: center; background: #17191C; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- project page: in 3D, 360° and film (5 Oct 2026) ---------- */
.explore { background: var(--night); color: #E9E5DC; padding: clamp(48px, 7vw, 88px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 56px); align-items: center; max-width: none; }
.explore > * { min-width: 0; }
.explore-text { max-width: 520px; justify-self: end; }
.explore h2 { color: #fff; }
.explore .eyebrow { color: #D8BC86; }
.explore .section-lede { color: #C9C5BC; }
.explore-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.explore-alt { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }
.explore-alt:hover { border-color: #fff; }
.explore-film { margin: 0; max-width: 760px; }
.explore-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #000; }
.explore-film figcaption { margin-top: 8px; font-size: 13px; color: #8F8B83; }
@media (max-width: 900px) { .explore { grid-template-columns: minmax(0, 1fr); } .explore-text { justify-self: start; } .explore-actions .btn { flex: 1 1 100%; } }