/* ads1.vikathai.com — the page, design system v4 (Unique Design/design-system/GUIDELINES.md).
   Tokens: Standard desk "Mossy Green", three theme states like vikathai.com. Nothing here is Tilda's. */

:root {
  color-scheme: light;
  --canvas: #f3f4ef; --canvas-deep: #eef2ea; --surface: #ffffff; --surface-2: #f9faf6;
  --line: #e1e5de; --line-int: #ccd3cb;
  --ink: #0f1a14; --ink-2: #4f5f56; --ink-3: #6f7f76;
  --accent: #22382c; --accent-2: #2e4a3a; --accent-soft: #f1ead3; --on-accent: #f3efe0;
  --band: #22382c; --lux: #7f6a2c; --gold: #d9c58a; --metal-hi: #f6eecb; --metal-deep: #a58a3c; --focus: #22382c;
  --danger: #8f2417; --danger-soft: #fbe4de; --ok: #10614a; --ok-soft: #dcf0e4;
  --scrim: rgba(6, 18, 15, 0.55);
  --shade: 0 1px 2px rgba(15, 26, 20, 0.06), 0 8px 24px rgba(15, 26, 20, 0.08);
  --glass: rgba(255, 255, 255, 0.72);
  --photo-ink: #ffffff; --photo-ink-2: rgba(255, 255, 255, 0.82);
  --photo-scrim: linear-gradient(to top, rgba(6, 18, 15, 0.88) 0%, rgba(6, 18, 15, 0.62) 24%, rgba(6, 18, 15, 0.22) 58%, rgba(6, 18, 15, 0) 100%);
  --metal: linear-gradient(135deg, var(--metal-hi) 0%, var(--gold) 46%, var(--metal-deep) 100%);
  --on-gold: #15200f;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r1: 11px; --r2: 16px; --r3: 20px; --r4: 26px; --pill: 999px;
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 80px;
  --tap: max(44px, 2.75rem); --tap-hero: max(56px, 3.5rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 220ms;
  --fs-h1: clamp(40px, 6.2vw, 74px); --fs-h2: clamp(28px, 3.8vw, 46px); --fs-h3: 18px; --fs-body: 16px; --fs-ui: 13.5px; --fs-caption: 12.5px; --fs-label: 11px;
  --edge: max(16px, env(safe-area-inset-left, 0px)); --wrap: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0b120e; --canvas-deep: #0f1712; --surface: #131c16; --surface-2: #182219;
    --line: #22302a; --line-int: #2f3f36; --ink: #edf0e9; --ink-2: #a3b0a6; --ink-3: #87958c;
    --accent: #dccb93; --accent-2: #e6d7a6; --accent-soft: #2a3120; --on-accent: #15200f;
    --band: #2e4a3a; --lux: #dcc98d; --gold: #e4d4a0; --metal-hi: #faf3d6; --metal-deep: #b59c53; --focus: #e4d4a0;
    --danger: #f2a08f; --danger-soft: #3a1c17; --ok: #74cf95; --ok-soft: #14291d;
    --scrim: rgba(0, 0, 0, 0.62); --shade: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --glass: rgba(19, 28, 22, 0.72);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0b120e; --canvas-deep: #0f1712; --surface: #131c16; --surface-2: #182219;
  --line: #22302a; --line-int: #2f3f36; --ink: #edf0e9; --ink-2: #a3b0a6; --ink-3: #87958c;
  --accent: #dccb93; --accent-2: #e6d7a6; --accent-soft: #2a3120; --on-accent: #15200f;
  --band: #2e4a3a; --lux: #dcc98d; --gold: #e4d4a0; --metal-hi: #faf3d6; --metal-deep: #b59c53; --focus: #e4d4a0;
  --danger: #f2a08f; --danger-soft: #3a1c17; --ok: #74cf95; --ok-soft: #14291d;
  --scrim: rgba(0, 0, 0, 0.62); --shade: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --glass: rgba(19, 28, 22, 0.72);
}

/* ── ground ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.is-locked { overflow: hidden; }
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--edge)); margin-inline: auto; }
.sec { padding-block: var(--sp-10); }
@media (max-width: 720px) { .sec { padding-block: var(--sp-9); } }
.sec--band { background: var(--canvas-deep); }

/* type */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; color: var(--ink); }
h1, .h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 1.03; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.num { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.sec-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-8); max-width: 62ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
@media (max-width: 720px) { .sec-head { margin-bottom: var(--sp-6); } }

/* ── pills, chips, buttons ──────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-block-size: var(--tap); padding-inline: var(--sp-5); border: 1px solid transparent; border-radius: var(--pill); background: transparent; color: var(--ink); font-size: var(--fs-ui); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: translate 180ms var(--ease), background-color var(--dur), border-color var(--dur), box-shadow var(--dur); }
.pill svg { inline-size: 18px; block-size: 18px; flex: none; }
@media (hover: hover) and (pointer: fine) { .pill:hover { translate: 0 -1px; } }
.pill:active { translate: 0 1px; }
.pill:disabled { opacity: 0.45; cursor: default; translate: none; }
.pill--line { border-color: var(--line-int); background: var(--surface); }
.pill--glass { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.26); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pill--glass:hover { background: rgba(255, 255, 255, 0.22); }
.pill--primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pill--primary:hover { background: var(--accent-2); }
.pill--accent { position: relative; isolation: isolate; background: var(--metal); border-color: color-mix(in srgb, var(--metal-deep) 55%, transparent); color: var(--on-gold); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 color-mix(in srgb, var(--metal-deep) 60%, transparent), var(--shade); }
.pill--accent::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; opacity: 0.35; background: linear-gradient(115deg, transparent 42%, #fff 50%, transparent 58%); background-size: 240% 240%; animation: vtSheen 11s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .pill--accent::after { animation: none; } html { scroll-behavior: auto; } }
.pill--big { min-block-size: var(--tap-hero); padding-inline: var(--sp-7); font-size: 16px; }
.pill--icon { inline-size: var(--tap); padding-inline: 0; aspect-ratio: 1; }
.pill--icon.pill--sm, .pill--sm { min-block-size: 38px; }
.pill--icon.pill--sm { inline-size: 38px; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.2; white-space: nowrap; }
.chip svg { inline-size: 14px; block-size: 14px; }
.chip--photo { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
.chip--alert { background: #d9412f; border-color: transparent; color: #fff; font-weight: 600; }
.dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* ── cards ──────────────────────────────────────────────────────────────── */
.card { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); box-shadow: var(--shade); }
.panel { border: 1px solid var(--line); border-radius: var(--r4); background: var(--surface); box-shadow: var(--shade); }
.well { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); flex: none; }
.well svg { inline-size: 24px; block-size: 24px; }
:root[data-theme="dark"] .well, :root:not([data-theme="light"]) .well { color: var(--gold); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .well { color: var(--accent); } }
:root[data-theme="light"] .well { color: var(--accent); }
.grid { display: grid; gap: var(--sp-4); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* photos */
.photo { position: relative; overflow: hidden; border-radius: var(--r2); background: var(--canvas-deep); }
.photo > picture, .hero__bg > picture, .consult__bg > picture, .step__pic > picture, .insta__pic > picture { display: block; inline-size: 100%; block-size: 100%; }
.photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.photo--scrim::after { content: ""; position: absolute; inset: 0; background: var(--photo-scrim); pointer-events: none; }

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 100; padding-block: var(--sp-3); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow var(--dur); }
.hdr.is-solid { box-shadow: 0 1px 0 var(--line); }
.hdr__row { display: flex; align-items: center; gap: var(--sp-3); }
.hdr__logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; margin-inline-end: var(--sp-3); }
.hdr__logo svg { block-size: 40px; inline-size: auto; }
.hdr.is-solid .hdr__logo, .hdr--ink .hdr__logo { color: var(--ink); }
.hdr__spacer { flex: 1; }
.hdr__contacts { display: flex; gap: var(--sp-2); align-items: center; }
.hdr__contacts .pill--compact { display: none; }
@media (max-width: 760px) { .hdr__contacts .pill--text { display: none; } .hdr__contacts .pill--compact { display: inline-flex; } .hdr__logo svg { block-size: 32px; } .hdr__contacts .pill--accent { padding-inline: var(--sp-4); } }
@media (max-width: 380px) { .hdr__logo svg { block-size: 26px; } }
/* language menu, top right */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; }
.lang__list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 210; margin: 0; padding: 6px; list-style: none; min-inline-size: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shade); display: grid; }
.lang__list a { display: block; padding: 9px 12px; border-radius: var(--r1); text-decoration: none; font-size: 15px; }
.lang__list a:hover { background: var(--surface-2); }
.lang__list a[aria-current] { background: var(--accent-soft); font-weight: 600; }
@media (max-width: 760px) { .lang summary { padding-inline: var(--sp-3); } }

/* per-language type: Arabic and Hebrew self-hosted Noto faces, Chinese the system CJK families */
html[lang="ar"] { --font-ui: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; --font-display: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; }
html[lang="he"] { --font-ui: 'Noto Sans Hebrew', 'Segoe UI', Arial, sans-serif; --font-display: 'Noto Sans Hebrew', 'Segoe UI', Arial, sans-serif; }
html[lang="zh"] { --font-ui: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif; --font-display: 'Inter Tight', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3, html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3 { letter-spacing: 0; }
html[lang="ar"] h1, html[lang="he"] h1 { line-height: 1.15; }
html[lang="ar"] body, html[lang="he"] body, html[lang="zh"] body { line-height: 1.65; }
[dir="rtl"] .opt__check { left: auto; right: 10px; }
[dir="rtl"] .prop__badge { left: auto; right: 10px; }
[dir="rtl"] .select { background-position: 20px 50%, 15px 50%; padding-inline-end: var(--sp-4); padding-inline-start: 40px; }
[dir="rtl"] .ticker__track { animation-direction: reverse; }
[dir="rtl"] .lang__list a, [dir="rtl"] .faq summary { text-align: start; }

/* ── hero — the site's inset panel: a photograph under four blending layers (kit.css §5): a desk fill in
   Multiply tints the picture into the desk, a black gradient in Multiply carries legibility, grain in Soft Light,
   the metal sheen in Screen drifting for 11 s. `isolation: isolate` keeps the blending inside the panel. ── */
.hero { position: relative; isolation: isolate; overflow: clip; inline-size: min(var(--wrap), 100% - 2 * var(--edge)); margin: var(--sp-3) auto 0; border-radius: var(--r4); min-block-size: min(78vh, 720px); display: grid; align-items: end; color: var(--photo-ink); background: var(--accent); }
.hero__bg { position: absolute; inset: 0; z-index: -5; overflow: hidden; }
.hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 50%; animation: vtSettle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero__tint { position: absolute; inset: 0; z-index: -4; background: var(--accent); mix-blend-mode: multiply; opacity: 0.58; }
.hero__scrim { position: absolute; inset: 0; z-index: -3; mix-blend-mode: multiply; opacity: 0.78; background: linear-gradient(180deg, #000 0%, transparent 38%, transparent 56%, #000 100%); }
.hero__grain { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0.05; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }
.hero__sheen { position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: 0.32; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 40%, var(--gold) 50%, transparent 60%); background-size: 240% 240%; animation: vtSheen 11s ease-in-out infinite alternate; }
@keyframes vtSheen { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes vtSettle { from { transform: scale(1.05); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__sheen { animation: none; } .hero__bg img { animation: none; } }
.hero__inner { padding: clamp(56px, 12vh, 140px) clamp(20px, 4vw, 56px) clamp(56px, 8vh, 88px); display: grid; gap: var(--sp-6); max-width: 760px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__sub { font-size: clamp(16px, 1.7vw, 19px); color: var(--photo-ink-2); max-width: 58ch; }
.hero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: clamp(15px, 1.5vw, 18px); color: var(--photo-ink-2); }
.hero__list li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.hero__list svg { inline-size: 16px; block-size: 16px; margin-top: 5px; color: var(--gold); flex: none; }
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.feats { position: relative; z-index: 2; margin-top: calc(-1 * var(--sp-8)); }
.feat { display: flex; gap: var(--sp-4); padding: var(--sp-5); align-items: flex-start; }
.feat .h3 { margin-bottom: 4px; }
.feat p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 720px) { .hero { min-block-size: 0; border-radius: var(--r3); } .feats { margin-top: var(--sp-4); } }

/* ── quiz ───────────────────────────────────────────────────────────────── */
.quiz { overflow: hidden; }
.quiz__bar { block-size: 4px; background: var(--line); }
.quiz__bar i { display: block; block-size: 100%; inline-size: 0; background: var(--accent); transition: inline-size 300ms var(--ease); }
.quiz__body { padding: clamp(20px, 3.5vw, 40px); display: grid; gap: var(--sp-6); }
.quiz__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.quiz__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-3); }
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opts--list { grid-template-columns: 1fr; } }
.opt { position: relative; cursor: pointer; display: grid; gap: var(--sp-2); }
.opt input { position: absolute; opacity: 0; inset: 0; }
.opt .photo { aspect-ratio: 4 / 3; border: 2px solid transparent; transition: border-color var(--dur), box-shadow var(--dur); }
.opt span { font-size: 15px; font-weight: 500; }
.opt:hover .photo { border-color: var(--line-int); }
.opt input:checked ~ .photo { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.opt input:focus-visible ~ .photo { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt__check { position: absolute; top: 10px; inset-inline-start: 10px; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; opacity: 0; scale: 0.6; transition: opacity var(--dur), scale var(--dur); }
.opt__check svg { inline-size: 14px; block-size: 14px; }
.opt input:checked ~ .photo .opt__check { opacity: 1; scale: 1; }
.opt--row { grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-int); border-radius: var(--r1); background: var(--surface); }
.opt--row .radio { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid var(--line-int); display: grid; place-items: center; transition: border-color var(--dur); }
.opt--row .radio::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--accent); scale: 0; transition: scale var(--dur); }
.opt--row input:checked ~ .radio { border-color: var(--accent); }
.opt--row input:checked ~ .radio::after { scale: 1; }
.opt--row input:checked ~ span { color: var(--ink); }
.opt--row:has(input:checked) { border-color: var(--accent); }
.is-error > .opts .opt .photo, .is-error .opt--row { border-color: var(--danger); }
.field-hint { font-size: var(--fs-caption); color: var(--danger); display: none; }
.is-error .field-hint { display: block; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--sp-4); }
.form--row { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
@media (max-width: 960px) { .form--row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .form--row { grid-template-columns: 1fr; } }
.f { display: grid; gap: 6px; }
.f > label, .f__label { font-size: var(--fs-ui); color: var(--ink-2); }
.input, .select { inline-size: 100%; min-block-size: 52px; padding: 0 var(--sp-4); border: 1px solid var(--line-int); border-radius: var(--r1); background: var(--surface); color: var(--ink); transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.input::placeholder { color: var(--ink-3); }
.input:focus, .select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); outline: none; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 40px; }
.tel { display: grid; grid-template-columns: minmax(96px, 128px) 1fr; gap: var(--sp-2); }
.tel .select { padding-inline-start: var(--sp-3); }
.radios { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.radios label { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-4); border: 1px solid var(--line-int); border-radius: var(--pill); background: var(--surface); cursor: pointer; font-size: var(--fs-ui); }
.radios input { position: absolute; opacity: 0; }
.radios label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.radios label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-caption); color: var(--ink-2); cursor: pointer; }
.consent input { inline-size: 18px; block-size: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.consent a { color: var(--ink); }
.msg { padding: var(--sp-3) var(--sp-4); border-radius: var(--r1); font-size: var(--fs-ui); }
.msg[data-kind="error"] { background: var(--danger-soft); color: var(--danger); }
.msg[data-kind="ok"] { background: var(--ok-soft); color: var(--ok); }
/* the honeypot: hidden by clipping, never by an off-screen offset (a left:-9999px extends an RTL document by 10 000 px) */
.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
[data-busy]::after { content: "…"; }
.form__foot { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; justify-content: space-between; }

/* ── property cards ─────────────────────────────────────────────────────── */
.slider { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw); gap: var(--sp-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 4px var(--sp-4); margin: -4px -4px 0; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail--wide { grid-auto-columns: min(560px, 88vw); }
.slider__nav { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-bottom: var(--sp-4); }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--sp-2); }
.dots { gap: 0; }
.dots button { inline-size: 24px; block-size: 24px; border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.dots button::after { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line-int); }
.dots button[aria-current="true"]::after { background: var(--accent); }
.prop { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.prop__media { position: relative; aspect-ratio: 4 / 3; }
.prop__media .rail { grid-auto-columns: 100%; gap: 0; padding: 0; margin: 0; block-size: 100%; }
.prop__media .rail .photo { border-radius: 0; block-size: 100%; }
.prop__media .slider__nav { position: absolute; inset: 0; margin: 0; align-items: center; justify-content: space-between; padding-inline: var(--sp-2); pointer-events: none; }
.prop__media .slider__nav .pill { pointer-events: auto; }
.prop__media .dots { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; }
.prop__media .dots button::after { background: rgba(255, 255, 255, 0.55); }
.prop__media .dots button[aria-current="true"]::after { background: #fff; }
.prop__badge { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; }
.prop__body { padding: var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; }
.prop__title { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.prop__title h3 { font-size: 18px; }
.prop__specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.spec { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface-2); min-width: 0; }
.spec--wide { grid-column: 1 / -1; }
.spec svg { inline-size: 18px; block-size: 18px; color: var(--lux); flex: none; }
.spec b { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); line-height: 1.2; }
.spec span { font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.prop__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; margin-top: auto; }
.prop__price { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.prop__price small { font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: var(--ink-3); display: block; }
.prop--wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: none; }
.prop--wide .prop__media { aspect-ratio: auto; min-block-size: 100%; }
@media (max-width: 640px) { .prop--wide { grid-template-columns: 1fr; } .prop--wide .prop__media { aspect-ratio: 4 / 3; } }

/* ticker */
.ticker { overflow: hidden; background: var(--band); color: #f3efe0; padding-block: var(--sp-3); margin-block: var(--sp-6); }
.ticker__track { display: flex; gap: var(--sp-8); width: max-content; animation: ticker 40s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; font-size: 15px; }
.ticker__track svg { inline-size: 18px; block-size: 18px; color: var(--gold); }
@keyframes ticker { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ── why us / stats ─────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } }
.split .photo { aspect-ratio: 4 / 3; border-radius: var(--r4); }
.bullets { display: grid; gap: var(--sp-4); }
.bullets li { display: flex; gap: var(--sp-3); align-items: flex-start; list-style: none; color: var(--ink-2); }
.bullets { padding: 0; margin: 0; }
.bullets svg { inline-size: 16px; block-size: 16px; margin-top: 5px; color: var(--lux); flex: none; }
.bullets b { color: var(--ink); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.stat__n { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.stat__n small { font-family: var(--font-ui); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink-3); margin-inline-start: 6px; }
.stat p { color: var(--ink-2); font-size: 15px; }

/* differs */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 900px) { .vs { grid-template-columns: 1fr; } }
.vs__col { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.vs__col .photo { aspect-ratio: 16 / 10; border-radius: 0; }
.vs__col--them .photo img { filter: grayscale(1) contrast(0.95); }
.vs__cap { position: absolute; inset: auto 0 0; padding: var(--sp-4) var(--sp-5); color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; z-index: 1; }
.vs__list { padding: var(--sp-5); display: grid; gap: var(--sp-4); margin: 0; list-style: none; }
.vs__list li { display: flex; gap: var(--sp-3); font-size: 15px; color: var(--ink-2); }
.vs__list b { color: var(--ink); }
.vs__list svg { inline-size: 18px; block-size: 18px; flex: none; margin-top: 2px; }
.vs__col--them .vs__list svg { color: var(--ink-3); }
.vs__col--us .vs__list svg { color: var(--lux); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.step__pic { aspect-ratio: 16 / 9; border-radius: var(--r2); overflow: hidden; background: var(--canvas-deep); }
.step__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.step__n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--lux); }
.step p { color: var(--ink-2); font-size: 15px; }

/* inline form band */
.band-form { padding: clamp(24px, 4vw, 48px); display: grid; gap: var(--sp-6); text-align: center; }
.band-form .form { text-align: start; }
.band-form h2 { font-size: clamp(24px, 3vw, 34px); }
.orn { color: var(--gold); inline-size: 28px; block-size: 28px; margin-inline: auto; }

/* why phuket */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 960px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .why { grid-template-columns: 1fr; } }
.why__item { display: grid; grid-template-columns: 1fr 120px; gap: var(--sp-4); padding: var(--sp-5); align-items: start; }
.why__item .photo { aspect-ratio: 1; border-radius: var(--r1); }
.why__item p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
@media (max-width: 400px) { .why__item { grid-template-columns: 1fr 96px; } }

/* consultation on a photo */
.consult { position: relative; isolation: isolate; color: var(--ink); }
.consult__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.consult__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.consult__bg::after { content: ""; position: absolute; inset: 0; background: rgba(6, 18, 15, 0.55); }
.consult__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: var(--sp-8); align-items: center; }
@media (max-width: 900px) { .consult__grid { grid-template-columns: 1fr; } }
.consult__text { color: #fff; display: grid; gap: var(--sp-4); }
.consult__text h2 { color: #fff; }
.consult__text p { color: var(--photo-ink-2); font-size: 17px; }
.consult .panel { padding: clamp(20px, 3vw, 32px); }

/* office */
.office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-6); align-items: stretch; }
@media (max-width: 900px) { .office { grid-template-columns: 1fr; } }
.office__text { padding: var(--sp-6); display: grid; gap: var(--sp-4); align-content: center; }
.office__addr { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--ink-2); }
.office__addr svg { inline-size: 18px; block-size: 18px; color: var(--lux); flex: none; margin-top: 3px; }
.map { position: relative; min-block-size: 320px; border-radius: var(--r4); overflow: hidden; border: 1px solid var(--line); background: var(--canvas-deep); cursor: pointer; display: grid; place-items: center; }
.map img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.map .pill { position: relative; z-index: 1; }
.map.is-live .pill { display: none; }

/* faq */
.faq { display: grid; gap: var(--sp-2); max-width: 820px; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { inline-size: 18px; block-size: 18px; color: var(--ink-3); transition: rotate var(--dur); flex: none; }
.faq details[open] summary svg { rotate: 45deg; }
.faq__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-2); display: grid; gap: var(--sp-2); }

/* instagram */
.insta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--sp-8); align-items: center; padding: clamp(24px, 4vw, 48px); }
@media (max-width: 900px) { .insta { grid-template-columns: 1fr; } }
.insta__text { display: grid; gap: var(--sp-4); }
.insta__pic img { inline-size: 100%; block-size: auto; }

/* footer */
.ftr { padding-block: var(--sp-8) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-ui); }
.ftr__row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.ftr__nav a { text-decoration: none; }
.ftr__nav a:hover { color: var(--ink); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); color: var(--ink-3); font-size: var(--fs-caption); }
.ftr__legal a { color: var(--ink-3); }

/* popups */
.pop { position: fixed; inset: 0; z-index: 300; background: var(--scrim); display: grid; place-items: center; padding: var(--sp-4); overflow: auto; }
.pop__panel { inline-size: min(560px, 100%); padding: clamp(20px, 3vw, 32px); display: grid; gap: var(--sp-4); position: relative; animation: pop-in 220ms var(--ease); margin: auto; }
@keyframes pop-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0; } }
.pop__close { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.pop__panel h2 { font-size: clamp(22px, 2.6vw, 28px); padding-inline-end: 48px; }

/* theme button */
.theme-btn { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 150; inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-int); border-radius: var(--pill); background: var(--surface); color: var(--ink); box-shadow: var(--shade); cursor: pointer; }
.theme-btn svg { inline-size: 20px; block-size: 20px; display: none; }
.theme-btn[data-mode="system"] svg[data-g="system"], .theme-btn[data-mode="light"] svg[data-g="light"], .theme-btn[data-mode="dark"] svg[data-g="dark"] { display: block; }

/* thank-you / privacy */
.page-thanks { min-block-size: 100vh; display: grid; place-items: center; padding: var(--sp-8) var(--edge); }
.thanks { inline-size: min(760px, 100%); padding: clamp(24px, 4vw, 48px); display: grid; gap: var(--sp-5); text-align: center; }
.thanks .bullets { text-align: start; }
.prose { max-width: 76ch; margin-inline: auto; padding-block: var(--sp-8); display: grid; gap: var(--sp-4); }
.prose h2 { font-size: 22px; margin-top: var(--sp-4); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { margin: 0; padding-inline-start: 1.25em; display: grid; gap: var(--sp-3); }
.prose li b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose .label { margin: 0; }

/* rtl */
[dir="rtl"] .hero__bg img { object-position: 40% 50%; }
[dir="rtl"] .hero__bg::after { background: linear-gradient(270deg, rgba(6, 18, 15, 0.78) 0%, rgba(6, 18, 15, 0.45) 45%, rgba(6, 18, 15, 0.15) 100%), linear-gradient(to top, rgba(6, 18, 15, 0.85) 0%, rgba(6, 18, 15, 0) 45%); }
[dir="rtl"] .pop__close { right: auto; left: var(--sp-3); }
[dir="rtl"] .theme-btn { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }

/* ── languages: scripts and direction (stage 4) ─────────────────────────── */
:root[lang="ar"] { --font-ui: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Noto Sans Arabic', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
:root[lang="he"] { --font-ui: 'Noto Sans Hebrew', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Noto Sans Hebrew', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
/* Chinese: no webfont (a CJK subset would eat the first-view budget); Inter for Latin and digits, the platform's CJK face for the rest */
:root[lang="zh"] { --font-ui: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif; --font-display: 'Inter Tight', 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif; }
/* connected and ideographic scripts take no tracking; Arabic and Hebrew want more leading */
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3, :root[lang="ar"] .display, :root[lang="ar"] .h1, :root[lang="ar"] .h2, :root[lang="ar"] .h3, :root[lang="ar"] .stat__n, :root[lang="ar"] .vs__cap, :root[lang="ar"] .prop__price, :root[lang="ar"] .label, :root[lang="ar"] .step__n,
:root[lang="he"] h1, :root[lang="he"] h2, :root[lang="he"] h3, :root[lang="he"] .display, :root[lang="he"] .h1, :root[lang="he"] .h2, :root[lang="he"] .h3, :root[lang="he"] .stat__n, :root[lang="he"] .vs__cap, :root[lang="he"] .prop__price, :root[lang="he"] .label, :root[lang="he"] .step__n,
:root[lang="zh"] h1, :root[lang="zh"] h2, :root[lang="zh"] h3, :root[lang="zh"] .display, :root[lang="zh"] .h1, :root[lang="zh"] .h2, :root[lang="zh"] .h3, :root[lang="zh"] .vs__cap { letter-spacing: 0; }
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="he"] h1, :root[lang="he"] h2 { line-height: 1.22; }
:root[lang="ar"] h3, :root[lang="he"] h3 { line-height: 1.4; }
:root[lang="ar"] body, :root[lang="he"] body { line-height: 1.7; }
:root[lang="zh"] body { line-height: 1.75; }
/* RTL: the slider arrows keep their visual sides (app.js swaps their meaning); directional icons mirror */
[dir="rtl"] .slider__nav { direction: ltr; }
[dir="rtl"] .ico--dir { transform: scaleX(-1); }

/* ── the project modal (PLAN decision 7: photographs and facts from the catalogue, the request button, no link out) ── */
.pop__panel--wide { inline-size: min(940px, 100%); }
.pop__panel--wide .pop__close { z-index: 1; background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.pop__project { display: grid; gap: var(--sp-4); }
.pop__gallery { aspect-ratio: 16 / 10; border-radius: var(--r2); overflow: hidden; background: var(--canvas-deep); }
.pop__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.pop__head h2 { padding-inline-end: 0; flex: 1 1 100%; }
.prop__media .photo[data-open] { cursor: zoom-in; }
@media (min-width: 720px) { .pop__project .prop__specs { grid-template-columns: 1fr 1fr 2fr; } .pop__project .spec--wide { grid-column: auto; } }

/* ── the Instagram interstitial: the quiet way on, under the form ── */
.pop__skip { justify-self: center; display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; }
.pop__skip:hover { color: var(--ink); }
.pop__skip svg { inline-size: 16px; block-size: 16px; }

/* Inter, Inter Tight, IBM Plex Mono — SIL OFL 1.1, self-hosted (GUIDELINES §3). Fetched from Google Fonts, subsets latin/latin-ext/cyrillic/cyrillic-ext. */
/* cyrillic-ext */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-tight-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-tight-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-tight-500-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-tight-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-600-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* cyrillic-ext */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-tight-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-tight-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* latin-ext */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-tight-700-latin-ext.woff2) format('woff2');
  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;}
/* latin */
@font-face{font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-tight-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Noto Sans Arabic, Noto Sans Hebrew — SIL OFL 1.1, self-hosted variable fonts (wght 100–900), fetched from Google Fonts on
   20 Sept 2026. Arabic is subset to the Arabic block (tools/i18n-fonts.sh; 162 -> 66 KB); Latin stays Inter. Loaded by
   unicode-range only: an EN page never requests them. */
/* arabic */
@font-face{font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/noto-sans-arabic-var-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200F, U+2010-2011;}
/* hebrew */
@font-face{font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/noto-sans-hebrew-var-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}

.m-hi{stop-color:var(--metal-hi)}.m-mid{stop-color:var(--gold)}.m-deep{stop-color:var(--metal-deep)}.m-ink{stop-color:var(--lux)}
.brand{fill:url(#metal-grad)}.hdr.is-solid .brand,.ftr .brand{fill:url(#metal-grad-ink)}
/* token2049.vikathai.com — appended after site/styles.css by t2049/build.mjs.
   1. The desk: Luxe · ashy blue & white gold (Unique Design/design-system/GUIDELINES.md §2), mapped onto the token
      names of site/styles.css, in the same three theme states. Components are untouched: a desk changes fills and
      the metal only.
   2. The blocks this page has and ads1 does not. */

/* ── 1. Luxe tokens ─────────────────────────────────────────────────────── */
:root {
  --canvas: #f2f3f5; --canvas-deep: #eef1f4; --surface: #ffffff; --surface-2: #f8f9fb;
  --line: #e0e4e9; --line-int: #cad1d9;
  --ink: #111820; --ink-2: #4e5966; --ink-3: #707b86;
  --accent: #26323f; --accent-2: #34455a; --accent-soft: #f3efe3; --on-accent: #efede4;
  --band: #26323f; --band-2: #34455a; --on-band: #efede4;
  --lux: #85744a; --gold: #e6dcc3; --metal-hi: #faf6ea; --metal-deep: #a99a6f; --focus: #26323f;
  --on-gold: #141a22; --hero-fill: #26323f;
  --scrim: rgba(12, 18, 26, 0.55);
  --shade: 0 1px 2px rgba(17, 24, 32, 0.06), 0 8px 24px rgba(17, 24, 32, 0.08);
  --photo-scrim: linear-gradient(to top, rgba(12, 18, 26, 0.88) 0%, rgba(12, 18, 26, 0.62) 24%, rgba(12, 18, 26, 0.22) 58%, rgba(12, 18, 26, 0) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0c1117; --canvas-deep: #10151c; --surface: #141a22; --surface-2: #191f28;
    --line: #232b35; --line-int: #303945; --ink: #edeff2; --ink-2: #a5aeb9; --ink-3: #89939e;
    --accent: #e6dcc3; --accent-2: #eee5cf; --accent-soft: #2b2f33; --on-accent: #141a22;
    --band: #1c2632; --band-2: #26323f; --on-band: #edeff2;
    --lux: #e0d3b0; --gold: #eee5cf; --metal-hi: #fdfaf1; --metal-deep: #bfae83; --focus: #eee5cf;
    --scrim: rgba(6, 10, 15, 0.62); --shade: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --glass: rgba(20, 26, 34, 0.72);
  }
}
:root[data-theme="dark"] {
  --canvas: #0c1117; --canvas-deep: #10151c; --surface: #141a22; --surface-2: #191f28;
  --line: #232b35; --line-int: #303945; --ink: #edeff2; --ink-2: #a5aeb9; --ink-3: #89939e;
  --accent: #e6dcc3; --accent-2: #eee5cf; --accent-soft: #2b2f33; --on-accent: #141a22;
  --band: #1c2632; --band-2: #26323f; --on-band: #edeff2;
  --lux: #e0d3b0; --gold: #eee5cf; --metal-hi: #fdfaf1; --metal-deep: #bfae83; --focus: #eee5cf;
  --scrim: rgba(6, 10, 15, 0.62); --shade: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --glass: rgba(20, 26, 34, 0.72);
}

/* scripts the Latin faces do not cover: the system's own face, no negative tracking, room for the matras */
:lang(zh-HK) { --font-ui: 'Inter', 'PingFang HK', 'Noto Sans HK', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; --font-display: 'Inter Tight', 'PingFang HK', 'Noto Sans HK', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; }
:lang(hi) { --font-ui: 'Inter', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', sans-serif; --font-display: 'Inter Tight', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', sans-serif; }
:lang(zh-HK) :is(h1, h2, h3, .h1, .h2, .h3, .display), :lang(hi) :is(h1, h2, h3, .h1, .h2, .h3, .display) { letter-spacing: 0; }
:lang(zh-HK) :is(h1, .h1) { line-height: 1.16; } :lang(zh-HK) :is(h2, .h2) { line-height: 1.22; }
:lang(hi) :is(h1, .h1) { line-height: 1.3; font-size: clamp(34px, 5.2vw, 62px); } :lang(hi) :is(h2, .h2) { line-height: 1.32; }
:lang(hi) .pill, :lang(zh-HK) .pill { line-height: 1.3; }

/* ── 2. this page ───────────────────────────────────────────────────────── */
/* eyebrows (owner, 3 Oct: mono capitals in a glass pill with a dot "read as made by AI"; then: "monochrome icons
   rather than a rule"): line icons of the set in the metal lead the facts, set in the text face, sentence case —
   in the hero and over the sections. No mono anywhere on this page. */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0; font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.eyebrow span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.eyebrow svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--lux); }
.hero .eyebrow, .meet .eyebrow { color: rgba(255, 255, 255, 0.86); }
.hero .eyebrow svg, .meet .eyebrow svg { color: var(--gold); }
.lang summary span { font-family: var(--font-ui); font-size: var(--fs-ui); font-weight: 500; letter-spacing: 0; }
.prose .label { font-family: var(--font-ui); font-size: var(--fs-caption); letter-spacing: 0; text-transform: none; }

/* hero: the photograph is tinted into the desk's ashy blue in every theme (in dark --accent is the metal) */
.hero { background: var(--hero-fill); }
.hero__tint { background: var(--hero-fill); opacity: 0.44; }
.hero__scrim { opacity: 0.62; background: linear-gradient(180deg, #000 0%, transparent 30%, transparent 52%, #000 100%); }
.hero__bg img { object-position: 62% 50%; }
.hero h1 span { color: rgba(255, 255, 255, 0.42); }
.hero__cta .pill--glass svg { color: var(--gold); }
.chip svg { flex: none; }
/* phone: the main button takes the first row, the messenger button the second with the Telegram icon beside it. The
   icon pill never grows — with `aspect-ratio: 1` a stretched icon pill becomes a circle as wide as the screen (seen
   on the Russian page, where the longer label pushed it onto a row of its own; owner, 3 Oct) */
@media (max-width: 720px) {
  .hero__inner { padding-block: 44px 36px; gap: var(--sp-5); }
  .hero__cta .pill--accent { flex: 1 1 100%; }
  .hero__cta .pill--glass:not(.pill--icon) { flex: 1 1 0; min-inline-size: 0; padding-inline: var(--sp-4); }
  .hero__cta .pill--icon { flex: none; }
  .hero__bg img { object-position: 70% 50%; }
}

.hero__cta .pill--icon { inline-size: var(--tap-hero); flex: none; }

/* the logo: white gold does not read on a light ground — there it is the metal darkened (GUIDELINES §6, --logo);
   in dark it is the metal itself with its glint */
.hdr .brand, .hdr.is-solid .brand, .ftr .brand, .thanks .brand { fill: var(--lux); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.hdr, .ftr, .thanks) .brand, :root:not([data-theme="light"]) .hdr.is-solid .brand { fill: url(#metal-grad); } }
:root[data-theme="dark"] :is(.hdr, .ftr, .thanks) .brand, :root[data-theme="dark"] .hdr.is-solid .brand { fill: url(#metal-grad); }

/* header: the two messengers as icon pills; on a phone they live in the hero, the header keeps the language and the button */
.hdr__contacts .pill--msg { inline-size: var(--tap); padding-inline: 0; }
@media (max-width: 560px) { .hdr__contacts .pill--msg { display: none; } }

/* the note under a claim */
.fine { font-size: var(--fs-caption); color: var(--ink-3); max-width: 60ch; }

/* residences: the brand on the photograph, the one-line reason under the name */
.prop__brand { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; }
.prop__note { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.res__cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.res__more { margin: var(--sp-6) auto 0; text-align: center; max-width: 64ch; }
.res__asof { margin: var(--sp-3) auto 0; text-align: center; }
.ftr__legal address { font-style: normal; }

/* the meeting: the skyline behind, the facts on it, the form beside */
.consult__bg::after { background: linear-gradient(90deg, rgba(12, 18, 26, 0.86) 0%, rgba(12, 18, 26, 0.66) 55%, rgba(12, 18, 26, 0.6) 100%); }
.meet { inline-size: min(var(--wrap), 100% - 2 * var(--edge)); margin-inline: auto; border-radius: var(--r4); overflow: clip; padding-block: clamp(32px, 6vw, 72px); }
.meet .wrap { inline-size: auto; padding-inline: clamp(20px, 4vw, 56px); }
.meet__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.meet__facts li { display: flex; gap: var(--sp-3); align-items: center; color: #fff; font-size: 16px; }
.meet__facts svg { inline-size: 20px; block-size: 20px; color: var(--gold); flex: none; }
.meet__direct { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.meet__direct p { font-size: var(--fs-ui); color: var(--photo-ink-2); }
.meet__direct div { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.meet .panel h3 { margin-bottom: var(--sp-4); }
@media (max-width: 720px) { .meet { border-radius: var(--r3); } }

/* steps: four across */
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps--4 { grid-template-columns: 1fr; } }
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__num { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: color-mix(in srgb, var(--lux) 55%, transparent); font-variant-numeric: tabular-nums; }

/* the close panel: the desk's fill, grain, the metal sheen (GUIDELINES §10) */
.close { position: relative; isolation: isolate; overflow: clip; border-radius: var(--r4); background: linear-gradient(168deg, var(--band) 0%, var(--band-2) 100%); color: var(--on-band); padding: clamp(32px, 6vw, 72px) clamp(20px, 4vw, 56px); display: grid; gap: var(--sp-5); justify-items: center; text-align: center; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }
.close::after { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: 0.17; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 40%, var(--gold) 50%, transparent 60%); background-size: 240% 240%; animation: vtSheen 11s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .close::after { animation: none; } }
.close h2 { color: #fff; max-width: 22ch; }
.close p { color: rgba(255, 255, 255, 0.78); font-size: 17px; }
.close__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
@media (max-width: 720px) { .close { border-radius: var(--r3); } .close__cta .pill--big { flex: 1 1 100%; } }

/* footer: contacts and the disclaimer */
.ftr__disc { margin-top: var(--sp-4); color: var(--ink-3); font-size: var(--fs-caption); max-width: 96ch; line-height: 1.55; }

/* thank-you: the two messengers */
.thanks__cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ── Arabic: the mirrored page ──────────────────────────────────────────── */
/* letter-spacing breaks the joins of the Arabic script: none anywhere */
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] :is(h2, .h2) { line-height: 1.3; }
html[lang="ar"] .pill { line-height: 1.4; }
/* the hero photograph is mirrored with the page — the lit glass stays on the far side of the text; the meeting's
   scrim darkens the side the text is on */
[dir="rtl"] .hero__bg { transform: scaleX(-1); }
[dir="rtl"] .hero__bg img { object-position: 62% 50%; }
[dir="rtl"] .hero__bg::after { content: none; }
@media (max-width: 720px) { [dir="rtl"] .hero__bg img { object-position: 70% 50%; } }
[dir="rtl"] .consult__bg::after { background: linear-gradient(270deg, rgba(12, 18, 26, 0.86) 0%, rgba(12, 18, 26, 0.66) 55%, rgba(12, 18, 26, 0.6) 100%); }
[dir="rtl"] .pop__close { right: auto; left: var(--sp-3); }
[dir="rtl"] .pop__panel h2 { padding-inline-end: 48px; }