/* ============================================================
   JOIN DUBAI — Layout & components
   Written with CSS logical properties so the whole layout
   mirrors automatically under dir="rtl" (Arabic).
   No colour literals here — all via tokens in theme-*.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--dark { background: var(--midnight-800); color: var(--on-dark); }
.section--darkest { background: var(--midnight-900); color: var(--on-dark); }
.section--alt { background: var(--bg-alt); }
.section--dark .fg-muted, .section--darkest .fg-muted { color: var(--on-dark-muted); }
.fg-muted { color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
:root[dir="rtl"] .eyebrow { letter-spacing: 0; font-family: var(--font-body); font-weight: 700; }
.eyebrow::before { content: ""; inline-size: 1.8rem; block-size: 1px; background: var(--accent); display: inline-block; }

.section-head { max-width: 60ch; margin-block-end: clamp(2rem, 4vw, 3.2rem); }
.section-head h2 { font-size: var(--fs-h2); margin-block-end: .8rem; }
.section-head .lead { font-size: var(--fs-lead); color: var(--fg-muted); }
.section--dark .section-head .lead, .section--darkest .section-head .lead { color: var(--on-dark-muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--gold { background: var(--accent); color: var(--midnight-900); }
.btn--gold:hover { background: var(--accent-strong); transform: translateY(-2px); }
.btn--ghost { border-color: currentColor; color: inherit; opacity: .92; }
.btn--ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); opacity: 1; }
.section:not(.section--dark):not(.section--darkest) .btn--ghost { border-color: var(--line); }
.section:not(.section--dark):not(.section--darkest) .btn--ghost:hover { background: var(--sand-100); }
.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
:root[dir="rtl"] .btn:hover .arw { transform: translateX(-3px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  background: color-mix(in srgb, var(--midnight-900) 72%, transparent);
  backdrop-filter: var(--blur-nav); -webkit-backdrop-filter: var(--blur-nav);
  border-block-end: 1px solid rgba(255,255,255,.08);
  transition: background .3s var(--ease);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.brand { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--on-dark); white-space: nowrap; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; }
.brand__tag { font-family: var(--font-mono); font-size: .7rem; color: var(--gold-300); letter-spacing: .05em; }
.nav { display: none; margin-inline-start: auto; gap: 1.4rem; align-items: center; }
.nav a { text-decoration: none; color: var(--on-dark-muted); font-size: .9rem; transition: color .2s var(--ease); }
.nav a:hover { color: var(--on-dark); }
.header-tools { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
.nav + .header-tools { margin-inline-start: 0; }

.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  font-family: var(--font-body); background: transparent; color: var(--on-dark-muted);
  border: 0; padding: .4rem .8rem; font-size: .82rem; cursor: pointer; transition: background .2s, color .2s;
}
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--midnight-900); font-weight: 600; }

.nav-toggle { display: inline-flex; background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-sm); color: var(--on-dark); inline-size: 40px; block-size: 40px; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle svg { inline-size: 20px; block-size: 20px; }

@media (min-width: 1120px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .header-tools { margin-inline-start: 0; }
}

/* mobile nav drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99; background: var(--midnight-900);
  display: flex; flex-direction: column; justify-content: center; gap: 1.2rem;
  padding: var(--gutter); transform: translateY(-100%); transition: transform .4s var(--ease);
  visibility: hidden;
}
.mobile-nav.open { transform: translateY(0); visibility: visible; }
.mobile-nav a { color: var(--on-dark); text-decoration: none; font-family: var(--font-head); font-size: 1.6rem; }
.mobile-nav a:hover { color: var(--accent); }

/* ---------- hero ---------- */
.hero { position: relative; background: radial-gradient(120% 90% at 70% 0%, var(--midnight-700) 0%, var(--midnight-900) 55%); color: var(--on-dark); overflow: hidden; padding-block: clamp(7rem, 16vw, 11rem) var(--section-y); }
.hero__skyline { position: absolute; inset-inline: 0; inset-block-end: 0; inline-size: 100%; block-size: auto; opacity: .5; pointer-events: none; }
.hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(2rem,5vw,4rem); grid-template-columns: 1fr; align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border: 1px solid var(--gold-500); border-radius: 999px; color: var(--gold-300); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; margin-block-end: 1.5rem; }
:root[dir="rtl"] .hero__badge { font-family: var(--font-body); letter-spacing: 0; }
.hero h1 { font-size: var(--fs-hero); margin-block-end: 1.2rem; max-width: 16ch; }
.hero h1 .accent { color: var(--gold-400); }
.hero__lead { font-size: var(--fs-lead); color: var(--on-dark-muted); max-width: 46ch; margin-block-end: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-block-end: 2.6rem; }
.hero__portrait { position: relative; z-index: 2; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-raise); border: 1px solid rgba(255,255,255,.1); aspect-ratio: 4/5; }
.hero__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.25fr .85fr; } .hero__portrait { max-inline-size: 420px; margin-inline-start: auto; } }

/* facts strip */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden; }
.facts .fact { background: var(--midnight-800); padding: 1.1rem 1.2rem; }
.facts .fact b { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--gold-300); }
.facts .fact span { font-size: var(--fs-small); color: var(--on-dark-muted); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* ---------- generic cards & grids ---------- */
.grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid.cols-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 720px) { .grid.cols-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px) { .grid.cols-4 { grid-template-columns: repeat(4,1fr); } }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raise); }
.section--dark .card, .section--darkest .card { background: var(--midnight-700); border-color: var(--midnight-600); color: var(--on-dark); }
.card h3 { font-size: var(--fs-h3); margin-block-end: .5rem; }
.card__num { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--accent); letter-spacing: .12em; }
.card__where { display: inline-block; margin-block-start: .9rem; font-size: var(--fs-small); color: var(--accent); font-weight: 600; }

/* manifesto two-column compare */
.compare { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-block-start: 2.5rem; }
@media (min-width: 780px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.compare__col--muted { background: var(--sand-100); }
.compare__col--accent { background: var(--midnight-800); color: var(--on-dark); border-color: var(--midnight-700); }
.compare__col h3 { font-size: var(--fs-h3); margin-block-end: 1rem; }
.compare__col li { display: flex; gap: .6rem; padding-block: .45rem; border-block-start: 1px solid; }
.compare__col--muted li { border-color: var(--sand-200); }
.compare__col--accent li { border-color: var(--midnight-600); }
.compare__col li:first-child { border-block-start: 0; }
.compare__col li::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; margin-block-start: .6em; }
.compare__col--muted li::before { background: var(--ink-500); }
.compare__col--accent li::before { background: var(--gold-400); }

.pullquote { font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.3; max-width: 24ch; }
.pullquote--center { margin-inline: auto; text-align: center; max-width: 30ch; }

/* ---------- carousel (scroll-snap) ---------- */
.carousel { position: relative; }
.carousel__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 1.4rem; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block-end: .6rem; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.carousel__track > * { scroll-snap-align: start; }
@media (min-width: 620px) { .carousel__track { grid-auto-columns: 46%; } }
@media (min-width: 980px) { .carousel__track { grid-auto-columns: 30.5%; } }
.carousel__nav { display: inline-flex; gap: .5rem; }
.carousel__btn { inline-size: 42px; block-size: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .2s, opacity .2s; }
.section--dark .carousel__btn, .section--darkest .carousel__btn { background: var(--midnight-700); border-color: var(--midnight-600); color: var(--on-dark); }
.carousel__btn:hover { transform: translateY(-2px); }
.carousel__btn:disabled { opacity: .35; cursor: default; transform: none; }
.carousel__btn svg { inline-size: 18px; block-size: 18px; }
:root[dir="rtl"] .carousel__btn svg { transform: scaleX(-1); }

/* article card */
.article-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; block-size: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raise); border-color: var(--accent); }
.section--dark .article-card { background: var(--midnight-700); border-color: var(--midnight-600); }
.article-card__kicker { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-block-end: .9rem; }
.article-card h3 { font-size: 1.2rem; margin-block-end: .7rem; }
.article-card p { color: var(--fg-muted); font-size: .95rem; flex: 1; }
.section--dark .article-card p { color: var(--on-dark-muted); }
.article-card__link { margin-block-start: 1.2rem; font-weight: 600; font-size: .88rem; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }

/* economy carousel cards (image based) */
.eco-card { border-radius: var(--radius); overflow: hidden; background: var(--midnight-700); border: 1px solid var(--midnight-600); block-size: 100%; }
.eco-card img { inline-size: 100%; aspect-ratio: 3/4; object-fit: cover; }
.eco-card__cap { padding: 1rem 1.1rem; }
.eco-card__cap b { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--on-dark); margin-block-end: .3rem; }
.eco-card__cap span { font-size: var(--fs-small); color: var(--on-dark-muted); }

/* arena feature layout */
.arena-format { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-block-start: 2.5rem; }
@media (min-width: 780px) { .arena-format { grid-template-columns: 1fr 1fr; } }
.arena-days { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .arena-days { grid-template-columns: repeat(3,1fr); } }
.day-card { border: 1px solid var(--midnight-600); border-radius: var(--radius); padding: 1.3rem; background: var(--midnight-700); }
.day-card__date { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; color: var(--gold-300); }
.day-card h4 { font-family: var(--font-head); font-size: 1.15rem; margin-block: .4rem .8rem; }
.day-card li { font-size: var(--fs-small); color: var(--on-dark-muted); padding-block: .25rem; }
.arena-figure { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--midnight-600); }
.arena-figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.arena-figure figcaption { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; padding: .8rem 1rem; color: var(--on-dark-muted); background: var(--midnight-800); }
.stat-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--midnight-600); border: 1px solid var(--midnight-600); border-radius: var(--radius); overflow: hidden; margin-block-start: 1.2rem; }
@media (min-width: 620px) { .stat-row { grid-template-columns: repeat(4,1fr); } }
.stat-row .stat { background: var(--midnight-800); padding: 1.1rem; text-align: center; }
.stat-row .stat b { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--gold-300); }
.stat-row .stat span { font-size: var(--fs-small); color: var(--on-dark-muted); }

/* alignment cards */
.align-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .align-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px) { .align-grid { grid-template-columns: repeat(3,1fr); } }
.align-card { border: 1px solid var(--midnight-600); border-radius: var(--radius); padding: 1.4rem; background: var(--midnight-700); }
.align-card__tag { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--gold-300); text-transform: uppercase; }
.align-card h3 { font-size: 1.1rem; margin-block: .5rem .6rem; color: var(--on-dark); }
.align-card p { font-size: .92rem; color: var(--on-dark-muted); }

/* timeline (track record) */
.timeline { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-block-start: 2.5rem; }
@media (min-width: 720px) { .timeline { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .timeline { grid-template-columns: repeat(3,1fr); } }
.tl-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); box-shadow: var(--shadow-card); }
.tl-card b.num { font-family: var(--font-head); font-size: 2rem; color: var(--accent); display: block; line-height: 1; margin-block-end: .5rem; }
.tl-card h3 { font-size: 1.1rem; margin-block-end: .4rem; }
.tl-card p { font-size: .92rem; color: var(--fg-muted); }

/* projects */
.projects { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .projects { grid-template-columns: repeat(3,1fr); } }
.project { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; background: var(--paper); display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-raise); }
.project__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.project h3 { font-size: 1.4rem; margin-block: .5rem .7rem; }
.project p { color: var(--fg-muted); font-size: .95rem; flex: 1; }
.project a.project__cta { margin-block-start: 1.2rem; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }

/* ambassador teaser */
.teaser { display: grid; gap: clamp(1.5rem,4vw,3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .teaser { grid-template-columns: .8fr 1.2fr; } }
.teaser__portrait { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--midnight-600); box-shadow: var(--shadow-raise); aspect-ratio: 4/5; max-inline-size: 360px; }
.teaser__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.teaser h2 { font-size: var(--fs-h2); margin-block-end: 1rem; }
.teaser ul li { padding-block: .4rem; padding-inline-start: 1.4rem; position: relative; color: var(--on-dark-muted); }
.teaser ul li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .95em; inline-size: .6rem; block-size: 1px; background: var(--accent); }

/* ---------- footer ---------- */
.site-footer { background: var(--midnight-900); color: var(--on-dark); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); margin-block-end: 1rem; }
:root[dir="rtl"] .site-footer h4 { font-family: var(--font-body); letter-spacing: 0; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); }
.site-footer li { padding-block: .3rem; }
.footer-brand__name { font-family: var(--font-head); font-size: 1.6rem; }
.footer-brand__hash { color: var(--gold-300); font-family: var(--font-mono); }
.footer-bottom { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--midnight-600); font-size: var(--fs-small); color: var(--on-dark-muted); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- ambassador page specific ---------- */
.amb-hero { background: radial-gradient(120% 90% at 30% 0%, var(--midnight-700), var(--midnight-900) 60%); color: var(--on-dark); padding-block: clamp(7rem,15vw,10rem) var(--section-y); }
.amb-hero__grid { display: grid; gap: clamp(2rem,5vw,3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .amb-hero__grid { grid-template-columns: 1fr 1fr; } }
.amb-roles { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.4rem; }
.amb-roles span { font-family: var(--font-mono); font-size: var(--fs-small); border: 1px solid var(--midnight-600); border-radius: 999px; padding: .35rem .8rem; color: var(--gold-300); }
:root[dir="rtl"] .amb-roles span { font-family: var(--font-body); }

.career { display: grid; gap: 0; grid-template-columns: 1fr; margin-block-start: 2.5rem; position: relative; }
.career__item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding-block: 1.3rem; border-block-end: 1px solid var(--line); }
.career__year { font-family: var(--font-head); font-size: 1.15rem; color: var(--accent); min-inline-size: 5.5rem; }
.career__body h3 { font-size: 1.15rem; margin-block-end: .35rem; }
.career__body p { color: var(--fg-muted); font-size: .95rem; }

.awards-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-block-start: 2rem; }
@media (min-width: 620px) { .awards-grid { grid-template-columns: repeat(2,1fr); } }
.award { border: 1px solid var(--midnight-600); border-radius: var(--radius); padding: 1.3rem; background: var(--midnight-700); }
.award b { color: var(--gold-300); font-family: var(--font-head); font-size: 1.1rem; }
.award p { color: var(--on-dark-muted); font-size: .9rem; margin-block-start: .3rem; }

.plan-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-block-start: 2.5rem; }
@media (min-width: 720px) { .plan-grid { grid-template-columns: repeat(2,1fr); } }
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); box-shadow: var(--shadow-card); }
.plan-card .started { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.plan-card .started b { color: var(--fg); }
.plan-card .arrow { color: var(--accent); margin-block: .8rem; font-size: 1.2rem; }
.plan-card .plan { font-weight: 600; }

/* gallery */
.gallery { columns: 2; column-gap: 1rem; margin-block-start: 2rem; }
@media (min-width: 720px) { .gallery { columns: 3; } }
@media (min-width: 1000px) { .gallery { columns: 4; } }
.gallery figure { break-inside: avoid; margin: 0 0 1rem; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--sand-100); }
.gallery img { inline-size: 100%; display: block; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }

.amb-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem,5vw,3.5rem); margin-block-start: 2.5rem; }
.amb-logos img { block-size: clamp(28px,5vw,44px); inline-size: auto; opacity: .9; }

.final-quote { text-align: center; max-width: 30ch; margin-inline: auto; font-family: var(--font-head); font-size: clamp(1.5rem,3.4vw,2.3rem); line-height: 1.32; }

/* skip link */
.skip-link { position: absolute; inset-inline-start: -999px; inset-block-start: 0; background: var(--accent); color: var(--midnight-900); padding: .6rem 1rem; z-index: 200; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { inset-inline-start: 0; }

/* 404 */
.err-page { min-height: 100vh; display: grid; place-items: center; text-align: center; background: radial-gradient(120% 90% at 50% 0%, var(--midnight-700), var(--midnight-900) 60%); color: var(--on-dark); padding: var(--gutter); }
.err-page .code { font-family: var(--font-head); font-size: clamp(4rem,16vw,9rem); color: var(--gold-400); line-height: 1; }

/* ============================================================
   V2 — LIGHT REDESIGN (u.ae feel). Overrides above where the
   homepage previously used dark sections. ambassador.html and
   arena-embed keep their dark styling (amb-* / section--dark*).
   ============================================================ */

/* gold, readable headings on white */
.section-head h2 { color: var(--gold-700); }
.eyebrow { color: var(--gold-800); }
.card__where, .article-card__link, .project__label, .project a.project__cta { color: var(--gold-800); }

/* thin gold divider between light sections */
.section + .section:not(.section--alt),
.section--alt + .section { border-block-start: 1px solid var(--line); }
.gold-rule { block-size: 1px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); border: 0; margin: 0; opacity: .55; }

/* ---- header: light translucent ---- */
.site-header--light { background: color-mix(in srgb, var(--paper) 82%, transparent); border-block-end: 1px solid var(--line); }
.site-header--light .brand { color: var(--ink-900); }
.site-header--light .brand__tag { color: var(--gold-800); }
.site-header--light .nav a { color: var(--ink-700); }
.site-header--light .nav a:hover { color: var(--gold-800); }
.site-header--light .lang-switch { border-color: var(--sand-200); }
.site-header--light .lang-switch button { color: var(--ink-500); }
.site-header--light .lang-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.site-header--light .nav-toggle { border-color: var(--sand-200); color: var(--ink-900); }

/* ---- hero: light ---- */
.hero--light { background: radial-gradient(120% 90% at 78% -10%, var(--sand-100) 0%, var(--sand-050) 42%, var(--paper) 100%); color: var(--ink-900); }
.hero--light .hero__skyline g { stroke: var(--gold-500); }
.hero--light .hero__skyline { opacity: .35; }
.hero--light .hero__badge { border-color: var(--gold-500); color: var(--gold-800); }
.hero--light h1 { color: var(--gold-700); }
.hero--light h1 .accent { color: var(--gold-800); }
.hero--light .hero__lead { color: var(--ink-700); }
.hero--light .hero__portrait { border-color: var(--line); }

/* facts strip: light */
.facts { background: var(--line); border-color: var(--line); }
.facts .fact { background: var(--sand-050); }
.facts .fact b { color: var(--gold-700); }
.facts .fact span { color: var(--ink-500); }

/* counter start state (animated by app.js) */
.count { font-variant-numeric: tabular-nums; }

/* ---- live reportage iframe ---- */
.live-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--sand-050); }
.live-frame__box { position: relative; width: 100%; aspect-ratio: 16/9; min-height: 420px; background: repeating-linear-gradient(135deg, var(--sand-050), var(--sand-050) 12px, var(--sand-100) 12px, var(--sand-100) 24px); }
.live-frame__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-frame__cap { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-500); border-block-start: 1px solid var(--line); }
:root[dir="rtl"] .live-frame__cap { font-family: var(--font-body); }
.live-frame__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #d64545; box-shadow: 0 0 0 0 rgba(214,69,69,.5); animation: livepulse 2s infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 8px rgba(214,69,69,0); } 100% { box-shadow: 0 0 0 0 rgba(214,69,69,0); } }
@media (prefers-reduced-motion: reduce) { .live-frame__dot { animation: none; } }

/* ---- photo marquee strips ---- */
.strip { --strip-h: clamp(150px, 22vw, 240px); overflow: hidden; position: relative; margin-block: 0; }
.strip::before, .strip::after { content: ""; position: absolute; inset-block: 0; inline-size: 12%; z-index: 2; pointer-events: none; }
.strip::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.strip::after { inset-inline-end: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.strip--alt::before { background: linear-gradient(90deg, var(--bg-alt), transparent); }
.strip--alt::after { background: linear-gradient(270deg, var(--bg-alt), transparent); }
.strip__track { display: flex; gap: .9rem; inline-size: max-content; animation: marquee 60s linear infinite; will-change: transform; }
.strip--rev .strip__track { animation-direction: reverse; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track img { block-size: var(--strip-h); inline-size: auto; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
:root[dir="rtl"] .strip__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } .strip { overflow-x: auto; } }

/* ---- manifesto compare: light accent col ---- */
.compare__col--accent { background: linear-gradient(180deg, var(--sand-100), var(--sand-050)); color: var(--ink-900); border-color: var(--gold-300); }
.compare__col--accent li { border-color: var(--sand-200); }
.compare__col--accent li::before { background: var(--gold-500); }
.compare__col--accent h3 { color: var(--gold-700); }

/* small photo row (manifesto / record) */
.photo-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-block-start: 2.2rem; }
@media (min-width: 720px) { .photo-row { grid-template-columns: repeat(4,1fr); } }
.photo-row figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; }
.photo-row img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.photo-row figure:hover img { transform: scale(1.05); }

/* ---- The Arena renders (light) ---- */
.arena-figure { border-color: var(--line); box-shadow: var(--shadow-card); }
.arena-figure figcaption { color: var(--ink-500); background: var(--sand-050); border-block-start: 1px solid var(--line); }
.arena-renders { display: grid; gap: 1rem; grid-template-columns: repeat(2,1fr); margin-block-start: 1.4rem; }
@media (min-width: 720px) { .arena-renders { grid-template-columns: repeat(4,1fr); } }
.arena-renders figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--sand-100); }
.arena-renders img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.arena-renders figure:hover img { transform: scale(1.05); }
.day-card { background: var(--sand-050); border-color: var(--line); }
.day-card__date { color: var(--gold-800); }
.day-card h4 { color: var(--gold-700); }
.day-card p, .day-card li { color: var(--ink-500); }
.stat-row { background: var(--line); border-color: var(--line); }
.stat-row .stat { background: var(--sand-050); }
.stat-row .stat b { color: var(--gold-700); }
.stat-row .stat span { color: var(--ink-500); }

/* ---- technology cards with image ---- */
.tech-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .tech-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px) { .tech-grid { grid-template-columns: repeat(3,1fr); } }
.tech-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tech-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raise); }
.tech-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--sand-100); }
.tech-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tech-card:hover .tech-card__img img { transform: scale(1.05); }
.tech-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tech-card__body h3 { font-size: 1.15rem; margin-block-end: .5rem; color: var(--gold-700); }
.tech-card__body p { font-size: .93rem; color: var(--fg-muted); flex: 1; }
.tech-card__where { margin-block-start: .9rem; font-size: var(--fs-small); font-weight: 600; color: var(--gold-800); }

/* ---- economy cards (light) ---- */
.eco-card { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-card); }
.eco-card__cap b { color: var(--gold-700); }
.eco-card__cap span { color: var(--fg-muted); }

/* ---- alignment cards (light, compact) ---- */
.align-card { background: var(--sand-050); border-color: var(--line); }
.align-card__tag { color: var(--gold-800); }
.align-card h3 { color: var(--gold-700); }
.align-card p { color: var(--fg-muted); }

/* ---- LinkedIn essay cards ---- */
.li-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; block-size: 100%; box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.li-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raise); border-color: var(--gold-500); }
.li-card__cover { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--sand-100); border-block-end: 1px solid var(--line); }
.li-card__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.li-card:hover .li-card__cover img { transform: scale(1.04); }
.li-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.li-card__author { display: flex; align-items: center; gap: .6rem; margin-block-end: .9rem; }
.avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--gold-700); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .9rem; flex: none; }
.avatar--sm { inline-size: 34px; block-size: 34px; font-size: .78rem; }
.li-card__who { display: flex; flex-direction: column; line-height: 1.25; }
.li-card__who b { font-size: .9rem; }
.li-card__who i { font-style: normal; font-size: .72rem; color: var(--ink-500); }
.li-card__kicker { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-800); margin-block-end: .5rem; }
:root[dir="rtl"] .li-card__kicker { font-family: var(--font-body); letter-spacing: 0; }
.li-card__title { font-family: var(--font-head); font-size: 1.16rem; line-height: 1.24; color: var(--ink-900); margin-block-end: .55rem; }
.li-card__hook { font-size: .92rem; color: var(--fg-muted); flex: 1; }
.li-card__cta { margin-block-start: 1rem; font-weight: 600; font-size: .85rem; color: var(--gold-800); }

/* ---- track record photo gallery ---- */
.record-photos { display: grid; gap: .9rem; grid-template-columns: repeat(2,1fr); margin-block-start: 2.2rem; }
@media (min-width: 720px) { .record-photos { grid-template-columns: repeat(4,1fr); } }
.record-photos figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1/1; }
.record-photos img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.record-photos figure:hover img { transform: scale(1.06); }

/* ---- ambassador bottom block (light) ---- */
.teaser__portrait { border-color: var(--line); }
#ambassador.section { background: linear-gradient(180deg, var(--sand-050), var(--paper)); }
#ambassador .teaser h2 { color: var(--gold-700); }
#ambassador .teaser ul li { color: var(--ink-700); }
#ambassador .teaser ul li::before { background: var(--gold-500); }

/* pullquote gold on light */
.pullquote { color: var(--gold-700); }

/* ---- video reels (muted loop, IntersectionObserver play) ---- */
.reel { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); background: #000; }
.reel video { inline-size: 100%; block-size: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.reel__cap { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-500); background: var(--sand-050); padding: .7rem 1rem; border-block-start: 1px solid var(--line); }
:root[dir="rtl"] .reel__cap { font-family: var(--font-body); }
.reel-duo { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .reel-duo { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
.article-topbar { position: sticky; inset-block-start: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: var(--blur-nav); -webkit-backdrop-filter: var(--blur-nav); border-block-end: 1px solid var(--line); }
.article-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.article-topbar .brand { color: var(--ink-900); }
.article-topbar .brand__tag { color: var(--gold-800); }
.article-back { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--gold-800); font-weight: 600; font-size: .88rem; }
.article-back__arw { transition: transform .25s var(--ease); }
.article-back:hover .article-back__arw { transform: translateX(-3px); }
:root[dir="rtl"] .article-back__arw { display: inline-block; transform: scaleX(-1); }
.article-page { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.article { max-width: 720px; }
.article__kicker { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-800); margin-block-end: 1rem; }
:root[dir="rtl"] .article__kicker { font-family: var(--font-body); letter-spacing: 0; }
.article__title { font-size: clamp(1.9rem, 4.4vw, 2.9rem); color: var(--gold-700); line-height: 1.14; margin-block-end: 1.5rem; }
.article__byline { display: flex; align-items: center; gap: .8rem; margin-block-end: 2rem; }
.article__meta { display: flex; flex-direction: column; line-height: 1.35; font-size: .9rem; }
.article__meta b { font-size: .98rem; }
.article__meta > span { color: var(--ink-500); font-size: .82rem; }
.article__cover { margin: 0 0 2.2rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.article__cover img { inline-size: 100%; block-size: auto; }
.article__body { font-size: 1.08rem; line-height: 1.75; color: var(--ink-900); }
.article__body p { margin-block-end: 1.3rem; }
.article__body h2 { font-size: 1.5rem; color: var(--gold-700); margin-block: 2.2rem 1rem; line-height: 1.2; }
.article__body .art-li { padding-inline-start: 2.4rem; position: relative; }
.article__body .art-li__n { position: absolute; inset-inline-start: 0; inset-block-start: .05em; font-family: var(--font-head); font-weight: 600; color: var(--gold-600, var(--gold-700)); inline-size: 1.7rem; }
.article__body .art-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 2rem; }
.article__body .art-tags span { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-500); background: var(--sand-100); border-radius: 999px; padding: .25rem .7rem; }
.article__foot { margin-block-start: 2.6rem; padding-block-start: 1.8rem; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.article__published { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-500); inline-size: 100%; }
:root[dir="rtl"] .article__published { font-family: var(--font-body); }
.article-back--foot { margin-inline-start: auto; }

/* strip parallax (JS-driven --px) */
.strip { transform: translateY(var(--px,0)); transition: transform .1s linear; }
@media (prefers-reduced-motion: reduce) { .strip { transform: none; } }

/* ============================================================
   V3 — owner edits
   ============================================================ */

/* ---- section numbering (01…NN, thin gold) ---- */
main { counter-reset: secnum; }
.section--count { counter-increment: secnum; }
.section--count .section-head h2::before,
.section--count .carousel__head .section-head h2::before {
  content: counter(secnum, decimal-leading-zero);
  display: block;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1;
  color: var(--gold-500);
  opacity: .5;
  letter-spacing: .02em;
  margin-block-end: .35rem;
}
:root[dir="rtl"] .section--count .section-head h2::before { font-family: var(--font-body); }

/* ---- essay interstitials (narrow bands) ---- */
.interstitial { padding-block: clamp(2.4rem, 5vw, 3.6rem); background: var(--sand-050); border-block: 1px solid var(--line); }
.interstitial + .interstitial { border-block-start: 0; }
.interstitial .section-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.interstitial .eyebrow { margin-block-end: .6rem; }

/* ---- auto-rotating carousels: hide the scrollbar ---- */
.carousel--auto .carousel__track { scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.carousel--auto .carousel__track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.carousel--auto.is-paused .carousel__track { scroll-behavior: auto; }

/* ---- technology cards: video face (blocks 1–3) ---- */
.tech-card__img .tech-vid { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; background: #000; }

/* ============================================================
   ECONOMY — hand-built dossier cards (replace image cards)
   Reproduces the EFW deck: uppercase title, gold strategy line,
   dense text, a framed real-guest portrait, #JoinDubai badge and
   an agency plaque — instead of the item-13..22 images.
   ============================================================ */
.eco-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card);
  /* Stories format — identical proportions to the original deck cards (2160x3840) */
  aspect-ratio: 9 / 16; block-size: auto;
}
.eco-card__doc { padding: 1.15rem 1.15rem .85rem; }
.eco-card__kicker {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-800);
  margin-block-end: .55rem;
}
:root[dir="rtl"] .eco-card__kicker { font-family: var(--font-body); letter-spacing: 0; }
.eco-card__strategy {
  display: block; font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.25;
  font-size: 1.02rem; color: var(--gold-700); margin-block-end: .7rem;
}
:root[dir="rtl"] .eco-card__strategy { text-transform: none; }
.eco-card__text { font-size: .78rem; line-height: 1.5; color: var(--ink-700); }
.eco-card__frame {
  position: relative; margin: .2rem 1.15rem .9rem; padding: 6px;
  border: 1px solid var(--sand-200); background: var(--sand-100);
  border-radius: var(--radius-sm);
  /* photo fills whatever height the text leaves inside the 9:16 card */
  flex: 1 1 auto; min-block-size: 30%; display: flex;
}
.eco-card__frame img {
  inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top;
  border-radius: 4px; display: block; filter: saturate(.92) contrast(1.02);
}
.eco-card__badge {
  position: absolute; inset-block-end: 14px; inset-inline-start: 14px;
  background: var(--midnight-900); color: var(--gold-300);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  padding: .28rem .6rem; border-radius: 999px;
}
:root[dir="rtl"] .eco-card__badge { font-family: var(--font-body); }
.eco-card__badge { direction: ltr; unicode-bidi: isolate; }
.eco-card__agency {
  margin-block-start: auto; padding: .75rem 1.3rem;
  background: var(--sand-100); border-block-start: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .68rem; line-height: 1.4;
  letter-spacing: .04em; color: var(--ink-500); text-transform: uppercase;
}
:root[dir="rtl"] .eco-card__agency { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }

/* stories-width columns: card height stays ~16/9 of these widths */
@media (min-width: 620px) { #economy .carousel__track { grid-auto-columns: 46%; } }
@media (min-width: 980px) { #economy .carousel__track { grid-auto-columns: 30%; } }
/* long-copy cards: let text stay readable, photo absorbs the difference */
.eco-card__strategy { font-size: .92rem; }

/* ============================================================
   ALIGNMENT — bespoke inline icons per strategy
   ============================================================ */
.align-card { display: flex; flex-direction: column; }
.align-card__icon {
  inline-size: 56px; block-size: 56px; color: var(--gold-600, var(--gold-700));
  margin-block-end: 1rem;
}
.align-card__icon { color: var(--gold-700); }

/* ---- footer: Ecosystem column ---- */
.footer-grid--eco { grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid--eco { grid-template-columns: 1.4fr 1fr 1.2fr; } }