/* 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; color: var(--ink); } /* the nav may be white-on-photo: the menu keeps the page ink */
.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); } .lang__list { inset-inline: 0 auto; max-inline-size: calc(100vw - 32px); } } /* anchored to the pill's start so it stays on screen */
/* 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,"); 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 { min-inline-size: 0; grid-template-columns: minmax(0, 1fr); }
.stat__n { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 4px; }
.stat__n small { font-family: var(--font-ui); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink-3); }
.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; }
/* ── the cookie banner (site/app.js §9; shown to visitors in Europe until they choose) ── */
.consent-bar { position: fixed; inset-inline: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-inline: auto; max-inline-size: 1100px; padding: 14px 18px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); }
.consent-bar[hidden] { display: none; }
.consent-bar__text { margin: 0; flex: 1 1 380px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.consent-bar__acts { display: flex; gap: 8px; }
@media (max-width: 720px) { .consent-bar { bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 68px); padding: 12px 14px; border-radius: 14px; } .consent-bar__acts { inline-size: 100%; } .consent-bar__acts > * { flex: 1 1 0; } }
/* 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)}.ftr .brand,.bar .brand,.pin .brand{fill:url(#metal-grad-ink)}
/* landings/_engine/landing.css — the design of the audience landings (born as singapore.vikathai.com), after site/styles.css.
A landing's theme.css may override the tokens below: --accent (the ink colour of controls), --accent-b (the second
colour: eyebrow icons, step numbers, the brand tag), --mint/--mint-2 (the bands), --jade-deep (the hero tint), the metal.
The "Open House" language of Shared/Unique Design (direction D / E, the owner's own references, 6 Sept): a light
tinted ground that is never white, one inset rounded panel per idea with the page margin around it, floating glass
pill navigation inside the hero, a large tight grotesk display with the second line dimmed, pastel jade bands
with an invisible grain, the catalogue as product cards, a dark ink close panel. Jade ink, mint bands, gold metal.
Light by default (the hero is designed for it), dark designed, not inverted. The owner's rulings carried over:
no mono capitals, no pills with a dot — icon-led sentence-case eyebrows; the logo in the metal, never in a pill;
a brand tag on a photograph is a small solid label. */
/* ── tokens: the three-state rule (light on :root, dark twice) ─────────── */
:root {
color-scheme: light;
--canvas: #f4f5f2; --canvas-deep: #eaf0ea; --surface: #ffffff; --surface-2: #fbfcfa;
--line: #e4e7e2; --line-int: #d2d7d1;
--ink: #0d1512; --ink-2: #55665f; --ink-3: #6b7b74;
--accent: #17594a; --accent-2: #2c7a63; --accent-soft: #dcebe2; --on-accent: #f3f6f2;
--band: #17594a; --lux: #7d6010; --gold: #e9b82a; --metal-hi: #fbe58a; --metal-deep: #a37d12; --focus: #17594a;
--mint: #dcebe2; --mint-2: #eef5f0; --jade-deep: #0f3b31; --accent-b: #17594a; --tag: #0d1512; --on-tag: #f4f5f2;
--danger: #8f2417; --danger-soft: #fbe4de; --ok: #10614a; --ok-soft: #dcf0e4;
--scrim: rgba(6, 20, 17, 0.55);
--shade: 0 1px 2px rgba(13, 21, 18, 0.04), 0 12px 28px -18px rgba(13, 21, 18, 0.35);
--shade-lg: 0 2px 6px rgba(13, 21, 18, 0.05), 0 40px 80px -48px rgba(13, 21, 18, 0.55);
--glass: rgba(244, 245, 242, 0.84);
--on-gold: #15200f;
--r4: 26px; --wrap: 1260px;
--grain: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--canvas: #0a0d0c; --canvas-deep: #10181500; --surface: #121715; --surface-2: #161c1a;
--line: #222a27; --line-int: #2e3833;
--ink: #eef2ef; --ink-2: #9fb3ab; --ink-3: #8a9c95;
--accent: #7fd6b4; --accent-2: #9ee2c6; --accent-soft: #16302a; --on-accent: #0a1a14;
--band: #16302a; --lux: #e3b336; --gold: #f1c23a; --metal-hi: #fbe58a; --metal-deep: #b8902a; --focus: #7fd6b4;
--mint: #16302a; --mint-2: #101a17; --accent-b: #7fd6b4; --tag: #eef2ef; --on-tag: #0a0d0c;
--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.5), 0 14px 30px -20px rgba(0, 0, 0, 0.9);
--shade-lg: 0 2px 8px rgba(0, 0, 0, 0.6), 0 44px 88px -50px rgba(0, 0, 0, 1);
--glass: rgba(10, 13, 12, 0.84);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--canvas: #0a0d0c; --canvas-deep: #10181500; --surface: #121715; --surface-2: #161c1a;
--line: #222a27; --line-int: #2e3833;
--ink: #eef2ef; --ink-2: #9fb3ab; --ink-3: #8a9c95;
--accent: #7fd6b4; --accent-2: #9ee2c6; --accent-soft: #16302a; --on-accent: #0a1a14;
--band: #16302a; --lux: #e3b336; --gold: #f1c23a; --metal-hi: #fbe58a; --metal-deep: #b8902a; --focus: #7fd6b4;
--mint: #16302a; --mint-2: #101a17; --accent-b: #7fd6b4; --tag: #eef2ef; --on-tag: #0a0d0c;
--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.5), 0 14px 30px -20px rgba(0, 0, 0, 0.9);
--shade-lg: 0 2px 8px rgba(0, 0, 0, 0.6), 0 44px 88px -50px rgba(0, 0, 0, 1);
--glass: rgba(10, 13, 12, 0.84);
}
/* the dark ground's "deep" is a transparent black (the bands dissolve into the page); the light one a mint */
:root { --canvas-deep: #eaf0ea; }
:root[data-theme="dark"] { --canvas-deep: #0f1613; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas-deep: #0f1613; } }
/* ── ground and type ───────────────────────────────────────────────────── */
body.shell { padding: 10px; }
@media (max-width: 640px) { body.shell { padding: 7px; } }
.inner { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(28px, 3.6vw, 48px); }
h2 em, h1 span { font-style: normal; color: var(--ink-3); }
.lead { font-size: clamp(16px, 1.5vw, 18px); }
.fine { font-size: 12.5px; color: var(--ink-3); }
.pill--light { background: #ffffff; color: #0d1512; border-color: transparent; }
.pill--light:hover { background: #f1f3ef; }
.well { inline-size: 40px; block-size: 40px; border-radius: 12px; color: var(--accent); }
.well svg { inline-size: 22px; block-size: 22px; }
:root[data-theme="dark"] .well, :root:not([data-theme="light"]) .well { color: var(--accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .well { color: var(--accent); } }
/* eyebrows: a monochrome line icon leads a sentence-case line in the text face (owner, 3 Oct) */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0 0 14px; 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; }
.eyebrow svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--accent-b); }
.meet .eyebrow { color: rgba(255, 255, 255, 0.86); }
.meet .eyebrow svg { color: var(--gold); }
/* Chinese: Inter for Latin and digits, the platform's CJK face for the rest — Simplified and Traditional each theirs */
:root[lang="zh-Hans"] { --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; }
:root[lang="zh-HK"] { --font-ui: 'Inter', 'PingFang HK', 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans HK', 'Noto Sans TC', sans-serif; --font-display: 'Inter Tight', 'Inter', 'PingFang HK', 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', sans-serif; }
:root[lang^="zh"] h1, :root[lang^="zh"] h2, :root[lang^="zh"] h3, :root[lang^="zh"] .stat__n, :root[lang^="zh"] .bento__big, :root[lang^="zh"] .board__city { letter-spacing: 0; }
:root[lang^="zh"] h1 { line-height: 1.12; }
/* the Chinese headline breaks before its second clause, never inside a phrase (no spaces to break at) */
:root[lang^="zh"] .hero h1 span::before { content: "\A"; white-space: pre; }
:root[lang^="zh"] h2 { line-height: 1.18; }
:root[lang^="zh"] body, :root[lang^="zh"] p { line-height: 1.75; }
/* ── the hero panel: the navigation lives inside it and leaves with it ──── */
.hero { inline-size: auto; margin: 0; min-block-size: min(88vh, 780px); display: flex; flex-direction: column; border-radius: var(--r4); background: #061411; color: #fff; }
.hero__bg img { object-position: 72% 50%; }
.hero__tint { background: var(--jade-deep); opacity: 0.5; }
.hero__scrim { opacity: 0.74; background: linear-gradient(180deg, #000 0%, transparent 34%, transparent 52%, #000 100%); }
.nav { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 16px 18px; }
.nav__brand { display: inline-flex; align-items: center; color: var(--gold); text-decoration: none; filter: drop-shadow(0 0 18px color-mix(in srgb, currentColor 42%, transparent)) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.45)); }
.brand--mark { display: none; }
.nav__mid { justify-self: center; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav__mid a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.88); text-decoration: none; white-space: nowrap; }
.nav__mid a svg { inline-size: 16px; block-size: 16px; opacity: 0.8; }
.nav__mid a:hover, .nav__mid a.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.nav__right { justify-self: end; display: flex; gap: 8px; align-items: center; }
.nav .pill { min-block-size: 40px; }
.nav .pill--icon { inline-size: 40px; }
.nav .lang summary span { font-family: var(--font-ui); letter-spacing: 0; font-size: 13.5px; }
@media (max-width: 1100px) { .nav__mid { display: none; } .nav { grid-template-columns: auto 1fr; } }
@media (max-width: 720px) { .brand--word { display: none; } .brand--mark { display: block; } .nav { padding: 12px 12px; } .nav__right .pill--light { padding-inline: 14px; } }
@media (max-width: 420px) { .nav__right .pill--icon[data-contact="telegram"] { display: none; } }
.hero__body { position: relative; z-index: 1; margin-top: auto; padding: clamp(40px, 8vh, 96px) clamp(20px, 3.4vw, 44px) 22px; display: grid; gap: 26px; }
.hero__side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: end; }
.hero h1 { font-size: clamp(42px, 6.6vw, 96px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; color: #fff; max-width: 22ch; }
.hero h1 span { color: rgba(255, 255, 255, 0.46); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__sub { color: rgba(255, 255, 255, 0.74); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.55; max-width: 60ch; }
.hero__cta { display: flex; gap: 9px; flex-wrap: wrap; }
.hero__facts { position: relative; z-index: 1; list-style: none; margin: 0; padding: 16px clamp(20px, 3.4vw, 44px) 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.hero__facts li { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(255, 255, 255, 0.88); }
.hero__facts svg { inline-size: 16px; block-size: 16px; color: var(--gold); flex: none; }
@media (max-width: 900px) { .hero { min-block-size: min(92svh, 720px); } .hero__body { gap: 20px; padding-inline: 20px; } .hero__side { grid-template-columns: 1fr; } .hero h1 { max-width: none; } .hero__facts { padding-inline: 20px; gap: 8px 18px; } }
@media (max-width: 640px) { .hero { border-radius: 20px; } .hero__facts li { font-size: 13px; } }
/* ── the statement ─────────────────────────────────────────────────────── */
.say { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(56px, 9vw, 120px) clamp(6px, 2vw, 28px); }
.say h2 { font-size: clamp(32px, 4.6vw, 62px); max-width: 16ch; }
.say p { margin-top: 20px; max-width: 46ch; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 18px); }
.say__photo { border-radius: var(--r4); overflow: hidden; box-shadow: var(--shade-lg); aspect-ratio: 4 / 3; background: var(--canvas-deep); }
.say__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 900px) { .say { grid-template-columns: 1fr; padding-block: clamp(44px, 8vw, 72px); } .say h2 { max-width: none; } }
/* ── the selling read and the board of direct flights ──────────────────── */
.story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding: 0 clamp(6px, 2vw, 28px) clamp(56px, 8vw, 96px); }
.story h2 { font-size: clamp(30px, 4vw, 54px); max-width: 16ch; margin-bottom: 22px; }
.story__text p { color: var(--ink-2); font-size: 17px; max-width: 58ch; margin-bottom: 16px; }
.story__text p:first-of-type { color: var(--ink); font-size: clamp(17px, 1.6vw, 20px); }
.board { position: relative; isolation: isolate; overflow: clip; border-radius: var(--r4); background: var(--ink); color: var(--canvas); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shade-lg); }
.board::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; mix-blend-mode: soft-light; background-image: var(--grain); background-size: 180px 180px; }
.board h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: color-mix(in srgb, var(--canvas) 70%, transparent); margin-bottom: 14px; }
.board h3 svg { inline-size: 18px; block-size: 18px; color: var(--gold); }
.board__list { list-style: none; margin: 0; padding: 0; }
.board__list li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--canvas) 14%, transparent); }
.board__list li:last-child { border-bottom: 0; }
.board__city { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.board__dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--canvas) 30%, transparent); transform: translateY(-5px); }
.board__time { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; }
.board__time small { font-family: var(--font-ui); font-size: 12px; font-weight: 400; letter-spacing: 0; color: color-mix(in srgb, var(--canvas) 55%, transparent); margin-inline-end: 6px; }
.board .fine { margin-top: 14px; color: color-mix(in srgb, var(--canvas) 55%, transparent); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story h2 { max-width: none; } }
/* ── bands: gradient + grain, 26 px, one head and one grid ─────────────── */
.band { position: relative; isolation: isolate; overflow: clip; border-radius: var(--r4); padding: clamp(30px, 5vw, 64px); background: linear-gradient(168deg, var(--mint) 0%, var(--mint-2) 62%, var(--canvas) 100%); }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; mix-blend-mode: soft-light; background-image: var(--grain); background-size: 180px 180px; }
.band + .band, .band + .sec, .sec + .band, .meet + .band, .band + .meet, .res + .meet { margin-top: 18px; }
.band--quiet { background: linear-gradient(168deg, var(--canvas-deep) 0%, var(--canvas) 100%); }
.band__head { display: flex; align-items: end; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 44px); }
.band__head h2 { max-width: 16ch; }
.band__head > p { margin: 0; max-width: 40ch; color: var(--ink-2); font-size: 16px; }
.band__head--center { justify-content: center; text-align: center; }
.band__head--center h2 { max-width: 24ch; }
.band__cta { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }
.bentos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shade); padding: 22px; display: grid; gap: 12px; align-content: start; }
.bento h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; }
.bento p { font-size: 15px; color: var(--ink-2); }
.bento--7 { grid-column: span 7; } .bento--5 { grid-column: span 5; } .bento--3 { grid-column: span 3; }
.bento--photo { padding: 0; overflow: hidden; min-block-size: 360px; isolation: isolate; color: #fff; }
.bento__pic { position: absolute; inset: 0; z-index: -1; }
.bento__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bento__over { align-self: end; display: grid; gap: 10px; padding: 24px; background: linear-gradient(to top, rgba(6, 20, 17, 0.82) 0%, rgba(6, 20, 17, 0.45) 60%, rgba(6, 20, 17, 0) 100%); }
.bento__over .well { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); }
.bento__over h3 { color: #fff; font-size: 22px; }
.bento__over p { color: rgba(255, 255, 255, 0.82); max-width: 48ch; }
.bento__big { font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 60px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.bento__big small { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
@media (max-width: 980px) { .bento--7, .bento--5 { grid-column: span 12; } .bento--3 { grid-column: span 6; } }
@media (max-width: 640px) { .bento--3 { grid-column: span 12; } .bento--photo { min-block-size: 300px; } .band { padding: 22px 16px; border-radius: 20px; } }
/* ── residences: filters and the product grid ──────────────────────────── */
.res { padding: clamp(48px, 7vw, 88px) clamp(6px, 2vw, 28px); }
.res__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 32px); }
.res__head h2 { max-width: 18ch; margin-bottom: 12px; }
.res__head .lead { max-width: 56ch; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters .pill[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.res__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .res__grid { grid-template-columns: 1fr; } }
.prop { border-radius: var(--r2); }
.prop__brand { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: var(--tag); color: var(--on-tag); 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); }
.prop__title h3 { font-size: 19px; letter-spacing: -0.02em; }
.prop__acts { display: grid; gap: 8px; }
.prop__foot { align-items: end; }
.prop__price { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.prop__local { font-weight: 500; color: var(--ink-2) !important; }
.res__foot { margin-top: clamp(24px, 3vw, 36px); text-align: center; }
.res__more { margin: 0 auto; max-width: 64ch; }
.res__asof { margin: 12px auto 0; }
.res__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
/* ── how we meet: the photograph panel with the form ───────────────────── */
.meet { position: relative; isolation: isolate; overflow: clip; border-radius: var(--r4); background: #061411; color: #fff; padding: clamp(28px, 5vw, 64px); }
.meet__bg { position: absolute; inset: 0; z-index: -2; }
.meet__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 60% 50%; }
.meet__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 20, 17, 0.88) 0%, rgba(6, 20, 17, 0.6) 55%, rgba(6, 20, 17, 0.38) 100%); }
.meet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(28px, 4vw, 56px); align-items: center; }
.meet__text { display: grid; gap: 16px; }
.meet__text h2 { color: #fff; max-width: 18ch; }
.meet__text > p { color: rgba(255, 255, 255, 0.78); font-size: 16.5px; max-width: 56ch; }
.meet__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.meet__facts li { display: flex; gap: 12px; align-items: center; color: #fff; font-size: 15.5px; }
.meet__facts svg { inline-size: 20px; block-size: 20px; color: var(--gold); flex: none; }
.meet__direct { display: grid; gap: 10px; margin-top: 6px; }
.meet__direct p { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.meet__direct div { display: flex; gap: 8px; flex-wrap: wrap; }
.meet__panel { padding: clamp(20px, 3vw, 32px); border-radius: 20px; color: var(--ink); }
.meet__panel h3 { font-size: 20px; margin-bottom: 16px; letter-spacing: -0.02em; }
@media (max-width: 900px) { .meet__grid { grid-template-columns: 1fr; } .meet { padding: 22px 16px; border-radius: 20px; } .meet__text h2 { max-width: none; } }
/* ── steps, about, faq ─────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { display: grid; gap: 12px; padding: 22px; align-content: start; }
.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(--accent-b) 55%, transparent); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 18px; letter-spacing: -0.02em; }
.step p { color: var(--ink-2); font-size: 15px; }
.about { padding: clamp(48px, 7vw, 88px) clamp(6px, 2vw, 28px); }
.about .split { align-items: center; }
.photo--panel { border-radius: var(--r4); box-shadow: var(--shade-lg); }
.about .bullets svg { color: var(--accent); }
.stats { margin-top: clamp(28px, 4vw, 44px); }
.stat__n { color: var(--ink); }
.faq { max-width: 860px; }
.faq details { border-radius: 14px; }
.faq summary { font-size: 16.5px; letter-spacing: -0.01em; }
.faq summary svg { color: var(--accent); }
/* ── the close panel: ink ground, grain, one accent pill ───────────────── */
.close { position: relative; isolation: isolate; overflow: clip; margin-top: 18px; border-radius: var(--r4); background: var(--ink); color: var(--canvas); padding: clamp(38px, 6vw, 76px); display: grid; grid-template-columns: 1.15fr auto; gap: 30px; align-items: center; }
.close::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; mix-blend-mode: soft-light; background-image: var(--grain); background-size: 180px 180px; }
.close h2 { color: var(--canvas); font-size: clamp(28px, 4vw, 52px); max-width: 18ch; }
.close p { margin-top: 14px; color: color-mix(in srgb, var(--canvas) 66%, transparent); max-width: 44ch; font-size: 16px; }
.close__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.close .pill--glass { background: color-mix(in srgb, var(--canvas) 12%, transparent); border-color: color-mix(in srgb, var(--canvas) 28%, transparent); color: var(--canvas); }
.close .pill--glass:hover { background: color-mix(in srgb, var(--canvas) 20%, transparent); }
@media (max-width: 820px) { .close { grid-template-columns: 1fr; padding: 32px 22px; border-radius: 20px; } .close h2 { max-width: none; } }
/* ── footer ────────────────────────────────────────────────────────────── */
.ftr { border-top: 0; padding: 32px 10px calc(28px + env(safe-area-inset-bottom, 0px)); }
.ftr__row { align-items: center; }
.ftr__disc { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); max-width: 110ch; }
@media (max-width: 720px) { .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
/* ── pinned chrome: the section pill (desktop) and the dock (phones) ───── */
.pin { position: fixed; top: 10px; left: 50%; z-index: 30; translate: -50% -6px; display: flex; align-items: center; gap: 4px; block-size: 46px; padding: 4px 5px 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--canvas) 84%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shade); opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease), translate 160ms var(--ease); }
.pin.is-solid { opacity: 1; translate: -50% 0; pointer-events: auto; transition-duration: 240ms; }
.pin__brand { display: inline-flex; align-items: center; color: var(--lux); margin-inline-end: 6px; }
.pin__links { display: flex; gap: 2px; }
.pin__links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background-color var(--dur), color var(--dur); }
.pin__links a svg { inline-size: 15px; block-size: 15px; }
.pin__links a:hover { color: var(--ink); background: var(--surface-2); }
.pin__links a.is-active { color: var(--ink); background: var(--accent-soft); }
.pin__cta { margin-inline-start: 6px; min-block-size: 36px; padding-inline: 14px; }
@media (max-width: 1100px) { .pin__links { display: none; } .pin { padding-inline-start: 10px; } }
@media (max-width: 720px) { .pin { display: none; } }
.dock { display: none; position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 30; block-size: 58px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--canvas) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shade-lg); }
.dock a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.dock a svg { inline-size: 18px; block-size: 18px; }
.dock a.is-active { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 720px) { .dock { display: flex; } .theme-btn { bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 68px); } }
[id] { scroll-margin-top: 72px; }
/* ── the plain top bar of the thank-you and policy pages ───────────────── */
.bar { position: sticky; top: 0; z-index: 100; padding-block: 12px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.bar__row { display: flex; align-items: center; gap: 12px; }
.bar__logo { display: inline-flex; color: var(--lux); }
.bar__right { display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) { .bar__right .pill--text { display: none; } .bar__logo svg { block-size: 30px !important; } }
.page-thanks { min-block-size: 80vh; }
.thanks .brand { color: var(--lux); margin-inline: auto; }
.thanks__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* ── the popups on this ground ─────────────────────────────────────────── */
.pop__panel { border-radius: 20px; }
.pop__panel--wide .pop__close { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
/* ── right-to-left pages (Arabic): the Noto face, no tracking, the hero mirrored ─────────────────── */
: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="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3, :root[lang="ar"] .stat__n, :root[lang="ar"] .bento__big, :root[lang="ar"] .board__city, :root[lang="ar"] .board__time, :root[lang="ar"] .prop__price, :root[lang="ar"] .pill { letter-spacing: 0; }
:root[lang="ar"] .hero h1 { line-height: 1.18; font-size: clamp(38px, 5.6vw, 80px); }
:root[lang="ar"] h2 { line-height: 1.25; }
:root[lang="ar"] body, :root[lang="ar"] p { line-height: 1.75; }
[dir="rtl"] .hero__bg img { object-position: 28% 50%; }
[dir="rtl"] .meet__scrim { background: linear-gradient(270deg, rgba(6, 20, 17, 0.88) 0%, rgba(6, 20, 17, 0.6) 55%, rgba(6, 20, 17, 0.38) 100%); }
[dir="rtl"] .board__time { font-variant-numeric: tabular-nums; }
[dir="rtl"] .nav__right { justify-self: start; }
[dir="rtl"] .pin { translate: 50% -6px; } [dir="rtl"] .pin.is-solid { translate: 50% 0; }
/* ── phones (the owner's screenshots of 12 Oct): the logo flush in the corner, nothing wider than the screen ── */
.brand--mark { inline-size: 29px; block-size: 34px; } /* explicit: an auto width on a