/* ══════════════════════════════════════════════════════════════════
   د. بثينة حسن الأنصاري

   Rebuilt to the approved design project (Arabic RTL Homepage Design),
   eleven narrative topics across nine chapters. The design is authored at
   1920px with 100px gutters;
   every size here is that value as a clamp() max, scaled by vw, with a
   floor that holds at 360px. No fixed artboards, no absolute sections.

   Type: Tajawal only, across the whole interface. Latin counters, dates
   and compact utility labels use the same family, set in tabular figures
   with wider tracking so they still read as technical marks.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --ink-deep:      #0E0C0B;
  --ink:           #14100E;
  --ink-soft:      #1D1815;

  --paper:         #F7F3EC;
  --paper-hi:      #FBF8F3;
  --paper-warm:    #F8F4EE;

  --burgundy:      #8A1538;
  --burgundy-deep: #5B0E2B;
  --rose:          #D3A3AB;
  --rose-pale:     #EBC9CE;

  --on-paper:      #14100E;
  --on-paper-mute: #6B625A;
  --on-paper-soft: #5C544D;
  --ghost:         #E3DACD;
  --line-paper:    #DDD3C4;

  --content-max: 1720px;
  --hero-max:    2240px;
  --gutter:  clamp(20px, 5.21vw, 100px);
  --hero-gutter: var(--gutter);
  --ease:    cubic-bezier(.22, .61, .36, 1);
}

/* ── reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Pinned desktop chapters already reserve clear space beneath the
     floating navigation, so their anchors should retain the full viewport. */
  scroll-padding-block-start: 0;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--on-paper);
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  /* 400, not 300: with one family left, reading-size text can no longer
     borrow weight from a second face. Display sizes re-assert 300 below. */
  font-weight: 400;
  font-size: clamp(15px, 1.04vw, 20px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* The preloader is a short branded hand-off, never a blocking spinner. */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink-deep); color: var(--paper-hi);
  opacity: 1; visibility: visible;
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
}
html:not(.js) .preloader { display: none; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__logo { width: min(280px, 58vw); height: auto; }
.preloader__progress {
  position: absolute; inset-block-end: 12vh;
  width: 72px; height: 2px; overflow: hidden;
  background: rgba(244,239,232,.18);
}
.preloader__progress::after {
  content: ''; display: block; width: 45%; height: 100%;
  background: var(--crimson); transform: translateX(-220%);
  animation: preloader-progress 1.1s var(--ease) infinite;
}
@keyframes preloader-progress { to { transform: translateX(320%); } }

h1, h2, h3 { margin: 0; font-weight: 300; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* form controls do not inherit type by default: without this the menu button,
   the contact form and the video dialog's close control render Arabic in the
   UA's Arial. */
button, input, select, textarea { font: inherit; }
main:focus { outline: none; }

.ltr  { unicode-bidi: isolate; direction: ltr; }
.numeral { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .08em; }

.shell { padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--burgundy); outline-offset: 4px;
}
.hero :where(a):focus-visible,
.thesis :where(a):focus-visible,
.closing :where(a):focus-visible,
.feature:focus-visible { outline-color: var(--rose); }

.skip-link {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
  z-index: 200; transform: translateY(-200%);
  background: var(--paper); color: var(--ink);
  padding: 12px 20px; font-size: 15px;
}
.skip-link:focus { transform: translateY(0); }

/* ══ CHROME: floating nav ═════════════════════════════════════ */
.navbar {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 100;
  display: flex; justify-content: center;
  padding-block-start: 34px;
  transition: padding-block-start .4s var(--ease);
  pointer-events: none;
}
.navbar.is-stuck { padding-block-start: 20px; }

.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border-radius: 4px;
  background: rgba(20, 16, 14, .42);
  backdrop-filter: blur(10px);
  transition: background-color .5s var(--ease);
  max-width: calc(100% - 2 * var(--gutter));
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 clamp(12px, 1.15vw, 22px);
  border-radius: 3px;
  font-size: clamp(13px, .94vw, 18px);
  color: #FFF;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .5s var(--ease);
}
.nav a:hover { background: rgba(255, 255, 255, .09); }
.nav a[aria-current='true'] { background: rgba(255, 255, 255, .14); }
.nav .nav__contact {
  margin-inline-start: 4px;
  border: 1px solid rgba(255,255,255,.34);
}

/* over a light chapter the bar inverts */
.navbar.on-light .nav { background: rgba(255, 255, 255, .7); }
.navbar.on-light .nav a { color: var(--ink); }
.navbar.on-light .nav a:hover { background: rgba(20, 16, 14, .07); }
.navbar.on-light .nav a[aria-current='true'] { background: rgba(20, 16, 14, .1); }
.navbar.on-light .nav .nav__contact { border-color: rgba(20,16,14,.28); }

/* ══ 1 · IDENTITY ══════════════════════════════════════════════ */
.hero { position: relative; background: var(--ink-deep); }
.js .hero { height: 145svh; }              /* 100svh pinned + 45svh of travel */

.hero__stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--ink-deep);
}
.js .hero__stage { position: sticky; inset-block-start: 0; }

.hero__img { position: absolute; inset: 0; transform-origin: 70% 42%; will-change: transform; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 38%; }

.hero__stage::after {          /* legibility scrim over the photo's own dead space */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to left, rgba(14,12,11,0) 30%, rgba(14,12,11,.55) 62%, rgba(14,12,11,.86) 92%),
    linear-gradient(to top, rgba(14,12,11,.5) 0%, rgba(14,12,11,0) 40%);
}

.hero__mark {
  position: absolute; inset-block-start: 34px; inset-inline-start: var(--hero-gutter);
  z-index: 30;
}
.hero__mark img { height: clamp(46px, 4.11vw, 79px); width: auto; }

.hero__copy {
  position: absolute; z-index: 20;
  inset-inline-end: var(--hero-gutter);
  inset-block-start: clamp(190px, 25svh, 320px);
  width: min(620px, 46vw);
  text-align: start;
  transform-origin: top right;
  will-change: transform;
}
.hero__name {
  font-weight: 200;
  font-size: clamp(44px, 6.25vw, 110px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #FFF;
}
.hero__sub {
  margin-block-start: clamp(24px, 2.4vw, 46px);
  display: flex; flex-direction: column; gap: clamp(18px, 1.5vw, 28px);
  align-items: flex-start;
}
.hero__kicker { margin: 0; line-height: 1.35; }
.hero__kicker-rule { display: block; height: 2px; }
.hero__eyebrow { margin: 0; font-size: clamp(15px, 1.35vw, 26px); color: #FFF; line-height: 1.5; }
.hero__action {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px; padding-block: 8px;
  border-block-end: 1px solid rgba(255,255,255,.46);
  font-size: clamp(13px, .89vw, 17px); color: rgba(255,255,255,.86);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.hero__action:hover { color: #FFF; border-color: #FFF; gap: 20px; }
.hero__action:active { transform: translateY(1px); }

/* ══ OPENING BRIDGE · PROOF + ENGAGEMENT PATHS ════════════════ */

/* ══ 2 · CURRENT STANDING ══════════════════════════════════════ */
.standing { position: relative; background: var(--paper); }
.js .standing { height: 280svh; }          /* four evenly paced institutional stories */

.stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
  padding-inline: var(--gutter);
}
.js .stage { position: sticky; inset-block-start: 0; }

/* ══ 3 · POINT OF VIEW ═════════════════════════════════════════ */
.thesis {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--paper-hi);
  padding: clamp(90px, 9.38vw, 180px) var(--gutter) clamp(90px, 8.85vw, 170px);
}
.thesis__quote { position: relative; text-align: start; }
.thesis__quote blockquote {
  font-weight: 300;
  font-size: clamp(26px, 5.21vw, 100px);
  line-height: 1.32;
  color: var(--paper-hi);
  text-wrap: pretty;
}
.thesis__quote figcaption {
  margin-block-start: clamp(24px, 3.02vw, 58px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px clamp(12px, 1.04vw, 20px);
}
.thesis__name { font-size: clamp(16px, 1.2vw, 23px); color: var(--paper-hi); }
.thesis__role { font-size: clamp(13px, .94vw, 18px); color: rgba(244,239,232,.6); }

.territories {
  position: relative;
  margin-block-start: clamp(56px, 7.29vw, 140px);
  display: flex; gap: clamp(28px, 4.17vw, 80px); align-items: flex-start;
}
.territories > li { flex: 1 1 0; text-align: start; }
.territories h3 {
  margin-block-start: 0;
  font-size: clamp(21px, 2.4vw, 46px);
  line-height: 1.22; letter-spacing: -.02em; color: var(--paper-hi);
}
.territories p {
  margin-block-start: clamp(12px, 1.25vw, 24px);
  max-width: 400px;
  font-size: clamp(14px, .99vw, 19px); line-height: 1.75; color: rgba(244,239,232,.62);
}

/* ══ 4 · RETIRED 5 Sep 2026 · the standalone ESG Qatar 2026 chapter
   stood here. The event was consolidated into the ESG card inside
   #standing, so this stylesheet no longer carries a ticket layout, a
   reading axis or a countdown. The card and its compact lifecycle row
   are declared in design-system.css, in the #standing block. */

/* ══ 5 · WRITING ═══════════════════════════════════════════════ */
.writing { background: var(--paper); color: var(--ink); padding-block: clamp(88px, 8.3vw, 160px) clamp(82px, 7.3vw, 140px); }

/* ══ 6 · KNOWLEDGE ═════════════════════════════════════════════ */
.knowledge { position: relative; background: var(--ink); color: var(--paper-hi); }
.js .knowledge { height: 170svh; }
.story-kicker { font-size: clamp(14px, .99vw, 19px); color: var(--rose); }
.story-link {
  margin-block-start: clamp(28px, 2.92vw, 56px); min-height: 44px;
  display: inline-flex; align-items: center; gap: 12px;
  border-block-end: 1px solid var(--burgundy); color: var(--paper-hi);
  font-size: clamp(15px, .99vw, 19px); transition: color .3s var(--ease), transform .3s var(--ease);
}
.story-link:hover { color: var(--rose); transform: translateY(-2px); }
.story-link:active { transform: translateY(1px); }

/* ══ 7 · CAREER ════════════════════════════════════════════════
   One panoramic composition authored at 1680×940: every position below is
   a percentage of that canvas, so the scene scales as a single image
   instead of a set of independently clamped offsets. */
.career { position: relative; background: var(--paper); }
/* The reference is a lit room, not a flat sheet: warm daylight enters high on
   the left and washes across the wall. These are three additive radial washes
   painted straight onto the scene over var(--paper) - every stop is LIGHTER
   than the paper (max delta ~5/255), so the light reads without ever becoming
   a panel edge or a dark vignette. The scene has no foreground children of its
   own, so text and cards sit above this and are untouched. */
.career__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1680 / 940;
  overflow: hidden;
  background:
    radial-gradient(78% 64% at 16% -6%, rgba(255, 251, 242, .62) 0%, rgba(255, 251, 242, 0) 68%),
    radial-gradient(54% 48% at 58% 2%, rgba(255, 250, 240, .34) 0%, rgba(255, 250, 240, 0) 72%),
    radial-gradient(62% 42% at 88% 30%, rgba(255, 249, 238, .26) 0%, rgba(255, 249, 238, 0) 74%),
    var(--paper);
}
/* The scene carries NO background raster. The marble floor plate that used to
   close it was removed on 2026-09-03 in favour of a CSS-only vertical wash in
   design-system.css; 19.68% of the 940px reference canvas is still where
   .career__milestones ends (inset-block-end: 19.68%). */
.career__inner { position: absolute; inset: 0; }

/* The intro's RTL start (physical right) edge is the page's shared side gutter,
   not a scene-local percentage: the heading now lines up with every other
   section's right edge instead of the old asymmetric milestone inset. */
.career__intro {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: 6.4%;
  width: min(44%, 640px);
  z-index: 3;
  text-align: start;
}
/* The career label and title carry no per-section rule at all: type, measure
   and vertical rhythm come from the CANONICAL CHAPTER HEADING SYSTEM in
   design-system.css, and heading rules/bars are barred by that same contract. */

/* Equal shared gutter on both physical sides, so the milestone field is centred
   in the viewport and flush with the rest of the page's side rhythm. The inset
   is symmetric, so the local `direction: ltr` below cannot skew it. */
.career__milestones {
  position: absolute;
  inset-inline: var(--gutter);
  inset-block: 23.94% 19.68%;
  z-index: 2;
  /* Five equal flex tracks at rest. On desktop hover the active track grows
     and the four siblings reflow narrower inside this same width, so nothing
     ever overlaps a neighbouring card. */
  display: flex;
  align-items: stretch;
  /* Physical left-to-right order is deterministic regardless of document
     direction: QU, Ooredoo, QIA, Nottingham Trent, Northumbria. */
  direction: ltr;
}
.career-slide {
  position: relative;
  height: 100%;
  /* flex-basis 0 with no inline padding keeps the five tracks exactly equal;
     any padding would be added to the flex base size and skew the ratio. */
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.career-slide + .career-slide { position: relative; }
/* Reference: the dividers run the full height of the milestone field - from its
   very top, straight down over the photographs, to the floor line. They are
   pinned to the slide box, so they reflow with the hover flex tracks, and sit
   above the photo surfaces (z 0). */
.career-slide + .career-slide::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  width: 1px;
  z-index: 2;
  background: var(--line-paper);
}

.career-slide__marker {
  width: 7px; height: 7px; flex: 0 0 auto;
  margin-block-end: clamp(12px, 1.25vw, 20px);
  background: var(--burgundy); transform: rotate(45deg);
}
.career-slide time {
  display: block; margin-block-end: clamp(12px, 1.25vw, 20px);
  font-size: clamp(16px, 1.15vw, 20px); letter-spacing: .06em; color: var(--burgundy);
}
.career-slide__logo {
  display: block; max-width: 88%; width: auto;
  max-height: clamp(32px, 2.9vw, 52px); height: auto;
  object-fit: contain; object-position: right center;
}
.career-slide h3 {
  margin-block-start: clamp(10px, 1vw, 18px);
  max-width: min(100%, 260px);
  margin-inline: auto;
  align-self: center;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  color: var(--on-paper-soft);
}
.career-slide__photo {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  overflow: hidden;
}
/* No overlay pseudo-element anywhere, and nothing is painted over the subject:
   the photographs are background-extracted cutouts, so the card needs no fade
   to hide a sky edge. */
.career-slide__photo::before { content: none; }
.career-slide__photo img {
  width: 100%; height: 100%;
  /* SUBJECT-ONLY: five of the six sources are alpha cutouts on a transparent
     1160x1300 canvas, so the image is contained (never cropped) and stands on
     the bottom edge of its cell like a building stands on the ground. */
  object-fit: contain; object-position: center bottom;
  opacity: 1;
  filter: saturate(.92) contrast(1.02);
  transform-origin: center bottom;
}

/* RETIRED 2026-09-04 - the top alpha dissolve. It existed to stop a rectangular
   photograph meeting the year/logo/title block on a hard seam. There is no
   rectangle any more: the runtime sources carry their own alpha and the sixth
   (Qatar National Library) is clipped to its architectural silhouette, so a
   gradient mask would only fade the buildings it used to protect. No
   `mask-image` / `-webkit-mask-image` is set on a Career photograph at any
   width or in any state; search `--career-photo-mask` in design-system.css and
   it is gone from there too. */

/* Resting vs. active photographic composition, without re-cutting a single
   source file. The resting card holds its subject a hair back; the expanded
   card brings it to full size. Scale never exceeds 1, and the origin is the
   image's own bottom edge, so growth can never push a roof out of the top of
   the frame nor lift a base off the bottom of it. */
@media (min-width: 900px) {
  /* Transparent, not a flat var(--paper) fill: a solid wrapper surface would
     be exactly the extra flat plane whose edge showed up as a seam. */
  .career-slide__photo { background: transparent; }
  .career-slide__photo img {
    transform: scale(.98);
    transition:
      transform 560ms var(--ease),
      object-position 560ms var(--ease);
  }
}

/* ── CANONICAL DESKTOP CAREER PLACEMENT ────────────────────────
   The single source of truth for desktop milestone geometry. Pixel offsets are
   measured from each .career-slide's own top edge (.career__milestones starts
   at scene y = 23.94% = 225px) against the visual reference. All five cards share one
   resting chronology grid - marker 108px, year 133px, logo centre 217px, title
   273px - so the row reads as a single timeline; only the hovered/focused card
   is elevated, and that lives in the single hover block below so no later rule
   can drag the resting five off that grid.
   Breakpoint is 900px, matching the mobile block's max-width: 899px, so the two
   never overlap and cascade order cannot silently decide the layout. */
@media (min-width: 900px) {
  .career-slide > .career-slide__marker,
  .career-slide > time,
  .career-slide > .career-slide__logo,
  .career-slide > h3 {
    position: absolute;
    margin: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    /* Above the photo surface (z 0) and its paper top fade (z 1), so a resting
       title that overlaps the sky wash stays readable. */
    z-index: 3;
    transition:
      inset-block-start 560ms var(--ease),
      opacity 560ms var(--ease);
  }

  .career-slide > .career-slide__marker {
    transform: translateX(-50%) rotate(45deg);
  }

  /* Resting rhythm - ONE chronology grid shared by all five cards. The diamond,
     the year and the title each sit on a single horizontal across the row, so
     the row reads as one timeline rather than two staggered groups.
     The logos cannot use a shared top edge, because their intrinsic heights
     differ (74/30/66/54/66px): a common top would leave the short wordmarks
     riding high and the tall crests hanging low. They are aligned on a shared
     visual CENTRE line instead - --career-logo-center is the single number to
     move, and each card declares only its own --career-logo-height, from which
     the top offset is derived. Add a sixth card by giving it that one token.
     These selectors are deliberately shallow (no :nth-child), so the active
     hover / :focus-visible offsets further down still win on specificity. */
  .career__milestones { --career-logo-center: 217px; }

  .career-slide > .career-slide__marker { inset-block-start: 108px; }
  .career-slide > time { inset-block-start: 133px; }
  .career-slide > .career-slide__logo {
    inset-block-start: calc(var(--career-logo-center) - var(--career-logo-height) / 2);
  }
  .career-slide > h3 { inset-block-start: 273px; }

  .career-slide__logo {
    max-width: none;
    max-height: none;
    /* Declared once, from the same token the centre calculation reads, so a
       height can never drift out of sync with the offset derived from it. */
    height: var(--career-logo-height);
  }
  .career-slide:nth-child(1) { --career-logo-height: 74px; }
  .career-slide:nth-child(2) { --career-logo-height: 30px; }
  .career-slide:nth-child(3) { --career-logo-height: 66px; }
  .career-slide:nth-child(4) { --career-logo-height: 54px; }
  .career-slide:nth-child(5) { --career-logo-height: 66px; }
  .career-slide:nth-child(1) > .career-slide__logo { width: 83px; }
  .career-slide:nth-child(2) > .career-slide__logo { width: 132px; }
  .career-slide:nth-child(3) > .career-slide__logo { width: 264px; }
  .career-slide:nth-child(4) > .career-slide__logo { width: 189px; }
  .career-slide:nth-child(5) > .career-slide__logo { width: 149px; }

  .career-slide:nth-child(1) > h3 { width: 190px; max-width: 190px; }
  .career-slide:nth-child(2) > h3 { width: 150px; max-width: 150px; }
  .career-slide:nth-child(3) > h3 { width: 300px; max-width: 300px; }
  .career-slide:nth-child(4) > h3 { width: 190px; max-width: 190px; }
  .career-slide:nth-child(5) > h3 { width: 175px; max-width: 175px; }

  /* The photo field starts below the deepest resting title band. */
  .career-slide > .career-slide__photo { inset-block-start: 38.68%; }
}

/* The credential pill is centred inside the shared career composition: a
   symmetric 16.22% inset keeps its existing 67.56% width while removing the old
   left/right imbalance, and needs no transform to do it. It is deliberately
   narrower than the gutter-wide milestone field - the pill is a floating badge,
   not a full-width band. */
.career__rail {
  position: absolute;
  inset-inline: 16.22%;
  inset-block-start: 84.04%;
  inset-block-end: 3.72%;
  z-index: 4;
}
.career__credentials {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  padding-inline: clamp(20px, 2vw, 34px);
  border-radius: 999px;
  background: rgba(251, 248, 243, .82);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 20px 46px rgba(55, 42, 32, .12), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.career__credentials li {
  width: auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.career__credentials li:first-child { padding-inline-start: 0; }
.career__credentials li:last-child { padding-inline-end: 0; }
.career__credentials li + li { border-inline-start: 1px solid var(--line-paper); }
.career__credentials strong,
.career__credentials li > span { display: block; }
.career__credentials strong { font-size: clamp(13px, .9vw, 17px); line-height: 1.4; font-weight: 400; color: var(--ink); }
.career__credentials li > span { margin-block-start: 0px; font-size: clamp(11px, .72vw, 14px); line-height: 1.4; color: var(--on-paper-mute); }
/* Visual reference: each qualification cell is a centred three-line stack -
   award, then institution, then year, each on its own line. The metadata used to
   be one line joining institution and year with a middle dot; it is now two
   labelled spans, so the dot is gone without a <br> and without editing a single
   character of the text. Centring is desktop-only: below 900px the pill becomes
   a stacked list whose header and rows share one start-aligned edge. */
@media (min-width: 900px) {
  .career__credentials .career__credential { align-items: center; text-align: center; }
}
.career__credentials .career__credential-year { margin-block-start: 2px; }
.career__credentials-head {
  flex-direction: row !important; align-items: center !important;
  gap: clamp(10px, 1vw, 16px);
  /* Superseded at every width by the single head rule in design-system.css
     (`#career .career__credentials li.career__credentials-head`), which sets
     clamp(15.4px, 1.036vw, 18.2px) / 700. Kept only as the component's own
     base tier for this stylesheet in isolation; do not tune it here. */
  font-size: clamp(13px, .96vw, 18px);
  color: var(--ink);
}
.career__credentials-icon { flex: 0 0 auto; width: clamp(20px, 1.6vw, 28px); height: auto; color: var(--burgundy); }

/* ══ 8 · PROGRAMS ══════════════════════════════════════════════ */

/* ══ 9 · ADVISORY ══════════════════════════════════════════════ */

/* static fallback: every narrative state remains readable without JavaScript */

/* ══ 10 · CLOSING ══════════════════════════════════════════════ */
.closing { background: var(--ink-deep); color: var(--paper-hi); }
@media (min-width: 1100px) {
  .closing__top {
    display: grid;
    grid-template-columns: minmax(0, 3.7fr) minmax(260px, 1.3fr);
    grid-template-areas: "navs identity";
    align-items: start;
    gap: clamp(44px, 5vw, 88px);
    padding-block-start: clamp(96px, 12vh, 150px);
    border-block-start: none;
  }
}
.closing__top {
  border-block-start: 1px solid rgba(244,239,232,.14);
  padding-block: clamp(72px, 7.81vw, 150px) clamp(56px, 6.25vw, 120px);
}

.closing__identity {
  grid-area: identity;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}
.closing__mark { height: clamp(52px, 5.21vw, 100px); width: auto; }
.closing__territories { margin-block-start: clamp(18px, 1.77vw, 34px); font-size: clamp(14px, 1.09vw, 21px); color: rgba(244,239,232,.62); }

.closing__icons {
  margin-block-start: clamp(18px, 2.1vw, 26px);
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.closing__navs {
  grid-area: navs;
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
.closing__navs .closing__nav-column + .closing__nav-column {
  border-inline-start: none;
}
@media (min-width: 1100px) {
  .closing__navs .closing__nav-column + .closing__nav-column {
    border-inline-start: 1px solid rgba(244, 239, 232, .12);
  }
}

/* Same policy for the legal row: no top hairline. The page ends on space. */
.closing__base {
  padding-block: 34px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: clamp(13px, .83vw, 16px); color: rgba(244,239,232,.55);
}
.closing__base .numeral { font-size: 13px; letter-spacing: .14em; }

/* ══ LARGE VIEWPORTS ════════════════════════════════════════════
   Keep the 1920px art direction as a centered editorial canvas on
   2K, ultrawide and 4K displays. The hero remains independently
   framed and full-bleed so the portrait never feels boxed in. */
@media (min-width: 1921px) {
  :root {
    --gutter: max(100px, calc((100vw - var(--content-max)) / 2));
    --hero-gutter: max(100px, calc((100vw - var(--hero-max)) / 2));
  }

  .navbar { padding-block-start: clamp(42px, 4.4svh, 78px); }
  .navbar.is-stuck { padding-block-start: clamp(20px, 1.5svh, 32px); }

  .hero__mark { inset-block-start: clamp(34px, 3svh, 64px); }
  /* the hero name is sized in design-system.css, which loads last */
  .hero__copy { inset-block-start: clamp(280px, 24svh, 430px); width: min(620px, 24vw); }
}

/* Desktop career placement is defined once, in the CANONICAL DESKTOP CAREER
   PLACEMENT block in section 7. The duplicate copy that used to live here - and
   the blanket ":nth-child(n + 1)" override that forced all five cards into the
   elevated/active geometry - were removed; only the hover block below may move
   a card off its resting rhythm. */

/* --- desktop hover: column reflow, never overlap ---
   The whole milestone column is the active unit. The hovered slide takes a
   larger flex-grow, so it widens and the four siblings are pushed and
   narrowed inside the same .career__milestones width. The photo stays at
   inset-inline: 0 within its own slide at all times, so no photo bounding
   box can ever cross into a neighbouring card. Growth is symmetric about
   the middle card, whose centre coordinate is therefore unchanged.
   The whole .career-slide is the hover target, and hover is the ONLY input
   that reaches it: nothing gates these rules, because nothing else in the
   chapter competes for the same composition. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .career-slide {
    transition: flex-grow 560ms cubic-bezier(.22, .61, .36, 1);
  }
  .career-slide__photo img {
    transition:
      transform 560ms cubic-bezier(.22, .61, .36, 1),
      object-position 560ms cubic-bezier(.22, .61, .36, 1);
  }

  /* 1.72 against four 1.0 siblings: at 1680px the 1450px track band goes
     290px x 5 at rest -> 436px active + 253px x 4 on hover. */
  .career-slide:hover { flex-grow: 1.72; }

  /* The reference's middle card is this active state: the diamond drops away
     and year / logo / title lift to the top of the milestone field. Selectors
     are two classes deeper than the shallow resting rules, so the active
     geometry wins on specificity rather than on source order - including the
     logo, whose flat 57px top beats the resting centre calc(). Offsets stay
     centred on the card because the elements are pinned at 50% of their own
     growing column. */
  .career__milestones > .career-slide:hover > .career-slide__marker { opacity: 0; }
  .career__milestones > .career-slide:hover > time { inset-block-start: 15px; }
  .career__milestones > .career-slide:hover > .career-slide__logo { inset-block-start: 57px; }
  .career__milestones > .career-slide:hover > h3 { inset-block-start: 142px; }
  /* The subject simply arrives at full size: scale returns to 1 (never past
     it), the anchor stays bottom-centre, and the contained image can therefore
     neither lose its roof off the top nor its base off the bottom. */
  .career-slide:hover .career-slide__photo img {
    transform: scale(1);
    object-position: center bottom;
  }
}

/* --- keyboard parity: the same whole-column expansion, without a pointer ---
   The cards carry information, not destinations, so they stay <li> with
   tabindex="0" rather than becoming links. :focus-visible (never :focus-within,
   which would latch on any descendant and cannot be cleared by the card itself)
   reproduces the hover state exactly: same 1.72 grow, same three offsets, same
   lifted photo - so keyboard and pointer land on one identical geometry with
   no second set of numbers to keep in sync.
   Deliberately NOT gated on (hover: hover) and (pointer: fine): a keyboard user
   on a touch-capable laptop still needs the desktop behaviour. */
.career-slide:focus-visible {
  /* Outline, not border/box-shadow: it is drawn outside layout entirely, so the
     ring can never nudge the flex tracks. Negative offset keeps it inboard of
     the divider hairlines instead of doubling them. */
  outline: 1px solid rgba(138, 21, 56, .45);
  outline-offset: -3px;
}

@media (min-width: 900px) {
  .career-slide { transition: flex-grow 560ms var(--ease); }

  .career-slide:focus-visible { flex-grow: 1.72; }

  .career__milestones > .career-slide:focus-visible > .career-slide__marker { opacity: 0; }
  .career__milestones > .career-slide:focus-visible > time { inset-block-start: 15px; }
  .career__milestones > .career-slide:focus-visible > .career-slide__logo { inset-block-start: 57px; }
  .career__milestones > .career-slide:focus-visible > h3 { inset-block-start: 142px; }

  .career-slide:focus-visible .career-slide__photo img {
    transform: scale(1);
    object-position: center bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-slide,
  .career-slide__photo,
  .career-slide__photo img,
  .career-slide > .career-slide__marker,
  .career-slide > time,
  .career-slide > .career-slide__logo,
  .career-slide > h3 { transition: none; }
}

/* ══ RESPONSIVE ════════════════════════════════════════════════
   Below 900px nothing is pinned. The hero becomes an image block with
   copy beneath, and the Standing stepper becomes four stacked entries,
   which is also the reduced-motion and no-JS rendering at every width.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  html { scroll-padding-block-start: 88px; }

  /* --- hero unpinned --- */
  .js .hero, .hero { height: auto; }
  .hero__stage, .js .hero__stage { position: relative; height: auto; inset-block-start: auto; }
  .hero__img { position: relative; inset: auto; transform: none !important; }
  .hero__img img { height: clamp(340px, 56svh, 560px); object-position: 66% 24%; }
  .hero__stage::after {
    inset-block-end: auto; height: clamp(340px, 56svh, 560px);
    background: linear-gradient(to top, var(--ink-deep) 2%, rgba(14,12,11,.15) 46%, rgba(14,12,11,0) 76%);
  }
  .hero__mark { inset-block-start: 84px; }
  .hero__mark img { height: 44px; }
  .hero__copy {
    position: static; width: auto; transform: none !important;
    padding: clamp(24px, 5vw, 40px) var(--gutter) clamp(40px, 8vw, 64px);
  }

  /* --- standing unpinned: four stacked entries --- */
  .js .standing, .standing { height: auto; }
  .stage, .js .stage {
    position: relative; height: auto; inset-block-start: auto; overflow: visible;
    padding-block: clamp(72px, 12vw, 110px);
  }

  /* --- the rest --- */
  .territories { flex-direction: column; gap: 0; }
  .territories > li { padding-block: clamp(22px, 5vw, 32px); border-block-end: 1px solid rgba(244,239,232,.14); }
  .territories p { max-width: none; }

  /* --- Knowledge unpinned: complete static narrative --- */
  .js .knowledge, .knowledge { height: auto; }

  /* --- Career: one stacked accessible translation, never pinned --- */
  .career__scene { aspect-ratio: auto; }
  .career__inner { position: static; padding: clamp(56px, 11vw, 88px) var(--gutter) clamp(64px, 12vw, 96px); }
  .career__intro { position: static; inset: auto; width: auto; margin-block-end: clamp(40px, 8vw, 64px); }
  .career__milestones {
    position: static; inset: auto;
    display: grid; grid-template-columns: 1fr; gap: 0;
  }
  .career-slide {
    height: auto;
    padding-inline: 0;
    padding-block: clamp(32px, 7vw, 48px);
    flex-direction: row; flex-wrap: wrap;
    align-items: center;
    column-gap: clamp(18px, 4vw, 28px);
  }
  .career-slide + .career-slide { border-inline-start: 0; border-block-start: 1px solid var(--line-paper); }
  .career-slide + .career-slide::before { content: none; }
  .career-slide__marker { order: 1; margin-block-end: 0; }
  .career-slide time { order: 2; margin-block-end: 0; }
  .career-slide__logo { order: 3; max-height: 40px; max-width: 46%; margin-inline-start: auto; }
  .career-slide h3 {
    order: 4; flex: 1 1 100%;
    margin-block-start: clamp(14px, 3vw, 20px);
    font-size: clamp(17px, 4.4vw, 20px);
    max-width: none;
    margin-inline: 0;
    align-self: auto;
    text-align: start;
  }
  .career-slide__photo {
    position: relative;
    inset: auto;
    order: 5; flex: 1 1 100%;
    margin-block-start: clamp(18px, 4vw, 26px);
    aspect-ratio: 4 / 3;
    border-radius: clamp(14px, 4vw, 20px);
  }

  .career__rail { position: static; inset: auto; margin-block-start: clamp(40px, 8vw, 64px); }
  .career__credentials {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(20px, 4vw, 28px);
    border-radius: clamp(18px, 4vw, 24px);
  }
  .career__credentials li {
    align-items: flex-start;
    padding: clamp(12px, 2.6vw, 16px) 0;
  }
  .career__credentials li:first-child { padding-block-start: 0; }
  .career__credentials li:last-child { padding-block-end: 0; }
  .career__credentials li + li { border-inline-start: 0; border-block-start: 1px solid var(--line-paper); }
  .career__credentials-head { flex-direction: row !important; }

  .closing__top {
    grid-template-columns: 1fr;
    grid-template-areas: auto;
    align-items: start;
    gap: clamp(52px, 9vw, 72px);
    padding-block-start: clamp(64px, 9vw, 88px);
  }
  .closing__identity { align-items: flex-start; }
  .closing__navs {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(40px, 5vw, 48px);
  }
  .closing__navs .closing__nav-column + .closing__nav-column {
    border-inline-start: none;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .closing__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 48px);
    padding-block-start: clamp(80px, 10vw, 112px);
    border-block-start: none;
  }
  .closing__navs {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(40px, 5vw, 48px);
  }
  .closing__navs .closing__nav-column + .closing__nav-column {
    border-inline-start: none;
  }
}

@media (max-width: 639px) {
  .navbar { padding-block-start: 14px; }
  .navbar.is-stuck { padding-block-start: 10px; }
  .hero__mark { display: none; }
  .hero__name { font-size: clamp(42px, 14vw, 62px); }
  .hero__eyebrow { font-size: 15px; }
  .closing__top { padding-block: 72px 56px; }
  .closing__navs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 18px; }
  .closing__mark { height: 58px; }
  .closing__base { padding-block: 26px 34px; }
}

/* ══ MOTION ════════════════════════════════════════════════════ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__img, .hero__copy { transform: none !important; }

  /* unpin every signature stage so nothing depends on scroll position */
  .js .hero, .js .standing, .js .knowledge { height: auto; }
  .js .hero__stage, .js .stage, .js .knowledge__stage { position: relative; height: auto; overflow: visible; }
  .js .hero__stage { min-height: 100svh; }
  .js .stage { padding-block: clamp(72px, 12vw, 110px); }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}