/* Skyline imagery: homepage, About, Transactions headers and the Team board backdrop (EN + AR) */
html:not(.sky-off) .hero,
html:not(.sky-off) .p-hero { isolation: isolate; }

/* ---------- Homepage: the whole panorama, brand purple grade, text kept above the towers ---------- */
html:not(.sky-off) .hero {
  --img-h: calc(100vw * 714 / 1920);
  --drop: calc(var(--img-h) * 0.16);   /* lowers the photo by trimming some of the reflection */
  height: 100svh; min-height: 600px;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + clamp(12px, 2.5vh, 48px));
  padding-bottom: calc(var(--img-h) * 0.42 - var(--drop) + clamp(16px, 3vh, 40px));
  align-items: center;
}
html:not(.sky-off) .hero h1 { font-size: clamp(30px, min(6.4vw, 10.2vh), 82px); max-width: 14ch; }  /* homepage keeps its big three line title */
html:not(.sky-off) .hero .sub { max-width: 40ch; }
html:not(.sky-off) .hero .eyebrow-row { margin-bottom: min(36px, 2.6vh); }
html:not(.sky-off) .hero .sub { margin-top: min(36px, 2.6vh); }
html:not(.sky-off) .hero .hero-ctas { margin-top: min(40px, 3.2vh); }
html:not(.sky-off) .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    image-set(url(/assets/skyline/skyline-doha-p-1920.jpg) 1x, url(/assets/skyline/skyline-doha-p-3840.jpg) 2x) center bottom calc(var(--drop) * -1) / 100% auto no-repeat,
    linear-gradient(90deg, rgb(123, 103, 138) 0%, rgb(103, 86, 123) 25%, rgb(90, 73, 115) 50%, rgb(76, 62, 99) 75%, rgb(72, 55, 91) 100%);
  animation: skyIn 1.6s ease-out both;
}
html:not(.sky-off) .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(38,9,43,.6) 0%, rgba(38,9,43,.2) calc(100% - var(--img-h) + var(--drop)), rgba(38,9,43,0) calc(100% - var(--img-h) + var(--drop) + 80px)),
    linear-gradient(90deg, rgba(38,9,43,.85) 0%, rgba(38,9,43,.55) 30%, rgba(38,9,43,.1) 60%, rgba(38,9,43,0) 100%),
    linear-gradient(0deg, rgba(38,9,43,.55) 0%, rgba(38,9,43,0) 18%);
}
html:not(.sky-off) .hero .hero-arcs,
html:not(.sky-off) .hero .hero-arcs-b { opacity: .45; }
@keyframes skyIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- About: one screen, skyline in full along the bottom ---------- */
html:not(.sky-off) .p-hero {
  --band: min(calc(100vw * 1178 / 6332 * 0.88), 34svh);
  height: 100svh; min-height: 640px;
  padding-top: calc(var(--nav-h) + clamp(4px, 1.5svh, 32px));
  padding-bottom: calc(var(--band) + clamp(20px, 3.5svh, 48px));
  align-items: center;
}
html:not(.sky-off) .p-hero .eyebrow-row { margin-bottom: min(28px, 2.4svh); }
html:not(.sky-off) .p-hero .sub { margin-top: min(28px, 2.4svh); }
html:not(.sky-off) .p-hero .hero-ctas { margin-top: min(38px, 3svh); }
html:not(.sky-off) .p-hero .ab-meta { margin-top: min(36px, 3svh); padding-top: min(24px, 2svh); }
html:not(.sky-off) .p-hero .p-art { max-width: min(620px, calc(100svh - var(--nav-h) - var(--band) - 10svh)); align-self: center; }
html:not(.sky-off) .p-hero .sub { font-size: min(clamp(16px,1.5vw,19px), 2.4svh); }
html:not(.sky-off) .p-hero .wrap { align-items: center; }
html:not(.sky-off) .p-hero { --sky: clamp(90px, 20svh, 260px); }
html:not(.sky-off) .p-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--band) + var(--sky)); z-index: -2;
  background:
    image-set(url(/assets/skyline/skyline-band-1600.jpg) 1x, url(/assets/skyline/skyline-band-3200.jpg) 2x) center bottom / 100% auto no-repeat,
    linear-gradient(90deg, rgb(152,152,158) 0%, rgb(98,116,136) 25%, rgb(59,86,113) 50%, rgb(41,75,103) 75%, rgb(31,61,89) 100%);
}
html:not(.sky-off) .p-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--band) + var(--sky)); z-index: -1;
  background: linear-gradient(180deg, var(--aub) 0%, rgba(38,9,43,.82) 18%, rgba(38,9,43,.4) 45%, rgba(38,9,43,0) 70%);
}
html:not(.sky-off) .p-hero .bg-arcs { display: none; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html:not(.sky-off) .hero::before {
    background: image-set(url(/assets/skyline/skyline-doha-p-1920.jpg) 1x, url(/assets/skyline/skyline-doha-p-3840.jpg) 2x) 70% 85% / cover no-repeat;
  }
  html:not(.sky-off) .hero { height: auto; padding-bottom: clamp(70px,12vh,130px); }
  html:not(.sky-off) .hero::after { background: linear-gradient(0deg, rgba(38,9,43,.95) 0%, rgba(38,9,43,.75) 55%, rgba(38,9,43,.4) 100%); }
  html:not(.sky-off) .p-hero { height: auto; max-height: none; --band: calc(100vw * 1178 / 6332); --sky: 70px; padding-bottom: calc(var(--band) + var(--sky) + 8px); }
}
@media (prefers-reduced-motion: reduce) { html:not(.sky-off) .hero::before { animation: none; } }

html:not(.sky-off) .p-hero h1 { max-width: 16ch; }

/* ---------- Team: faint skyscraper backdrop behind the Board, no extra length ---------- */
html:not(.sky-off) .tm-board { isolation: isolate; }
html:not(.sky-off) .tm-board::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  --bh: calc(100vw * 1178 / 6332);
  background:
    linear-gradient(180deg, var(--aub) calc(100vh - var(--bh)), rgba(38,9,43,0) calc(100vh - var(--bh) * 0.45)) fixed,
    image-set(url(/assets/skyline/skyline-band-1600.jpg) 1x, url(/assets/skyline/skyline-band-3200.jpg) 2x) center bottom / 100% auto no-repeat fixed;
  opacity: .38;
}
html:not(.sky-off) .tm-board::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--aub) 0%, rgba(38,9,43,.55) 30%, rgba(38,9,43,.35) 100%);
}
@media (max-width: 900px), (hover: none) {
  html:not(.sky-off) .tm-board::before { background: linear-gradient(180deg, var(--aub) 55%, rgba(38,9,43,0) 80%), image-set(url(/assets/skyline/skyline-band-1600.jpg) 1x, url(/assets/skyline/skyline-band-3200.jpg) 2x) 60% bottom / 220% auto no-repeat; }
}

/* ---------- Transactions: the full skyline with its real sky, text in one column over the low left side ---------- */
html:not(.sky-off) .tx-hero {
  isolation: isolate;
  --img-h: calc(100vw * 714 / 1920);
  height: 100svh; min-height: 640px;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: calc(var(--nav-h) + clamp(36px, 7svh, 96px));
  padding-bottom: clamp(48px, 6svh, 80px);
}
html:not(.sky-off) .tx-hero > .wrap { width: 100%; }
html:not(.sky-off) .tx-hero .hero-split { display: block; }
html:not(.sky-off) .tx-hero h1 { max-width: none; width: min-content; overflow-wrap: normal; }
html:not(.sky-off) .tx-hero .hero-note { max-width: 46ch; margin-top: min(28px, 3svh); color: rgba(255,255,255,.82); }
html:not(.sky-off) .tx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    image-set(url(/assets/skyline/skyline-doha-p-1920.jpg) 1x, url(/assets/skyline/skyline-doha-p-3840.jpg) 2x) center bottom / 100% auto no-repeat,
    linear-gradient(90deg, rgb(122,102,137) 0%, rgb(102,88,123) 25%, rgb(89,72,114) 50%, rgb(77,62,101) 75%, rgb(72,55,91) 100%);
  animation: skyIn 1.6s ease-out both;
}
html:not(.sky-off) .tx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(38,9,43,.88) 0%, rgba(38,9,43,.45) calc(100% - var(--img-h) * .8), rgba(38,9,43,.3) 70%, rgba(38,9,43,.8) 100%),
    linear-gradient(90deg, rgba(38,9,43,.7) 0%, rgba(38,9,43,.35) 35%, rgba(38,9,43,0) 65%);
}
/* divider: a heather hairline where the header meets the ledger */
html:not(.sky-off) .tx-hero .tx-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, rgba(199,155,232,.25) 0%, #C79BE8 22%, #C79BE8 78%, rgba(199,155,232,.25) 100%);
  box-shadow: 0 0 22px 2px rgba(199,155,232,.45);
}
html:not(.sky-off) .tx-hero .tx-hero-arcs-b, html:not(.sky-off) .tx-hero .ph-arcs { opacity: .2; }
@media (max-width: 760px) {
  html:not(.sky-off) .tx-hero { height: auto; min-height: 0; padding-bottom: calc(100vw * 0.62); }
  html:not(.sky-off) .tx-hero::before { background-size: 230% auto; background-position: 58% bottom; }
}
/* divider: a solid heather band closing the header, the filter bar stays light below it */
html:not(.sky-off) .tx-hero .tx-rule {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 1;
  background: linear-gradient(90deg, var(--royal) 0%, var(--heather) 50%, var(--royal) 100%);
  box-shadow: 0 -10px 30px rgba(199,155,232,.25);
}
html:not(.sky-off) .tx-bar { border-top: 0; }
/* lighter ledger: one list, short footnote */
html:not(.sky-off) .tx-notes { padding: clamp(36px,4.5vw,56px) 0; }
html:not(.sky-off) .tx-note { font-size: clamp(15px,1.3vw,17px); color: var(--ink-soft); max-width: 70ch; margin: 0; }
html:not(.sky-off) .tx-notes .f-note { margin-top: 12px; }
/* group headings: just the name, no copy or counts */
html:not(.sky-off) .tx-ghead { display: block; padding-bottom: 16px; }
html:not(.sky-off) .tx-ghead .sec-title { display: flex; align-items: baseline; gap: 14px; }
/* About: same purple grade as the homepage; sky baked into the image, full-bleed layer so there is no box edge */
html:not(.sky-off) .p-hero::before {
  --ih: calc(100vw * 1130 / 3200);
  top: 0; height: auto;
  background: image-set(url(/assets/skyline/skyline-doha-p-1920.jpg) 1x, url(/assets/skyline/skyline-doha-p-3840.jpg) 2x) center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent calc(100% - var(--ih)), rgba(0,0,0,.5) calc(100% - var(--ih) * .75), #000 calc(100% - var(--ih) * .5));
          mask-image: linear-gradient(180deg, transparent calc(100% - var(--ih)), rgba(0,0,0,.5) calc(100% - var(--ih) * .75), #000 calc(100% - var(--ih) * .5));
}
html:not(.sky-off) .p-hero::after { display: none; }
html:not(.sky-off) .p-hero h1 { max-width: none; }

/* ===== Final: About uses the exact Transactions picture and treatment ===== */
html:not(.sky-off) .p-hero {
  --img-h: calc(100vw * 714 / 1920);
  --drop: calc(var(--img-h) * 0.16);
  --towers: calc(var(--img-h) * 0.58);          /* tallest tower above the bottom edge */
  padding-bottom: calc(var(--towers) + clamp(16px, 3svh, 40px));
}
html:not(.sky-off) .p-hero .p-art { max-width: min(560px, calc(100svh - var(--nav-h) - var(--towers) - 7svh)); }
html:not(.sky-off) .p-hero::before {
  inset: 0; top: 0; height: auto;
  -webkit-mask-image: none; mask-image: none;
  background:
    image-set(url(/assets/skyline/skyline-doha-p-1920.jpg) 1x, url(/assets/skyline/skyline-doha-p-3840.jpg) 2x) center bottom calc(var(--drop) * -1) / 100% auto no-repeat,
    linear-gradient(90deg, rgb(122,102,137) 0%, rgb(102,88,123) 25%, rgb(89,72,114) 50%, rgb(77,62,101) 75%, rgb(72,55,91) 100%);
  animation: skyIn 1.6s ease-out both;
}
html:not(.sky-off) .p-hero::after {
  display: block; inset: 0; top: 0; height: auto;
  background:
    linear-gradient(180deg, rgba(38,9,43,.88) 0%, rgba(38,9,43,.45) calc(100% - var(--img-h) * .8), rgba(38,9,43,.3) 70%, rgba(38,9,43,.8) 100%),
    linear-gradient(90deg, rgba(38,9,43,.7) 0%, rgba(38,9,43,.35) 35%, rgba(38,9,43,0) 65%);
}
@media (max-width: 760px) {
  html:not(.sky-off) .p-hero { padding-bottom: calc(100vw * 0.62); }
  html:not(.sky-off) .p-hero::before { background-size: 230% auto; background-position: 58% bottom; }
}
/* Transactions: no divider line */
html:not(.sky-off) .tx-hero .tx-rule { display: none; }
/* About: picture in exactly the same position as Transactions (no drop) */
html:not(.sky-off) .p-hero { --drop: 0px; --towers: calc(var(--img-h) * 0.74); --low: calc(var(--img-h) * 0.4);
  padding-bottom: calc(var(--low) + clamp(12px, 2svh, 28px)); align-items: flex-end; }
html:not(.sky-off) .p-hero .wrap { align-items: start; }
html:not(.sky-off) .p-hero .p-art { align-self: start; max-width: min(520px, calc(100svh - var(--nav-h) - var(--towers) - 6svh)); }
/* About: content sits at the top like Transactions, clear of the towers */
html:not(.sky-off) .p-hero { align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(36px, 7svh, 96px)); padding-bottom: 0; }
html:not(.sky-off) .p-hero .p-art { max-width: min(460px, calc(100svh - var(--nav-h) - var(--towers) - clamp(36px, 7svh, 96px) - 3svh)); margin-left: auto; }
/* About: no MP circle, single column like Transactions */
html:not(.sky-off) .p-hero .p-art { display: none; }
html:not(.sky-off) .p-hero .wrap { grid-template-columns: 1fr; }

/* ===== Arabic (RTL): text sits on the right, so mirror the skyline and the side shade ===== */
html[dir="rtl"]:not(.sky-off) .hero::before,
html[dir="rtl"]:not(.sky-off) .p-hero::before,
html[dir="rtl"]:not(.sky-off) .tx-hero::before { transform: scaleX(-1); }
html[dir="rtl"]:not(.sky-off) .hero::after {
  background:
    linear-gradient(180deg, rgba(38,9,43,.6) 0%, rgba(38,9,43,.2) calc(100% - var(--img-h) + var(--drop)), rgba(38,9,43,0) calc(100% - var(--img-h) + var(--drop) + 80px)),
    linear-gradient(270deg, rgba(38,9,43,.85) 0%, rgba(38,9,43,.55) 30%, rgba(38,9,43,.1) 60%, rgba(38,9,43,0) 100%),
    linear-gradient(0deg, rgba(38,9,43,.55) 0%, rgba(38,9,43,0) 18%);
}
html[dir="rtl"]:not(.sky-off) .p-hero::after,
html[dir="rtl"]:not(.sky-off) .tx-hero::after {
  background:
    linear-gradient(180deg, rgba(38,9,43,.88) 0%, rgba(38,9,43,.45) calc(100% - var(--img-h) * .8), rgba(38,9,43,.3) 70%, rgba(38,9,43,.8) 100%),
    linear-gradient(270deg, rgba(38,9,43,.7) 0%, rgba(38,9,43,.35) 35%, rgba(38,9,43,0) 65%);
}
@media (max-width: 760px) {
  html[dir="rtl"]:not(.sky-off) .hero::after { background: linear-gradient(0deg, rgba(38,9,43,.95) 0%, rgba(38,9,43,.75) 55%, rgba(38,9,43,.4) 100%); }
}
/* Phones: About and Transactions stack text first, the skyline below it, never overlapping */
@media (max-width: 760px) {
  html:not(.sky-off) .p-hero,
  html:not(.sky-off) .tx-hero { height: auto; min-height: 0; padding-top: calc(var(--nav-h) + 40px); padding-bottom: calc(100vw * 0.86); }
  html:not(.sky-off) .p-hero::before,
  html:not(.sky-off) .tx-hero::before { background-size: 230% auto; background-position: 58% bottom; }
}