/* =========================================================================
   mehdiparyavi.com — design system v5
   Direction: premium global technology leadership. Neutral obsidian /
   graphite / platinum / warm-white system — the warm espresso/brown
   direction from v4 has been fully removed (it read as "brown", not
   premium) — with champagne gold as the one, sparing accent (~5% of the
   visual system: thin rules, small eyebrows, hover states, logo detail).
   One contemporary grotesk sans throughout — still no serif anywhere.
   Typeface note: the IDCA brand spec calls for "SF Pro Display", which is
   Apple system-proprietary and not licensable for general web use.
   Substituted with Inter Tight, an open-license Google Font in the same
   contemporary-grotesk family.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ---- IDCA brand — sparing accent use only, never a background ---- */
  --idca-navy: #233A6C;
  --idca-navy-soft: #5D7DCD;

  /* ---- Core palette: obsidian / graphite / platinum / warm white ----
     Reference values as supplied; ~70% black/white/neutral, ~25%
     grey/graphite, ~5% gold accent across the visual system. */
  --black: #0A0A0B;        /* Obsidian */
  --black-raised: #151619; /* Deep Graphite */
  --black-elevated: #27292D; /* Graphite — borders/hovers on dark surfaces */
  --white: #FFFFFF;        /* Pure White */
  --paper: #F6F5F2;        /* Warm White */
  --paper-line: #E3E2DE;
  --paper-line-strong: #D2D0CB;

  --ink: #151619;          /* Deep Graphite, used as body/heading ink */
  --ink-soft: #60636A;     /* Soft Graphite */
  --ink-faint: #60636A;    /* same shade — hierarchy comes from size/weight, not a second grey */

  --on-black: #F6F5F2;
  --on-black-muted: #C9C9C7; /* Platinum */
  --line-on-black: rgba(246, 245, 242, 0.1);
  --line-on-black-strong: rgba(246, 245, 242, 0.22);

  /* ---- Gold — the one distinctive accent, ~5% of the system: thin rules,
     eyebrows, hover states, small arrows/nodes, the gold logo variant.
     Never a fill, never body copy, never a gradient.
     ACCESSIBILITY: --gold on --paper is only ~2.4:1 — nowhere near AA for
     TEXT at any size. So gold is text colour only on dark backgrounds
     (7.4:1+ there); on light backgrounds it is decoration only (a thin
     line, a small dot/node) — never darkened into a muted "brown-gold" to
     force light-background text contrast, which is exactly the muddy
     effect that got flagged and removed this pass. --focus is the one
     intentional exception (a functional, momentary keyboard-focus ring). */
  --gold: #B89B5E;         /* Champagne Gold */
  --gold-soft: #C7AD73;    /* Soft Gold */
  --gold-line: rgba(184, 155, 94, 0.55);
  --gold-line-on-black: rgba(199, 173, 115, 0.55);

  --accent: var(--gold);
  --focus: #A38548;

  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* No serif anywhere on this site — kept as an alias so any legacy
     reference degrades to the same grotesk rather than breaking. */
  --font-serif: var(--font-sans);

  --container-w: 1440px;
  --container-pad: 32px;

  --radius: 2px;
  --radius-md: 4px;

  --ease: cubic-bezier(.22,.68,0,1);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
::selection { background: var(--gold); color: var(--white); }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.04;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-weight: 700; }
h2 { font-size: clamp(2rem, 1.2vw + 1.6rem, 3.1rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 700; }
h4 {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint);
  line-height: 1.3;
}
p { margin: 0 0 1em; color: var(--ink-soft); }
.lede { font-size: 1.25rem; color: var(--ink-soft); line-height: 1.5; font-weight: 400; }
em, .accent-serif { font-style: italic; font-weight: 400; letter-spacing: 0; }

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: 128px 0; }
.section--tight { padding: 64px 0; }
.section--dark { background: var(--black); color: var(--on-black); }
.section--dark p { color: var(--on-black-muted); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-black); }
.section--raised { background: var(--white); }
/* Eyebrow labels: on light backgrounds gold text fails contrast (see the
   --gold accessibility note above), so the label keeps --ink-faint and a
   short gold rule stands in for the accent instead. On dark sections gold
   text clears AA comfortably, so it's used directly there. */
.eyebrow {
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-faint); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--gold); flex: none; }
.section--dark .eyebrow { color: var(--gold-soft); }
.section--dark .eyebrow::before { background: var(--gold); }
/* Opt-in "draws into view" variant — the rule grows from 0 rather than
   appearing full-width, used on a handful of below-the-fold section
   eyebrows (see [data-io] usage in scripts/build.ts). Hero-level eyebrows
   are left static since they're on-screen at load. */
.eyebrow[data-io]::before { width: 0; transition: width .6s var(--ease) .1s; }
.eyebrow[data-io].is-visible::before { width: 20px; }

.row-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; margin-bottom: 48px;
}
.row-head h2 { margin-bottom: 0; }

/* ---- Arrow / text links (used instead of pill buttons throughout) ----
   Text stays the surrounding ink colour (readable at full contrast); the
   underline and arrow glyph — both decorative, not the reader's only cue —
   pick up gold on hover, matching the "restrained gold hover" brief without
   putting low-contrast gold on running text. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem;
  padding-bottom: 2px; border-bottom: 1px solid currentColor;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-arrow span { transition: transform .2s var(--ease), color .2s var(--ease); display: inline-block; }
.link-arrow:hover { border-color: var(--gold); }
.link-arrow:hover span { transform: translateX(4px); color: var(--gold); }
.section--dark .link-arrow:hover, .section--dark .link-arrow:hover span { border-color: var(--gold); color: var(--gold); }

/* ---- Header ----
   Transparent over the very top of the page (blending straight into the
   hero/page-top, which is the same warm ivory), then a translucent warm-
   ivory bar with blur and a hairline once scrolled — never boxed, never a
   pill nav. site.js toggles .is-scrolled past a small scroll threshold. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(246, 245, 242, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
/* :not(.brand__logo) — this fixed 22px height is sized for the old small
   icon-mark fallback (used only when no real logo file exists in
   public/brand/, see findLogo() in layout.ts). It was also matching the
   real supplied .brand__logo img via the plain-tag ".brand img" selector,
   which outranks ".brand__logo" on specificity (class+tag beats one class)
   and was silently capping the real logo at 22px regardless of the
   max-height set on .brand__logo below — excluding it here is the fix. */
.brand img:not(.brand__logo) { height: 22px; width: auto; }
.brand__name { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em; position: relative; padding-left: 14px; }
.brand__name::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
/* The real logo, once supplied — the identity on its own, no text beside
   it. Sized so it reads clearly without dominating the 76px header; no
   hover/transition on the mark itself (logos don't animate). */
.brand--logo { gap: 0; }
/* The supplied logo's own aspect ratio (~3.84:1) makes max-height the
   binding constraint here, not max-width — max-height:54px resolves to
   ~207px wide (the 76px header has plenty of headroom for this), sized up
   from the original 46px/177px per user feedback that the mark read too
   small at both desktop and mobile sizes. */
.brand__logo { height: auto; width: auto; max-width: 230px; max-height: 54px; }
@media (max-width: 780px) {
  .brand__logo { max-width: 168px; max-height: 40px; }
}
.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  position: relative; color: var(--ink-soft); font-weight: 600; font-size: 0.88rem;
  padding: 4px 0; letter-spacing: -0.005em; transition: color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: var(--gold); transition: right .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav-toggle {
  display: none; background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.nav-toggle__label--close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__label--open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__label--close { display: inline; }

/* ---- Buttons / tags (kept for non-homepage pages; homepage prefers link-arrow) ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.88rem;
  padding: 15px 26px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  letter-spacing: -0.005em;
}
.btn--primary { background: var(--black); color: var(--paper); }
.btn--primary:hover { background: var(--black-raised); }
.btn--ghost { background: transparent; border-color: var(--paper-line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold); }
.btn--inverse { background: var(--on-black); color: var(--black); }
.btn--inverse:hover { background: var(--white); }
.btn--outline-inverse { background: transparent; border-color: var(--line-on-black-strong); color: var(--on-black); }
.btn--outline-inverse:hover { border-color: var(--on-black); }

.tag {
  display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 9px; border-radius: var(--radius);
  border: 1px solid var(--paper-line-strong); color: var(--ink-faint);
}
.tag--solid { background: var(--black); color: var(--paper); border-color: var(--black); }
.section--dark .tag { border-color: var(--line-on-black-strong); color: var(--on-black-muted); }

/* ---- Grids ---- */
.grid { display: grid; gap: 4px; }
.grid--gap { gap: 44px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.media-grid .card--span2 { grid-column: span 2; }

/* ---- MediaCard (used by Media/Insights/Reports/Topics archives — unchanged this pass) ---- */
.card {
  display: flex; flex-direction: column; color: var(--ink);
}
.card__media {
  aspect-ratio: 16/11; background: var(--black); overflow: hidden; position: relative;
  border-radius: var(--radius);
}
.card--span2 .card__media, .card--wide .card__media { aspect-ratio: 16/8; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.02); }
.card__body { padding: 20px 2px 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card__meta {
  display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--ink-faint);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.section--dark .card__meta { color: var(--on-black-muted); }
.card__title {
  font-size: 1.2rem; font-weight: 700; line-height: 1.22; color: var(--ink); margin: 0;
  letter-spacing: -0.015em; transition: opacity .2s ease;
}
.section--dark .card__title { color: var(--on-black); }
.card--span2 .card__title, .card--wide .card__title { font-size: 1.7rem; }
.card:hover .card__title { opacity: 0.68; }
.card__excerpt { font-size: 0.92rem; color: var(--ink-faint); margin: 0; }
.card__cta {
  margin-top: 6px; font-size: 0.8rem; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.card__cta span { transition: transform .2s var(--ease); }
.card:hover .card__cta span { transform: translateX(4px); }

/* ---- Publication-branded placeholder (no gradients, never blank) ----
   A deliberate fallback, not a dead end: publication name, set on the same
   neutral graphite the rest of the system uses for image containers, with a
   very faint digital-grid texture (a scaled-down cousin of .bg-digital-dark,
   static — no motion here, this is a resting card) so an unimaged item still
   feels engineered rather than empty. Real editorial imagery is preferred
   everywhere this is used. */
.placeholder {
  width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 22px;
  background: var(--black); color: var(--on-black); position: relative; overflow: hidden;
}
.placeholder::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(184, 155, 94, 0.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 58%, rgba(246, 245, 242, 0.22), transparent 60%),
    radial-gradient(1.2px 1.2px at 42% 82%, rgba(184, 155, 94, 0.28), transparent 60%),
    radial-gradient(1px 1px at 85% 20%, rgba(246, 245, 242, 0.16), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 40%, transparent 96%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 40%, transparent 96%);
}
.placeholder__label {
  position: relative; z-index: 1;
  font-weight: 600; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ---- Photo treatment component (see personPhotoHtml() in layout.ts) ----
   A deliberate, reusable crop system so a portrait/cutout is never left to
   an accidental object-fit choice. .photo--contain guarantees the whole
   image is always visible (used for transparent cutouts); .photo--cover
   fills its box and crops, only once a focal point has actually been
   checked. objectPosition is set inline per usage via style="". */
.photo { position: relative; overflow: hidden; }
.photo img { display: block; width: 100%; height: 100%; }
.photo--contain img { object-fit: contain; }
.photo--cover img { object-fit: cover; }

/* ---- Animated digital background system v2 — a system, not graph paper ----
   v1 was one flat, uniform, equal-opacity grid — it read as "CSS squares."
   v2 keeps the same performance budget (transform/opacity only, no canvas,
   no WebGL, no particle library) but builds a small stack of independent
   layers so the field reads as engineered rather than decorative:
     1. GRID — the fine technical grid, but masked so opacity is UNEVEN
        across the field (some regions brighter, most receding) instead of
        one flat repeating tile.
     2. PATHS — 2-3 real elements per section (.field__scan), not a
        pseudo-element: a hairline-thin bar with ONE small bright point
        riding along it (a background-position trick, not a particle
        system) plus a slow brighten/fade pulse on the line itself. Every
        instance gets its own duration (15s/22s/30s — see .field__scan--a/
        b/c) so nothing reads as one synchronized loop.
     3. GLOW — one or two very soft radial fields drifting slowly
        (::after), unchanged in spirit from v1, retimed to fit the new
        15/22/30s family.
     4. NOISE — an ultra-fine, ultra-sparse dot texture (not the same grid
        at a different scale) so the field has grain rather than reading
        as a single repeating tile at every zoom level.
   Layers 1+4 are static (::before) for crispness and cost; layer 2 is real
   elements (.field, inserted once per section, right after the opening
   tag); layer 3 is the one soft continuous drift (::after). Everything is
   gated behind prefers-reduced-motion: no-preference — reduced motion
   freezes layers 2 and 3 at a resting frame (a still, deliberately-
   composed pattern) rather than removing them. */
.bg-digital, .bg-digital-dark { position: relative; isolation: isolate; }
.bg-digital { background-color: var(--paper); }
.bg-digital-dark { background-color: var(--black); }
.bg-digital::before, .bg-digital-dark::before,
.bg-digital::after, .bg-digital-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.bg-digital::before {
  background-image:
    radial-gradient(1px 1px at 22% 30%, rgba(21, 22, 25, 0.14), transparent 60%),
    radial-gradient(1px 1px at 71% 64%, rgba(21, 22, 25, 0.12), transparent 60%),
    radial-gradient(1px 1px at 46% 84%, rgba(21, 22, 25, 0.1), transparent 60%),
    linear-gradient(rgba(21, 22, 25, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 22, 25, 0.045) 1px, transparent 1px);
  background-size: 3px 3px, 3px 3px, 3px 3px, 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 68% 28%, #000 30%, rgba(0,0,0,0.35) 62%, transparent 92%);
  mask-image: radial-gradient(ellipse 85% 70% at 68% 28%, #000 30%, rgba(0,0,0,0.35) 62%, transparent 92%);
}
.bg-digital-dark::before {
  background-image:
    radial-gradient(1.6px 1.6px at 14% 24%, rgba(184, 155, 94, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 81% 62%, rgba(246, 245, 242, 0.32), transparent 60%),
    radial-gradient(1.3px 1.3px at 36% 79%, rgba(184, 155, 94, 0.4), transparent 60%),
    radial-gradient(1.3px 1.3px at 64% 16%, rgba(246, 245, 242, 0.26), transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 88%, rgba(184, 155, 94, 0.32), transparent 60%),
    radial-gradient(0.8px 0.8px at 8% 8%, rgba(246, 245, 242, 0.16), transparent 60%),
    radial-gradient(0.8px 0.8px at 55% 45%, rgba(246, 245, 242, 0.14), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, auto, 3px 3px, 3px 3px, 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 32% 24%, #000 35%, rgba(0,0,0,0.4) 65%, transparent 94%);
  mask-image: radial-gradient(ellipse 90% 75% at 32% 24%, #000 35%, rgba(0,0,0,0.4) 65%, transparent 94%);
}
/* The soft, slow, off-axis drift. transform-only so it's cheap
   (GPU-composited), never triggers layout. */
.bg-digital::after {
  background-image: radial-gradient(ellipse 620px 420px at 28% 22%, rgba(184, 155, 94, 0.05), transparent 70%);
}
.bg-digital-dark::after {
  background-image:
    radial-gradient(ellipse 760px 520px at 20% 16%, rgba(201, 201, 199, 0.07), transparent 70%),
    radial-gradient(ellipse 600px 420px at 84% 80%, rgba(184, 155, 94, 0.06), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .bg-digital::after { animation: bgDriftLight 24s ease-in-out infinite; }
  .bg-digital-dark::after { animation: bgDriftDark 30s ease-in-out infinite; }
}
@keyframes bgDriftLight {
  0%, 100% { transform: translate3d(-5%, -4%, 0); }
  50% { transform: translate3d(5%, 4%, 0); }
}
@keyframes bgDriftDark {
  0%, 100% { transform: translate3d(-6%, -4%, 0); }
  50% { transform: translate3d(6%, 4%, 0); }
}
/* Real content always painted above every texture layer. */
.bg-digital > .container, .bg-digital-dark > .container,
.bg-digital > .field, .bg-digital-dark > .field { position: relative; z-index: 1; }
.bg-digital > .field, .bg-digital-dark > .field { position: absolute; z-index: 0; }

.bg-digital--fade-right::before, .bg-digital--fade-right::after, .bg-digital--fade-right > .field {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 92%);
}
.bg-digital--fade-left::before, .bg-digital--fade-left::after, .bg-digital--fade-left > .field {
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 55%);
}
.bg-digital--fade-edges::before, .bg-digital--fade-edges::after, .bg-digital--fade-edges > .field {
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 45%, transparent 92%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 45%, transparent 92%);
}

/* ---- Digital field paths (layer 2) — 2-3 real elements, not a pseudo-
   element and not a particle system. Each .field__scan is a hairline bar
   that (a) slowly brightens then fades as a whole ("soft illumination",
   14-22s — slower than the node), and (b) carries one small bright point
   that rides along its length via a background-position sweep ("node
   travel", 6-10s — faster, so it reads as the thing your eye follows).
   Deliberately only 3 instances per section. Strength is tuned so the
   motion is noticed within a couple of seconds, not hunted for: line at
   ~10-11% opacity (was compounding two nested opacities down to ~3.5%,
   which is why it read as invisible), node core near-solid gold at just a
   few px across (still sparing — a pinpoint, not a wash of colour) with a
   soft ~30-35% halo. Reduced motion: both animations are dropped via the
   same gate as the rest of the system, leaving each line at a fixed,
   clearly-visible resting opacity — a still "engineered" pattern rather
   than a blank one. */
.field { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.field__scan {
  position: absolute; height: 2px;
  background-image: radial-gradient(4px 4px at 50% 50%, rgba(184, 155, 94, 0.95), rgba(184, 155, 94, 0.35) 45%, transparent 75%);
  background-repeat: no-repeat;
  background-size: 6% 100%;
  background-position: -10% 50%;
}
.field__scan::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
}
.bg-digital .field__scan { color: rgba(21, 22, 25, 0.11); }
.bg-digital-dark .field__scan { color: rgba(246, 245, 242, 0.11); }
.field__scan--a { top: 26%; left: 4%; width: 40%; }
.field__scan--b { top: 58%; left: 52%; width: 34%; }
.field__scan--c { top: 82%; left: 12%; width: 26%; }
@media (prefers-reduced-motion: no-preference) {
  .field__scan--a { animation: fieldTravelA 7s linear infinite, fieldPulse 16s ease-in-out infinite; }
  .field__scan--b { animation: fieldTravelB 10s linear infinite, fieldPulse 20s ease-in-out infinite 3s; }
  .field__scan--c { animation: fieldTravelA 6s linear infinite reverse, fieldPulse 14s ease-in-out infinite 1.5s; }
}
@keyframes fieldTravelA { 0% { background-position: -10% 50%; } 100% { background-position: 110% 50%; } }
@keyframes fieldTravelB { 0% { background-position: 110% 50%; } 100% { background-position: -10% 50%; } }
@keyframes fieldPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ---- Animated hairline — a recurring, very restrained motif: a 1px line
   that draws in left-to-right on scroll entrance, the last stretch in
   gold. Used sparingly (never on every section). Reuses the existing
   [data-io]/.is-visible intersection-observer mechanism, so it already
   respects prefers-reduced-motion (site.js skips the observer entirely
   when reduced motion is requested, revealing lines at full width
   immediately — nothing is ever stuck hidden). */
.hairline { height: 1px; overflow: hidden; background: transparent; }
.hairline::after {
  content: ""; display: block; height: 1px; width: 0%;
  background: linear-gradient(90deg, currentColor 0%, currentColor 82%, var(--gold) 100%);
  transition: width .8s var(--ease);
}
.hairline.is-visible::after, [data-io].is-visible .hairline::after { width: 100%; }

/* =========================================================================
   HOMEPAGE + ABOUT — "mp-" (mehdiparyavi) namespace plus the existing
   about-* classes. This visual-polish pass covers Header, Homepage and
   About only; Media/Reports/Insights/Speaking keep their prior structure
   and only inherit shared tokens/primitives (colour, type, .btn, .card,
   .eyebrow, .link-arrow, etc.) automatically via the cascade.
   ========================================================================= */

/* ---- Hero ----
   Text ~44% / image ~56% (was a near-full-bleed 41.7/58.3 photo-as-cover
   treatment that read as "Mehdi fills the screen"). The portrait is a
   genuinely transparent cutout PNG (see personPhotoHtml, fit:"contain"
   below) sized INTRINSICALLY — width/height:auto, capped by max-width/
   max-height — rather than stretched to fill a fixed box, so it renders at
   a controlled, substantial-but-not-overwhelming size with real negative
   space around him, grounded to the bottom of the column. The section's
   own .bg-digital grid/glow layers are left unmasked (no --fade-right) so
   the same faint pattern runs underneath BOTH the text and the photo —
   the wrapper carries no background colour, so the pattern is genuinely
   visible through the PNG's transparent pixels rather than sitting behind
   an opaque panel. */
/* BUG FIXED HERE: the grid used to be full-bleed (columns as fractions of
   100vw) while .mp-hero__text's left padding grew by (100vw-1440px)/2 to
   re-center it against the site's normal 1440px container — two formulas
   referencing different bases. Past ~1600-1700px viewport width the
   padding term outgrew the column's own (proportional-to-100vw) growth,
   so the available text width actually SHRANK as the screen got wider —
   worse at 1920px, worse still on an ultrawide monitor. Fixed by capping
   the grid itself at a real max-width and centering it (like every other
   section's .container), so a plain, bounded left padding is all that's
   needed — no more runaway offset. .mp-hero__lede additionally gets an
   explicit width formula tied directly to vw (clamp(340px,26vw,430px)),
   which is mathematically guaranteed non-decreasing as the viewport
   grows, as a second line of defence. */
.mp-hero__grid {
  position: relative; z-index: 1; max-width: 1920px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.08fr);
  min-height: clamp(700px, 74vh, 830px); align-items: stretch;
}
.mp-hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 160px clamp(32px, 5vw, 80px) 64px clamp(32px, 5vw, 80px);
}
.mp-hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  max-width: 280px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); line-height: 1.5; margin-bottom: 30px;
}
.mp-hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }
.mp-hero__name {
  font-size: clamp(3.4rem, 6vw + 1rem, 7rem); font-weight: 800; letter-spacing: -0.04em;
  line-height: 0.94; margin-bottom: 32px; color: var(--ink);
}
.mp-hero__lede {
  font-size: clamp(17px, 1.1vw, 20px); line-height: 1.5; color: var(--ink-soft);
  width: clamp(340px, 26vw, 430px); max-width: 100%; margin-bottom: 28px;
}
.mp-hero__media {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  padding: 32px clamp(16px, 3vw, 40px) 0;
}
.mp-hero__media.photo img {
  width: auto; height: auto; max-width: 88%; max-height: 92%;
  object-fit: contain; display: block;
}

/* ---- Selected media strip (premium continuous marquee) ---- */
.mp-strip { border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding: 34px 0 38px; }
.mp-strip h4 { margin: 0 0 22px; white-space: nowrap; }
.mp-strip__viewport {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.mp-strip__track {
  display: flex; align-items: center; gap: 56px; width: max-content;
  animation: mp-marquee 36s linear infinite;
}
.mp-strip__viewport:hover .mp-strip__track,
.mp-strip__viewport.is-dragging .mp-strip__track { animation-play-state: paused; }
.mp-strip__marks { display: flex; align-items: center; gap: 56px; flex-wrap: nowrap; flex: 0 0 auto; }
.mp-strip__mark--text {
  font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; color: var(--ink-soft);
  white-space: nowrap; text-transform: uppercase;
}
.mp-strip__mark--logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mp-strip__mark--logo img {
  height: 30px; width: auto; max-width: 158px; object-fit: contain;
  filter: grayscale(1); opacity: 0.62; transition: opacity .25s var(--ease), filter .25s var(--ease);
  -webkit-user-drag: none; user-select: none;
}
.mp-strip__mark--logo img:hover { filter: grayscale(0); opacity: 1; }

@keyframes mp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-strip__track { animation: none; width: auto; }
  .mp-strip__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; mask-image: none; -webkit-mask-image: none; }
  .mp-strip__marks--duplicate { display: none; }
}

/* ---- Featured coverage ("In the media") ---- */
.mp-feature__primary {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: center;
  margin-bottom: 72px;
}
.mp-feature__primary-media { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); background: var(--black); }
.mp-feature__primary-media img, .mp-feature__primary-media .placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mp-feature__primary:hover .mp-feature__primary-media img { transform: scale(1.02); }
.mp-feature__primary-title { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.3rem); margin: 14px 0 18px; }
.mp-feature__secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.mp-feature__item-media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); margin-bottom: 18px; background: var(--black); }
.mp-feature__item-media img, .mp-feature__item-media .placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mp-feature__item:hover .mp-feature__item-media img { transform: scale(1.02); }
.mp-feature__item-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.28; margin: 0 0 8px; }
.mp-feature__item:hover .mp-feature__item-title { opacity: 0.68; }

/* ---- Latest thinking: horizontal editorial rows, not cards ---- */
.mp-thinking__row {
  display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: 48px;
  padding: 44px 0; border-top: 1px solid var(--paper-line); transition: border-color .25s var(--ease);
}
.mp-thinking .mp-thinking__row:last-child { border-bottom: 1px solid var(--paper-line); }
.mp-thinking__row:hover { border-color: var(--gold); }
.mp-thinking__title { font-size: clamp(1.4rem, 1.3vw + 1rem, 2rem); letter-spacing: -0.02em; margin: 12px 0 0; transition: opacity .2s ease; }
.mp-thinking__row:hover .mp-thinking__title { opacity: 0.65; }
.mp-thinking__media { aspect-ratio: 3/2; overflow: hidden; border-radius: var(--radius); background: var(--black); }
.mp-thinking__media img, .mp-thinking__media .placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mp-thinking__row:hover .mp-thinking__media img { transform: scale(1.02); }

/* ---- Selected research (dark) ----
   One large featured report (mirrors .mp-feature__primary's proportions)
   followed by the remaining reports in a supporting 2-up grid — same
   "hero + supporting" composition already used for "In the media", chosen
   for three reports rather than inventing a new pattern. */
.mp-research__featured {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center;
  margin-bottom: 64px;
}
.mp-research__featured-media { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); transition: transform .35s var(--ease); }
.mp-research__featured-media img { width: 100%; height: 100%; object-fit: cover; }
.mp-research__featured:hover .mp-research__featured-media { transform: translateY(-3px); }
.mp-research__featured-title { font-size: clamp(1.8rem, 1.8vw + 1rem, 2.6rem); margin: 14px 0 18px; }
.mp-research__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px; }
.mp-research__media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); margin-bottom: 28px; transition: transform .35s var(--ease); }
.mp-research__media img { width: 100%; height: 100%; object-fit: cover; }
.mp-research__item:hover .mp-research__media { transform: translateY(-3px); }
.mp-research__title { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); }
.research-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px; background: var(--black-raised);
}
.research-placeholder__mark { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.research-placeholder__label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-black-muted);
}

/* ---- Profile section ("Homepage About") ----
   Full cutout grounded at the bottom, complete head always visible: fit is
   "contain" (never crops) and the wrapper's aspect-ratio matches the padded
   source image almost exactly, so there's minimal letterboxing. No
   background colour on the wrapper: this is a transparent PNG, so the
   section's own (unmasked) digital-field pattern shows straight through it
   rather than sitting behind a flat panel.
   Grounding: the section carries no bottom padding, and .mp-profile__media
   is explicitly self-aligned to the row's end, so his feet land on the
   section's bottom boundary. .mp-profile__copy is independently centred
   (align-self:center) instead of inheriting that bottom alignment, since
   bottom-anchoring short text against a much taller image column was what
   left a large dead strip above the heading — centring lands the copy
   roughly level with his chest instead. */
.mp-profile { position: relative; padding-top: 80px; padding-bottom: 0; }
.mp-profile__grid {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.1fr); gap: 72px;
  align-items: end; position: relative;
}
.mp-profile__media {
  aspect-ratio: 1317 / 2255; overflow: hidden; border-radius: var(--radius);
  align-self: end;
}
.mp-profile__copy { padding-bottom: 0; max-width: 600px; align-self: center; }

/* ---- Final CTA (dark) ---- */
.mp-final { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 28px; }
.mp-final h2 { max-width: 22ch; }
.mp-final__list { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-black-muted); margin-bottom: 14px; }

/* ---- Footer (minimal) ---- */
.site-footer { background: var(--black); color: var(--on-black-muted); padding: 56px 0; margin-top: 0; }
.site-footer a:hover { color: var(--on-black); }
.site-footer__row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px;
}
.site-footer__id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.site-footer__name { color: var(--on-black); font-weight: 700; letter-spacing: -0.01em; }
.site-footer__role { font-size: 0.86rem; color: var(--on-black-muted); }
.site-footer__logo { height: auto; max-height: 30px; width: auto; max-width: 160px; }
.site-footer__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 0.86rem; font-weight: 600; }
.site-footer__bottom {
  border-top: 1px solid var(--line-on-black); margin-top: 32px; padding-top: 20px;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
}

/* ---- Social icons (config-driven; monochrome, gold on hover) ---- */
.social-icons { display: flex; align-items: center; gap: 18px; }
.social-icons a { color: inherit; opacity: 0.6; display: inline-flex; transition: opacity .2s var(--ease), color .2s var(--ease); }
.social-icons a:hover { opacity: 1; color: var(--gold); }
.social-icons svg { width: 17px; height: 17px; display: block; }
.social-icons--footer { gap: 16px; }
.social-icons--hero { margin-top: 30px; gap: 14px; }
.social-icons--hero::before {
  content: "Follow"; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 6px; opacity: 0.85;
}

/* ---- Follow Mehdi (dedicated social section) ---- */
.mp-follow__heading { font-size: clamp(2.1rem, 4vw + 1rem, 3.8rem); margin: 10px 0 10px; letter-spacing: -0.01em; }
.mp-follow__sub { color: var(--on-black-muted); max-width: 52ch; margin-bottom: 44px; }
.mp-follow__rows { border-top: 1px solid var(--line-on-black-strong); }
.follow-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 26px 2px; border-bottom: 1px solid var(--line-on-black-strong);
  font-size: clamp(1.25rem, 1.6vw + 1rem, 1.9rem); font-weight: 700; letter-spacing: -0.01em;
  color: var(--on-black); text-decoration: none; overflow: hidden;
  transition: color .3s var(--ease);
}
.follow-row::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--gold); transition: width .5s var(--ease);
}
.follow-row:hover { color: var(--gold); }
.follow-row:hover::before { width: 100%; }
.follow-row__arrow {
  color: var(--on-black-muted); transition: transform .3s var(--ease), color .3s var(--ease);
}
.follow-row:hover .follow-row__arrow { transform: translate(4px, -4px); color: var(--gold); }

/* =========================================================================
   Everything below is unchanged this pass — shared by pages not in scope
   for this redesign iteration (About / Media / Insights / Reports /
   Speaking / Topics). Colors and type inherit the new tokens automatically.
   ========================================================================= */

/* ---- Insights / literary (Insights page) ---- */
.insight-feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; margin-bottom: 80px; }
.insight-feature__media { aspect-ratio: 4/5; background: var(--black); border-radius: var(--radius); overflow: hidden; order: 2; }
.insight-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.insight-feature__title { font-size: clamp(1.9rem, 2vw + 1rem, 2.9rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.insight-list { display: flex; flex-direction: column; }
.insight-row {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: baseline; gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--paper-line);
}
.insight-list .insight-row:last-child { border-bottom: 1px solid var(--paper-line); }
.insight-row__date { font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; }
.insight-row__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.insight-row__pub { font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.insight-row:hover .insight-row__title { opacity: 0.65; }

/* ---- Reports (Reports + About "selected research") ----
   report-row and card__meta are shared with the standalone /reports/ page
   and Insights detail pages (both out of scope this pass, always on light
   backgrounds there) — the .section--dark overrides below only take effect
   when a dark ancestor is actually present, which today is only the
   About-page "Selected research" section, so nothing elsewhere changes. */
.report-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding: 72px 0; border-top: 1px solid var(--paper-line);
}
.report-row:last-child { border-bottom: 1px solid var(--paper-line); }
.section--dark .report-row { border-top-color: var(--line-on-black); }
.section--dark .report-row:last-child { border-bottom-color: var(--line-on-black); }
.report-row:nth-child(even) .report-row__media { order: 2; }
.report-row__media { aspect-ratio: 4/3; background: var(--black); border-radius: var(--radius); overflow: hidden; }
.report-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.report-row:hover .report-row__media img { transform: translateY(-3px); }
.report-row__title { font-size: clamp(1.7rem, 1.6vw + 1rem, 2.5rem); margin-bottom: 18px; }

/* ---- Speaking hero (two-column, mirrored homepage hero) ----
   Previously a naive 21:9 object-fit:cover crop cut through Mehdi's head,
   then a later pass centred the full cutout alone in a large empty area —
   both fixed here with the same two-column composition the homepage hero
   uses (photo ~45% / copy ~55%, same .bg-digital field running underneath
   both columns, no separate panel behind him), just mirrored so the photo
   sits on the LEFT. Grounded to the section's bottom edge via flex
   align-items:flex-end + intrinsic sizing (object-fit:contain), so the
   whole head/hand/body is always visible and there is no floating gap
   beneath him. */
.speaking-hero { padding-top: 56px; padding-bottom: 0; position: relative; }
.sp-hero__grid {
  position: relative; z-index: 1; max-width: 1920px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.08fr);
  min-height: clamp(600px, 66vh, 760px); align-items: stretch;
}
.sp-hero__media {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  padding: 24px clamp(16px, 3vw, 40px) 0;
}
.sp-hero__media.photo img {
  width: auto; height: auto; max-width: 84%; max-height: 92%;
  object-fit: contain; display: block;
}
.sp-hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(32px, 5vw, 80px) 64px clamp(32px, 5vw, 80px);
}
.sp-hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); line-height: 1.5; margin-bottom: 22px;
}
.sp-hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }
.sp-hero__title {
  font-size: clamp(2.6rem, 3vw + 1.2rem, 4.6rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.02; margin: 0 0 24px; color: var(--ink);
}
.sp-hero__lede { font-size: 1.12rem; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; margin-bottom: 16px; }
.sp-hero__lede + .sp-hero__lede { margin-top: 0; }
.sp-hero__cta { margin-top: 20px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
@media (max-width: 1080px) {
  .sp-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .sp-hero__media { order: -1; padding: 32px clamp(16px, 4vw, 32px) 0; }
  .sp-hero__media.photo img { max-width: 62%; max-height: 46vh; margin: 0 auto; }
  .sp-hero__text { padding: 32px var(--container-pad) 48px; }
}
@media (max-width: 780px) {
  .sp-hero__media.photo img { max-width: 74%; max-height: 40vh; }
  .sp-hero__text { padding: 24px var(--container-pad) 40px; }
  .sp-hero__title { margin-bottom: 18px; }
}

/* ---- Speaking: featured engagement + keynotes/panels editorial list ---- */
.sp-section-head { margin-bottom: 40px; }
.sp-entry {
  padding: 56px 0; border-top: 1px solid var(--paper-line);
}
.sp-entry:last-child { padding-bottom: 0; }
.sp-entry__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint);
  margin-bottom: 14px;
}
.sp-entry__title { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.2rem); margin-bottom: 14px; letter-spacing: -0.02em; }
.sp-entry--featured .sp-entry__title { font-size: clamp(1.9rem, 1.8vw + 1rem, 2.9rem); }
.sp-entry__desc { max-width: 68ch; color: var(--ink-soft); margin-bottom: 26px; }
.sp-entry__gallery { margin-bottom: 22px; }
.sp-entry__footer { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-faint); }
.sp-entry__footer .link-arrow { font-size: 0.85rem; }

/* ---- Multi-image gallery (1 / 2 / 3-4 / 5+ layouts) ----
   Our own premium take on a multi-image post — not a literal copy of any
   platform's UI. Every tile is clickable and opens the shared lightbox
   (see [data-lightbox] below); tiles beyond the 4th visible slot are
   summarised with a "+N" overlay on the last tile rather than shown. */
.sp-gallery { display: grid; gap: 6px; border-radius: var(--radius-md); overflow: hidden; background: var(--black); }
.sp-gallery__tile {
  position: relative; display: block; width: 100%; height: 100%; min-height: 0; min-width: 0; cursor: pointer;
  border: none; padding: 0; margin: 0; background: var(--black); overflow: hidden;
}
.sp-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.sp-gallery__tile:hover img { transform: scale(1.03); }
.sp-gallery__tile-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 11, 0.6); color: #fff; font-size: 1.4rem; font-weight: 700;
}
.sp-gallery--1 { grid-template-columns: 1fr; }
.sp-gallery--1 .sp-gallery__tile { aspect-ratio: 16/9.2; }
.sp-gallery--2 { grid-template-columns: 1fr 1fr; }
.sp-gallery--2 .sp-gallery__tile { aspect-ratio: 5/4; }
.sp-gallery--multi { grid-template-columns: 1.7fr 1fr; aspect-ratio: 16/9.5; }
.sp-gallery--multi .sp-gallery__primary { grid-row: 1 / -1; grid-column: 1; }
/* min-height:0 on the nested grid is required here — without it, a grid
   item that is itself display:grid falls back to sizing by its children's
   content (min-content), which for photos means each stacked tile renders
   at its natural image height instead of an even 1/2 or 1/3 share of the
   gallery's fixed (aspect-ratio-driven) height. That "blowout" pushed the
   3rd tile in a 3-image side column below the visible gallery box entirely. */
.sp-gallery--multi .sp-gallery__side-col { grid-column: 2; display: grid; gap: 6px; min-height: 0; }
.sp-gallery--multi.sp-gallery--sides-2 .sp-gallery__side-col { grid-template-rows: 1fr 1fr; }
.sp-gallery--multi.sp-gallery--sides-3 .sp-gallery__side-col { grid-template-rows: 1fr 1fr 1fr; }
.sp-gallery--multi { display: grid; }
@media (max-width: 620px) {
  .sp-gallery--multi { grid-template-columns: 1fr; aspect-ratio: auto; }
  /* Reset the desktop grid-row:1/-1 span and height:100% (from the base
     .sp-gallery__tile rule) — left in place, those made the primary tile
     try to span rows sized by a now-stacked, auto-height layout, which
     collapsed its own height to ~0 and made the image disappear entirely
     on mobile. aspect-ratio needs an explicit height:auto to actually
     govern the box's size here. */
  .sp-gallery--multi .sp-gallery__primary { grid-row: auto; grid-column: auto; height: auto; aspect-ratio: 16/10; }
  /* grid-column:2 (set for the desktop 2-column layout) was still in force
     here, so the single explicit "1fr" track from grid-template-columns
     above collapsed to 0 and an implicit extra column absorbed all the
     width instead — grid-column:auto lets both tiles flow into the one
     real column, stacked top to bottom as intended. */
  .sp-gallery--multi .sp-gallery__side-col { grid-column: auto; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; aspect-ratio: 16/6; }
  /* The desktop-only rules above (.sp-gallery--multi.sp-gallery--sides-2/3
     .sp-gallery__side-col { grid-template-rows: 1fr 1fr[ 1fr]; }) carry 3
     class-selectors of specificity vs. this media query's 2, so despite
     being unguarded they still won at every viewport, forcing the mobile
     3-across thumbnail strip into 3 stacked ~38px rows instead of one
     ~127px auto row and leaving a visible gap below the thumbnails.
     Matching their compound-class specificity here is what actually wins. */
  .sp-gallery--multi.sp-gallery--sides-2 .sp-gallery__side-col,
  .sp-gallery--multi.sp-gallery--sides-3 .sp-gallery__side-col {
    grid-template-rows: none;
  }
}

/* ---- Lightbox (shared, injected once per page) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(10, 10, 11, 0.94);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 90vw; max-height: 84vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem; transition: background .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.18); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: var(--on-black-muted); font-size: 0.82rem; letter-spacing: 0.04em; }
@media (max-width: 620px) {
  .lightbox__prev { left: 8px; } .lightbox__next { right: 8px; }
  .lightbox__close { top: 12px; right: 12px; }
}

/* ---- Speaking filters (only rendered once enough records exist) ---- */
.sp-filters { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }

/* ---- Contact / enquiry page ---- */
.contact-hero { padding: 168px 0 64px; }
.contact-hero h1 { font-size: clamp(2.4rem, 3vw + 1.2rem, 3.6rem); max-width: 20ch; }
.enquiry-form { max-width: 760px; }
.form-section { margin-bottom: 36px; }
.form-section__label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); margin-bottom: 14px; display: block;
}
.enquiry-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.enquiry-option {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--paper-line-strong);
  border-radius: var(--radius); cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); background: var(--white);
}
.enquiry-option input { accent-color: var(--ink); flex: none; }
.enquiry-option:hover { border-color: var(--gold); }
.enquiry-option:has(input:checked) { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 0.78rem; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.02em; }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-sans); font-size: 0.92rem; padding: 12px 14px; border: 1px solid var(--paper-line-strong);
  border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-conditional { display: contents; }
.form-conditional[hidden] { display: none; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error-msg { color: #a3372c; font-size: 0.82rem; margin-top: 4px; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #a3372c; }
.form-section.has-error .enquiry-options { outline: 1.5px solid #a3372c; outline-offset: 6px; border-radius: 6px; }
.form-section.has-error > .form-error-msg { display: block; margin-top: 10px; }
.enquiry-submit-row { display: flex; align-items: center; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.form-state { padding: 44px; border: 1px solid var(--paper-line); border-radius: var(--radius-md); background: var(--white); max-width: 640px; }
.form-state h3 { margin-bottom: 12px; }
.form-state p { max-width: 56ch; }
[data-enquiry-form][hidden], [data-enquiry-success][hidden], [data-enquiry-error][hidden] { display: none !important; }
@media (max-width: 620px) {
  .enquiry-options { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---- Media archive filters ---- */
.filters-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 22px 0; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line);
  margin-bottom: 48px;
}
.filters-types { display: flex; gap: 26px; flex-wrap: wrap; }
.filter-link {
  background: none; border: none; padding: 0; cursor: pointer; font-size: 0.86rem; font-weight: 600;
  color: var(--ink-faint); font-family: var(--font-sans); position: relative; padding-bottom: 3px;
}
.filter-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink); transition: right .2s var(--ease); }
.filter-link:hover { color: var(--ink); }
.filter-link[aria-pressed="true"] { color: var(--ink); }
.filter-link[aria-pressed="true"]::after { right: 0; }
.filters-right { display: flex; align-items: center; gap: 16px; }
.select-box, .search-box {
  border: 1px solid var(--paper-line-strong); background: var(--white); font-family: var(--font-sans);
  font-size: 0.85rem; padding: 10px 14px; border-radius: var(--radius); color: var(--ink);
}
.search-box { min-width: 230px; }
.results-meta { color: var(--ink-faint); font-size: 0.8rem; margin: -24px 0 32px; }
[data-media-card][hidden] { display: none !important; }

/* ---- Detail pages ---- */
.detail-header { padding: 168px 0 56px; border-bottom: 1px solid var(--paper-line); }
.detail-header__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.detail-header h1 { font-size: clamp(2.1rem, 2.4vw + 1rem, 3.4rem); max-width: 22ch; }
.byline-box { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--paper-line); }
.byline-box img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--paper-line); }
.prose { max-width: 720px; }
.prose p { color: var(--ink); font-size: 1.05rem; }

/* ---- About ---- */
.about-hero { padding: 168px 0 96px; }
.about-hero h1 { font-size: clamp(3rem, 5vw + 1rem, 5.2rem); max-width: 18ch; }
/* Full cutout, complete head always visible: same safe contain-fit system
   as the homepage — see .mp-profile__media and personPhotoHtml(). A
   moderate, centred width (not full-bleed) since the source is portrait-
   shaped; grounded at the bottom of its frame. */
.about-portrait { max-width: 620px; margin: 56px auto 0; }
.about-portrait__media {
  aspect-ratio: 1317 / 2255; border-radius: var(--radius);
}
.about-body { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.about-body .prose, .about-body .lede { max-width: 62ch; }
.pull-quote {
  font-style: italic; font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
  line-height: 1.3; color: var(--ink); margin: 44px 0; padding-left: 28px; border-left: 2px solid var(--gold);
  font-weight: 500; max-width: 56ch;
}
.focus-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.focus-item { padding: 22px 0; border-top: 1px solid var(--paper-line); transition: border-color .2s var(--ease); }
.focus-item:hover { border-color: var(--gold); }
.focus-item__title { font-weight: 700; margin-bottom: 6px; }

/* ---- Breadcrumbs ---- */
.breadcrumb { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.06em; }
.breadcrumb a { color: var(--ink-faint); font-weight: 600; }
.breadcrumb a:hover { color: var(--ink); }

/* ---- Fade-in micro interaction ---- */
[data-io] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-io].is-visible { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  :root { --container-pad: 26px; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid .card--span2 { grid-column: span 2; }
  .insight-feature { grid-template-columns: 1fr; gap: 36px; }
  .insight-feature__media { order: -1; aspect-ratio: 16/9; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .about-body { grid-template-columns: 1fr; gap: 8px; }
  .report-row { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .report-row:nth-child(even) .report-row__media { order: -1; }

  .mp-hero__grid { grid-template-columns: 1fr; min-height: 0; max-width: none; }
  .mp-hero__text { max-width: none; padding: 120px var(--container-pad) 48px; }
  /* Stacked layout: the desktop two-column clamp (tuned for a ~44% text
     column) would render as an oddly narrow strip in a full-width single
     column here — let the paragraph use the natural full measure instead. */
  .mp-hero__eyebrow { max-width: none; }
  .mp-hero__lede { width: auto; max-width: 60ch; font-size: 1.1rem; }
  /* Grounded flush to the section's bottom edge, matching the desktop
     composition — the 40px bottom padding this used to carry left a bare
     gap between his feet and the next section (Selected Media), which
     read as a layout bug rather than intentional spacing. */
  .mp-hero__media { padding: 0 clamp(16px, 4vw, 32px) 0; }
  .mp-hero__media.photo img { max-width: 78%; max-height: 60vh; }
  .mp-feature__primary { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .mp-feature__secondary { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .mp-thinking__row { grid-template-columns: 1fr; gap: 20px; }
  .mp-thinking__media { order: -1; aspect-ratio: 16/9; }
  .mp-research__featured { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .mp-research__grid { grid-template-columns: 1fr; gap: 40px; }
  .mp-profile__grid { grid-template-columns: 1fr; gap: 32px; }
  .mp-profile__media { max-width: 340px; margin: 0 auto; }
  /* Stacked layout: the grounding trick only applies to the side-by-side
     desktop composition (image is the tallest column there). Stacked, the
     copy block is the last element and needs its own bottom breathing room
     back, since the section itself now carries none. */
  .mp-profile__copy { padding-bottom: 64px; }
}
@media (max-width: 780px) {
  .nav {
    display: none; flex-direction: column; align-items: flex-start; gap: 22px;
    position: fixed; top: 76px; left: 0; right: 0; height: calc(100vh - 76px);
    background: var(--white);
    padding: 40px var(--container-pad); overflow-y: auto;
  }
  .nav.nav--open { display: flex; }
  .nav a { font-size: 1.4rem; }
  .nav-toggle { display: inline-flex; }
  .media-grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .media-grid .card--span2 { grid-column: span 1; }
  .section { padding: 72px 0; }
  .insight-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .filters-bar { flex-direction: column; align-items: flex-start; }
  .filters-right { flex-wrap: wrap; width: 100%; }
  .search-box { min-width: 0; flex: 1 1 auto; width: 100%; }
  .focus-list { grid-template-columns: 1fr; }
  .about-hero { padding: 116px 0 0; }
  .detail-header { padding: 116px 0 44px; }

  .mp-hero__text { padding: 108px var(--container-pad) 40px; }
  .mp-hero__name { margin-bottom: 20px; }
  .mp-hero__media { padding: 0 12px 0; }
  .mp-hero__media.photo img { max-width: 88%; max-height: 52vh; }
  .mp-strip__track { gap: 32px; animation-duration: 26s; }
  .mp-strip__marks { gap: 32px; }
  .mp-strip__mark--logo img { height: 26px; max-width: 128px; }
  .mp-strip__viewport { mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); }
  .mp-feature__secondary { grid-template-columns: 1fr; gap: 36px; }
  .mp-final { flex-direction: column; align-items: flex-start; }
  .site-footer__row { flex-direction: column; align-items: flex-start; gap: 28px; }
}