/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
/* Arabic faces only download when a page contains Arabic script. */
@font-face {
  font-family: "Amiri";
  src: url("/assets/fonts/Amiri-Arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Arabic-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Arabic-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --black: #080807;
  --graphite: #242421;
  --stone: #AAA59B;
  --cream: #E8E2D4;
  --paper: #F4F0E7;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --gutter: clamp(20px, 5.2vw, 80px);
  --max: 1360px;
  --header-h: 80px;
  --section-y: clamp(88px, 11vw, 184px);
  --col-gap: clamp(16px, 2vw, 32px);
  --ease: cubic-bezier(.22, .8, .24, 1);

  --fg: var(--cream);
  --fg-2: rgba(232, 226, 212, .72);
  --fg-3: rgba(232, 226, 212, .58);
  --rule: rgba(232, 226, 212, .14);
  color-scheme: dark;
}
:root:lang(ar) {
  --serif: "Amiri", "Cormorant Garamond", Georgia, serif;
  --sans: "Tajawal", "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Each company's colour. Components read these four, never a hex. */
[data-velours="group"] { --accent: #242421; --bridge: #161614; --bloom: #2E2D29; --highlight: #AAA59B; }
[data-velours="capital"] { --accent: #173D2D; --bridge: #0B1F17; --bloom: #173D2D; --highlight: #2C6B4F; }
[data-velours="live"], [data-velours="dubai"] { --accent: #243262; --bridge: #0E1430; --bloom: #243262; --highlight: #3B4F94; }
[data-velours="software"] { --accent: #6B1028; --bridge: #340812; --bloom: #6B1028; --highlight: #9B2C4B; }

/* Each surface carries its own ink. */
[data-surface="dark"] {
  background: var(--black);
  color: var(--cream);
}
[data-surface="paper"] {
  --fg-2: rgba(8, 8, 7, .72);
  --fg-3: rgba(8, 8, 7, .62);
  --rule: rgba(8, 8, 7, .16);
  background: var(--paper);
  color: var(--black);
}
[data-surface="accent"] {
  --fg-2: rgba(232, 226, 212, .82);
  --fg-3: rgba(232, 226, 212, .66);
  --rule: rgba(232, 226, 212, .24);
  background: var(--accent);
  color: var(--cream);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--black);
  scroll-padding-top: var(--header-h);
  scrollbar-color: rgba(232, 226, 212, .22) var(--black);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  background: var(--black);
  color: var(--cream);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body:lang(ar) { font-size: 18px; line-height: 1.85; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font: inherit; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
::selection { background: var(--cream); color: var(--black); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--black);
  font-size: 14px;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Small capitals labels. Arabic has no capitals, so it takes weight instead of tracking. */
.section-label, .house-sector, .legal-kicker, .about-sector, .footer-col h2, .legal-toc h2, .hero-place {
  font: 500 11px/1.6 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.section-label:lang(ar), .house-sector:lang(ar), .legal-kicker:lang(ar), .about-sector:lang(ar), .footer-col h2:lang(ar),
.legal-toc h2:lang(ar), .hero-place:lang(ar) {
  font-size: 14px;
  letter-spacing: 0;
}

.arrow { display: inline-block; transition: translate .4s var(--ease); }
.flush { translate: -5.8% 0; }
[dir="rtl"] .flush { translate: 5.4% 0; }
.flush-mark { translate: -5.4% 0; }
[dir="rtl"] .flush-mark { translate: 5.6% 0; }
[dir="rtl"] .arrow { scale: -1 1; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  color: var(--cream);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.site-header[data-mode="solid"], .site-header.is-solid, .menu-open .site-header {
  background: var(--black);
  border-bottom-color: rgba(232, 226, 212, .12);
}
.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.header-logo { justify-self: start; transition: opacity .7s var(--ease); }
.header-nav { grid-column: 2; }
.header-tools { grid-column: 3; justify-self: end; }
.header-logo .logo-wide { width: 240px; }
.header-logo .logo-mark { display: none; width: 38px; }
/* While the opening shows the full signature, the header holds back its own. */
.site-header[data-mode="overlay"]:not(.is-solid) .header-logo { opacity: 0; pointer-events: none; }
.menu-open .site-header[data-mode] .header-logo { opacity: 1; pointer-events: auto; }

.header-nav ul { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.header-nav a, .lang-switch a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color .3s;
}
.header-nav a:lang(ar) { font-size: 15px; letter-spacing: 0; }
.lang-switch a:lang(ar) { font-family: "Tajawal", "DM Sans", sans-serif; font-size: 14px; letter-spacing: 0; }
.header-nav a:hover, .lang-switch a:hover, .lang-switch a[aria-current], .header-nav a[aria-current] { color: var(--cream); }
@media (min-width: 960px) {
  .header-nav a { padding-bottom: 5px; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: color .3s, background-size .6s var(--ease); }
  [dir="rtl"] .header-nav a { background-position: right bottom; }
  .header-nav a[aria-current] { background-size: 100% 1px; }
}
.header-tools { display: flex; align-items: center; gap: 28px; }
.lang-switch ul { display: flex; align-items: baseline; gap: 16px; }
.lang-switch a[aria-current] { box-shadow: 0 1px 0 currentColor; }
.menu-toggle { display: none; }
/* The button does nothing without the script, so it waits for it. */
:root:not(.ready) .menu-toggle { visibility: hidden; }

@media (max-width: 959px) {
  :root { --header-h: 64px; }
  .header-logo .logo-wide { display: none; }
  .header-logo .logo-mark { display: block; }
  .header-tools { gap: 22px; }
  .menu-toggle {
    display: inline-flex;
    padding: 12px 0;
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menu-toggle:lang(ar) { font-size: 15px; letter-spacing: 0; }
  .menu-toggle .when-open, .menu-open .menu-toggle .when-closed { display: none; }
  .menu-open .menu-toggle .when-open { display: inline; }
  .header-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    display: none;
    padding: 32px var(--gutter);
    background: var(--black);
    overflow-y: auto;
  }
  .menu-open .header-nav { display: block; }
  .menu-open, .menu-open body { overflow: hidden; }
  .header-nav ul { flex-direction: column; gap: 0; }
  .header-nav li { border-bottom: 1px solid var(--rule); }
  .header-nav a, .header-nav a:lang(ar) {
    display: block;
    padding: 18px 0;
    font: 300 34px/1.2 var(--serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--cream);
  }
  .header-nav a:lang(ar) { font-size: 30px; line-height: 1.5; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;
  padding-top: var(--header-h);
}
.hero-bloom, .house-bloom {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 70% at 100% 50%, color-mix(in srgb, var(--bloom) 90%, transparent) 0%, color-mix(in srgb, var(--bloom) 22%, transparent) 55%, transparent 100%),
    linear-gradient(90deg, var(--black) 0%, var(--black) 58%, var(--bridge) 100%);
}
[dir="rtl"] .hero-bloom, [dir="rtl"] .house-bloom { transform: scaleX(-1); }
/* The light sits where each company's drawing needs it: the Group's in the middle of the
   instrument, Live's over the stage. */
[data-velours="group"] .hero-bloom {
  background:
    radial-gradient(58% 72% at 50% 46%, color-mix(in srgb, var(--bloom) 72%, transparent) 0%, color-mix(in srgb, var(--bloom) 16%, transparent) 62%, transparent 100%);
}
[data-velours="live"] .hero-bloom {
  background:
    radial-gradient(64% 52% at 50% 106%, color-mix(in srgb, var(--bloom) 72%, transparent) 0%, color-mix(in srgb, var(--bloom) 18%, transparent) 55%, transparent 100%),
    linear-gradient(0deg, var(--bridge) 0%, var(--black) 40%);
}

/* Each company's drawing, from art.js. */
.art-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.art-wrap.is-on { opacity: 1; }
.art-wrap--band.is-on { opacity: .72; }
.house:hover .art-wrap--band.is-on, .house:focus-within .art-wrap--band.is-on { opacity: 1; }
[dir="rtl"] .art-wrap { transform: scaleX(-1); }
.art { position: absolute; display: block; max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .art-wrap { transition: none; }
}
/* Colour dissolves into the black at the end of the hero and at both ends of a band, so it
   never stops in a hard line. */
.hero-bloom, .art-wrap {
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}
.house-bloom, .art-wrap--band {
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.art-wrap[data-art="software"] {
  mask-image:
    linear-gradient(90deg, transparent 30%, #000 72%),
    linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.section[data-surface="accent"] { isolation: isolate; }
.section[data-surface="accent"] .art-wrap--band { mask-image: none; }
.hero-centre {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(22px, 3vw, 40px);
  padding: 48px var(--gutter);
  text-align: center;
}
.hero-lockup { width: clamp(260px, 44vw, 660px); }
.hero-line {
  font: 300 clamp(20px, 2.1vw, 30px)/1.35 var(--serif);
  letter-spacing: .01em;
  color: var(--fg-2);
}
.hero-line:lang(ar) { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.7; letter-spacing: 0; }
.hero-notice { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.hero-notice:lang(ar) { font-size: 16px; line-height: 1.8; }
.hero-foot {
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) clamp(28px, 5vh, 52px);
}
.hero-places { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
.hero-places li {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding-inline: clamp(16px, 2.4vw, 34px);
}
.hero-places li + li { border-inline-start: 1px solid var(--rule); }
.hero-place { color: var(--fg-2); }
.hero-places time {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
@media (max-width: 480px) {
  .hero-places li { gap: 8px; padding-inline: 11px; }
  .hero-place { letter-spacing: .16em; }
}

.hero-centre {
  translate: 0 calc(var(--leaving, 0) * -9vh);
  opacity: calc(1 - var(--leaving, 0) * 1.5);
}
.hero-foot { opacity: calc(1 - var(--leaving, 0) * 2.4); }

@media (prefers-reduced-motion: no-preference) {
  .hero-bloom { animation: bloom 18s var(--ease) infinite alternate; }
  .js .hero-centre > * { animation: rise 1.8s var(--ease) both; }
  .js .hero-centre > .hero-line { animation-delay: .4s; }
  .js .hero-centre > .hero-notice { animation-delay: .6s; }
  .js .hero-foot { animation: fade 2s var(--ease) .9s backwards; }
}
@keyframes bloom {
  from { opacity: .78; scale: 1; }
  to { opacity: 1; scale: 1.08; }
}
@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes arrive {
  to { opacity: 1; translate: none; scale: none; }
}

/* --------------------------------------------------------------- sections */
/* Each section pads by just over half the rhythm, so two in a row sit one rhythm apart. */
.section { position: relative; padding-block: calc(var(--section-y) * .62); }
.section-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-top: 17px;
}
.section-grid::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}
[dir="rtl"] .section-grid::before { transform-origin: right; }
.section-label { grid-column: 1 / span 3; color: var(--fg-3); }
.section-body { grid-column: 4 / -1; }
.section-body > * + * { margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 959px) {
  .section-label, .section-body { grid-column: 1 / -1; }
  .section-label { margin-bottom: clamp(40px, 8vw, 64px); }
}

.statement {
  max-width: 20ch;
  font: 300 clamp(34px, 4.8vw, 72px)/1.08 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.statement:lang(ar) { max-width: 24ch; font-size: clamp(30px, 4vw, 60px); line-height: 1.55; letter-spacing: 0; }
.section-title {
  max-width: 24ch;
  font: 300 clamp(30px, 3.4vw, 50px)/1.14 var(--serif);
  text-wrap: balance;
}
.section-title:lang(ar) { font-size: clamp(27px, 2.9vw, 43px); line-height: 1.6; }
.lede {
  max-width: 46ch;
  font: 300 clamp(19px, 1.6vw, 23px)/1.55 var(--sans);
  color: var(--fg-2);
}
.lede:lang(ar) { line-height: 1.85; }
.body-text { max-width: 60ch; font-size: 17px; line-height: 1.7; color: var(--fg-2); }
.body-text:lang(ar) { font-size: 18px; line-height: 1.9; }

/* Numbered principles: Roman numerals in Latin, ordinal words in Arabic. */
.numbered {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 72px) var(--col-gap);
}
.section-body > .numbered { margin-top: clamp(56px, 7vw, 104px); }
.numbered li { padding-top: 22px; border-top: 1px solid var(--rule); }
.numeral {
  display: block;
  margin-bottom: clamp(24px, 3vw, 40px);
  font: 300 clamp(40px, 3.6vw, 54px)/1 var(--serif);
  color: var(--fg-3);
}
.numeral:lang(ar) { font: 500 15px/1.6 var(--sans); }
.numbered h3 { margin-bottom: 14px; font: 400 clamp(25px, 2.2vw, 31px)/1.2 var(--serif); }
.numbered h3:lang(ar) { line-height: 1.55; }
.numbered p { max-width: 44ch; font-size: 16px; line-height: 1.65; color: var(--fg-2); }
.numbered p:lang(ar) { font-size: 17px; line-height: 1.9; }
.numbered.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099px) {
  .numbered.three { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 600px) {
  .numbered { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- houses */
.house { position: relative; isolation: isolate; overflow: clip; }
.house-bloom {
  opacity: .72;
  transition: opacity 1s var(--ease);
  background:
    radial-gradient(64% 110% at 100% 50%, color-mix(in srgb, var(--bloom) 88%, transparent) 0%, color-mix(in srgb, var(--bloom) 20%, transparent) 55%, transparent 100%),
    linear-gradient(90deg, var(--black) 0%, var(--black) 52%, var(--bridge) 100%);
}
.house:hover .house-bloom, .house:focus-within .house-bloom { opacity: 1; }
.house-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-block: clamp(72px, 9vw, 136px);
  border-top: 1px solid var(--rule);
}
.house + .house .house-inner { border-top-color: rgba(232, 226, 212, .1); }
.house-sector { grid-column: 1 / span 3; color: var(--fg-3); padding-top: 6px; }
.house-name, .house-text, .house-link, .house-sub { grid-column: 4 / -1; }
.house-name img { width: clamp(240px, 30vw, 440px); }
.house-text {
  max-width: 44ch;
  margin-top: clamp(28px, 3vw, 40px);
  font: 300 clamp(19px, 1.6vw, 22px)/1.55 var(--sans);
  color: var(--fg-2);
}
.house-text:lang(ar) { line-height: 1.9; }
.house-link { margin-top: 28px; }
.house-link a, .text-link {
  display: inline-flex;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  letter-spacing: .04em;
  transition: border-color .4s;
}
.house-link a:hover, .text-link:hover { border-color: currentColor; }
.house-link a:hover .arrow, .text-link:hover .arrow { translate: 3px -3px; }
[dir="rtl"] .house-link a:hover .arrow, [dir="rtl"] .text-link:hover .arrow { translate: -3px -3px; }
.house-sub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 12px;
  align-items: center;
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(24px, 3vw, 36px);
  background: rgba(8, 8, 7, .62);
  border: 1px solid rgba(232, 226, 212, .1);
}
.house-sub img { width: 240px; grid-row: span 2; }
.house-sub p { font-size: 16px; color: var(--fg-2); max-width: 40ch; }
.house-sub .text-link { justify-self: start; font-size: 14px; }
@media (max-width: 959px) {
  .house-sector, .house-name, .house-text, .house-link, .house-sub { grid-column: 1 / -1; }
  .house-sector { margin-bottom: 32px; }
}
@media (max-width: 640px) {
  .house-sub { grid-template-columns: 1fr; }
  .house-sub img { grid-row: auto; }
}


/* --------------------------------------------------------- cities, letters */
.cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px var(--col-gap);
}
.section-body > .cities { margin-top: clamp(56px, 7vw, 104px); }
.cities li { padding-top: 22px; border-top: 1px solid var(--rule); }
.cities h3 { font: 300 clamp(38px, 4.2vw, 62px)/1 var(--serif); }
.cities h3:lang(ar) { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.35; }
.city-role { min-height: 1.6em; margin-top: 18px; color: var(--fg-3); }
.city-coords, .city-time { margin-top: 10px; font-size: 14px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.city-time time { color: var(--cream); }
[data-surface="paper"] .city-time time { color: var(--black); }
@media (max-width: 760px) {
  .cities { grid-template-columns: 1fr; }
}

.mail a {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font: 300 clamp(28px, 4.2vw, 62px)/1.15 "Cormorant Garamond", Georgia, serif;
  overflow-wrap: anywhere;
  transition: border-color .4s;
}
.mail a:hover { border-color: currentColor; }
.section-body > .contact-lines { margin-top: 22px; }
.contact-lines { display: grid; gap: 6px; }
.contact-lines li { font-size: 15px; color: var(--fg-2); }
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px var(--col-gap);
}
.section-body > .contacts { margin-top: clamp(56px, 7vw, 96px); }
.contacts li { padding-top: 16px; border-top: 1px solid var(--rule); }
.contacts h3 { margin-bottom: 8px; font: 400 21px/1.3 var(--serif); }
.contacts h3:lang(ar) { line-height: 1.6; }
.contacts a { font-size: 15px; color: var(--fg-2); transition: color .3s; }
.contacts a:hover { color: var(--fg); }

.section-body > .notice:first-child { margin-top: clamp(20px, 2.4vw, 32px); }
.notice {
  max-width: 70ch;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
}
.notice p { font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.notice p:lang(ar) { font-size: 17px; line-height: 1.95; }
.notice p + p { margin-top: 14px; }

/* A ceremonial list: one large word per line, its sentence beside it. */
.programme li {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: var(--col-gap);
  row-gap: 14px;
  align-items: baseline;
  padding-block: clamp(26px, 3vw, 40px);
}
.programme li:first-child { padding-top: 0; }
.programme li + li { border-top: 1px solid var(--rule); }
.programme h3 { font: 300 italic clamp(40px, 5.6vw, 88px)/1 var(--serif); letter-spacing: -.01em; }
.programme h3:lang(ar) { font-style: normal; font-size: clamp(34px, 4.4vw, 70px); line-height: 1.35; letter-spacing: 0; }
.programme p { max-width: 44ch; font-size: 17px; line-height: 1.65; color: var(--fg-2); }
.programme p:lang(ar) { font-size: 18px; line-height: 1.9; }
@media (max-width: 760px) {
  .programme li { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  padding-block: clamp(72px, 9vw, 120px) 32px;
  border-top: 1px solid var(--rule);
  background: var(--black);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 48px var(--col-gap);
}
.footer-brand img { width: 240px; }
.footer-line { margin-top: 18px; font: 300 19px/1.5 var(--serif); color: var(--fg-2); }
.footer-line:lang(ar) { font-size: 19px; line-height: 1.8; }
.footer-note { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.footer-note:lang(ar) { font-size: 15px; line-height: 1.8; }
.footer-line a { border-bottom: 1px solid var(--rule); transition: border-color .4s; }
.footer-line a:hover { border-color: currentColor; }
.footer-col h2 { margin-bottom: 18px; color: var(--fg-3); }
.footer-col li + li { margin-top: 10px; }
.footer-mail { margin-top: 10px; line-height: 1.6; }
.footer-col a, .footer-mail a { font-size: 15px; color: var(--fg-2); overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: color .3s, background-size .5s var(--ease); }
[dir="rtl"] .footer-col a, [dir="rtl"] .footer-mail a { background-position: right bottom; }
@media (hover: hover) {
  .footer-col a:hover, .footer-mail a:hover { color: var(--fg); background-size: 100% 1px; }
}
.footer-col a:lang(ar) { font-family: "Tajawal", "DM Sans", sans-serif; font-size: 16px; }
.footer-base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px 24px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--fg-3);
}
@media (min-width: 960px) and (max-width: 1180px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 40px; }
}
.footer-base p:last-child { justify-self: end; }
.footer-base a { transition: color .3s; }
.footer-base a:hover { color: var(--fg); }
@media (max-width: 959px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer-base { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-base p:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
/* On a phone the footer stays short: two columns, and the languages on one line. */
@media (max-width: 520px) {
  .footer-grid { row-gap: 36px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col:last-child ul { display: flex; gap: 22px; }
  .footer-col:last-child li + li { margin-top: 0; }
}

/* ------------------------------------------------------------- legal pages */
/* ------------------------------------------------------------------ about */
/* The opening is one sentence over the company's own drawing, and the sentence is the definition. */
.about-head {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: min(82svh, 820px);
  padding-block: calc(var(--header-h) + clamp(56px, 8vw, 120px)) clamp(56px, 7vw, 104px);
  overflow: clip;
}
.about-head h1 {
  max-width: 25ch;
  margin-top: 24px;
  font: 300 clamp(36px, 5.2vw, 78px)/1.08 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.about-head h1:lang(ar) { max-width: 24ch; font-size: clamp(32px, 4.3vw, 64px); line-height: 1.5; letter-spacing: 0; }
.about-list > li + li { margin-top: clamp(36px, 3.6vw, 52px); padding-top: 24px; border-top: 1px solid var(--rule); }
.about-sector { margin-bottom: 14px; color: var(--fg-3); }
.about-list h3 { font: 400 clamp(25px, 2.2vw, 31px)/1.25 var(--serif); }
.about-list h3:lang(ar) { line-height: 1.6; }
.about-list h3 + p { max-width: 60ch; margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--fg-2); }
.about-list h3 + p:lang(ar) { font-size: 18px; line-height: 1.9; }
.about-link { margin-top: 16px; font-size: 15px; }
.section-body > .about-link { margin-top: 20px; }
.about .section:last-child { padding-bottom: var(--section-y); }

.legal { padding-block: calc(var(--header-h) + clamp(56px, 8vw, 120px)) var(--section-y); }
.legal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.legal-head { grid-column: 1 / -1; max-width: 880px; margin-bottom: clamp(56px, 7vw, 96px); }
.legal-kicker { color: var(--fg-3); }
.legal h1 { margin-top: 20px; font: 300 clamp(46px, 6.4vw, 92px)/1.02 var(--serif); letter-spacing: -.01em; }
.legal h1:lang(ar) { font-size: clamp(42px, 5.4vw, 78px); line-height: 1.4; letter-spacing: 0; }
.legal-updated { margin-top: 22px; font-size: 14px; color: var(--fg-3); }
.legal-summary { max-width: 54ch; margin-top: 32px; font: 300 clamp(19px, 1.6vw, 22px)/1.6 var(--sans); color: var(--fg-2); }
.legal-summary:lang(ar) { line-height: 1.9; }
.legal-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.legal-toc h2 { margin-bottom: 16px; color: var(--fg-3); }
.legal-toc li + li { margin-top: 9px; }
.legal-toc a { font-size: 14px; color: var(--fg-2); transition: color .3s; }
.legal-toc a:hover, .legal-toc a[aria-current] { color: var(--fg); }
.legal-body { grid-column: 5 / -1; max-width: 740px; }
.legal-section { padding-top: 26px; border-top: 1px solid var(--rule); }
.legal-section + .legal-section { margin-top: 56px; }
.legal-section h2 { margin-bottom: 18px; font: 300 clamp(28px, 2.6vw, 36px)/1.2 var(--serif); }
.legal-section h2:lang(ar) { line-height: 1.6; }
.legal-section h3 { margin: 28px 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.legal-section h3:lang(ar) { font-size: 16px; letter-spacing: 0; }
.legal-section p, .legal-section li { font-size: 17px; line-height: 1.7; color: var(--fg-2); }
.legal-section p:lang(ar), .legal-section li:lang(ar) { font-size: 18px; line-height: 1.95; }
.legal-section p + p, .legal-section ul + p, .legal-section p + ul { margin-top: 14px; }
.legal-section ul { padding-inline-start: 1.2em; list-style: disc; }
.legal-section li + li { margin-top: 6px; }
.legal-section a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 959px) {
  .legal-toc { position: static; grid-column: 1 / -1; margin-bottom: 56px; }
  .legal-body { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------- 404 */
.lost {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 56px;
  padding-block: calc(var(--header-h) + 48px) 64px;
}
.lost-lines { display: grid; gap: 40px; }
.lost-lines section { padding-top: 18px; border-top: 1px solid var(--rule); }
.lost-lines h1, .lost-lines h2 { font: 300 clamp(32px, 4vw, 56px)/1.15 var(--serif); }
.lost-lines h2:lang(ar) { font-family: "Amiri", "Cormorant Garamond", serif; line-height: 1.5; }
.lost-lines p { margin-top: 12px; color: var(--fg-2); }
.lost-lines p:lang(ar) { font-family: "Tajawal", "DM Sans", sans-serif; }
.lost-lines a { color: var(--fg); border-bottom: 1px solid var(--rule); }

/* ---------------------------------------------------------------- reveals */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity 1.3s var(--ease) var(--delay, 0s), translate 1.3s var(--ease) var(--delay, 0s); }
  .js [data-reveal].is-in { opacity: 1; translate: none; }
  .js .section-grid::before { transition: scale 1.8s var(--ease); }
  .js .section-grid:not(.is-in)::before { scale: 0 1; }
  /* If the script never arrives, nothing stays hidden. */
  .js:not(.ready) [data-reveal], .js:not(.ready) .section-grid::before { animation: arrive .8s var(--ease) 3.6s forwards; }
  .word { color: color-mix(in srgb, currentColor calc(var(--lit, 1) * 100%), transparent); transition: color .35s linear; }
  .js .header-nav { transition: none; }

  /* The menu on phones opens line by line. */
  .menu-open .header-nav { animation: fade .4s var(--ease) both; }
  .menu-open .header-nav li { animation: rise .7s var(--ease) both; }
  .menu-open .header-nav li:nth-child(2) { animation-delay: .06s; }
  .menu-open .header-nav li:nth-child(3) { animation-delay: .12s; }
  .menu-open .header-nav li:nth-child(4) { animation-delay: .18s; }

  /* Going from page to page dissolves rather than cuts. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }
}


/* ------------------------------------------------------------------- Live */
/* One hall under one lamp for the whole page. See shared/hall.js. */
.plate {
  position: fixed;
  inset: calc(-1 * var(--lift)) 0 auto;
  z-index: -1;
  --bleed: 140px;
  --lift: 90px;
  display: none;
  width: 100%;
  height: calc(100vh + var(--bleed) + var(--lift));
  height: calc(100lvh + var(--bleed) + var(--lift));
  pointer-events: none;
}
[dir="rtl"] .plate { transform: scaleX(-1); }
.has-plate .plate { display: block; }
.has-plate body { background: none; }
/* The hall carries the page, so nothing above it may paint a ground of its own. */
.has-plate:not(.is-still) [data-surface] { background: none; }
.has-plate .hero-bloom { animation: none; transition: opacity 2.6s var(--ease); }
.plate-on .hero-bloom { opacity: 0; }
.is-still .plate { position: absolute; --bleed: 0px; --lift: 0px; height: 100svh; mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.is-still [data-surface="dark"] { background: var(--black); }

.has-plate .site-header { transition: translate .7s var(--ease), background-color .5s var(--ease); }
.has-plate .site-header.is-solid { background: linear-gradient(180deg, rgba(8, 8, 7, .78), rgba(8, 8, 7, 0)) no-repeat; border-bottom-color: transparent; }
.has-plate .site-header.is-away:not(:focus-within) { translate: 0 -100%; }
.menu-open .site-header[data-mode] { background: var(--black); }

/* Each scene is a place to stop, and its words stand in the dark beside the hall. */
.has-plate:not(.is-still)[data-page="home"] { --max: 1840px; }
.has-plate:not(.is-still) .hero-line { color: var(--cream); }
.has-plate:not(.is-still) #work { padding-block: 0; }
.has-plate:not(.is-still) #work .section-grid { display: block; padding-top: 0; --scene-top: 25svh; }
.has-plate:not(.is-still) #work .section-grid::before { display: none; }
.has-plate:not(.is-still) #work .section-label { position: absolute; inset-block-start: calc(var(--scene-top) - 46px); inset-inline-start: 0; margin: 0; }
.has-plate:not(.is-still) .programme li {
  display: block;
  min-height: 64svh;
  padding-block: var(--scene-top) 0;
  border: 0;
}
.has-plate:not(.is-still) .programme li:first-child { padding-top: var(--scene-top); }
.has-plate:not(.is-still) .programme h3 { font-size: clamp(52px, 6.6vw, 112px); }
.has-plate:not(.is-still) .programme h3:lang(ar) { font-size: clamp(44px, 5.2vw, 88px); }
.has-plate:not(.is-still) .programme p { max-width: 34ch; margin-top: clamp(18px, 2.6vh, 28px); color: var(--fg-2); }

/* Velours Dubai has the page to itself: the lattice from its own front door, at the same size. */
.has-plate .club .house-bloom { display: none; }
.has-plate .club .art-wrap--band.is-on { opacity: 1; }
.has-plate .club .art-wrap--band { mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); }
.has-plate:not(.is-still) .club { min-height: 84svh; display: grid; align-items: center; }
.has-plate .club .wrap { width: 100%; }
.has-plate .club .house-inner { display: block; padding-block: clamp(72px, 12svh, 130px); border: 0; }
.has-plate .club .house-sector { padding: 0; margin-bottom: 26px; color: var(--fg-3); }
.has-plate .club .house-text { max-width: 34ch; }

/* The evening behind the lattice is the hall's own light, melted. On the way in the lattice waits on
   the screen where the section will come to rest, and it goes with the section from there. It has
   to lie under the words either side of the section, so the section gives up its own layer. */
.plate-on:not(.is-still) .club { isolation: auto; overflow: visible; }
.plate-on:not(.is-still) .club .art-wrap { inset: calc(-1 * var(--above, 0px)) 0 calc(-1 * var(--below, 0px)); mask-image: none; transition: none; }
.plate-on:not(.is-still) .club.is-held .art-wrap { position: fixed; inset: var(--from) 0 auto; height: var(--tall); }
.plate-on:not(.is-still) .club .art:first-child { display: none; }
.plate-on:not(.is-still) .club .art:last-child { opacity: var(--lines, 0); }

/* On a tall screen the words stand at the top and the hall lies below them. */
@media (max-aspect-ratio: 23/20) {
  .has-plate:not(.is-still) #work .section-grid { --scene-top: 17svh; }
  .has-plate:not(.is-still) #work .section-label { inset-block-start: calc(var(--scene-top) - 40px); }
  .has-plate:not(.is-still) .programme li { min-height: 72svh; }
}