/* Site-specific additions on top of the original compiled styles (site.css). */

/* Return visits within a session: skip the long intro, open with the page curtain. */
html.is-return [data-preloader] { display: none; }
html.is-return [data-curtain] { visibility: visible; animation: .4s 4s forwards preloader-failsafe; }

/* Mobile menu button: lines turn into a cross when open. */
[aria-controls="mobile-menu"][aria-expanded="true"] > span:nth-child(1) { translate: none; transform: rotate(45deg); }
[aria-controls="mobile-menu"][aria-expanded="true"] > span:nth-child(2) { translate: none; transform: rotate(-45deg); }

/* SplitText line masks */
.split-line { padding-bottom: .06em; margin-bottom: -.06em; }

button[aria-busy="true"] { cursor: progress; }

/* ------------------------------------------------------------------ *
 * Theme: warm ivory
 * ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --background: #f5f0e6; --foreground: #1f1a14;
  --card: #fbf8f2; --card-foreground: #1f1a14; --popover: #fbf8f2; --popover-foreground: #1f1a14;
  --primary: #1f1a14; --primary-foreground: #f5f0e6;
  --secondary: #eee7da; --secondary-foreground: #1f1a14; --muted: #eee7da; --accent: #eee7da; --accent-foreground: #1f1a14;
  --muted-foreground: #74695c; --soft: #4a4238;
  --border: #1f1a1414; --input: #1f1a1429; --ring: #a9803f;
  --sidebar: #f5f0e6; --sidebar-foreground: #1f1a14; --sidebar-primary: #1f1a14; --sidebar-primary-foreground: #f5f0e6;
  --sidebar-accent: #eee7da; --sidebar-accent-foreground: #1f1a14; --sidebar-border: #1f1a1414; --sidebar-ring: #a9803f;
  --ember: #a9803f; --ember-deep: #8a6630; --bronze: #9a7640; --bronze-hover: #85652f;
  --surface: #fbf8f2; --surface-2: #eee7da;
  --line: #1f1a1414; --line-strong: #1f1a1426;
  --band: #ede5d6;
}
body { background: var(--background); }
::selection { background: #e8d5ad; color: var(--foreground); }
.text-gold-gradient { background: linear-gradient(180deg, #b8904a 0%, #a9803f 55%, #8a6630 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark-glow { background: radial-gradient(closest-side, #d4b67a33, #d4b67a10 55%, transparent); }
.bg-white\/\[0\.03\] { background-color: rgb(255 255 255 / .55); }
.hover\:bg-white\/\[0\.08\]:hover, .hover\:bg-white\/\[0\.06\]:hover { background-color: rgb(31 26 20 / .05); }
.border-black\/10 { border-color: rgb(31 26 20 / .12); }
/* small gold text: deeper gold so it stays readable on ivory (AA) */
.type-label.text-ember, .type-label.text-ember\/80, p.text-ember\/80, span.text-ember\/80 { color: #7e5e2b; }

/* Primary buttons: bronze gold instead of near-black */
a.bg-foreground, button.bg-foreground { background-color: var(--bronze); color: #fbf8f2; }
a.bg-foreground.hover\:bg-white:hover, button.bg-foreground.hover\:bg-white:hover { background-color: var(--bronze-hover); }
.bg-foreground .border-black\/10 { border-color: rgb(251 248 242 / .22); }

/* ------------------------------------------------------------------ *
 * Simplicity: no frame lines, grain, hairline grids or ghost emblems
 * ------------------------------------------------------------------ */
.guide-lines, .bg-grain { display: none !important; }
.border-line { border-color: transparent !important; }
span.bg-line { background-color: var(--line-strong); }        /* scroll cue and progress tracks */
[data-hero-media] img { display: none; }                        /* hero: just ivory and the gold glow */
.-top-10.-end-24.pointer-events-none, .top-24.-end-16.pointer-events-none { display: none; }

/* Card grids: soft ivory cards with air between them */
ul.bg-line, div.bg-line { background: transparent; gap: clamp(.75rem, 1.4vw, 1.25rem); }
ul.bg-line > li.bg-background, ul.bg-line > li > .bg-background, div.bg-line > * { background: var(--surface); border-radius: 6px; box-shadow: 0 1px 2px rgb(31 26 20 / .04), 0 12px 32px -18px rgb(31 26 20 / .18); }
ul.bg-line > li.hover\:bg-surface:hover, ul.bg-line > li > .hover\:bg-surface:hover { background: #fffdf8; }
li.border.border-line.font-mono { background: rgb(31 26 20 / .045); border-radius: 3px; }   /* tag chips */

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
/* Logo lock-up: emblem as tall as the two lines; both lines share one width (set in the lock-up rules below) */
.brand-mark { height: 25.5px; }
header a[href="/"] .uppercase, header a[href="/ar"] .uppercase { white-space: nowrap; }
@media (max-width: 400px) { header a[href="/"] .tracking-\[0\.22em\], header a[href="/ar"] .tracking-\[0\.22em\] { letter-spacing: .14em; } }

/* Language switch: quiet text toggle, thin gold divider, gold dot under the current language */
.lang-switch { display: flex; align-items: center; height: 48px; }
.lang-switch__opt { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 .7rem; font-size: .8125rem; letter-spacing: .16em; color: var(--muted-foreground); transition: color .3s; }
.lang-switch__opt + .lang-switch__opt::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 14px; translate: 0 -50%; background: var(--ember); opacity: .55; }
.lang-switch__opt:hover { color: var(--foreground); }
.lang-switch__opt[aria-current] { color: var(--foreground); pointer-events: none; }
.lang-switch__opt[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 4px; height: 4px; translate: -50% 0; background: var(--ember); }
.lang-switch__opt.font-arabic { letter-spacing: 0; font-size: .9375rem; }
.lang-switch__opt:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
@media (max-width: 639px) { .lang-switch__opt { padding: 0 .5rem; } }

/* ------------------------------------------------------------------ *
 * Hero, about
 * ------------------------------------------------------------------ */
.about-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.02em; color: var(--ember); }
.about-title::after { content: ""; display: block; width: 3.5rem; height: 1px; margin-top: 1.25rem; background: linear-gradient(90deg, var(--ember), transparent); }
[dir="rtl"] .about-title { font-family: var(--font-arabic); font-style: normal; font-weight: 500; }
[dir="rtl"] .about-title::after { background: linear-gradient(270deg, var(--ember), transparent); }
.about-statement { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.5; letter-spacing: -.015em; max-width: 46ch; }

.about-summary { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: clamp(4rem, 8vw, 7rem); text-align: center; }
.about-summary__rule { display: block; width: clamp(3rem, 6vw, 5rem); height: 1px; }
.about-summary__text { max-width: 44ch; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.5; color: var(--soft); }
[dir="rtl"] .about-summary__text { font-family: var(--font-arabic); font-style: normal; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.9; }

/* ------------------------------------------------------------------ *
 * Signature emblem backdrop: closing section, and behind the main titles
 * ------------------------------------------------------------------ */
.cta-glow { position: absolute; top: 50%; left: 50%; width: min(60rem, 110vw); aspect-ratio: 1; translate: -50% -50%; }
.cta-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .08; }
.cta-mark__svg { height: clamp(15rem, 34vw, 30rem);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 50%, transparent 100%); }

.has-title-mark { position: relative; isolation: isolate; }
.has-title-mark::before, .has-title-mark::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 50%; translate: 0 -50%; }
/* the emblem, anchored at the start of the title, fading softly from its centre */
.has-title-mark::before { inset-inline-start: -.35em; height: 2.6em; aspect-ratio: 507 / 427;
  background: url(/assets/img/emblem-line.svg) center / contain no-repeat; opacity: .1;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 45%, transparent 100%); }
/* the warm glow behind it */
.has-title-mark::after { inset-inline-start: -1.6em; height: 5em; aspect-ratio: 1; background: radial-gradient(closest-side, #d4b67a2e, #d4b67a0d 55%, transparent); }
.type-display.has-title-mark::before { height: 2.2em; }
.type-display.has-title-mark::after { height: 4.2em; }

/* ------------------------------------------------------------------ *
 * Footer brand block: centred stack, Arabic name under the English
 * ------------------------------------------------------------------ */
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(3rem, 6vw, 5rem); color: var(--foreground); }
.footer-brand__mark { width: auto; height: clamp(3.5rem, 6vw, 4.75rem); color: var(--ember); }
.footer-brand__name { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; font-weight: 500; letter-spacing: .26em; padding-inline-start: .26em; }
.footer-brand__sub { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--muted-foreground); }
.footer-brand__sub .type-label { letter-spacing: .32em; padding-inline-start: .32em; white-space: nowrap; }
.footer-brand__rule { display: block; height: 1px; width: clamp(2.5rem, 5vw, 4rem); }
.footer-brand__ar { margin-top: 1rem; font-size: clamp(1.1rem, 1.8vw, 1.45rem); color: var(--soft); line-height: 1.6; }

/* ------------------------------------------------------------------ *
 * Logos
 * ------------------------------------------------------------------ */
/* One-colour logo marks (CSS masks), gold */
.logo-mark { display: block; background-color: var(--ember);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  transition: background-color .5s; }
.group:hover .logo-mark { background-color: var(--ember-deep); }
/* logo marks in the sector cards line up with the card text */
.max-w-\[11rem\].logo-mark { -webkit-mask-position: left center; mask-position: left center; }
[dir="rtl"] .max-w-\[11rem\].logo-mark { -webkit-mask-position: right center; mask-position: right center; }

/* Logo strips: soft champagne band in the page palette, gold hairlines, gold logos */
.logo-strip { position: relative; background: var(--band); padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  -webkit-mask-image: none; mask-image: none;
  border-block: 1px solid; border-image: linear-gradient(90deg, transparent, rgb(169 128 63 / .5) 18%, rgb(169 128 63 / .5) 82%, transparent) 1; }
/* the band stays solid; only the logos fade out at the sides */
.logo-strip::before, .logo-strip::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(3rem, 12vw, 12rem); pointer-events: none; }
.logo-strip::before { left: 0; background: linear-gradient(90deg, var(--band), transparent); }
.logo-strip::after { right: 0; background: linear-gradient(270deg, var(--band), transparent); }
.logo-strip .logo-mark:hover { background-color: var(--ember-deep); }
.strip-label { text-align: center; }

/* Header lock-up (measured): name and sub line share one width; emblem spans cap-top to baseline; block centred in the 72px bar */
header a[aria-label] > span { gap: 13px; }
header a[aria-label] .font-brand { font-size: 17px; }
header a[aria-label] .uppercase { font-size: 9.5px; letter-spacing: .22em; }
header a[aria-label] .uppercase { margin-left: -.75px; }
header .brand-mark { height: 26.5px; }
header a[aria-label] > span { translate: 0 2.5px; }
header a[aria-label] .uppercase { letter-spacing: .2235em; }
header .brand-mark { translate: 0 -.25px; }
/* title backdrop: fully inside the page, behind the first word */
.has-title-mark::before { inset-inline-start: .1em; opacity: .12; }
.has-title-mark::after { inset-inline-start: -.9em; }
.type-display.has-title-mark::after { inset-inline-start: -.6em; height: 3.6em; }
/* honeypot field: hidden without pushing it off-page (that widened the Arabic page) */
.-left-\[9999px\] { left: 0 !important; top: 0; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* contact details */
.contact-address { display: flex; flex-direction: column; gap: .15rem; margin-top: .9rem; font-style: normal; font-size: .9375rem; line-height: 1.55; color: var(--soft); }