:root {
  --paper: #f2eee7;
  --paper-2: #e9e3d8;
  --paper-3: #ddd5c7;
  --card: #f8f5ef;
  --ink: #121212;
  --ink-2: #34312c;
  --muted: #6c665c;
  --line: #d3cabb;
  --line-strong: #b4a995;

  --night: #0e0f11;
  --night-2: #17191c;
  --night-3: #202328;
  --night-line: #2c2f35;
  --night-text: #ede8df;
  --night-muted: #9d978c;

  --accent: #b8442b;
  --accent-hover: #9b3621;
  --accent-ink: #ffffff;
  --accent-soft: #f0d9cf;
  --ok: #2f8a57;
  --ok-night: #5fd08f;
  --danger: #b3261e;
  --focus: #1f5eff;

  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-text: "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: 20px;
  --max: 1320px;
  --hdr-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

[lang="ar"] {
  --f-display: "Reem Kufi", "Readex Pro", Tahoma, sans-serif;
  --f-text: "Readex Pro", Tahoma, system-ui, sans-serif;
  --f-mono: "Readex Pro", Tahoma, sans-serif;
}

@media (min-width: 768px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 24px); }
html[lang="ar"] { font-size: 92%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: 68px;
}
@media (min-width: 960px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 400; line-height: 1.05; }
h3, h4 { font-family: var(--f-text); font-weight: 600; line-height: 1.3; }
::selection { background: var(--accent); color: #fff; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 200; background: var(--ink); color: var(--paper); padding: .8rem 1.1rem; font-weight: 600; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.night :focus-visible { outline-color: #8fb0ff; }
main:focus { outline: none; }

.display, .display-2, .display-3 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.015em; font-variant-numeric: lining-nums; }
.display { font-size: clamp(3.2rem, 9.5vw, 8.75rem); line-height: .92; margin-bottom: .35em; }
.display-2 { font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: .95; }
.display-3 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; }
.display em, .display-2 em, .display-3 em { font-style: italic; color: var(--accent); }
.night .display em, .night .display-2 em, .night .display-3 em { color: #e2856d; }
[lang="ar"] .display, [lang="ar"] .display-2, [lang="ar"] .display-3 { letter-spacing: 0; line-height: 1.2; font-weight: 500; }
[lang="ar"] .display { font-size: clamp(2.8rem, 7.5vw, 6.5rem); }
[lang="ar"] .display em, [lang="ar"] .display-2 em, [lang="ar"] .display-3 em { font-style: normal; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .04em; }
.label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 .5rem; }
.kicker { display: flex; align-items: center; gap: .75rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.25rem; }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.kicker-num { color: var(--accent); }
[lang="ar"] .label, [lang="ar"] .kicker, [lang="ar"] .mono { letter-spacing: 0; text-transform: none; }
[lang="ar"] .kicker, [lang="ar"] .label { font-size: .85rem; }

.night { background: var(--night); color: var(--night-text); }
.night .muted, .night .label, .night .kicker { color: var(--night-muted); }
.night .kicker-num { color: #e2856d; }
.night .lead { color: #cfc9be; }
.h1-stack { margin: 0; font-size: inherit; line-height: inherit; }
.h1-stack > .display { display: block; }

.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
.icon-xs { width: .9em; height: .9em; }
.icon-lg { width: 36px; height: 36px; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }
.icon-flip { transform: scaleX(-1); }
[dir="rtl"] .icon-flip { transform: none; }

.btn {
  --bg: transparent; --fg: currentColor; --bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .8rem 1.5rem; border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
  font-family: var(--f-text); font-weight: 500; font-size: .95rem; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; cursor: pointer; border-radius: 0;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn .icon-dir, .link-arrow .icon-dir { transition: transform .3s var(--ease); }
.btn:hover .icon-dir, .link-arrow:hover .icon-dir { transform: translateX(4px); }
[dir="rtl"] .btn:hover .icon-dir, [dir="rtl"] .link-arrow:hover .icon-dir { transform: scaleX(-1) translateX(4px); }
.btn-sm { min-height: 42px; padding: .5rem 1rem; font-size: .88rem; }
.btn-block { width: 100%; }
.btn-accent { --bg: var(--accent); --fg: var(--accent-ink); --bd: var(--accent); }
.btn-accent:hover { --bg: var(--accent-hover); --bd: var(--accent-hover); }
.btn-ink { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); }
.btn-ink:hover { --bg: var(--accent); --bd: var(--accent); --fg: #fff; }
.btn-line { --bd: var(--line-strong); }
.btn-line:hover { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); }
.night .btn-line { --bd: var(--night-line); --fg: var(--night-text); }
.night .btn-line:hover { --bg: var(--night-text); --fg: var(--night); --bd: var(--night-text); }
.btn-paper { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }
.btn-paper:hover { --bg: #fff; }
.btn-ghost-night { --fg: var(--night-muted); --bd: transparent; }
.btn-ghost-night:hover { --fg: var(--night-text); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn-row.center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.link-btn { background: none; border: 0; padding: .4rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; }
.link-btn:hover { color: var(--ink); }
.round-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s;
}
.round-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.round-btn--night { border-color: rgb(255 255 255 / .25); color: #fff; background: rgb(0 0 0 / .35); }
.round-btn--night:hover { background: #fff; color: var(--night); border-color: #fff; }

.hdr { position: sticky; top: 0; z-index: 60; background: rgb(242 238 231 / .86); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr--night { background: var(--night); backdrop-filter: none; color: var(--night-text); }
.hdr--night.is-scrolled { border-bottom-color: var(--night-line); }
.hdr-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--hdr-h); }
.brand { display: block; flex: none; }
.logo { height: 46px; width: auto; filter: invert(1); mix-blend-mode: multiply; }
.hdr--night .logo, .night .logo { filter: none; mix-blend-mode: screen; }
.nav { margin-inline-start: auto; }
.nav ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
.nav a { position: relative; text-decoration: none; font-size: .95rem; padding: .5rem 0; }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
[dir="rtl"] .nav a::after { transform-origin: right; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-mobile-only { display: none; }
.hdr-actions { display: flex; align-items: center; gap: 1rem; }
.lang { font-size: .95rem; text-decoration: none; padding: .4rem .2rem; border-bottom: 1px solid transparent; }
.lang:hover { border-bottom-color: currentColor; }
.lang:lang(ar) { font-family: "Readex Pro", Tahoma, sans-serif; }
.lang:lang(en) { font-family: "Geist", Arial, sans-serif; }
.hdr-call { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); }
.hdr-call:hover { --bg: var(--accent); --bd: var(--accent); --fg: #fff; }
.hdr--night .hdr-call { --bg: var(--night-text); --fg: var(--night); --bd: var(--night-text); }
.hdr--night .hdr-call:hover { --bg: var(--accent); --bd: var(--accent); --fg: #fff; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid currentColor; background: none; cursor: pointer; place-items: center; border-radius: 50%; }
.nav-toggle-bars { display: grid; gap: 5px; width: 18px; }
.nav-toggle-bars span { height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 959px) {
  .hdr-call { display: none; }
  .js .nav-toggle { display: inline-grid; }
  .js .nav {
    position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 59; margin: 0; padding: 2rem var(--gutter) 6rem;
    background: var(--night); color: var(--night-text); display: none; overflow-y: auto;
  }
  .js .nav.is-open { display: flex; flex-direction: column; justify-content: space-between; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav li { border-bottom: 1px solid var(--night-line); }
  .js .nav a { display: block; font-family: var(--f-display); font-size: 2.6rem; padding: .9rem 0; line-height: 1.1; }
  .js .nav a::after { display: none; }
  .js .nav a[aria-current="page"] { color: #e2856d; }
  .js .nav-mobile-only { display: block; }
  .nav-contact { display: grid; gap: .5rem; margin-top: 2rem; }
  .js .nav .nav-contact a { font-family: var(--f-mono); font-size: 1rem; padding: 0; }
  .nav ul { flex-wrap: wrap; gap: 1rem; }
  .logo { height: 40px; }
}
body.nav-open { overflow: hidden; }

.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section-paper2 { background: var(--paper-2); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .display-2 { margin: 0; }
.page-hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem); }
.page-hero .display { margin-bottom: .25em; }

.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; }
.hero-media { position: relative; margin: 0; z-index: -1; overflow: hidden; }
.hero-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 15 17 / 0) 55%, var(--night)); }
.hero-media figcaption { position: absolute; z-index: 1; top: 1rem; inset-inline-end: var(--gutter); color: rgb(237 232 223 / .75); background: rgb(14 15 17 / .45); backdrop-filter: blur(6px); padding: .35rem .7rem; font-size: .7rem; }
[lang="ar"] .hero-media figcaption { font-size: .82rem; }
.hero-inner { margin-top: -3.5rem; }
.hero .display { margin-bottom: .3em; }
.hero-lead { color: #cfc9be; font-size: 1.1rem; max-width: 46ch; }
@media (min-width: 1024px) {
  .hero {
    --side: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
    display: grid;
    grid-template-columns: var(--side) clamp(24rem, 36vw, 34rem) clamp(2rem, 3.5vw, 3.5rem) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .hero .display { font-size: clamp(3.2rem, 5.6vw, 6.25rem); }
  [lang="ar"] .hero .display { font-size: clamp(2.8rem, 4.4vw, 4.75rem); }
  .hero .madlib { margin-top: 2rem; padding-top: 1.75rem; }
  .hero-media { grid-column: 4; grid-row: 1; aspect-ratio: 3 / 2; place-self: stretch; }
  .hero-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: center; }
  .hero-media::after { background: linear-gradient(to right, var(--night) 0%, rgb(14 15 17 / 0) 9%); }
  [dir="rtl"] .hero-media::after { background: linear-gradient(to left, var(--night) 0%, rgb(14 15 17 / 0) 9%); }
  .hero-inner { grid-column: 2; grid-row: 1; margin: 0; padding: clamp(2.5rem, 5vh, 4rem) 0; max-width: none; align-self: center; }
  .hero-stats { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
}
.hero-stats { margin-top: auto; }
@media (min-width: 1024px) {
  .hero-stats .stats { border-top: 1px solid rgb(255 255 255 / .1); }
  .hero-stats .stats > div { padding-inline: 1.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: hero-settle 2.6s var(--ease) both; }
  .hero-copy > * { animation: rise 1s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .1s; }
  .hero-copy > :nth-child(3) { animation-delay: .22s; }
  .hero-copy > :nth-child(4) { animation-delay: .34s; }
  .hero-stats { animation: rise 1s .45s var(--ease) both; }
}
@keyframes hero-settle { from { transform: scale(1.04); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.madlib { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / .14); }
.madlib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.madlib-actions .link-arrow { color: var(--night-muted); font-weight: 400; }
.madlib-actions .link-arrow:hover { color: var(--night-text); }
.madlib-line { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.5; margin: 0 0 1.5rem; color: var(--night-muted); }
[lang="ar"] .madlib-line { font-family: var(--f-text); font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.madlib-pick { position: relative; display: inline-block; }
.madlib-pick select {
  appearance: none; background: transparent; border: 0; border-bottom: 1px solid #e2856d; color: var(--night-text);
  font: inherit; padding: 0 1.3em 0 0; cursor: pointer; max-width: 100%; line-height: 1.2; min-height: 0; width: auto;
  field-sizing: content;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e2856d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: .55em;
}
[dir="rtl"] .madlib-pick select { padding: 0 0 0 1.3em; background-position: left center; }
.madlib-pick select:hover { color: #fff; border-color: #fff; }
.madlib-pick select:focus { box-shadow: none; border-color: #fff; }
.madlib-pick select option { background: var(--night-2); color: var(--night-text); font-family: var(--f-text); font-size: 1rem; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: clamp(2.5rem, 5vw, 3rem) 0 0; border-top: 1px solid rgb(255 255 255 / .14); }
.stats dd { font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats > div { padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--night-line); }
@media (min-width: 900px) { .stats > div { border-bottom: 0; padding-inline-end: 1.5rem; } .stats > div + div { border-inline-start: 1px solid var(--night-line); padding-inline-start: 1.5rem; } }
.stats dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--night-muted); margin-bottom: .5rem; }
[lang="ar"] .stats dt { letter-spacing: 0; font-size: .85rem; }
.stats dd { margin: 0; font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; }
.stats .stat-status { font-family: var(--f-text); font-size: 1rem; display: flex; align-items: center; gap: .5rem; padding-top: .9rem; }

.marquee { background: var(--night); color: var(--night-text); border-top: 1px solid var(--night-line); overflow: hidden; padding-block: 1.4rem; }
.marquee-track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 38s linear infinite; }
  [dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.marquee ul { list-style: none; display: flex; margin: 0; padding: 0; }
.marquee li { display: flex; align-items: center; }
.marquee li::after { content: "✦"; color: #e2856d; font-size: .9rem; margin-inline: 2.2rem; }
.marquee a { font-family: var(--f-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); text-decoration: none; white-space: nowrap; line-height: 1; }
.marquee li:nth-child(even) a { color: transparent; -webkit-text-stroke: 1px rgb(237 232 223 / .7); transition: color .3s, -webkit-text-stroke-color .3s; }
.marquee a:hover, .marquee li:nth-child(even) a:hover { color: #e2856d; -webkit-text-stroke-color: #e2856d; }
.marquee li:nth-child(even) a:focus-visible { color: var(--night-text); }
.marquee sup { font-family: var(--f-mono); font-size: .75rem; color: var(--night-muted); margin-inline-start: .3rem; vertical-align: super; }

.rail-controls { display: flex; align-items: center; gap: .6rem; }
.rail-controls .link-arrow { margin-inline-start: 1rem; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 80%); gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-bottom: 1.25rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
@media (min-width: 640px) { .rail { grid-auto-columns: minmax(300px, 44%); } }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((min(100vw, var(--max)) - 2 * var(--gutter) - 3 * 1.5rem) / 3.25); } }
.rail > * { scroll-snap-align: start; }
@media (hover: none) { .rail-controls .round-btn { display: none; } }
.rail:focus-visible { outline-offset: -2px; }
.rail-progress { display: none; position: relative; height: 2px; background: var(--line); margin-top: 1.5rem; overflow: hidden; }
.js .rail-progress { display: block; }
.js .rail:has(+ .container .rail-progress) { scrollbar-width: none; padding-bottom: 0; }
.js .rail:has(+ .container .rail-progress)::-webkit-scrollbar { display: none; }
.rail-progress span { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 30%; background: var(--ink); transition: width .2s; }
.grid { display: grid; gap: 3rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .9s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); }
.card-count { position: absolute; bottom: .7rem; inset-inline-end: .7rem; background: rgb(14 15 17 / .72); color: #fff; padding: .25rem .55rem; display: inline-flex; gap: .35rem; align-items: center; font-size: .72rem; }
.card-body { padding-top: 1.1rem; display: flex; flex-direction: column; flex: 1; }
.card-kicker { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--muted); margin: 0 0 .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.cert { display: inline-flex; align-items: center; gap: .4rem; color: var(--ok); }
.cert-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.card-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1.05; margin: 0 0 .5rem; letter-spacing: -.01em; }
[lang="ar"] .card-title { font-size: 1.5rem; letter-spacing: 0; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-specs { color: var(--ink-2); margin: 0 0 1rem; text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; }
[lang="ar"] .card-specs { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.card-specs span { color: var(--line-strong); margin-inline: .2rem; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.card-price { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.card-price.is-request, .price-xl.is-request { font-size: 1rem; font-weight: 500; color: var(--muted); }
.compare-toggle {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: .5rem 0; min-height: 40px;
}
[lang="ar"] .compare-toggle { letter-spacing: 0; font-size: .85rem; text-transform: none; }
.compare-toggle i { width: 16px; height: 16px; border: 1px solid currentColor; display: grid; place-items: center; transition: background-color .2s; }
.compare-toggle i::after { content: "+"; font-style: normal; font-size: 13px; line-height: 1; }
.compare-toggle:hover { color: var(--ink); }
.compare-toggle[aria-pressed="true"] { color: var(--accent); }
.compare-toggle[aria-pressed="true"] i { background: var(--accent); border-color: var(--accent); color: #fff; }
.compare-toggle[aria-pressed="true"] i::after { content: "✓"; }

.bento { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; }
  .bento-1 { grid-column: span 2; grid-row: span 2; }
  .bento-2 { grid-column: span 2; }
  .bento-5, .bento-6 { grid-column: span 2; }
}
.tile { position: relative; display: flex; min-height: 240px; height: 100%; overflow: hidden; text-decoration: none; color: #fff; background: var(--night); isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: -2; transition: transform .9s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(14 15 17 / 0) 40%, rgb(14 15 17 / .5) 65%, rgb(14 15 17 / .9)); }
.tile:hover img { transform: scale(1.05); }
.tile-count { position: absolute; top: 1rem; inset-inline-start: 1rem; background: rgb(14 15 17 / .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: .3rem .6rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
[lang="ar"] .tile-count { font-size: .85rem; letter-spacing: 0; }
.tile-text { margin-top: auto; padding: 1.25rem 5rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
[dir="rtl"] .tile-text { padding: 1.25rem 1.25rem 1.25rem 5rem; }
.tile-text strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.05; }
.bento-1 .tile-text strong { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
[lang="ar"] .tile-text strong { font-weight: 500; line-height: 1.3; }
.tile-text span { color: #d6d0c6; font-size: .9rem; }
@media (min-width: 1024px) {
  .bento-3 .tile-text span, .bento-4 .tile-text span { display: none; }
}
@media (max-width: 699px) {
  .bento { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .bento-1, .bento-item:last-child:nth-child(even) { grid-column: 1 / -1; }
  .bento .tile { min-height: 172px; }
  .bento-1 .tile { min-height: 240px; }
  .bento .tile-count { top: .6rem; inset-inline-start: .6rem; }
  .bento .tile-text, [dir="rtl"] .bento .tile-text { padding: 1rem; }
  .bento .tile-text strong { font-size: 1.2rem; }
  .bento-1 .tile-text strong { font-size: 1.6rem; }
  .bento-item:not(.bento-1) .tile-text span, .bento-item:not(.bento-1) .tile-arrow { display: none; }
  .bento-1 .tile-text { padding-inline-end: 4.5rem; }
}
.tile-arrow { position: absolute; bottom: 1.25rem; inset-inline-end: 1.25rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .4); display: grid; place-items: center; transition: background-color .25s, color .25s; }
.tile:hover .tile-arrow { background: #fff; color: var(--ink); }

.std { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .std { grid-template-columns: 1fr 1.1fr; gap: 5.5rem; align-items: center; } }
.std-media { position: relative; margin-bottom: 3rem; }
.std-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--paper-3); }
@media (max-width: 1023px) { .std-media img { aspect-ratio: 4 / 3; } }
.std-badge {
  position: absolute; bottom: -3rem; inset-inline-end: -1rem; width: min(340px, 88%);
  display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: center;
  background: var(--night); color: var(--night-text); padding: 1.25rem 1.4rem 1.25rem 1.25rem; text-decoration: none;
  box-shadow: 0 24px 60px -24px rgb(14 15 17 / .6); transition: transform .4s var(--ease);
}
@media (min-width: 1024px) { .std-badge { inset-inline-end: -2.5rem; } }
@media (max-width: 599px) { .std-badge { inset-inline-end: .75rem; } }
.std-badge:hover { transform: translateY(-4px); }
.ring { grid-row: 1; grid-column: 1; width: 96px; height: 96px; transform: rotate(-90deg); }
[dir="rtl"] .ring { transform: rotate(-90deg) scaleY(-1); }
.ring circle { fill: none; stroke-width: 6; }
.ring-track { stroke: var(--night-line); }
.ring-fill { stroke: #e2856d; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--pct)); stroke-linecap: round; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.reveal-ready .std-badge:not(.is-in) .ring-fill { stroke-dashoffset: 100; }
.std-badge-num { grid-row: 1; grid-column: 1; justify-self: center; font-family: var(--f-display); font-size: 2.1rem; line-height: 1; }
.std-badge-num small { font-size: .5em; color: var(--night-muted); }
.std-badge-text { grid-row: 1; grid-column: 2; display: grid; gap: .6rem; font-size: .9rem; line-height: 1.4; color: #cfc9be; }
.std-badge-text .link-arrow { color: var(--night-text); justify-self: start; font-size: .85rem; }
.std-lead { max-width: 46ch; margin-top: 1.25rem; }
.pillars { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0 2rem; }
@media (min-width: 600px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillars li { position: relative; padding: 1.6rem 0 1.8rem; border-top: 1px solid var(--line); }
.pillars li::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
[dir="rtl"] .pillars li::before { transform-origin: right; }
.pillars li:hover::before { transform: scaleX(1); }
.pillar-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: 1rem; }
.pillars h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; margin: 0 0 .4rem; }
[lang="ar"] .pillars h3 { font-size: 1.35rem; font-weight: 500; }
.pillars p { margin: 0; color: var(--muted); font-size: .95rem; }

.steps { --dot: 56px; list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; position: relative; }
.steps li { position: relative; display: grid; grid-template-columns: var(--dot) 1fr; gap: .2rem 1.25rem; }
.steps h3 { grid-column: 2; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; margin: .7rem 0 .3rem; }
[lang="ar"] .steps h3 { font-size: 1.35rem; font-weight: 500; }
.steps p { grid-column: 2; margin: 0; color: var(--muted); max-width: 34ch; }
.step-num {
  grid-row: 1 / span 2; grid-column: 1; position: relative; z-index: 1; width: var(--dot); height: var(--dot); border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line-strong);
  font-family: var(--f-display); font-size: 1.7rem; transition: background-color .5s, color .5s, border-color .5s;
}
.step-num { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.steps li:last-child .step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.reveal-ready .steps:not(.is-in) .step-num { background: var(--paper-2); color: var(--ink); border-color: var(--line-strong); }
.steps.is-in li:nth-child(2) .step-num { transition-delay: .35s; }
.steps.is-in li:nth-child(3) .step-num { transition-delay: .7s; }
.steps.is-in li:nth-child(4) .step-num { transition-delay: 1.05s; }
.steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(var(--dot) / 2); top: var(--dot); bottom: -2rem; width: 1px; background: var(--line-strong); }
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps li { grid-template-columns: 1fr; }
  .steps li::after { display: none; }
  .steps h3, .steps p { grid-column: 1; }
  .steps h3 { margin-top: 1.5rem; }
  .step-num { grid-row: auto; }
  .steps::before, .steps::after {
    content: ""; position: absolute; top: calc(var(--dot) / 2); height: 1px; background: var(--line-strong);
    inset-inline: calc(var(--dot) / 2) calc(25% - 1.5rem - var(--dot) / 2);
  }
  .steps::after { background: var(--ink); transform-origin: left; transition: transform 1.4s var(--ease); }
  [dir="rtl"] .steps::after { transform-origin: right; }
  .reveal-ready .steps:not(.is-in)::after { transform: scaleX(0); }
}

.visit { position: relative; isolation: isolate; padding-block: clamp(5rem, 12vw, 10rem); overflow: hidden; }
.visit-bg { position: absolute; inset: -12% 0; width: 100%; height: 124%; max-width: none; object-fit: cover; z-index: -2; will-change: transform; }
.visit::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(14 15 17 / .75) 0%, rgb(14 15 17 / .35) 60%, rgb(14 15 17 / .15)); }
[dir="rtl"] .visit::after { background: linear-gradient(270deg, rgb(14 15 17 / .75) 0%, rgb(14 15 17 / .35) 60%, rgb(14 15 17 / .15)); }
.visit-card {
  max-width: 580px; padding: clamp(1.75rem, 4vw, 3rem);
  background: rgb(14 15 17 / .62); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgb(255 255 255 / .1);
}
.visit-card > p { color: #cfc9be; }
.visit-addr { display: flex; align-items: center; gap: .5rem; font-style: normal; font-family: var(--f-mono); font-size: .85rem; margin: 1.5rem 0 1rem; color: var(--night-text); }
.visit-addr .icon { color: #e2856d; }
.visit-card .open-status { font-size: 1.05rem; }

.newcars {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 2rem; align-items: end;
  padding: clamp(2rem, 5vw, 3.5rem); background: var(--accent); color: #fff; text-decoration: none;
}
@media (min-width: 800px) { .newcars { grid-template-columns: 1fr auto; } }
.newcars-mark {
  position: absolute; z-index: -1; inset-inline-end: -.05em; bottom: -.22em; font-family: var(--f-display); font-size: clamp(7rem, 20vw, 17rem);
  line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .28); transition: transform 1.2s var(--ease);
}
.newcars:hover .newcars-mark { transform: translateX(-3%); }
[dir="rtl"] .newcars:hover .newcars-mark { transform: translateX(3%); }
.newcars-copy { display: flex; flex-direction: column; gap: .4rem; max-width: 40ch; }
.newcars .kicker { margin: 0 0 .4rem; color: rgb(255 255 255 / .8); }
.newcars-h { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; }
.newcars-text { color: rgb(255 255 255 / .85); }
.newcars-cta { display: inline-flex; align-items: center; gap: 1rem; font-weight: 500; }
.newcars-arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .6); display: grid; place-items: center; transition: background-color .3s, color .3s; }
.newcars:hover .newcars-arrow { background: #fff; color: var(--accent); }

.open-status { display: flex; align-items: center; gap: .55rem; font-weight: 500; margin: 0 0 .75rem; font-size: .95rem; }
.hours { margin: 0; display: grid; gap: .3rem; max-width: 300px; font-size: .92rem; }
.hours div { display: flex; justify-content: space-between; gap: 1.5rem; }
.hours dt { color: var(--muted); }
.night .hours dt { color: var(--night-muted); }
.hours dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.collection-nav { margin-top: 2.5rem; overflow-x: auto; scrollbar-width: none; }
.collection-nav::-webkit-scrollbar { display: none; }
.collection-nav ul { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; width: max-content; }
.collection-nav a { display: inline-flex; align-items: baseline; gap: .35rem; padding: .6rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-size: .95rem; white-space: nowrap; transition: background-color .2s, color .2s; }
.collection-nav a:hover { border-color: var(--ink); }
.collection-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.collection-nav sup { font-family: var(--f-mono); font-size: .66rem; opacity: .7; }

.filterbar { position: sticky; top: var(--hdr-h); z-index: 40; background: var(--paper); border-block: 1px solid var(--line); padding-block: .9rem; }
.filters { display: grid; gap: .75rem; align-items: end; }
@media (min-width: 1100px) { .filters { grid-template-columns: 1.4fr repeat(6, 1fr) auto; gap: .6rem; } }
.filter label { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
[lang="ar"] .filter label { letter-spacing: 0; font-size: .8rem; text-transform: none; }
.filters .filter select, .filters .filter input { min-height: 44px; padding-block: .45rem; font-size: .92rem; }
#refine { scroll-margin-top: -24px; }
.filter-submit { min-height: 44px; }
.filters-toggle { display: none; }
@media (max-width: 1099px) {
  .js .filters-toggle { display: inline-flex; min-height: 46px; }
  .js .filters { display: none; padding-top: 1rem; }
  .js .filters.is-open { display: grid; grid-template-columns: 1fr 1fr; }
  .js .filters .filter-q, .js .filters .filter-submit { grid-column: 1 / -1; }
  .filterbar { position: relative; top: auto; }
}

.results { padding-block: 2.5rem 6rem; }
.results-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2.5rem; }
.results-total { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin: 0 0 .3rem; }
.results-count p { margin: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: .85rem; }
.chip:hover { background: var(--accent); }
.chip-clear { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.chip-clear:hover { background: transparent; border-color: var(--ink); }
.sort { display: flex; align-items: center; gap: .6rem; }
.sort label { color: var(--muted); white-space: nowrap; text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; }
[lang="ar"] .sort label { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.sort select { width: auto; min-height: 44px; background-color: transparent; }

.empty { text-align: center; padding: 4rem 1rem; border-block: 1px solid var(--line); }
.empty-mark { font-family: var(--f-display); font-size: clamp(6rem, 18vw, 12rem); line-height: .8; color: var(--accent); margin: 0 0 1.5rem; }
.empty p { color: var(--muted); max-width: 48ch; margin-inline: auto; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.pagination ol { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.pagination ol a { display: grid; place-items: center; min-width: 46px; height: 46px; text-decoration: none; font-family: var(--f-mono); font-size: .85rem; border-bottom: 1px solid transparent; }
.pagination ol a:hover { border-bottom-color: var(--ink); }
.pagination ol a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.pg-step { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 500; }
.pg-step:hover { color: var(--accent); }

.form { display: grid; gap: 0; }
.field { margin: 0 0 1.4rem; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-family: var(--f-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: .5rem; padding: 0; }
[lang="ar"] .field > label, [lang="ar"] .field > legend { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.night .field > label, .night .field > legend { color: var(--night-muted); }
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; min-height: 52px; padding: .75rem .95rem; background-color: var(--card); border: 1px solid var(--line); border-radius: 0;
  color: var(--ink); font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 130px; resize: vertical; }
select {
  appearance: none; padding-inline-end: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c665c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
}
[dir="rtl"] select { background-position: left .85rem center; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(18 18 18 / .08); }
::placeholder { color: #9b9488; }
.hint { font-size: .82rem; color: var(--muted); margin: .4rem 0 0; }
.has-error input, .has-error textarea { border-color: var(--danger); }
.error { color: var(--danger); font-size: .86rem; margin: .4rem 0 0; }
.form-alert { border-inline-start: 3px solid var(--danger); background: #f6e3df; padding: .85rem 1rem; margin-bottom: 1.5rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; display: inline-flex; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.05rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .92rem; transition: background-color .2s, color .2s; }
.choice:hover span { border-color: var(--ink); }
.choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.form-note { font-size: .82rem; color: var(--muted); margin: 0; }
.form-success { padding: 2.5rem 1.5rem; border: 1px solid var(--ok); text-align: center; background: var(--card); }
.form-success .icon { color: var(--ok); margin: 0 auto 1rem; }
.form-success h3 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; }
.hp { position: absolute; inset-inline-start: -9999px; }
.btn.is-busy { opacity: .6; cursor: progress; pointer-events: none; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 1.5rem 0 0; color: var(--muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; }
[lang="ar"] .breadcrumb ol { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: .5rem; color: var(--line-strong); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

.lot-head { display: grid; gap: 1.5rem 3rem; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); align-items: end; }
@media (min-width: 960px) { .lot-head { grid-template-columns: 1fr auto; } }
.lot-h1 { font-size: clamp(2.8rem, 7.5vw, 6.5rem); margin: 0; }
.lot-make { display: block; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
[lang="ar"] .lot-make { letter-spacing: .05em; }
.lot-h1 em { color: var(--muted) !important; font-size: .55em; }
.lot-price { text-align: end; }
@media (max-width: 959px) { .lot-price { text-align: start; } }
.price-xl { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }

.mosaic { position: relative; }
.mosaic-track { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.mosaic-track::-webkit-scrollbar { display: none; }
.mosaic-track > .mosaic-item { flex: 0 0 88%; scroll-snap-align: start; }
.mosaic-track > .mosaic-item:only-child { flex-basis: 100%; }
.mosaic-item { position: relative; display: block; overflow: hidden; background: var(--paper-3); aspect-ratio: 3 / 2; }
.mosaic-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .9s var(--ease); }
.mosaic-item:hover img { transform: scale(1.03); }
@media (min-width: 800px) {
  .mosaic { display: grid; gap: .5rem; grid-template-columns: 1fr; }
  .mosaic-track { display: contents; }
  .mosaic-5, .mosaic-4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: min(64vh, 640px); }
  .mosaic-3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: min(64vh, 640px); }
  .mosaic-2 { grid-template-columns: 1fr 1fr; height: min(56vh, 560px); }
  .mosaic-5 .mosaic-item, .mosaic-4 .mosaic-item, .mosaic-3 .mosaic-item, .mosaic-2 .mosaic-item { aspect-ratio: auto; }
  .mosaic-item:not(:first-child) { display: block; }
  .mosaic-5 .mosaic-item:first-child, .mosaic-4 .mosaic-item:first-child, .mosaic-3 .mosaic-item:first-child { grid-row: span 2; }
  .mosaic-4 .mosaic-item:nth-child(4) { grid-column: span 2; }
  .mosaic-1 .mosaic-item { aspect-ratio: 16 / 9; }
}
.mosaic-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(14 15 17 / .55); color: #fff; font-family: var(--f-display); font-size: 3rem; }
.mosaic-all { position: absolute; bottom: 1rem; inset-inline-end: calc(var(--gutter) + 1rem); z-index: 2; }

.car-layout { display: grid; gap: 3rem; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .car-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 5rem; } }
.car-content { min-width: 0; }
@media (max-width: 1023px) { .car-aside { order: -1; } }
.glance { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 0 1rem; border-top: 1px solid var(--ink); }
@media (min-width: 700px) { .glance { grid-template-columns: repeat(4, 1fr); } }
.glance > div { padding: 1.1rem 1rem 1.4rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .glance > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 1rem; } }
.glance dd { margin: 0; font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; }
[lang="ar"] .glance dd { font-size: 1.4rem; }
.car-section { padding-block: 3rem 0; }
.car-overview { font-family: var(--f-display); font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.3; color: var(--ink); max-width: 36ch; }
[lang="ar"] .car-overview { font-family: var(--f-text); font-size: 1.2rem; line-height: 1.8; max-width: 52ch; }
.feature-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.feature-list li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .9rem; }
.feature-list .icon { color: var(--accent); }
.spec-sheet { margin: 0; display: grid; grid-template-columns: 1fr; column-gap: 3rem; }
@media (min-width: 700px) { .spec-sheet { grid-template-columns: 1fr 1fr; } }
.spec-sheet div { display: flex; align-items: baseline; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.spec-sheet dt { color: var(--muted); white-space: nowrap; }
.spec-sheet dd { margin: 0; margin-inline-start: auto; font-family: var(--f-mono); font-size: .88rem; text-align: end; }
.finance-grid { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; align-items: end; }
@media (min-width: 600px) { .finance-grid { grid-template-columns: 1fr 200px; } .fin-down { grid-column: 1 / -1; } }
.fin-down-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.fin-down-head label { margin: 0; }
.fin-down-head output { font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin-down input[type="range"] {
  --fill: 37.5%; appearance: none; -webkit-appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.fin-down input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) var(--fill), var(--line-strong) var(--fill)); }
[dir="rtl"] .fin-down input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--ink) var(--fill), var(--line-strong) var(--fill)); }
.fin-down input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); }
.fin-down input[type="range"]::-moz-range-progress { height: 2px; background: var(--ink); }
.fin-down input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transition: transform .2s var(--ease), background-color .2s; }
.fin-down input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.fin-down input[type="range"]:hover::-webkit-slider-thumb, .fin-down input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); background: var(--accent); border-color: var(--accent); }
.fin-down input[type="range"]:focus { box-shadow: none; }
.fin-down input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.choice-sm span { min-height: 44px; min-width: 52px; justify-content: center; padding-inline: .8rem; font-variant-numeric: tabular-nums; }
.finance-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: 1.25rem 0; border-block: 1px solid var(--ink); margin: .5rem 0 1rem; }
.finance-result .label { margin: 0; }
.finance-result output { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; }
#enquire .display-3 { margin-bottom: .3em; }
#enquire > .muted { margin-bottom: 2rem; }

.car-aside { min-width: 0; }
.buy-panel { background: var(--night); color: var(--night-text); padding: 1.75rem; }
@media (min-width: 1024px) { .buy-panel { position: sticky; top: calc(var(--hdr-h) + 1.5rem); } }
.buy-name { color: var(--night-muted); margin: 0 0 .4rem; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
[lang="ar"] .buy-name { text-transform: none; letter-spacing: 0; }
.buy-price { font-family: var(--f-display); font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; margin: 0 0 1.5rem; font-variant-numeric: lining-nums; }
.buy-price.is-request { color: var(--night-muted); font-size: 1.6rem; }
.buy-actions { display: grid; gap: .6rem; }
.buy-panel .btn-ink { --bg: var(--night-text); --fg: var(--night); --bd: var(--night-text); }
.buy-panel .btn-ink:hover { --bg: #fff; --bd: #fff; }
.buy-panel .btn-line { --bd: var(--night-line); --fg: var(--night-text); }
.buy-panel .btn-line:hover { --bg: var(--night-text); --fg: var(--night); --bd: var(--night-text); }
.buy-secondary { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--night-line); }
.buy-panel .compare-toggle, .buy-panel .link-btn { color: var(--night-muted); }
.buy-panel .compare-toggle:hover, .buy-panel .link-btn:hover { color: #fff; }
.buy-panel .compare-toggle[aria-pressed="true"] { color: #e2856d; }
.buy-status { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; color: var(--night-muted); }

.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 9 10 / .97); color: #fff; }
.lightbox::backdrop { background: rgb(8 9 10 / .9); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--gutter); }
.lightbox-bar p { margin: 0; color: #bdb7ad; }
.lightbox-stage { position: relative; margin: 0; display: grid; place-items: center; min-height: 0; padding-inline: var(--gutter); }
.lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { inset-inline-start: var(--gutter); }
.lb-next { inset-inline-end: var(--gutter); }
.lightbox-thumbs { list-style: none; margin: 0; padding: 1rem var(--gutter); display: flex; gap: .5rem; overflow-x: auto; }
.lightbox-thumbs button { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: .5; width: 96px; aspect-ratio: 3 / 2; overflow: hidden; flex: none; }
.lightbox-thumbs button[aria-current="true"] { opacity: 1; border-color: #fff; }
.lightbox-thumbs img { width: 100%; height: 100%; object-fit: contain; }
body.lb-open { overflow: hidden; }

.about-hero { padding-top: clamp(3rem, 8vw, 6rem); }
.about-hero .display { max-width: 12ch; margin-bottom: clamp(2rem, 5vw, 4rem); }
[lang="ar"] .about-hero .display { max-width: 16ch; }
.about-hero-media { margin: 0; }
.about-hero-media img { width: 100%; height: clamp(320px, 62vh, 720px); object-fit: contain; background: var(--paper-3); }
.manifesto-lead { font-family: var(--f-display); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.12; max-width: 24ch; margin-bottom: 3rem; }
[lang="ar"] .manifesto-lead { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.5; }
.manifesto-cols { display: grid; gap: 1.5rem 3rem; color: var(--ink-2); max-width: 980px; }
@media (min-width: 800px) { .manifesto-cols { grid-template-columns: 1fr 1fr; margin-inline-start: auto; } }
.certified-block { display: grid; gap: 2rem 5rem; align-items: center; }
@media (min-width: 900px) { .certified-block { grid-template-columns: auto 1fr; } }
.cert-figure { font-family: var(--f-display); font-size: clamp(8rem, 22vw, 18rem); line-height: .8; color: var(--accent); }
.cert-figure span { font-size: .3em; color: var(--muted); }
.certified-block p { max-width: 52ch; color: var(--ink-2); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
@media (min-width: 800px) { .timeline { grid-template-columns: repeat(4, 1fr); } .timeline li + li { border-inline-start: 1px solid var(--line); padding-inline-start: 1.5rem; } }
.timeline li { padding: 1.75rem 1.5rem 2rem 0; border-bottom: 1px solid var(--line); }
[dir="rtl"] .timeline li { padding: 1.75rem 0 2rem 1.5rem; }
.timeline-num { display: block; font-family: var(--f-display); font-size: 3.5rem; line-height: 1; color: var(--accent); margin-bottom: 1rem; }
.timeline h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.timeline p { color: var(--muted); margin: 0; }

.channels { list-style: none; margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 0; border-top: 1px solid var(--ink); }
.channel { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; align-items: center; padding: 1.6rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
@media (min-width: 900px) { .channel { grid-template-columns: 180px 1fr 200px 60px; } }
.channel .label { margin: 0; }
.channel-value { font-family: var(--f-display); font-size: clamp(1.9rem, 4.5vw, 3.6rem); line-height: 1.05; transition: color .25s; overflow-wrap: anywhere; }
.channel-hint { color: var(--muted); }
.channel-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background-color .25s, color .25s; }
@media (max-width: 899px) { .channel-arrow { grid-row: 1 / span 3; grid-column: 2; } .channel .label, .channel-value, .channel-hint { grid-column: 1; } }
.channel:hover .channel-value { color: var(--accent); }
.channel:hover .channel-arrow { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.contact-layout { display: grid; gap: 3rem; padding-bottom: clamp(4rem, 8vw, 7rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: start; } }
.contact-visit { padding: 2rem; }
.contact-visit .visit-addr { margin-top: 0; }
.map { margin: 1.5rem 0 1rem; aspect-ratio: 4 / 3; background: var(--night-2); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.9) contrast(1.05); }

.compare-tools { margin-bottom: 1.5rem; }
.table-scroll { overflow-x: auto; margin-bottom: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--ink); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.compare-table th, .compare-table td { padding: 1rem 1.25rem 1rem 0; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table tbody th { font-family: var(--f-mono); font-weight: 400; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); width: 180px; padding-top: 1.2rem; }
[lang="ar"] .compare-table tbody th { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.compare-table thead th { font-weight: 400; padding-top: 1.5rem; }
.compare-table tbody tr:first-child td { font-family: var(--f-display); font-size: 1.8rem; }
.cmp-car { display: grid; gap: .3rem; text-decoration: none; margin-bottom: .5rem; }
.cmp-car img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper-3); margin-bottom: .6rem; height: auto; }
.cmp-lot { color: var(--muted); }
.cmp-name { font-family: var(--f-display); font-size: 1.9rem; line-height: 1.05; }
.cmp-add { vertical-align: middle !important; text-align: center !important; }
.show-diff tr.differs td { background: var(--accent-soft); }
.show-diff tbody tr:not(.differs):not(:last-child) { opacity: .4; }

.ftr { padding-top: clamp(4rem, 9vw, 8rem); overflow: hidden; }
.ftr-cta { padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--night-line); }
.ftr-cta .display-2 { max-width: 15ch; margin: 0; }
[lang="ar"] .ftr-cta .display-2 { max-width: 20ch; }
.ftr-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: 3rem; }
.ftr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr-list a { text-decoration: none; }
.ftr-list a:hover { color: #e2856d; }
.ftr-list address { font-style: normal; color: var(--night-muted); }
.ftr-mark { font-family: var(--f-display); font-size: clamp(5rem, 19.5vw, 19rem); line-height: .78; letter-spacing: -.04em; color: var(--night-3); white-space: nowrap; user-select: none; padding-top: 1rem; }
[lang="ar"] .ftr-mark { letter-spacing: 0; line-height: 1.1; font-size: clamp(5rem, 22vw, 20rem); }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--night-line); }
.ftr-bottom p { margin: 0; color: var(--night-muted); font-size: .82rem; }

.compare-tray { position: fixed; inset-inline: 0; bottom: 68px; z-index: 50; background: var(--night); color: var(--night-text); border-top: 1px solid var(--night-line); }
@media (min-width: 960px) { .compare-tray { bottom: 0; } }
.compare-tray-inner { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; }
.compare-tray-label { margin-inline-end: auto; display: flex; align-items: baseline; gap: .75rem; }
.compare-tray-label .mono { text-transform: uppercase; letter-spacing: .14em; color: var(--night-muted); font-size: .7rem; }
.compare-tray-label strong { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; }
.page-compare .compare-tray { display: none; }
.mobile-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 55; height: 68px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-decoration: none; font-size: .74rem; font-weight: 500; }
.mobile-bar .icon { width: 22px; height: 22px; }
.mobile-bar .is-wa { background: var(--accent); color: #fff; }
@media (min-width: 960px) { .mobile-bar { display: none; } }

.toast { position: fixed; left: 50%; bottom: 150px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 120; background: var(--ink); color: var(--paper); padding: .8rem 1.2rem; font-size: .92rem; transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.nf-mark { font-family: var(--f-display); font-size: clamp(8rem, 30vw, 22rem); line-height: .75; color: var(--accent); margin: 0 0 2rem; }

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 1023px) { .lot-price { display: none; } }

.img-fade .card-media img:not(.is-loaded), .img-fade .mosaic-item img:not(.is-loaded) { opacity: 0; }
.card-media img, .mosaic-item img { transition: transform .9s var(--ease), opacity .6s var(--ease); }