/* ============================================================
   MAISON BIN HAM — Heritage Luxe
   Bone · Obsidian · Oxblood (ink only) · Champagne (hairlines only)
   Display: Cormorant Garamond 600 · Body: Inter
   Principle: hairlines + negative space, never boxes/shadows/red fills.
   ============================================================ */

:root {
  /* Palette — warm neutrals · antique gold (two tiers) · oxblood (ink only) */
  --ink-deep: #16110e;   /* obsidian surface / footer */
  --ink: #221913;        /* body ink (warm espresso) */
  --ink-soft: rgba(34, 25, 19, 0.74);  /* leads / section paragraphs */
  --ink-mute: rgba(34, 25, 19, 0.58);  /* captions / meta / addresses */
  --paper: #f7f5ef;      /* primary light rag-paper */
  --paper-2: #efece3;    /* alt sections + cards */
  --paper-3: #e7e3d8;    /* inset wells (never flat white) */
  --oxblood: #6b1420;    /* INK ONLY: eyebrows, rules, numerals, links */
  --oxblood-dark: #54101a;
  --gold: #a47b3e;       /* antique gold — ink-level accents (50-seal, focus, gilt) */
  --gold-lt: #cdac6e;    /* champagne / text / eyebrows on obsidian */
  --champagne: #b8945c;  /* HAIRLINES on dark */
  --champagne-lt: #cdac6e; /* alias of gold-lt */
  --line-light: #e4ded2; /* hairlines on --paper */
  --line-dark: #d8d1c1;  /* card edges / hairlines on --paper-2 */
  --line-gold: rgba(184, 148, 92, 0.42); /* barely-there gold rule */
  --paper-82: rgba(247, 245, 239, 0.86);
  --paper-60: rgba(247, 245, 239, 0.60);

  /* Type scale */
  --fs-hero: clamp(3.0rem, 1.95rem + 5.3vw, 6.2rem);
  --fs-h1: clamp(2.35rem, 1.72rem + 3.1vw, 4.0rem);
  --fs-h2: clamp(1.82rem, 1.42rem + 1.9vw, 2.8rem);
  --fs-h3: clamp(1.28rem, 1.12rem + 0.7vw, 1.56rem);
  --fs-eyebrow: 0.72rem;
  --fs-lede: clamp(1.5rem, 1.1rem + 1.6vw, 2.12rem);
  --fs-lead: clamp(1.1rem, 1.0rem + 0.45vw, 1.36rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-numeral: clamp(2.7rem, 1.95rem + 3vw, 4.4rem);

  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: "Fraunces", "EB Garamond", Georgia, serif;

  --shell: min(1300px, calc(100% - clamp(40px, 8vw, 120px)));
  --gutter: clamp(20px, 4.5vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  overflow-x: hidden;
}
/* paper tooth — makes negative space read as crafted stock */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); opacity: 0.42; mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "dlig" 1, "onum" 1;
  line-height: 1.1;
}
em, .i { font-style: italic; font-weight: inherit; }

.shell { width: var(--shell); margin-inline: auto; }

/* ---------- Eyebrow (with hairline tick) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin: 0 0 1.3rem;
  font-family: var(--accent);
  font-variation-settings: "opsz" 40, "SOFT" 30;
  font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--oxblood);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--gold); opacity: 0.8; flex: 0 0 auto; }
.on-dark .eyebrow, .section.obsidian .eyebrow { color: var(--champagne-lt); }

/* ---------- Chapter numeral (removed — read as AI tell) ---------- */
.chapter { display: none; }

/* ---------- Legacy: Sheikh Zayed tribute, two-column ---------- */
#about { padding-block: clamp(3.25rem, 5vw, 4.5rem); }
.editorial-legacy {
  display: grid; grid-template-columns: 320px 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.legacy-left { text-align: center; }
.legacy-left .eyebrow { display: inline-flex; margin-bottom: 0.85rem; }
.legacy-figure { position: relative; margin: 0 auto 1.2rem; width: 100%; max-width: 300px;
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; box-shadow: 0 22px 52px rgba(20,12,8,0.20); }
.legacy-figure::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--champagne); opacity: 0.62; pointer-events: none; }
.legacy-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block;
  filter: saturate(0.6) contrast(1.05) sepia(0.1);
}
.legacy-lede {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); margin: 0;
}
.legacy-right { max-width: none; }
.legacy-right p { margin: 0 0 1.1rem; font-size: var(--fs-lead); line-height: 1.6; color: rgba(36, 27, 23, 0.82); }
.legacy-right p:not(.legacy-tribute) { text-align: justify; text-justify: inter-word; hyphens: auto; }
.legacy-tribute { margin: 1.3rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: rgba(36, 27, 23, 0.72); }
@media (max-width: 820px) {
  .editorial-legacy { grid-template-columns: 1fr; gap: 1.6rem; max-width: 560px; }
  .legacy-figure { max-width: 240px; }
}

/* ---------- Hairline divider that draws ---------- */
.rule {
  display: block; width: 100%; height: 1px; border: 0; margin: 0;
  background: var(--champagne); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.rule.in { transform: scaleX(1); }
.rule-punc { width: 60px; height: 1px; background: var(--oxblood); border: 0; margin: 1.7rem 0; }
.section.obsidian .rule-punc { background: var(--champagne-lt); }

/* ---------- Buttons ---------- */
.gilt {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem;
  color: var(--oxblood); position: relative; padding: 0.3rem 0; cursor: pointer;
}
.gilt::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--champagne); transition: width 0.3s var(--ease); }
.gilt:hover { color: var(--oxblood-dark); }
.gilt:hover::after { width: 100%; }
.gilt svg { width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
.gilt:hover svg { transform: translateX(4px); }
.on-dark .gilt,
.hero.obsidian .gilt,
.section.obsidian .gilt { color: var(--champagne-lt); }
.on-dark .gilt:hover,
.hero.obsidian .gilt:hover,
.section.obsidian .gilt:hover { color: #fff; }

.ghost {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink); padding: 0.85rem 1.4rem; border: 1px solid var(--ink); border-radius: 2px;
  cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ghost:hover { background: var(--ink-deep); color: var(--paper); border-color: var(--ink-deep); box-shadow: inset 0 0 0 3px rgba(176,141,87,0.0); }
.ghost:hover { box-shadow: inset 0 0 0 4px rgba(176,141,87,0.28); }
.on-dark .ghost,
.hero.obsidian .ghost,
.section.obsidian .ghost { color: var(--paper); border-color: rgba(246,241,231,0.5); }
.on-dark .ghost:hover,
.hero.obsidian .ghost:hover,
.section.obsidian .ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(247, 245, 239, 0.92); backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--line-gold);
}
.header-inner { width: var(--shell); margin-inline: auto; display: flex; align-items: center; gap: 22px; min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); }
/* Gold emblem: dark-bg variant over the hero, light-bg variant once scrolled */
.brand-logo-wrap { position: relative; width: 62px; height: 62px; flex: 0 0 auto; transition: transform 0.4s var(--ease); }
.scrolled .brand-logo-wrap { transform: scale(0.92); }
.brand-logo--ondark, .brand-logo--onlight { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.45s var(--ease); }
.brand-logo--onlight { opacity: 0; }
.site-header.scrolled .brand-logo--ondark { opacity: 0; }
.site-header.scrolled .brand-logo--onlight { opacity: 1; }
.brand-text strong { font-family: var(--serif); font-size: 1.46rem; font-weight: 600; line-height: 1; display: block; }
.brand-text .lockup-rule { display: block; width: 24px; height: 1px; background: var(--champagne); margin: 6px 0 5px; }
.brand-text small { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-light, rgba(36,27,23,0.6)); }

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.primary-nav a { position: relative; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(36,27,23,0.62); padding: 0.4rem 0; transition: color 0.25s var(--ease); }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--oxblood); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.primary-nav a:hover, .primary-nav a.active { color: var(--ink); }
.primary-nav a:hover::after, .primary-nav a.active::after { transform: scaleX(1); }
.primary-nav a.ghost::after { display: none; }
.primary-nav a.ghost { padding: 0.55rem 1.1rem; }

.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line-dark); border-radius: 2px; background: transparent; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 1px; margin: 5px auto; background: var(--ink); }

/* Header light state — transparent over the cinematic dark hero */
.site-header:not(.scrolled) .brand-text strong { color: var(--paper); }
.site-header:not(.scrolled) .brand-text small { color: var(--paper-60); }
.site-header:not(.scrolled) .brand-text .lockup-rule { background: var(--champagne); }
.site-header:not(.scrolled) .primary-nav a { color: rgba(246, 241, 231, 0.74); }
.site-header:not(.scrolled) .primary-nav a:hover,
.site-header:not(.scrolled) .primary-nav a.active { color: var(--paper); }
.site-header:not(.scrolled) .primary-nav a::after { background: var(--champagne); }
.site-header:not(.scrolled) .primary-nav a.ghost { color: var(--paper); border-color: rgba(246, 241, 231, 0.5); }
.site-header:not(.scrolled) .primary-nav a.ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.site-header:not(.scrolled) .nav-toggle { border-color: rgba(246, 241, 231, 0.4); }
.site-header:not(.scrolled) .nav-toggle span { background: var(--paper); }

/* ============================================================
   Hero — cinematic dusk (full-bleed dark, atmospheric, layered)
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; margin-top: -84px;
  display: flex; align-items: center; color: var(--paper);
  background: linear-gradient(168deg, #0b0807 0%, #130e0b 50%, #1d140f 100%);
}
.hero::before { /* plumb line */
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--gutter); width: 1px;
  background: var(--champagne-lt); opacity: 0.55; z-index: 4;
}
.hero-glow {
  position: absolute; inset: -12%; z-index: -4; pointer-events: none;
  background:
    radial-gradient(44% 42% at 72% 84%, rgba(201,168,106,0.30), transparent 62%),
    radial-gradient(46% 40% at 20% 98%, rgba(110,22,34,0.30), transparent 66%);
  animation: heroDrift 28s ease-in-out infinite alternate;
}
@keyframes heroDrift { from { transform: translate3d(-2%,-1%,0) scale(1.02); } to { transform: translate3d(2%,1.5%,0) scale(1.1); } }
.hero-grain { position: absolute; inset: 0; z-index: -3; background-image: var(--grain); opacity: 0.5; pointer-events: none; }
.hero-silhouette { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -2; width: 100%; height: min(42vh, 380px); }
.hero-silhouette .far { fill: #140d0a; }
.hero-silhouette .near { fill: #070504; }
.hero-vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 36%, transparent 50%, rgba(5,3,2,0.66) 100%); }
.hero-watermark {
  position: absolute; right: -1%; top: 44%; transform: translateY(-50%); z-index: -2; pointer-events: none;
  font-family: var(--serif); font-weight: 600; font-size: clamp(15rem, 38vw, 38rem); line-height: 0.8;
  color: var(--champagne); opacity: 0.06; user-select: none;
}
.hero-inner { width: var(--shell); margin-inline: auto; position: relative; z-index: 3; padding: clamp(7rem, 16vh, 11rem) 0 clamp(5rem, 10vh, 7rem); }
.hero .eyebrow { margin-bottom: 1.6rem; color: var(--champagne-lt); }
.hero h1 { max-width: 15ch; font-size: var(--fs-hero); line-height: 1.0; letter-spacing: -0.012em; color: var(--paper); text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.hero h1 em { color: var(--champagne-lt); }
.hero .rule-punc { background: var(--champagne-lt); }
.hero-lead { max-width: 56ch; margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--paper-82); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 2.4rem; }
.hero-stats { display: flex; gap: 0; margin-top: 3.2rem; }
.hero-stats div { padding-right: 1.8rem; margin-right: 1.8rem; border-right: 1px solid rgba(201,168,106,0.45); }
.hero-stats div:last-child { border-right: 0; }
.hero-stats strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.9rem; line-height: 1; font-feature-settings: "tnum" 1; color: var(--paper); }
.hero-stats span { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne-lt); }
.hero .gilt { color: var(--champagne-lt); }
.hero .gilt:hover { color: #fff; }
.hero .ghost { color: var(--paper); border-color: rgba(246,241,231,0.5); }
.hero .ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none; }
.hero-scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--champagne-lt); font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; }
.hero-scrollcue .l { width: 1px; height: 46px; background: linear-gradient(var(--champagne-lt), transparent); transform-origin: top; animation: cue 2.6s ease-in-out infinite; }
@keyframes cue { 0%,100% { opacity: 0.25; transform: scaleY(0.55); } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .hero-glow, .hero-scrollcue .l, .hero-50 { animation: none; } }

/* ===== Anniversary hero — 50 Years + leadership ===== */
.hero-50 {
  position: absolute; left: -3.5%; right: auto; top: 50%; transform: translateY(-50%); z-index: -2;
  font-family: var(--serif); font-weight: 600; font-size: clamp(20rem, 42vw, 46rem); line-height: 0.78;
  letter-spacing: -0.05em; pointer-events: none; user-select: none;
  background: linear-gradient(165deg, rgba(201,168,106,0.16) 0%, rgba(176,141,87,0.06) 45%, rgba(176,141,87,0.02) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 100% 220%; animation: sheen 14s ease-in-out infinite alternate;
}
@keyframes sheen { from { background-position: 0 0; } to { background-position: 0 100%; } }

.hero-anniv-grid {
  width: var(--shell); margin-inline: auto; position: relative; z-index: 3;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  padding: clamp(7rem, 15vh, 10rem) 0 clamp(5rem, 9vh, 7rem);
}
.anniv-kicker { display: inline-flex; align-items: center; gap: 0.85rem; margin: 0 0 1.5rem;
  font-family: var(--accent); font-variation-settings: "opsz" 40, "SOFT" 30; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne-lt); }
.anniv-kicker::before { content: ""; width: 26px; height: 1px; background: var(--champagne); flex: 0 0 auto; }
.hero-copy h1 { max-width: 16ch; font-size: clamp(2.5rem, 4.4vw, 4.8rem); line-height: 1.02; letter-spacing: -0.012em; color: var(--paper); text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.hero-copy h1 em { color: var(--champagne-lt); }
.hero-copy .hero-lead { max-width: 46ch; }

.leaders { display: flex; gap: clamp(0.9rem, 1.8vw, 1.5rem); justify-content: flex-end; align-items: center; }
.leader { margin: 0; flex: 1 1 0; max-width: 200px; }

/* Anniversary "50 · Years" seal, parallel to the portraits */
.hero-fifty-mark { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: clamp(0.3rem, 1vw, 1rem); }
.hero-fifty-mark .n { font-family: var(--serif); font-weight: 600; font-size: clamp(4.5rem, 8.4vw, 8.5rem); line-height: 0.76; letter-spacing: -0.03em;
  background: linear-gradient(158deg, #ead7a6 0%, var(--champagne) 55%, #8f6f3f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-fifty-mark .bar { width: 30px; height: 1px; background: var(--champagne); margin: 0.55rem 0; }
.hero-fifty-mark .y { font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--champagne-lt); }
.leader-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px;
  background: linear-gradient(158deg, #2a201a, #0c0908); box-shadow: 0 26px 60px rgba(5,3,2,0.5); }
.leader-photo::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--champagne); opacity: 0.6; pointer-events: none; z-index: 3; }
.leader-photo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(12,9,8,0.85)); }
.leader-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(0.96) contrast(1.02); }
.leader-emblem { position: absolute; inset: 0; display: grid; place-items: center; }
.leader-emblem img { width: 46%; max-width: 96px; opacity: 0.82; }
.leader-emblem span { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201,168,106,0.7); }
.leader figcaption { margin-top: 1rem; }
.leader figcaption strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.08rem; line-height: 1.15; color: var(--paper); }
.leader figcaption span { display: block; margin-top: 0.25rem; font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne-lt); }

@media (max-width: 980px) {
  .hero-anniv-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .leaders { justify-content: flex-start; flex-wrap: wrap; max-width: 540px; }
}
@media (max-width: 600px) {
  .leaders { gap: 0.8rem; justify-content: flex-start; }
  .leader { max-width: 132px; }
  .leader-emblem img { width: 40%; }
  .hero-fifty-mark { width: 100%; flex-direction: row; align-items: baseline; justify-content: center; gap: 0.75rem; padding-left: 0; margin-top: 0.7rem; }
  .hero-fifty-mark .bar { width: 40px; margin: 0; align-self: center; }
  .hero-fifty-mark .n { font-size: 3.6rem; }
}

/* Real cinematic skyline backdrop (swap URL for a generated Abu Dhabi plate) */
.hero--anniversary .hero-silhouette,
.hero--photo .hero-silhouette { display: none; }
.hero-photo {
  position: absolute; inset: 0; z-index: -5; background-size: cover; background-position: center 28%;
  background-repeat: no-repeat; transform: scale(1.06); transform-origin: 60% 40%;
  animation: heroKen 34s ease-in-out infinite alternate;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,8,7,0.92) 0%, rgba(11,8,7,0.74) 32%, rgba(12,9,8,0.36) 64%, rgba(18,13,11,0.46) 100%),
    linear-gradient(180deg, rgba(11,8,7,0.22), rgba(8,6,5,0.66));
}
@keyframes heroKen { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.13) translate(-1.4%,-1%); } }
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; } }

/* ============================================================
   Sections
   ============================================================ */
.section { position: relative; padding: clamp(2.9rem, 5.25vw, 5rem) 0; }
.section.alt { background: var(--paper-2); }
.section.obsidian { background: var(--ink-deep); color: var(--paper); }
.section.obsidian::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.5; pointer-events: none; }
.section.obsidian > .shell { position: relative; z-index: 1; }

.section-head { max-width: 760px; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { display: inline-flex; }
.section-head h2 { font-size: var(--fs-h2); letter-spacing: -0.005em; }
.section-head h2 em { color: var(--oxblood); }
.section.obsidian .section-head h2 em { color: var(--champagne-lt); }
.section-head p { margin: 1.3rem 0 0; font-size: var(--fs-lead); line-height: 1.6; color: rgba(36,27,23,0.74); max-width: 60ch; }
.section.obsidian .section-head p { color: var(--paper-82); }
.section-head.center p { margin-inline: auto; }

/* asymmetric editorial split */
.editorial { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.editorial .lede { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.6rem); font-weight: 500; line-height: 1.3; color: var(--ink); max-width: 22ch; }
.editorial .body-col { max-width: 64ch; }
.editorial .body-col p { margin: 0 0 1.2rem; color: rgba(36,27,23,0.8); }

/* ---------- Sector grid (compact directory — type-led, small imagery) ---------- */
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.7rem, 2.6vw, 2.3rem) clamp(1.6rem, 2.4vw, 2.2rem); }
.sector { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: clamp(0.85rem, 1.2vw, 1.1rem); align-items: start; transition: transform 0.45s var(--ease); }
.sector:hover { transform: translateY(-3px); }
.sector .plate { aspect-ratio: 4 / 5; border-radius: 2px; box-shadow: 0 6px 16px rgba(20,12,8,0.12); }
.sector .plate::after { inset: 6px; opacity: 0.5; }
.sector .plate img { transition: transform 1.1s var(--ease), filter 0.5s var(--ease); filter: saturate(0.72) contrast(1.05) brightness(0.97); }
/* warm wash keeps the AI imagery subtle and subordinate to the type */
.sector .plate::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(162deg, rgba(34,25,19,0.30) 0%, rgba(107,20,32,0.16) 60%, rgba(12,9,8,0.42) 100%);
  transition: opacity 0.5s var(--ease); opacity: 0.9;
}
.sector:hover .plate::before { opacity: 0.6; }
.sector:hover .plate img { transform: scale(1.05); filter: saturate(0.9) contrast(1.04) brightness(1); }
.sector-body { position: relative; }
.sector-no { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1; color: var(--oxblood); font-feature-settings: "onum" 1; margin-bottom: 0.3rem; }
.sector h3 { font-size: 1.1rem; letter-spacing: -0.004em; line-height: 1.18; }
.sector p { margin: 0.35rem 0 0.6rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Media plate (framed gradient placeholder) ---------- */
.plate { position: relative; overflow: hidden; }
.plate::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--champagne); opacity: 0.55; pointer-events: none; z-index: 2; }
.plate-fill { position: absolute; inset: 0; }
.plate-fill.bone { background: linear-gradient(145deg, var(--paper), var(--paper-2)); }
.plate-fill.oxblood { background: linear-gradient(150deg, var(--paper-2), rgba(110,22,34,0.12)); }
.plate-fill.champ { background: linear-gradient(150deg, var(--paper), rgba(176,141,87,0.16)); }
.plate-fill.obsidian { background: linear-gradient(150deg, var(--ink-deep), #0f0b09); }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.plate .plate-glyph { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: var(--champagne); opacity: 0.6; }
.plate .plate-glyph svg { width: 30%; max-width: 90px; fill: none; stroke: currentColor; stroke-width: 1; }

/* ---------- Feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.4rem); }
.feature { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line-light); transition: transform 0.35s var(--ease); }
.feature:hover { transform: translateY(-4px); }
.feature .plate { aspect-ratio: 16 / 10; }
.feature .tag { margin: 1.3rem 0 0.6rem; font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oxblood); }
.feature h3 { font-size: var(--fs-h3); }
.feature p { margin: 0.5rem 0 1.1rem; font-size: var(--fs-small); line-height: 1.6; color: rgba(36,27,23,0.66); }
.feature .plate img { transition: transform 1.1s var(--ease); }
.feature:hover .plate img { transform: scale(1.05); }
.feature:hover .plate::after { opacity: 0.9; }

/* ---------- Counters (engraved register) ---------- */
.register { border-top: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne); }
.register-grid { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: clamp(2.6rem, 4vw, 3.6rem) 0; }
.register-grid > div { text-align: center; position: relative; padding: 0 1.2rem; }
.register-grid > div + div::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--champagne); }
.register-num { font-family: var(--serif); font-weight: 600; font-size: var(--fs-numeral); line-height: 1; color: var(--ink); font-feature-settings: "onum" 0, "lnum" 1, "tnum" 1; }
.section.obsidian .register-num, .register.obsidian .register-num { color: var(--champagne-lt); }
.register-tick { width: 32px; height: 1px; background: var(--champagne); margin: 1rem auto; }
.register-label { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oxblood); }
.section.obsidian .register-label { color: var(--champagne-lt); }

/* ---------- Leadership obsidian band ---------- */
/* Chairman band over the Abu Dhabi skyline */
#leadership {
  position: relative;
  aspect-ratio: 1672 / 941;                 /* full image, never cropped */
  display: flex; align-items: flex-end; justify-content: flex-end;   /* writeup -> bottom-right */
  padding: clamp(1.4rem, 3.5vh, 3.2rem) var(--gutter);
  text-shadow: 0 1px 16px rgba(0,0,0,0.6);
  background: url('hero/chairman-hero.webp') center / cover no-repeat, var(--ink-deep);
}
#leadership::after {                        /* darken only the bottom-right where the text sits */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(92% 82% at 100% 100%, rgba(8,6,5,0.64) 0%, transparent 60%),
    linear-gradient(180deg, transparent 58%, rgba(8,6,5,0.48) 100%);
}
.leadership {
  position: relative; z-index: 2;
  width: min(72%, 900px); text-align: left;
}
#leadership .leadership-copy { max-width: none; }
#leadership .eyebrow { display: none; }   /* drop -> 3 lines: 2-line quote + name */
#leadership blockquote { font-size: clamp(1.0rem, 1.4vw, 1.34rem); line-height: 1.36; max-width: none; text-align: left; }
#leadership .rule-punc { display: none; }
#leadership .attrib { margin-top: 0.8rem; display: flex; justify-content: flex-start; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
#leadership .attrib strong {
  font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.15; letter-spacing: 0.014em;
  background: linear-gradient(96deg, #f2deac 0%, #d9ba7a 40%, #c19a5b 72%, #f0dba0 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) drop-shadow(0 0 13px rgba(216,186,122,0.42));
  animation: nameSheen 7s ease-in-out infinite alternate;
}
@keyframes nameSheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
#leadership .attrib span { font-size: 0.72rem; color: var(--champagne-lt); }
@media (prefers-reduced-motion: reduce) { #leadership .attrib strong { animation: none; } }
@media (max-width: 760px) {
  #leadership { aspect-ratio: auto; min-height: 480px; background-position: 34% center; justify-content: flex-start; }
  .leadership { width: 100%; text-align: left; }
  #leadership blockquote { font-size: 1.1rem; text-align: left; }
  #leadership .attrib { justify-content: flex-start; }
}
.leadership .plate .emblem { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.leadership .plate .emblem img { width: 38%; max-width: 150px; opacity: 0.85; }
.leadership .plate .cap { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; z-index: 3; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne-lt); }
.leadership blockquote { margin: 0; font-family: var(--accent); font-variation-settings: "opsz" 72, "SOFT" 30; font-weight: 460; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.4; color: var(--paper); }
.leadership blockquote em { color: var(--champagne-lt); }
.leadership .attrib { margin-top: 1.8rem; }
.leadership .attrib strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--paper); }
.leadership .attrib span { font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--champagne-lt); }

/* ---------- School cards ---------- */
.schools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.4rem); }
.school { display: flex; flex-direction: column; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-dark); transition: transform 0.38s var(--ease), border-color 0.38s var(--ease); }
.school.featured { border-top: 1px solid var(--oxblood); }
.school:hover { transform: translateY(-4px); }
.school .plate { aspect-ratio: 5 / 4; border-top-right-radius: 60px; }
.school .plate::after { border-top-right-radius: 52px; }
.school-index { margin-top: 1.2rem; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--oxblood); font-feature-settings: "onum" 0, "lnum" 1, "tnum" 1; }
.school h3 { font-size: var(--fs-h3); margin-top: 0.2rem; }
.school .sub { margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oxblood); }
.school .divider { width: 100%; height: 1px; background: var(--champagne); margin: 1rem 0; position: relative; }
.school p { font-size: var(--fs-small); line-height: 1.6; color: rgba(36,27,23,0.68); }
.school .meta { margin-top: auto; padding-top: 1.1rem; display: flex; gap: 1.6rem; }
.school .meta strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.school .meta span { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(36,27,23,0.6); }

/* ---------- Admissions step register ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); }
.step { position: relative; padding: 0 1.2rem; text-align: center; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 50%; right: -50%; height: 1px; background: var(--champagne); }
.step .n { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 36px; height: 36px; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--oxblood); background: var(--paper); border: 1px solid var(--champagne); border-radius: 50%; margin-bottom: 1.2rem; }
.section.alt .step .n { background: var(--paper-2); }
.step h4 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; }
.step p { margin: 0.5rem 0 0; font-size: var(--fs-small); color: rgba(36,27,23,0.66); }

/* ---------- Split (spotlight / curriculum) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split.reverse > .split-media { order: 2; }
.split-media { aspect-ratio: 5 / 4; }
.split-list { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.split-list li { padding: 0.85rem 0; border-top: 1px solid var(--line-light); display: flex; gap: 0.9rem; align-items: flex-start; font-size: var(--fs-small); }
.section.obsidian .split-list li { border-color: rgba(201,168,106,0.3); }
.split-list .tick { flex: 0 0 auto; width: 18px; height: 1px; background: var(--champagne); margin-top: 0.7rem; }

/* ---------- CTA band ---------- */
.cta { text-align: center; }
.cta .eyebrow { display: inline-flex; }
.cta h2 { font-size: var(--fs-h1); max-width: 20ch; margin: 0 auto; }
.cta h2 em { color: var(--oxblood); }
.cta p { max-width: 54ch; margin: 1.3rem auto 0; color: rgba(36,27,23,0.74); font-size: var(--fs-lead); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; margin-top: 2.2rem; }
.cta .addr { margin-top: 1.6rem; font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(36,27,23,0.55); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-deep); color: var(--paper-82); position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--champagne); }
.footer-grid { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.6rem; padding: clamp(3.5rem, 6vw, 5rem) 0 2.6rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 1.2rem; }
.footer-logo { width: 52px; height: 52px; object-fit: contain; }
.footer-brand strong { font-family: var(--serif); font-size: 1.3rem; color: var(--paper); }
.footer-about p { color: var(--paper-60); max-width: 34ch; }
.footer-arabic { margin-top: 1rem; font-family: var(--serif); color: var(--champagne-lt); letter-spacing: 0.04em; }
.footer-grid h4 { color: var(--champagne-lt); font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 1.1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li + li { margin-top: 0.6rem; }
.footer-grid a { color: var(--paper-60); transition: color 0.25s var(--ease); }
.footer-grid a:hover { color: var(--champagne-lt); }
.footer-contact span { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne-lt); margin-top: 0.7rem; }
.footer-bottom { border-top: 1px solid rgba(201,168,106,0.3); }
.footer-bottom-inner { width: var(--shell); margin-inline: auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 0; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--paper-60); }

/* ---------- Demo chip (no red pulse) ---------- */
.demo-ribbon { position: fixed; bottom: 18px; right: 18px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(23,18,16,0.9); color: var(--paper); border: 1px solid var(--champagne); font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(8px); }
.demo-ribbon .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rule { transform: scaleX(1); transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .primary-nav { display: none; }
  .nav-toggle { display: block; }
  .primary-nav.open { display: flex; position: absolute; top: 100%; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0; padding: 0.6rem; background: var(--paper); border: 1px solid var(--champagne); border-radius: 4px; box-shadow: 0 30px 70px rgba(23,18,16,0.18); }
  .primary-nav.open a { padding: 0.85rem 0.8rem; }
  .editorial, .leadership, .split, .split.reverse { grid-template-columns: 1fr; gap: 2.4rem; }
  .split.reverse > .split-media { order: 0; }
  .sector-grid, .feature-grid, .schools-grid { grid-template-columns: repeat(2, 1fr); }
  .register-grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 0; }
  .register-grid > div:nth-child(odd)::before { display: none; }
  .steps { grid-template-columns: 1fr 1fr; gap: 2.4rem 1rem; }
  .step::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
  .hero-watermark { font-size: 30vw; opacity: 0.04; }
}
@media (max-width: 600px) {
  :root { --shell: calc(100% - 40px); --gutter: 20px; }
  .sector-grid, .feature-grid, .schools-grid, .register-grid, .steps, .footer-grid { grid-template-columns: 1fr; }
  .register-grid > div + div::before { display: none; }
  .register-grid > div + div { border-top: 1px solid var(--champagne); padding-top: 1.8rem; }
  .hero-stats { flex-wrap: wrap; gap: 1rem 0; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ghost, .gilt { width: auto; }
  .footer-bottom-inner { flex-direction: column; }
}