/* ═══════════════════════════════════════════════════════════════
   Kotaiba Abo Fakher -- Front Office
   Palette taken from Cheval Collection's live site:
     green #32433C · gold #E7A615 · warm white #FFFCF9
   Type: Bodoni Moda (display) + Mulish (Cheval's own body face)
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --green-deep: #1E2B26;
  --green:      #32433C;
  --green-soft: #4A5C54;

  --gold:       #E7A615;
  --gold-soft:  #C9A55C;
  --gold-ink:   #8A6410;   /* gold dark enough for small text on cream */

  --cream:      #FBF8F2;
  --white:      #FFFCF9;

  --ink:        #24262A;
  --ink-soft:   #5C615E;

  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --body:    "Mulish", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 68ch;

  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.5rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: clamp(5rem, 12vw, 11rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--green-deep); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-deep); color: var(--white);
  padding: 0.75rem 1.25rem; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ── Type primitives ───────────────────────────────────────── */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display--md { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.22; }
.display--lg { font-size: clamp(2.1rem, 5.4vw, 4.2rem); }
.display--xl { font-size: clamp(2.6rem, 8vw, 6.5rem); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
.eyebrow--light { color: var(--gold); }

/* keeps multi-word proper nouns intact when the line wraps on a phone */
.nb { white-space: nowrap; }
.sep { opacity: 0.55; margin-inline: 0.3em; }
.hero__eyebrow { line-height: 2.1; }

.light { color: var(--white); }
.center { text-align: center; }

.prose p {
  max-width: var(--measure);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  color: var(--ink-soft);
  margin-top: var(--s-4);
}

/* The gilt rule -- the one decorative device, used everywhere.
   Always drawn. It used to animate in on scroll, but that meant it was
   invisible until JavaScript said otherwise, which is not a trade worth making
   for a hairline. */
.rule {
  height: 1px;
  background: var(--gold);
  transform-origin: left center;
}
.rule--gold { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.center-rule { width: 5rem; margin: var(--s-5) auto 0; transform-origin: center; }

/* ── Layout ────────────────────────────────────────────────── */
.wrap {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--s-8); }
.section--cream { background: var(--cream); color: var(--ink); }
.section--deep  { background: var(--green-deep); color: var(--white); }
.section--gold-line { background: var(--white); border-block: 1px solid rgba(138, 100, 16, 0.18); }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  /* pulled 3px above the viewport and padded back down: a fixed bar snapped to
     top:0 can leave a hairline of the page behind it during scroll compositing,
     and on rounded-corner displays the gap shows at the corners */
  position: fixed; top: -3px; left: 0; right: 0; z-index: 100;
  padding-top: 3px;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 1.4rem var(--gutter);
  transition: padding 0.4s var(--ease);
}
.nav__mark { display: flex; flex-direction: column; line-height: 1.15; }
.nav__mark-name {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--white);
  transition: color 0.4s var(--ease);
}
.nav__mark-role {
  /* tighter than the other labels -- "Front Office Supervisor" is long, and at
     0.28em it crowded the nav links on narrow desktops */
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav__links a {
  position: relative;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--white);
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
/* scoped to beat `.nav__links a` on specificity rather than with !important */
.nav__links .nav__cta { border: 1px solid rgba(231, 166, 21, 0.5); padding: 0.55rem 1.1rem; }
.nav__links .nav__cta::after { display: none; }
.nav__links .nav__cta:hover { background: var(--gold); color: var(--green-deep); }

/* scrolled state */
.nav.is-stuck { background: var(--white); box-shadow: 0 1px 0 rgba(36, 38, 42, 0.08); }
.nav.is-stuck .nav__inner { padding-block: 0.9rem; }
.nav.is-stuck .nav__mark-name { color: var(--green-deep); }
.nav.is-stuck .nav__mark-role { color: var(--gold-ink); }
.nav.is-stuck .nav__links a { color: var(--green-deep); }
.nav.is-stuck .nav__links .nav__cta { border-color: rgba(50, 67, 60, 0.35); }
.nav.is-stuck .nav__links .nav__cta:hover { background: var(--green); color: var(--white); border-color: var(--green); }

/* burger */
.nav__burger { display: none; width: 44px; height: 44px; position: relative; }
.nav__burger span {
  position: absolute; left: 10px; right: 10px; height: 1px; background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.2s linear, background 0.4s var(--ease);
}
.nav__burger span:nth-child(1) { top: 19px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav.is-stuck .nav__burger span { background: var(--green-deep); }
.nav__burger[aria-expanded="true"] span { background: var(--white); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* mobile overlay */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--green-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-6);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
/* CRITICAL: `display: flex` above out-specifies the browser's own
   `[hidden] { display: none }`, which left this overlay laid over the whole
   page at opacity 0 -- invisible, but still catching every click and jumping
   to whichever section link sat under the cursor. */
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__links { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.menu__links a {
  font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2.4rem);
  color: var(--white);
}
.menu__links a:hover { color: var(--gold); }
.menu__foot {
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: var(--s-7) var(--gutter) clamp(3rem, 8vw, 6rem);
  background: var(--green-deep);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  /* Inlined 32px blur of the hero, ~500 bytes, so the first paint shows the
     lobby instead of a bare green panel while the 392KB photograph loads. */
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEBQH/xAAhEAEAAQMEAgMAAAAAAAAAAAABAAIREgMEITEFEyIyQf/EABYBAQEBAAAAAAAAAAAAAAAAAAEEAP/EABgRAQEBAQEAAAAAAAAAAAAAAAACASEx/9oADAMBAAIRAxEAPwDR06qgskEcvlF6W506+Cq7KMbgqSeu4on0ukcrnUXutzhTb8jaxKjHqSb8Kr0DyxnmNXdSeM+zNGpc+4QjQlwX2HMl8nwiQhGRT//Z);
  background-size: cover;
  background-position: center;
}
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* the slow crossfade and breathing zoom live in the Motion block at the end */

/* Two scrims, because the lobby photograph is bright: one at the crown so the
   nav and clock stay legible against white marble, one rising from the base to
   carry the name. The band between them is left almost clear -- that is where
   the gold ceiling and the marble columns are, and the whole point of the shot. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(30, 43, 38, 0.62) 0%, rgba(30, 43, 38, 0.24) 16%, rgba(30, 43, 38, 0) 34%),
    linear-gradient(to top, rgba(30, 43, 38, 0.96) 0%, rgba(30, 43, 38, 0.88) 22%, rgba(30, 43, 38, 0.52) 48%, rgba(30, 43, 38, 0.14) 72%, rgba(30, 43, 38, 0) 100%);
}

.hero__body { position: relative; width: min(1240px, 100%); margin-inline: auto; }
.hero__name {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--white);
  display: flex; flex-direction: column;
  font-size: clamp(3rem, 12.5vw, 10.5rem);
}
.hero__given { font-style: italic; font-weight: 400; }
.hero__family { text-indent: -0.04em; }

.hero__rule { width: min(100%, 22rem); margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.6rem); }
.hero__line {
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  color: rgba(255, 252, 249, 0.82);
  max-width: 38ch;
}

/* Page-load sequence -- transform only, never opacity.
   An opacity animation that is paused or unsupported leaves the element at
   zero, i.e. an invisible hero. Animating position instead means the worst
   case is text sitting 1.4rem lower than intended, still fully readable. */
.hero__body > * { animation: rise 1s var(--ease) both; }
.hero__body > .eyebrow { animation-delay: 0.15s; }
.hero__name { animation-delay: 0.3s; }
.hero__line { animation-delay: 0.7s; }

@keyframes rise { from { transform: translateY(1.4rem); } to { transform: none; } }

/* Signature: the desk never closes. */
.clock {
  position: absolute;
  right: var(--gutter); top: clamp(6rem, 14vh, 9rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem;
  text-align: right;
  /* sits high in the frame, where the marble is brightest */
  text-shadow: 0 1px 14px rgba(30, 43, 38, 0.9);
}
.clock__label,
.clock__zone {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}
.clock__zone { color: rgba(255, 252, 249, 0.55); letter-spacing: 0.2em; }
.clock__time {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.hero__down {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
}
.hero__down span {
  width: 1px; height: 26px; background: linear-gradient(var(--gold), transparent);
  animation: fall 2.4s var(--ease) infinite;
}
@keyframes fall { 0% { opacity: 0; transform: translateY(-8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ── Split section ─────────────────────────────────────────── */
.wrap--split {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
}
.split__aside .eyebrow { margin-top: 0.75rem; }

/* ── Portrait ──────────────────────────────────────────────── */
.portrait { padding-bottom: var(--s-8); }
.portrait__grid {
  display: grid;
  /* the photograph leads: the quote beside it is two lines and needs far less
     room than it was being given, which left the portrait looking shrunken */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.portrait__frame { position: relative; }
.portrait__plate { position: relative; }
.portrait__plate img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
}
/* scoped to the image alone. When this sat on .portrait__frame it spanned the
   figcaption too, and its left edge ran a vertical gold line down through the
   caption text. */
.portrait__plate::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(231, 166, 21, 0.45);
  transform: translate(14px, 14px);
  pointer-events: none;
}
.portrait__frame figcaption {
  margin-top: var(--s-4);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-ink);
}
.portrait__quote .display { color: var(--green); }
.portrait__quote .rule { width: 4rem; margin-top: var(--s-5); }

/* ── Tenets ────────────────────────────────────────────────── */
.tenets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--s-7);
}
.tenet__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  /* the darkened gilt, not the brand gold -- #E7A615 is only ~2:1 on white */
  color: var(--gold-ink);
}
.tenet .rule { width: 2.5rem; margin-block: var(--s-3) var(--s-4); }
.tenet p { color: var(--ink-soft); font-size: 0.98rem; }

/* the approach reads as an engraved plate: white, gilt hairlines, green heading.
   Suspended when the section is carrying a photograph instead. */
.approach:not(.section--photo) .display { color: var(--green-deep); }

/* The three standards are a set and should be readable together. Stacked in a
   half-width column they ran 1159px against a 900px viewport, which pushed
   Composure below the fold. Everything below buys that height back. */
.approach { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.approach .display--lg { font-size: clamp(1.9rem, 4.2vw, 3.3rem); }
.approach .tenets { gap: 1.6rem; margin-top: var(--s-5); }
.approach .tenet .rule { margin-block: 0.7rem 0.9rem; }
.approach .tenet p { line-height: 1.6; }
.approach .halfcol { width: min(100%, 58%); }

/* ── The House ─────────────────────────────────────────────── */
.house {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
/* landscape: the exterior is a wide architectural shot -- a portrait crop
   would cut the Al Wasl dome out of it */
.house__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }

.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
  border-top: 1px solid rgba(138, 100, 16, 0.25);
  padding-top: var(--s-5);
}
.fact dt {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-ink);
}
.fact dd {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--green); margin-top: 0.15rem;
}

/* ── Register ──────────────────────────────────────────────── */
.register { margin-top: var(--s-7); }
.entry {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(231, 166, 21, 0.28);
}
.entry:last-child { border-bottom: 1px solid rgba(231, 166, 21, 0.28); }
.entry__when {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
  padding-top: 0.5rem;
}
.entry__dash { color: rgba(255, 252, 249, 0.35); }
.entry__role {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--white);
}
/* the "acting Duty Manager" half of a title, set quieter than the role itself */
.entry__also {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
  margin-top: 0.5rem;
}
.entry__place {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 252, 249, 0.55);
  margin-top: 0.6rem;
}
.entry__note { color: rgba(255, 252, 249, 0.7); margin-top: var(--s-3); max-width: 56ch; font-size: 0.98rem; }

/* ── At the desk ───────────────────────────────────────────── */
.desk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: var(--s-7);
}
.desk__head {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-ink);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(138, 100, 16, 0.28);
}
.list { margin-top: var(--s-4); }
.list li {
  padding-block: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(36, 38, 42, 0.07);
}
.list--lang li { display: flex; justify-content: space-between; gap: 1rem; }
.desk__note { margin-top: var(--s-4); font-size: 0.95rem; color: var(--ink-soft); }
.list__level {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-ink); align-self: center;
}

/* ── Commendations ─────────────────────────────────────────── */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--s-6);
}
.quote { text-align: center; }
.quote blockquote p {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.45;
  color: var(--green);
  font-style: italic;
}
.quote blockquote::before {
  content: "”";
  display: block;
  font-family: var(--display);
  font-size: 3rem; line-height: 0.4; color: var(--gold);
  margin-bottom: 1.4rem;
}
.quote figcaption {
  margin-top: var(--s-4);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-ink);
}

/* the span matters more than any single quote -- he is named all year */
.quotes__note {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(138, 100, 16, 0.22);
  text-align: center;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-ink);
}

/* ── Contact ───────────────────────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--s-7);
  text-align: center;
}
.contact__item { display: flex; flex-direction: column; gap: 0.5rem; }
.contact__label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
}
.contact__item a, .contact__item span:last-child {
  font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--white); word-break: break-word;
}
.contact__item a { border-bottom: 1px solid rgba(231, 166, 21, 0.4); padding-bottom: 2px; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.contact__item a:hover { color: var(--gold); border-color: var(--gold); }

.contact__cta { text-align: center; margin-top: var(--s-7); }
.btn {
  display: inline-block;
  padding: 1rem 2.6rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { background: var(--gold); color: var(--green-deep); }

/* ── Photograph-backed sections ─────────────────────────────
   His own photographs behind the type, scrimmed in the brand green. Three
   variants: the default even wash, a left-weighted wash that clears the right
   of the frame so the photograph can actually be seen, and a near-opaque one
   for the register where the picture is only a texture. */
.section--photo {
  position: relative;
  background: var(--green-deep);
  color: var(--white);
}
.section--photo .section__bg { position: absolute; inset: 0; overflow: hidden; }
.section--photo .section__bg img { width: 100%; height: 100%; object-fit: cover; }
/* This frame crops ~43% off the width once the parallax scale is counted, and
   the figure stands at roughly 72-88% across. Centred, he loses an arm to the
   right edge; pushing the window right keeps him whole. */
.section--photo .section__bg img.bg-right { object-position: 82% center; }
.section--photo .section__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(30, 43, 38, 0.90) 0%,
    rgba(30, 43, 38, 0.84) 45%,
    rgba(30, 43, 38, 0.92) 100%);
}
.section--photo > .wrap { position: relative; z-index: 1; }

/* type inverted for the dark ground */
.section--photo .eyebrow            { color: var(--gold); }
.section--photo .display            { color: var(--white); }
.section--photo .prose p            { color: rgba(255, 252, 249, 0.80); }
.section--photo .tenet__title       { color: var(--gold); }
.section--photo .tenet p            { color: rgba(255, 252, 249, 0.76); }
.section--photo .quote blockquote p { color: var(--white); }
.section--photo .quote figcaption   { color: var(--gold); }
.section--photo .quotes__note {
  color: var(--gold);
  border-top-color: rgba(231, 166, 21, 0.30);
}

/* ── Variant: text left, photograph clear on the right ────── */
.section--photo--left .section__bg::after {
  /* holds ~0.9 past the right edge of the text column (which ends near 54% on
     a narrow desktop) before opening up, so no line ever runs onto bare photo */
  background: linear-gradient(to right,
    rgba(30, 43, 38, 0.95) 0%,
    rgba(30, 43, 38, 0.94) 46%,
    rgba(30, 43, 38, 0.86) 58%,
    rgba(30, 43, 38, 0.48) 72%,
    rgba(30, 43, 38, 0.16) 87%,
    rgba(30, 43, 38, 0.08) 100%);
}
.halfcol { width: min(100%, 54%); }

/* everything inside the half column runs as a single left-aligned stack */
.section--photo--left .tenets {
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.section--photo--left .quotes {
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.section--photo--left .quote,
.section--photo--left .quotes__note { text-align: left; }
.section--photo--left .quote blockquote::before { margin-bottom: 0.6rem; }
.section--photo--left .quotes__note { border-top-width: 1px; }

/* ── Variant: the register, where the photograph is only a texture ── */
.section--photo--dark .section__bg::after {
  background: linear-gradient(to bottom,
    rgba(30, 43, 38, 0.95) 0%,
    rgba(30, 43, 38, 0.93) 50%,
    rgba(30, 43, 38, 0.96) 100%);
}
/* he sits right of centre in the source, so hold that on wide viewports */
.section--photo--dark .section__bg img { object-position: 55% center; }

/* ── Footer ────────────────────────────────────────────────── */
.foot { background: var(--green); color: var(--white); padding-block: var(--s-5); }
.foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.foot__name { font-family: var(--display); font-size: 1.05rem; }
.foot__meta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

/* ── Scroll reveal: removed ────────────────────────────────
   This used to set .reveal { opacity: 0 } and wait for IntersectionObserver.
   If that observer never fired -- background tab, an environment that doesn't
   composite frames, any JS error earlier in the file -- the whole page stayed
   blank below the hero. Content is never worth gating behind an animation, so
   the class is now inert and everything renders from CSS alone. */

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  /* the hero text is bottom-anchored on a phone, so the clock cannot live down
     there too -- it sat on top of the name. Park it under the nav instead. */
  .clock { top: clamp(5rem, 13vh, 7.5rem); bottom: auto; right: var(--gutter); }
  .hero__down { display: none; }
  .wrap--split { grid-template-columns: 1fr; }
  .portrait__grid { grid-template-columns: 1fr; }
  .house { grid-template-columns: 1fr; }
  .house__media { order: -1; }
  .entry { grid-template-columns: 1fr; gap: 0.75rem; }
  .entry__when { padding-top: 0; }
  /* the lobby stays centred on a phone -- the symmetry is the point of the shot */
  /* no room to split left from right on a phone: go back to an even wash and
     let the half column run full width */
  .halfcol { width: 100%; }
  /* darker than desktop: text runs the full width here, so it crosses the
     bright part of the photograph rather than sitting in the shaded half */
  .section--photo--left .section__bg::after {
    background: linear-gradient(to bottom,
      rgba(30, 43, 38, 0.97) 0%, rgba(30, 43, 38, 0.94) 50%, rgba(30, 43, 38, 0.97) 100%);
  }
  .section--photo--dark .section__bg img { object-position: 62% center; }
}

@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .portrait__plate::after { transform: translate(8px, 8px); }
  .hero { min-height: 92svh; }
}

/* ── Motion ─────────────────────────────────────────────────
   Two rules govern this block:
   1. No element's visibility may depend on JavaScript or on an event firing.
      Hiding exists only inside keyframes, and the reveal keyframes are driven
      by scroll position itself (animation-timeline: view()), which cannot
      miss the way an observer callback can.
   2. Everything sits behind prefers-reduced-motion and @supports guards. A
      browser without scroll timelines simply shows the finished page, static.
   Kill every animation and the page is fully readable -- that invariant is
   tested after every change, not assumed. */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: one photograph, settling almost imperceptibly. No switching -- the
     lobby carries it alone. Delete this rule for a completely static hero. */
  .hero__frame { animation: hero-settle 34s ease-in-out infinite; }
  @keyframes hero-settle {
    0%   { transform: scale(1.045); }
    50%  { transform: scale(1); }
    100% { transform: scale(1.045); }
  }

  @supports (animation-timeline: view()) {

    /* Section wraps rise as they enter the viewport. */
    .reveal {
      animation: fx-rise both;
      animation-timeline: view();
      animation-range: entry 5% entry 32%;
    }
    @keyframes fx-rise {
      from { opacity: 0; transform: translateY(2.2rem); }
      to   { opacity: 1; transform: none; }
    }

    /* Finer grain: tenets, register rows, quotes, facts, desk columns and
       contact items cascade -- siblings start slightly later down the page. */
    .tenet, .entry, .quote, .fact, .desk__col, .contact__item, .quotes__note {
      animation: fx-rise both;
      animation-timeline: view();
      animation-range: entry 8% entry 42%;
    }
    .tenet:nth-child(2), .quote:nth-child(2), .fact:nth-child(2),
    .desk__col:nth-child(2), .contact__item:nth-child(2) { animation-range: entry 14% entry 50%; }
    .tenet:nth-child(3), .quote:nth-child(3), .fact:nth-child(3),
    .desk__col:nth-child(3), .contact__item:nth-child(3) { animation-range: entry 20% entry 58%; }
    .fact:nth-child(4), .contact__item:nth-child(4) { animation-range: entry 26% entry 64%; }

    /* The gilt rules draw themselves in. The hero rule keeps its own
       choreographed load timing, so it is excluded here. */
    .rule:not(.hero__rule) {
      animation: fx-rule both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    @keyframes fx-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Photograph-backed sections: the image drifts slower than the page.
       Kept to 1.10 / 3% -- at 1.15 / 4% the extra crop was cutting the figure
       out of the commendations background. */
    .section--photo .section__bg img {
      scale: 1.10;
      animation: fx-parallax linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
    @keyframes fx-parallax { from { transform: translateY(-3%); } to { transform: translateY(3%); } }

    /* The hero copy eases away as it hands over to the page. */
    .hero__body {
      animation: fx-hero-exit linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 75%;
    }
    @keyframes fx-hero-exit { to { opacity: 0; transform: translateY(-2rem); } }
  }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__media img { transform: none; }
}