/* ============================================================
   IAIN McMULLAN PORTFOLIO — Design System v2
   Cormorant Garamond + DM Sans | Warm Gold Editorial
   ============================================================ */

/* ── CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  --gold:       #C4922A;
  --gold-pale:  #FDF8F0;
  --gold-mid:   #F0E6D0;
  --gold-warm:  #F5F0E8;
  --gold-dark:  #A07820;
  --bg:         #FAFAF8;
  --ink:        #0A0A0A;
  --ink-mid:    #6B6B6B;
  /* pale start colour for the hero headline line-settle */
  --h1-settle-from: #C6C3BA;
  --surface:    #FFFFFF;
  --divider:    #E8E4DC;
  --dark-bg:    #0A0A0A;
  --dark-text:  #FAFAF8;

  --ff-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-card:  0 2px 20px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-float: 0 4px 24px rgba(196,146,42,0.25);

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  --nav-h:  72px;
  --max-w:  1280px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); font-size: 16px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; }

/* ── SKIP LINK ──────────────────────────────────────────────── */
.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 1000;
  padding: 0.5rem 1rem; background: var(--gold); color: #fff;
  border-radius: var(--radius-pill); font-weight: 500; font-size: 0.875rem;
  transform: translateY(-250%); transition: transform 0.2s;
}
.skip-link:focus { transform: translateY(0); }

/* ── FOCUS VISIBLE (site-wide keyboard affordance) ──────────────
   Consistent gold ring on any keyboard-focused interactive element.
   Mouse clicks do not trigger :focus-visible, so this stays invisible
   to pointer users. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
.case-mini:focus-visible,
.case-card:focus-visible,
.cat-chip:focus-visible,
.nav-hamburger:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scroll lock while the mobile menu dialog is open */
body.menu-open { overflow: hidden; }

/* ── SELECTION ──────────────────────────────────────────────── */
::selection { background: var(--gold); color: #fff; }

/* ── LAYOUT UTILITY ─────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── SECTION LABELS & HEADING PATTERN ──────────────────────── */
.section-label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}
.display-heading {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink);
}
.display-xl  { font-size: clamp(52px, 7.5vw, 96px); line-height: 0.98; }
.display-lg  { font-size: clamp(38px, 4.5vw, 60px); line-height: 1.06; }
.display-md  { font-size: clamp(26px, 3vw, 40px);   line-height: 1.1; }
.display-sm  { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; }
.italic      { font-style: italic; }
.gold        { color: var(--gold); }
.ink-mid     { color: var(--ink-mid); }

/* ── CARD BASE ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover { box-shadow: var(--shadow-hover); }

/* ── BUTTON STYLES ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
}
.btn-outline {
  border: 1.5px solid var(--divider);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.btn-outline-dark {
  border: 1.5px solid rgba(255,255,255,0.2);
  color: var(--dark-text);
  background: transparent;
}
.btn-outline-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── NAVIGATION ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--divider);
  transition: box-shadow 0.3s ease;
}
.nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
}
.nav-brand {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.nav-brand:hover { color: var(--gold); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-mid);
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--gold);
  transition: right 0.25s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--ink); }
.nav-avail {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(196, 146, 42, 0.10);
  border: 1px solid rgba(196, 146, 42, 0.30);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}
.avail-dot {
  position: relative;
  display: flex;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.avail-dot span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
}
.avail-dot span:first-child {
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Mobile nav */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;   /* bars stay right-aligned; the larger hit area grows left + vertical */
  gap: 5px;
  width: 44px;             /* comfortable ~44px touch target (bars remain 22px) */
  height: 44px;
  padding: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--divider);
  padding: 1.5rem var(--gutter) 2rem;
  z-index: 99;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  flex-direction: column;
  gap: 0;
}
.mobile-menu.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu-avail {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(196, 146, 42, 0.10);
  border: 1px solid rgba(196, 146, 42, 0.30);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  width: fit-content;
  margin-bottom: 1.1rem;
}
.mobile-menu a {
  padding: 0.875rem 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--divider);
  transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; color: var(--gold); }
.mobile-menu a:hover { color: var(--gold); }

/* Scrim behind the open mobile menu so page content does not bleed through
   below the dropdown. Sits under the menu (99) and nav (100), over content.
   Clicking it closes the menu (handled by the click-outside listener in JS). */
body.menu-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(14, 14, 12, 0.5);
}

/* ── FLOATING CTA ───────────────────────────────────────────── */
.floating-cta {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
@media (prefers-reduced-motion: no-preference) {
  .floating-cta.visible { animation: ctaPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}
@keyframes ctaPop {
  0%   { opacity: 0; transform: scale(0.8) translateY(8px); }
  70%  { opacity: 1; transform: scale(1.05) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.floating-cta a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  transition: transform 0.2s ease, background 0.2s ease;
}
.floating-cta a:hover {
  background: var(--gold-dark);
  transform: rotate(2deg) translateY(-2px);
}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(6px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal.active { opacity: 1; transform: translateY(0); filter: blur(0); }

  .reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    filter: blur(6px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-left.active { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left { opacity: 1; transform: none; }
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: 5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* opaque backdrop INSIDE the isolated context so the difference-blend always has
     something to invert against (e.g. when reduced-motion hides the video) */
  background: var(--bg);
}
/* Ambient ink video background */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 55%;            /* bias the plume toward the right / empty side */
  /* JS sizes this to (wrapHeight x wrapWidth); after the -90deg rotation the ink
     flows right -> left and fills the hero. Viewport units are the no-JS fallback. */
  width: 100vh;
  height: 100vw;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.18);
  transform-origin: center;
  /* deepen the blue to a rich navy. Contrast keeps the white background light while
     a brightness drop sinks the ink darker so the difference-blend flips brighter. */
  filter: saturate(1.4) contrast(1.55) brightness(0.72);
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  /* Vertical ground gradient: warm/near-white at the top and bottom edges, cooling
     to the darker tone through the centre band (headline + rotating line) so the ink
     concentrates there and the difference-flip reads bright. */
  background: linear-gradient(to bottom,
    rgba(250, 248, 244, 0.78) 0%,
    rgba(250, 248, 244, 0.30) 9%,
    rgba(250, 248, 244, 0.14) 15%,
    rgba(250, 248, 244, 0.14) 44%,
    rgba(250, 248, 244, 0.22) 56%,
    rgba(250, 248, 244, 0.50) 78%,
    rgba(250, 248, 244, 0.80) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap { display: none; }
}
.hero-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4rem;
  align-items: center;
  position: relative;
}
.hero-left { position: relative; max-width: 760px; }

/* Staggered entrance.
   Sequence matches the hero reference animation: elements arrive strictly in
   reading order and fade almost in place (6px, not 20px) — the eyebrow and
   class line lead, the headline settles line by line (JS, see portfolio.js),
   then the role line, the two CTAs, and finally the scroll hint. */
@media (prefers-reduced-motion: no-preference) {
  .hero-el { opacity: 0; transform: translateY(6px); }
  .hero-el-1 { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
  .hero-el-2 { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s forwards; }
  .hero-el-3 { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 1.90s forwards; }
  .hero-el-5 { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 2.05s forwards; }
  .hero-el-6 { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 2.70s forwards; }
  .hero-el-7 { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 2.85s forwards; }
  .hero-el-8 { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 3.00s forwards; }

  /* CTAs arrive one after the other, not as a block — the container itself
     stays put and each button carries its own delay. */
  .hero-el-4 { opacity: 1; transform: none; animation: none; }
  .hero-ctas .btn { opacity: 0; transform: translateY(6px); }
  .hero-ctas .btn:nth-of-type(1) { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 2.20s forwards; }
  .hero-ctas .btn:nth-of-type(2) { animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 2.45s forwards; }

  .hero-svg-wrap {
    opacity: 0;
    animation: heroFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-el, .hero-svg-wrap, .hero-ctas .btn { opacity: 1; transform: none; }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-name {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Same adaptive treatment as the headline: near-black over the pale paper,
     light over the dark ink plume. */
  color: #ffffff;
  mix-blend-mode: difference;
  margin-bottom: 1rem;
}
.hero-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  /* White + difference: letters auto-invert against whatever ink passes behind —
     near-black over pale paper, light over the dark blue plume. Always legible. */
  color: #ffffff;
  mix-blend-mode: difference;
  margin-bottom: 2.75rem;   /* desktop: clear the headline word-rise so 'results.' never overlaps the role line on load (mobile overrides to 1.5rem) */
  letter-spacing: -0.01em;
}
.hero-word-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-family: var(--ff-body);
  font-size: clamp(0.9rem, 1.5vw, 1.0625rem);
  /* adapt like the headline: near-black over paper, gold-ish over the ink (always legible) */
  color: #ffffff;
  mix-blend-mode: difference;
  font-weight: 400;
}
.word-swap-wrapper {
  position: relative;
  display: inline-block;
}
.word-swap {
  display: inline-block;
  color: inherit;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  font-style: italic;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.word-swap.swapping {
  opacity: 0;
  transform: translateY(-6px);
}
.hero-bio {
  font-size: clamp(1.125rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  /* adaptive like the headline: near-black over the light ground, light over the ink */
  color: #ffffff;
  mix-blend-mode: difference;
  max-width: 560px;
  margin-bottom: 2rem;
}
.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  /* adaptive like the rest of the hero text: near-black over the light ground, light over the ink */
  color: #ffffff;
  mix-blend-mode: difference;
}
.hero-stats .stat-number > span { color: inherit !important; } /* override the inline gold "+" so it adapts too */
.stat-item { }
.stat-number {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(30px, 3.5vw, 42px);
  color: inherit;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-number span { color: var(--gold); }
.stat-label {
  font-size: 0.8125rem;
  color: inherit;
  margin-top: 0.25rem;
  font-weight: 400;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.hero-scroll-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  /* Adaptive like the headline: near-black over the paper, light over the ink. */
  color: #ffffff;
  mix-blend-mode: difference;
  font-weight: 500;
}
.scroll-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.scroll-arrow span {
  display: block;
  width: 1px;
  background: var(--ink-mid);
}
.scroll-arrow span:nth-child(1) { height: 16px; }
.scroll-arrow span:nth-child(2) { height: 8px; width: 1px; transform: rotate(45deg) translateX(2px); }

/* Hero geometric SVG */
.hero-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .svg-ring-outer { animation: svgSpin 40s linear infinite; transform-origin: 250px 250px; }
  .svg-ring-mid   { animation: svgSpin 28s linear infinite reverse; transform-origin: 250px 250px; }
  .svg-float-1    { animation: svgFloat 6s ease-in-out infinite; }
  .svg-float-2    { animation: svgFloat 8s ease-in-out 1s infinite; }
}
@keyframes svgSpin  { to { transform: rotate(360deg); } }
@keyframes svgFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ═══ EDITORIAL HERO — gold ink accent + solid paper-legible type ═══ */
.hero-ink {
  position: absolute; inset: 0 0 0 auto; width: 62%; z-index: 0;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 36%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 36%, #000 100%);
}
.hero-ink-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  filter: sepia(0.32) saturate(1.32) hue-rotate(-12deg) brightness(1.02) contrast(1.04);
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { .hero-ink { display: none; } }
/* Entrance: the ink drifts in slowly from the right on load. Gated to
   motion-allowed users; ends in the resting state so it can never strand hidden. */
@media (prefers-reduced-motion: no-preference) {
  .hero-ink { animation: heroInkIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
}
@keyframes heroInkIn {
  from { opacity: 0; transform: translateX(14%); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Mobile: the ink layer is full-bleed, so the sideways slide would push it off
   the right edge (horizontal scroll) and end too opaque over the text. Fade only,
   settling at the intended 0.5 veil so the hero copy stays legible. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .hero-ink { animation-name: heroInkFadeMobile; }
}
@keyframes heroInkFadeMobile {
  from { opacity: 0; transform: none; }
  to   { opacity: 0.5; transform: none; }
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(125% 95% at 36% 36%, transparent 56%, rgba(58,40,10,0.10) 100%);
}
.hero-grid { position: relative; z-index: 2; }

.hero-name {
  color: var(--ink-mid); mix-blend-mode: normal;
  font-size: clamp(13px, 1.2vw, 15px); letter-spacing: 0.3em;
  display: flex; align-items: center; gap: 1rem;
}
.hero-rule { flex: 0 0 auto; height: 1.5px; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); }
@media (prefers-reduced-motion: no-preference) { .hero-rule { animation: heroRule 1.05s cubic-bezier(0.4,0,0.2,1) 0.5s forwards; } }
@media (prefers-reduced-motion: reduce) { .hero-rule { width: 96px; } }
@keyframes heroRule { to { width: 96px; } }

.hero-h1 { color: var(--ink); mix-blend-mode: normal; margin-bottom: 2.25rem; }
/* Single emphasis: gold italic, no underline. The accent is the colour + slope, nothing more. */
.hero-h1 .h1-gold { color: var(--gold-dark); font-style: italic; }

.hero-role { color: var(--ink-mid); mix-blend-mode: normal; }

.hero-proof { margin-top: 3rem; }
.hero-proof-eye {
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 600; margin: 0 0 1.1rem;
  padding-top: 1rem; border-top: 1px solid var(--divider);
}
.hero-stats { color: var(--ink); mix-blend-mode: normal; margin-bottom: 0; }
.hero-stats .stat-number > span { color: var(--gold) !important; }
.hero-proof .stat-label { color: var(--ink-mid); }

.hero-scroll-hint { color: var(--ink-mid); mix-blend-mode: normal; }
@media (prefers-reduced-motion: no-preference) { .hero-scroll-hint span { animation: heroBreath 2s ease-in-out infinite; } }
@keyframes heroBreath { 0%,100% { opacity: 0.55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } }

@media (max-width: 900px) {
  .hero-ink {
    width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 84%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 84%);
    opacity: 0.5;
  }
  .hero-ink-vid { object-position: center; }
  .hero-rule { display: none; }
  .hero-h1 .h1-gold::after { display: none; }
  .hero-name { gap: 0.75rem; }
  .hero-proof { margin-top: 2rem; }
}

/* ── hero role classification (recruiter pattern-match) ── */
.hero-class { color: var(--ink-mid); font-weight: 400; font-size: clamp(1rem, 1.55vw, 1.22rem); letter-spacing: 0.005em; margin: 0.55rem 0 0; mix-blend-mode: normal; }
@media (max-width: 900px) { .hero-class { font-size: 1.02rem; } }
/* hero 'Start a conversation' outline border tinted to the ink yellow */
#hero-cta-outline { border-color: #F0B62E; }
#hero-cta-outline:hover { border-color: #F0B62E; color: var(--gold); }

/* periodic gold sheen sweeping across the CTA */
@media (prefers-reduced-motion: no-preference) {
  #hero-cta-outline {
    position: relative;
    overflow: hidden;
  }
  #hero-cta-outline::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 40%;
    background: linear-gradient(105deg, transparent, rgba(240, 182, 46, 0.25), transparent);
    animation: cta-shimmer 3.6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes cta-shimmer {
    0%        { transform: skewX(-20deg) translateX(0); }
    60%, 100% { transform: skewX(-20deg) translateX(450%); }
  }
}

/* ── best-fit roles strip ── */
.bestfit { background: var(--surface); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 1.05rem 0; }
.bestfit-inner { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.bestfit-label { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; flex: 0 0 auto; }
.bestfit-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.7rem; list-style: none; margin: 0; padding: 0; }
.bestfit-list li { position: relative; font-size: 0.94rem; color: var(--ink); font-weight: 500; }
.bestfit-list li:not(:last-child)::after { content: "\00B7"; position: absolute; right: -0.95rem; color: var(--gold); }

/* ── off the clock (the human note) ── */
.offclock { padding: 5.5rem 0; background: var(--bg); }
.offclock-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 3.75rem); align-items: center; }
.offclock-media { border-radius: 18px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 30px 60px -32px rgba(40,28,8,0.32); }
.offclock-media img { width: 100%; height: 100%; object-fit: cover; }
.offclock-text .section-label { color: var(--gold-dark); }
.offclock-text h2 { margin: 0.5rem 0 1.25rem; }
.offclock-lead { font-size: 1.2rem; line-height: 1.58; color: var(--ink); margin-bottom: 1.1rem; }
.offclock-body { font-size: 1.02rem; line-height: 1.7; color: var(--ink-mid); margin-bottom: 1.6rem; }
.offclock-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--gold-dark); text-decoration: none; border-bottom: 1.5px solid var(--gold); padding-bottom: 3px; transition: gap 0.2s ease; }
.offclock-link:hover { gap: 0.75rem; }
@media (max-width: 820px) {
  .offclock { padding: 3.5rem 0; }
  .offclock-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .offclock-media { aspect-ratio: 16 / 10; }
}

/* ── portfolio: Problem / Role / Result ── */
.case-prr { margin: 0.4rem 0 0.85rem; display: grid; gap: 0.4rem; }
.case-prr-row { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.65rem; font-size: 0.9rem; line-height: 1.45; }
.case-prr-k { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); padding-top: 0.2rem; }
.case-prr-v { color: var(--ink-mid); }
.case-prr-v strong { color: var(--ink); font-weight: 600; }

/* ── SKILLS SECTION ─────────────────────────────────────────── */
.skills { padding: 5rem 0; }
.skills-heading-area { margin-bottom: 3rem; }
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.skill-col {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
.skill-col:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: var(--gold-mid);
}
.skill-col-num {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
  margin-bottom: 0.75rem;
}
.skills-group-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.875rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--divider);
}
.skill-list { list-style: none; margin: 0; padding: 0; }
.skill-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.125rem;
  font-size: 0.9375rem;
  color: var(--ink-mid);
  border-bottom: 1px solid var(--gold-warm);
}
.skill-list li:last-child { border-bottom: none; }
.skill-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.skills-statement {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 30px);
  color: var(--gold);
  text-align: center;
  line-height: 1.3;
}

/* Homepage skills teasers (3 cards linking to the standalone Capabilities page) */
.skills-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.skill-teaser {
  display: flex; flex-direction: column; padding: 1.75rem;
  background: var(--surface); border: 1px solid var(--divider); border-radius: 14px; box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.skill-teaser:hover { border-color: var(--gold-mid); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.skill-teaser-num { font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--gold-mid); }
.skill-teaser-title { font-family: var(--ff-display); font-weight: 700; font-size: 1.4rem; line-height: 1.12; color: var(--ink); margin: 0.5rem 0 0.55rem; }
.skill-teaser-desc { margin: 0 0 1.15rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink-mid); flex: 1; }
.skill-teaser-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dark); transition: gap 0.2s ease; }
.skill-teaser:hover .skill-teaser-link { gap: 0.6rem; }
@media (max-width: 820px) { .skills-teaser-grid { grid-template-columns: 1fr; gap: 1rem; } }

/* ── BRANDS MARQUEE ─────────────────────────────────────────── */
.brands { padding: 3.5rem 0; }
.marquee-outer {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marqueeScroll 55s linear infinite; }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-logo[alt="British Airways"] { height: 52px !important; }
/* On mobile, the BA wordmark is so horizontal that height-only sizing makes it
   visually ~2.5x wider than every other logo, dominating the marquee strip.
   Cap the WIDTH on small screens and let height scale proportionally so the
   visual footprint matches the rest of the row. */
@media (max-width: 900px) {
  .marquee-logo[alt="British Airways"] {
    height: auto !important;
    max-width: 160px;
    /* Height scales naturally from the BA wordmark's ~5:1 aspect ratio so the
       lettering never squashes. */
  }
}

/* Mobile masthead: distribute vertically. Copy sits up top, the CTAs drop into the
   thumb zone, giving the headline and standfirst more breathing room above them. */
@media (max-width: 900px) {
  .hero { align-items: stretch; }
  .hero > .container { display: flex; flex-direction: column; }
  .hero-grid { flex: 1 1 auto; min-height: 0; }
  .hero-left { display: flex; flex-direction: column; }
  .hero-left .hero-ctas { margin-top: auto; padding-top: 1.75rem; }
}

.marquee-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: none;                 /* permanently colourised */
  flex-shrink: 0;
}

/* ── CASE STUDIES ───────────────────────────────────────────── */
.case-studies { padding: 5rem 0; }
.section-intro {
  margin-top: 1.25rem;
  max-width: 760px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-mid);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.case-card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  position: relative;
}
.case-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-6px); }
.case-img-wrap {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.case-img-wrap img {
  width: 100%;
  height: 122%;            /* headroom so GSAP parallax never reveals an edge */
  object-fit: cover;
  transform: translateY(-9%); /* centred when JS/parallax is absent */
  will-change: transform;
}
.case-card:hover .case-img-wrap { transform: scale(1.03); transition: transform 0.7s ease; }

/* Modifier: render the whole image (no crop) for cards whose thumbnail isn't
   a standard landscape photograph. Disables the parallax headroom + cover
   crop, fits the image within the card's image box. */
.case-card--contain .case-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  padding: 0.75rem;
  background: var(--surface);
}
.case-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(196,146,42,0.55) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
}
.case-card:hover .case-img-overlay { opacity: 1; }
.case-overlay-text {
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.case-body { padding: 1.5rem; }
.case-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--gold-pale);
  color: var(--gold);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.case-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.case-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-mid);
}
.case-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold);
  transition: gap 0.25s ease;
}
.case-card:hover .case-arrow { gap: 0.625rem; }

/* ── IMPACT NUMBERS ─────────────────────────────────────────── */
.impact { background: var(--gold-warm); padding: 5rem 0; }
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.impact-number {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.impact-number .suffix { color: var(--gold); }
.impact-label {
  font-size: 0.875rem;
  color: var(--ink-mid);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* ── LEADERSHIP PRINCIPLES ──────────────────────────────────── */
.leadership { padding: 5rem 0; }
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.principle-card {
  padding: 2rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--divider);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.principle-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.principle-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
  color: var(--gold);
}
.principle-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.principle-desc { font-size: 0.875rem; color: var(--ink-mid); line-height: 1.55; }

/* ── CAREER TIMELINE ────────────────────────────────────────── */
.timeline { padding: 5rem 0; }
.timeline-list {
  list-style: none;
  position: relative;
  padding-left: 5rem;
  max-width: 820px;
  margin-top: 3rem;
}
.timeline-list::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 6px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--gold-mid) 80%, transparent);
}
.timeline-item {
  position: relative;
  z-index: 1;              /* lift the whole entry (and its logo dot) above the spine */
  padding-bottom: 2.75rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -5rem;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  z-index: 2;          /* sit above the gold spine so the logos aren't crossed by the line */
}
.timeline-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.timeline-date {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.timeline-role {
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.timeline-company {
  font-weight: 400;
  color: var(--ink-mid);
}
.timeline-desc { font-size: 0.875rem; color: var(--ink-mid); line-height: 1.5; margin-top: 0.25rem; max-width: 560px; }

/* ── PERSPECTIVES ───────────────────────────────────────────── */
.perspectives { padding: 5rem 0; }
.persp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}
.persp-pull {
  grid-column: 1 / -1;
  border-left: 3px solid var(--gold);
  padding: 1.75rem 2.5rem;
  background: var(--gold-warm);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.persp-pull blockquote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.3;
  color: var(--ink);
}
.persp-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.persp-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.persp-art {
  aspect-ratio: 16/10;
  background: var(--gold-warm);
  position: relative;
  overflow: hidden;
}
.persp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
}
.persp-body { padding: 1.5rem; flex: 1; }
.persp-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.persp-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.625rem;
}
.persp-text { font-size: 0.875rem; color: var(--ink-mid); line-height: 1.6; }

/* ── CREDENTIALS ────────────────────────────────────────────── */
.credentials { padding: 5rem 0; }
.cred-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.cred-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--divider);
  gap: 0.5rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.cred-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.cred-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--bg);
  padding: 4px;
}
.cred-qual {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--gold);
  line-height: 1;
}
.cred-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.cred-inst { font-size: 0.8rem; color: var(--ink-mid); }
.courses-heading {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-align: left;
  margin: 3.25rem 0 1.25rem;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  max-width: 760px;
  margin-inline: 0;
}
.course-grid .cred-card { padding: 0.9rem 0.85rem; opacity: 0.9; }
.course-grid .cred-logo { height: 30px; margin-bottom: 0.5rem; }
.course-grid .cred-name { font-size: 0.85rem; }
.course-grid .cred-inst { font-size: 0.76rem; }

/* ── CONTACT ────────────────────────────────────────────────── */
.contact {
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: 6rem 0;
}
.contact-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.contact-heading {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(52px, 7vw, 88px);
  line-height: 0.96;
  color: var(--dark-text);
  margin-bottom: 1.25rem;
}
.contact-sub {
  font-size: 1.0625rem;
  color: rgba(250,250,248,0.65);
  line-height: 1.55;
  margin-bottom: 2.5rem;
}
.contact-ctas {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.btn-gold-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.25rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
  font-size: 1rem;
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-gold-dark:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
}
.contact-links {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.contact-link-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.contact-link:hover .contact-link-icon {
  border-color: var(--gold);
  background: rgba(196,146,42,0.1);
}
.contact-link-label {
  font-size: 0.8125rem;
  color: rgba(250,250,248,0.6);
  transition: color 0.25s;
}
.contact-link:hover .contact-link-label { color: var(--gold); }
.contact-link svg { width: 20px; height: 20px; stroke: rgba(250,250,248,0.7); transition: stroke 0.25s; }
.contact-link:hover svg { stroke: var(--gold); }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer {
  background: var(--dark-bg);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 2rem 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-brand {
  font-weight: 500;
  color: var(--dark-text);
  font-size: 0.9rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.footer-links a {
  font-size: 0.875rem;
  color: rgba(250,250,248,0.5);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 0.8125rem; color: rgba(250,250,248,0.4); }
.footer-brand-col { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-privacy { font-size: 0.75rem; color: rgba(250,250,248,0.28); transition: color 0.2s; }
.footer-privacy:hover { color: rgba(250,250,248,0.6); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid   { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  /* MOBILE MASTHEAD — phones get their own upright PORTRAIT ink clip
     (assets/video/hero-bg-mobile.mp4, chosen via the <source media> query), shown normally
     rather than the desktop rotated landscape clip. Text is solid and legible over a veil;
     no adaptive colour-flipping on mobile (mix-blend-mode is unreliable over <video> on iOS,
     and JS sampling is disabled for mobile in portfolio.js). */
  .hero-video {
    position: absolute;
    inset: 0 !important;                /* fill the full hero; !important beats the desktop 100vh/100vw rule */
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: cover; object-position: center;
    filter: saturate(1.08) contrast(1.03);
  }
  /* Ink bleed behind the About photo: a flipped, in-sync copy of the hero clip, faded to paper. */
  .about-ink {
    display: block !important;   /* beats the base rule that's defined later in the file */
    position: absolute; top: 0; left: 0; right: 0; height: 360px;
    overflow: hidden; z-index: 0; pointer-events: none;
  }
  .about-ink-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: block;
    filter: saturate(1.08) contrast(1.03);   /* match the hero video's CSS filter so the texture is identical */
  }
  .about-ink::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    /* Start at the hero veil's opacity (~0.58) so the ink's shade/texture matches across the
       seam, then ramp to solid paper so it fades out by mid-photo. */
    background: linear-gradient(to bottom, rgba(250,248,244,0.58) 0%, rgba(250,248,244,0.66) 30%, rgba(250,248,244,0.86) 60%, var(--bg) 84%);
  }
  .hero-h1, .hero-name, .hero-word-row, .hero-bio, .hero-scroll-hint { mix-blend-mode: normal; }
  .hero-h1  { color: var(--ink); text-shadow: 0 1px 3px rgba(250, 248, 244, 0.7); margin-bottom: 1.5rem; }
  /* Smaller rise on mobile so 'results.' never drops onto the rotating specialism line on load */
  .js .hero-h1 .h1-word { transform: translateY(6px); }
  .hero-name { color: var(--gold-dark); text-shadow: 0 1px 3px rgba(250, 248, 244, 0.65); }
  .hero-word-row { color: var(--gold-dark); text-shadow: 0 1px 3px rgba(250, 248, 244, 0.65); }
  .hero-bio { color: var(--ink); text-shadow: 0 1px 3px rgba(250, 248, 244, 0.7); }
  .hero-scroll-hint { color: var(--ink-mid); }
  .stat-label { color: var(--ink-mid); }
  .hero-video-overlay {
    background: linear-gradient(to bottom,
      rgba(250, 248, 244, 0.62) 0%,
      rgba(250, 248, 244, 0.52) 45%,
      rgba(250, 248, 244, 0.58) 100%);
  }
  .principle-grid { grid-template-columns: repeat(2, 1fr); }
  .persp-grid { grid-template-columns: 1fr; }
  .persp-pull { grid-column: 1; }
}

@media (max-width: 768px) {
  .nav-links, .nav-avail { display: none; }
  .nav-hamburger { display: flex; }
  .skills-grid { grid-template-columns: 1fr; }
  .cred-grid   { grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .course-grid .cred-card:nth-child(3) { grid-column: 1 / -1; }   /* Vanderbilt full width below the two Google cards */
  /* show the Perspectives pull-quote statically on mobile (its desktop char-reveal can leave it blank) */
  .js .persp-pull blockquote .char { opacity: 1 !important; }
  .principle-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 1.5rem; }
  .floating-cta { bottom: 1.25rem; right: 1.25rem; }

  /* tighten the generous vertical rhythm so the page isn't an endless scroll on phones */
  .skills, .case-studies, .impact, .leadership, .timeline,
  .perspectives, .credentials { padding: 3.5rem 0; }
  .contact { padding: 4rem 0; }
  .brands { padding: 2.5rem 0; }
  .skills-heading-area { margin-bottom: 2rem; }
  .case-grid, .skills-grid { margin-top: 2rem; }
  /* shorter decorative art panels on the Perspectives cards */
  .persp-art { aspect-ratio: 16 / 6; }
  /* roomier tap targets, full-width primary CTA */
  .hero-ctas { gap: 0.75rem; }

  /* Mobile browsers can drop the animated marquee content when it's masked
     (mask-image + transform compositing bug). Remove the mask and lift opacity so
     the brand logos are reliably visible. */
  /* Mobile: single row, faster, no mask (mobile can drop masked animated content). */
  .marquee-outer { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation-duration: 22s; gap: 2.5rem; }
  .marquee-logo { filter: none; }
}

@media (max-width: 480px) {
  :root { --gutter: 1.25rem; }
  .hero-h1 { font-size: 31px; }
  /* tidy, full-width stacked CTAs on phones */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .case-grid { gap: 1.25rem; }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: 1fr; }
  .contact-links { gap: 2rem; }
  .timeline-list { padding-left: 4rem; }
  .timeline-list::before { left: 22px; }
  .timeline-spine { left: 21px !important; }
  .timeline-dot { left: -4rem; width: 46px; height: 46px; padding: 5px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOTION UPGRADE — GSAP-driven + ambient effects
   ═══════════════════════════════════════════════════════════════ */

/* Hero headline line-settle (GSAP animates; CSS only pre-stages for JS-capable,
   motion-OK browsers). Each visual line arrives pale and darkens to full ink
   while the next line is already arriving — grouping is measured at runtime in
   portfolio.js so it follows the real text wrap at any width. */
.hero-h1 .h1-line { display: block; }
.hero-h1 .h1-word { display: inline-block; will-change: transform, color; }
/* settle uses colour + a short rise (no opacity) so the difference-blend never strands the headline */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-h1 .h1-word { color: var(--h1-settle-from); transform: translateY(8px); }
}

/* Ambient film grain — felt, not seen */
.grain {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: 0.03; } }

/* Leadership principle icons — pop on entry, breathe subtly */
@media (prefers-reduced-motion: no-preference) {
  .principle-icon { opacity: 0; transform: scale(0.6) rotate(-8deg); transform-origin: center; }
  .principle-card.active .principle-icon {
    animation: iconPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               iconFloat 3.8s ease-in-out 0.85s infinite alternate;
  }
}
@keyframes iconPop {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes iconFloat { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* Skills — the three cards land in sequence (1 -> 2 -> 3), each card's bullets then
   populating one after another. Driven by .skills-grid gaining .active on scroll. */
@media (prefers-reduced-motion: no-preference) {
  .skill-col { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .skills-grid.active .skill-col { opacity: 1; transform: none; }
  .skills-grid.active .skill-col:nth-child(1) { transition-delay: 0s; }
  .skills-grid.active .skill-col:nth-child(2) { transition-delay: 0.5s; }
  .skills-grid.active .skill-col:nth-child(3) { transition-delay: 1.0s; }

  .skill-list li { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; }
  .skills-grid.active .skill-list li { opacity: 1; transform: none; }
  /* column 1 bullets */
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(1) { transition-delay: 0.30s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(2) { transition-delay: 0.36s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(3) { transition-delay: 0.42s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(4) { transition-delay: 0.48s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(5) { transition-delay: 0.54s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(6) { transition-delay: 0.60s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(7) { transition-delay: 0.66s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(8) { transition-delay: 0.72s; }
  .skills-grid.active .skill-col:nth-child(1) .skill-list li:nth-child(9) { transition-delay: 0.78s; }
  /* column 2 bullets (start ~0.5s later) */
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(1) { transition-delay: 0.80s; }
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(2) { transition-delay: 0.86s; }
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(3) { transition-delay: 0.92s; }
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(4) { transition-delay: 0.98s; }
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(5) { transition-delay: 1.04s; }
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(6) { transition-delay: 1.10s; }
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(7) { transition-delay: 1.16s; }
  .skills-grid.active .skill-col:nth-child(2) .skill-list li:nth-child(8) { transition-delay: 1.22s; }
  /* column 3 bullets (start ~1.0s later) */
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(1) { transition-delay: 1.30s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(2) { transition-delay: 1.36s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(3) { transition-delay: 1.42s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(4) { transition-delay: 1.48s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(5) { transition-delay: 1.54s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(6) { transition-delay: 1.60s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(7) { transition-delay: 1.66s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(8) { transition-delay: 1.72s; }
  .skills-grid.active .skill-col:nth-child(3) .skill-list li:nth-child(9) { transition-delay: 1.78s; }
}
@media (prefers-reduced-motion: reduce) {
  .skill-col, .skill-list li { opacity: 1; transform: none; }
}

/* Career timeline — gold spine that draws on scroll (GSAP scrubs scaleY) */
.timeline-list::before { background: var(--gold-mid); opacity: 0.4; }
.timeline-spine {
  position: absolute;
  left: 27px;
  top: 6px;
  bottom: 0;
  width: 2px;
  transform-origin: top center;
  background: linear-gradient(to bottom, var(--gold), var(--gold) 70%, var(--gold-mid));
  z-index: 0;            /* stays behind the entries / logo dots */
}

/* Perspectives — pull-quote character reveal */
.persp-pull blockquote .char { display: inline-block; white-space: pre; }
.persp-pull blockquote .word { display: inline-block; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .persp-pull blockquote .char { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   V3 ADDITIONS — hero spacing, adaptive CTA, compact work strip, career strip
   ═══════════════════════════════════════════════════════════════ */

/* hero: drop the text block lower so it isn't squashed under the nav */
.hero { padding-top: calc(var(--nav-h) + 3.25rem); }

/* adaptive "Get in Touch": periwinkle border on light, white over the dark ink (JS toggles .over-ink) */
.btn-adaptive { border-color: #6C5CE7; color: var(--ink); transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; }
.btn-adaptive.over-ink { border-color: #ffffff; color: #ffffff; }

/* compact Selected Work — six image-led cards in one row */
.case-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 2.5rem; }
.case-mini { display: flex; flex-direction: column; text-decoration: none; }
.case-mini-img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); background: var(--gold-warm); }
.case-mini-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.case-mini:hover .case-mini-img img { transform: scale(1.06); }
.case-mini-tag { margin-top: 0.6rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); font-weight: 500; }
.case-mini-title { margin: 0.2rem 0 0; font-family: var(--ff-body); font-size: 0.9rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.case-viewall { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 2rem; font-weight: 500; color: var(--gold-dark); font-size: 0.95rem; transition: gap 0.2s ease, color 0.2s ease; }
.case-viewall:hover { gap: 0.7rem; color: var(--gold); }

/* horizontal career strip above "How I lead" */
.career-row { padding: 3.5rem 0 6rem; background: var(--surface); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.career-row-label { text-align: center; font-size: 0.875rem; color: var(--ink-mid); margin: 0 0 2.25rem; }
.career-row-label a { color: var(--gold-dark); font-weight: 500; }
.career-strip { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; position: relative; }
.career-strip::before { content: ''; position: absolute; left: 5%; right: 5%; top: 45px; height: 2px; background: var(--gold-mid); z-index: 0; }
.career-node { position: relative; z-index: 1; flex: 1 1 0; display: flex; justify-content: center; }
.career-node-link { display: flex; justify-content: center; text-decoration: none; }
.career-node-logo { width: 93px; height: 93px; border-radius: 16px; background: var(--surface); border: 2px solid var(--divider); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 13px; transition: border-color 0.3s ease, transform 0.3s ease; }
.career-node-logo img { width: 100%; height: 100%; object-fit: contain; }
.career-node:hover .career-node-logo { border-color: var(--gold); transform: translateY(-4px); }
.career-node-pop { position: absolute; top: 105px; left: 50%; transform: translate(-50%, 6px); width: max-content; max-width: 190px; text-align: center; background: var(--surface); border: 1px solid var(--divider); border-radius: 10px; box-shadow: var(--shadow-hover); padding: 0.55rem 0.75rem; opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; z-index: 5; }
.career-node:hover .career-node-pop, .career-node-link:focus-visible .career-node-pop { opacity: 1; transform: translate(-50%, 0); }
.career-node-role { display: block; font-size: 0.78rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
.career-node-years { display: block; font-size: 0.7rem; color: var(--ink-mid); margin-top: 0.15rem; }

@media (max-width: 1024px) {
  .case-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .case-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.875rem; padding-bottom: 0.6rem; -webkit-overflow-scrolling: touch; }
  .case-mini { flex: 0 0 64%; scroll-snap-align: start; }
  .career-strip { gap: 0.3rem; }
  .career-node-logo { width: 38px; height: 38px; padding: 5px; border-radius: 9px; }
  .career-strip::before { top: 19px; }
  .career-row { padding: 2.5rem 0; }
  .career-node-pop { display: none; }   /* no hover on touch; also prevents width overflow */
}

/* ═══════════════════════════════════════════════════════════════
   V4 ADDITIONS — Career Highlights cards + career-strip heading
   ═══════════════════════════════════════════════════════════════ */

/* "By the numbers" — career highlight cards */
.highlights { padding: 5rem 0; }
.highlights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.highlight-card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.75rem 1.5rem; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.highlight-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.highlight-company { font-family: var(--ff-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: var(--ink); margin: 0 0 0.85rem; position: relative; padding-bottom: 0.85rem; }
.highlight-company::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--gold); }
.highlight-desc { font-size: 0.9rem; line-height: 1.55; color: var(--ink-mid); margin: 0; }

@media (max-width: 1024px) { .highlights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .highlights-grid { grid-template-columns: 1fr; } }

/* career-strip heading block ("My career journey") */
.career-row-head { text-align: center; margin-bottom: 2.5rem; }
.career-row-head .section-label { display: block; }
.career-row-head .display-heading { margin: 0.25rem 0 0.65rem; }
.career-row-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--gold-dark); font-weight: 500; font-size: 0.95rem; transition: gap 0.2s ease, color 0.2s ease; }
.career-row-link:hover { gap: 0.6rem; color: var(--gold); }

/* Breathing room between the toolkit intro paragraph and the three skill cards */
.skills .section-intro { margin-bottom: 3.75rem; }

/* Perspectives — cards now a strip above the relocated pull-quote, with a Read more link */
.persp-readmore { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 2.25rem; font-weight: 500; color: var(--gold-dark); font-size: 0.95rem; transition: gap 0.2s ease, color 0.2s ease; }
.persp-readmore:hover { gap: 0.7rem; color: var(--gold); }
.perspectives .persp-pull { margin-top: 2.75rem; }

/* Perspective card artwork images (sit above the gradient placeholder, fill the frame) */
.persp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   V5 — individual article pages + home "Read Full Article" link
   ═══════════════════════════════════════════════════════════════ */

/* Standalone article pages (articles/<slug>.html) */
.article-page { padding-top: var(--nav-h); }
.article-hero { width: 100%; height: clamp(280px, 46vh, 520px); overflow: hidden; background: var(--gold-warm); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-head { max-width: 760px; margin: 0 auto; padding-top: 2.75rem; }
.article-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--ink-mid); margin-bottom: 1.25rem; transition: gap 0.2s ease, color 0.2s ease; }
.article-back:hover { gap: 0.65rem; color: var(--gold); }
.article-head .section-label { display: block; }
.article-title { font-family: var(--ff-display); font-weight: 700; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; color: var(--ink); margin-top: 0.5rem; }
.article-body { max-width: 720px; margin: 2.25rem auto 0; }
.article-body p { font-size: 1.0625rem; line-height: 1.8; color: var(--ink); margin-bottom: 1.35rem; }
.article-body p:first-child { font-size: 1.2rem; line-height: 1.7; color: var(--ink); }
.article-cta { max-width: 720px; margin: 3rem auto 5.5rem; padding-top: 2.5rem; border-top: 1px solid var(--divider); text-align: center; }
@media (max-width: 768px) { .article-head { padding-top: 2rem; } .article-body p:first-child { font-size: 1.1rem; } }

/* Home perspective cards: "Read Full Article" link pinned to the card base */
.persp-card .persp-body { display: flex; flex-direction: column; }
.persp-readfull { margin-top: auto; padding-top: 1.1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.2s ease, color 0.2s ease; }
.persp-readfull:hover { gap: 0.7rem; color: var(--gold); }

/* ── HOMEPAGE ABOUT BAND ─────────────────────────────────── */
.about { padding: 5rem 0; position: relative; }
.about-ink { display: none; }                 /* shown on mobile only (see media query) */
.about > .container { position: relative; z-index: 1; }   /* content sits above the ink layer */
.about-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-portrait { align-self: start; }
.about-portrait-frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, var(--gold-warm), var(--gold-mid));
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(196, 146, 42, 0.35);
}
.about-portrait-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  /* natural colour with a light grade, kept subtle so it still sits in the warm palette */
  filter: contrast(1.03) saturate(1.03);
}
.about-portrait-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(196, 146, 42, 0.16), rgba(10, 10, 10, 0.08));
  mix-blend-mode: soft-light;
}
.about-portrait-ph {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem; color: var(--gold-dark);
}
.about-portrait-ph .mono { font-family: var(--ff-display); font-weight: 700; font-size: 3.5rem; line-height: 1; }
.about-portrait-ph .lbl { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.about-text .section-label { display: block; margin-bottom: 0.9rem; }
.about-h2 { margin-bottom: 1.4rem; }
.about-body { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-mid); max-width: 48ch; }
.about-avail { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem; font-size: 0.95rem; color: var(--ink); }
@media (max-width: 820px) {
  .about { padding: 3.5rem 0; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-portrait-frame { max-width: 320px; }
}

/* ═══════════════════════════════════════════════════════════════
   V6 — proof-forward revamp: hero role + proof strip, six-stat wall,
   four leadership cards, About CV button
   ═══════════════════════════════════════════════════════════════ */

/* Hero positioning line (replaces the rotating specialism word). Adaptive like the
   rest of the hero: white + difference over the ink on desktop, solid on mobile. */
.hero-role {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: 0.01em;
  color: var(--ink-mid);
  mix-blend-mode: normal;
  margin-bottom: 1.5rem;
}

/* About band: Download CV button row */
.about-cta-row { margin-top: 1.6rem; }

/* "By the numbers" — six-stat proof wall (reuses .impact-number / .impact-label) */
.stat-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem 2rem;
  text-align: center;
  margin-top: 3rem;
}

/* Leadership — four cards in a 2x2 grid (trimmed from six) */
.principle-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 960px;
}

@media (max-width: 900px) {
  /* iOS can't mix-blend over the portrait video clip, so make the new hero elements solid */
  .hero-role, .hero-stats { mix-blend-mode: normal; }
  .hero-role  { color: var(--gold-dark); text-shadow: 0 1px 3px rgba(250, 248, 244, 0.65); }
  .hero-stats { color: var(--ink); text-shadow: 0 1px 3px rgba(250, 248, 244, 0.7); }
  .hero-stats .stat-number > span { color: var(--gold-dark) !important; }
  .stat-wall { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .principle-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .principle-grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stat-wall { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   V7 — cross-page polish: article byline + author card, perspectives
   card date, portfolio result line
   ═══════════════════════════════════════════════════════════════ */

/* Article byline (under the title) */
.article-byline { margin-top: 0.8rem; font-size: 0.9rem; color: var(--ink-mid); }
.article-byline .byl-sep { color: var(--gold); margin: 0 0.15rem; }
.article-byline .byl-date { font-style: italic; color: var(--gold-dark); }   /* placeholder cue until the real date is set */

/* Author card at the end of each article (converts the "I want to meet this person" moment) */
.article-author {
  max-width: 720px; margin: 3rem auto 5.5rem; padding-top: 2.5rem;
  border-top: 1px solid var(--divider);
  display: flex; gap: 1.5rem; align-items: center;
}
.article-author-photo {
  flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; object-position: center 18%;
  filter: contrast(1.03) saturate(1.03);   /* colour, matching the home portrait */
  box-shadow: 0 0 0 1px rgba(196, 146, 42, 0.4);
}
.article-author-name { font-family: var(--ff-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: var(--ink); margin-bottom: 0.35rem; }
.article-author-bio { font-size: 0.95rem; line-height: 1.6; color: var(--ink-mid); margin-bottom: 1.1rem; }
.article-author-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 600px) {
  .article-author { flex-direction: column; align-items: flex-start; margin-bottom: 4rem; }
  .article-author-cta .btn { width: auto; }
}

/* Perspectives card date (recency at a glance on the index) */
.persp-date { display: block; margin-top: 0.45rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; font-style: italic; color: var(--gold-dark); }

/* Portfolio card result line (one outcome per card) */
.case-result { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-dark); }
.case-result::before { content: ''; flex: 0 0 auto; width: 16px; height: 2px; background: var(--gold); }

/* Article related work link */

.article-related { margin-top: 2.5rem; padding-top: 1.5rem; padding-bottom: 5rem; border-top: 1px solid var(--divider); }
.article-related-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 0.5rem; }
.article-related-link { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none; transition: color 0.2s; }
.article-related-link:hover { color: var(--gold); }


/* ============================================================
   SIGNATURE: PROBLEM -> IDEA -> RESULT (homepage, Hilton)
   ============================================================ */
.tl-wrap { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.tl-wrap .tl-intro { margin: 1rem 0 2.75rem; max-width: 600px; color: var(--ink-mid); font-size: 1.0625rem; line-height: 1.7; }
.tl-steps { list-style: none; max-width: 760px; margin: 0; padding: 0; }
.tl-step { position: relative; border-left: 2px solid var(--gold-mid); padding: 0 0 2.5rem 1.75rem; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before { content: ""; position: absolute; left: -8px; top: 0.35rem; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); }
.tl-result { border-left-color: var(--gold); }
.tl-result::before { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale); }
.tl-k { display: block; font-family: var(--ff-body); font-weight: 500; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.tl-v { font-family: var(--ff-display); font-weight: 700; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.22; color: var(--ink); max-width: 32ch; }
.tl-result .tl-v strong { color: var(--gold); }
.tl-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem; font-size: 0.9rem; font-weight: 500; color: var(--gold); transition: color 0.2s ease; }
.tl-link:hover { color: var(--gold-dark); }
@media (max-width: 768px) { .tl-step { padding-left: 1.4rem; } .tl-v { font-size: clamp(20px, 5.5vw, 26px); } }

/* ============================================================
   THROUGHLINE v2 — tabbed three-case sector switcher (homepage)
   ============================================================ */
/* Pill switcher: shown only when JS is active (progressive enhancement) */
.tl-tabs { display: none; }
html.js .tl-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.tl-tab {
  font-family: var(--ff-body); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em;
  padding: 0.5rem 1.05rem; border: 1px solid var(--divider); border-radius: var(--radius-pill);
  color: var(--ink-mid); background: transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.tl-tab:hover { border-color: var(--gold); color: var(--ink); }
.tl-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tl-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Subtle border-breath on inactive tabs so the discovery cue lands without
   shouting. Each tab is offset by 0.6s so the trio pulses as a rolling wave
   rather than a synchronised flash. Pulse pauses on hover so the user's
   attention isn't competing with the animation. */
@keyframes tl-tab-breath {
  0%, 100% { border-color: var(--divider); }
  50%      { border-color: var(--gold); }
}
html.js .tl-tab[aria-selected="false"] {
  animation: tl-tab-breath 3s ease-in-out infinite;
}
html.js .tl-tab[aria-selected="false"]:nth-of-type(2) { animation-delay: 0.6s; }
html.js .tl-tab[aria-selected="false"]:nth-of-type(3) { animation-delay: 1.2s; }
html.js .tl-tab[aria-selected="false"]:hover,
html.js .tl-tab[aria-selected="false"]:focus-visible { animation: none; border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  html.js .tl-tab[aria-selected="false"] { animation: none; }
}

/* Panels: with JS, only the active panel shows (no flash, footprint unchanged);
   without JS, all three render stacked and labelled. */
html.js .tl-panel { display: none; transition: opacity 0.18s ease; }
html.js .tl-panel.tl-active { display: block; }
.tl-panel.tl-fading { opacity: 0; }
.tl-panel-label {
  display: block; font-family: var(--ff-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 1.5rem 0 0.85rem;
}
html.js .tl-panel-label { display: none; }

/* Node entrance: same fade + small rise on scroll-into-view as the rest of the page,
   JS-gated so the section is fully readable with JS disabled. */
html.js .tl-step { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
html.js .tl-step.tl-in { opacity: 1; transform: none; }
/* Gold node dots fade and grow gently with each step (no pop). */
html.js .tl-step::before { opacity: 0; transform: scale(0.6); transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
html.js .tl-step.tl-in::before { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .tl-step { transform: none; transition: opacity 0.5s ease; }
  html.js .tl-step::before, html.js .tl-step.tl-in::before { opacity: 1; transform: scale(1); transition: none; }
  html.js .tl-panel { transition: opacity 0.3s ease; }
}

/* ============================================================
   THROUGHLINE v3 — desktop "verdict" column (right of the steps)
   ============================================================ */
.tl-proof { display: none; }                 /* hidden on mobile/tablet; desktop only */
.tl-verdict-label {
  display: block; font-family: var(--ff-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.85rem;
}
.tl-fig {
  font-family: var(--ff-display); font-weight: 700; color: var(--gold);
  font-size: clamp(64px, 7.5vw, 112px); line-height: 0.86; letter-spacing: -0.02em;
}
.tl-fig-unit { font-size: 0.46em; vertical-align: 0.42em; letter-spacing: 0; }
.tl-fig-cap {
  margin-top: 0.85rem; font-family: var(--ff-body); font-size: 0.95rem; line-height: 1.5;
  color: var(--ink-mid); max-width: 22ch;
}
.tl-verdict-line {
  font-family: var(--ff-display); font-weight: 700; font-style: italic; color: var(--gold);
  font-size: clamp(26px, 2.9vw, 40px); line-height: 1.2; max-width: 16ch;
}

/* Two-column on desktop: steps left, verdict right, tied by a hairline rule. */
@media (min-width: 900px) {
  html.js .tl-row {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
  }
  .tl-proof {
    display: block; border-left: 1px solid var(--divider); padding-left: clamp(2rem, 4vw, 3.5rem);
  }
}

/* Verdict column reveals with the same enter pattern as the nodes. */
html.js .tl-proof { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
html.js .tl-proof.tl-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .tl-proof { transform: none; transition: opacity 0.5s ease; }
}


/* ═══════════════════════════════════════════════════════
   RECOMMENDATION — homepage editorial pull quote + standalone page list
   Editorial language: paper ground, single mark glyph, italic display serif,
   small-caps attribution. Matches the rest of the site's voice.
   ═══════════════════════════════════════════════════════ */
.rec-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--paper, #F7F5EF);
}
.rec-container { max-width: 760px; margin: 0 auto; text-align: center; }
.rec-mark {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(72px, 9vw, 132px);
  line-height: 1;
  color: var(--gold, #C4922A);
  margin-bottom: -0.25em;
  opacity: 0.85;
}
.rec-blockquote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1B20);
  margin: 0 0 2rem;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}
.rec-attrib { display: flex; flex-direction: column; gap: 0.15rem; align-items: center; }
.rec-name { font-weight: 600; font-size: 1rem; color: var(--ink); }
.rec-role { font-size: 0.9rem; color: var(--ink-mid, #55535C); max-width: 48ch; line-height: 1.4; }
.rec-note {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mid, #55535C);
}
.rec-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 2rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold, #C4922A);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.rec-more:hover { border-bottom-color: var(--gold, #C4922A); }

/* Standalone /recommendations.html — ungrouped editorial list */
.rec-page { padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem); }
.rec-list { max-width: 720px; margin: 0 auto; }
.rec-item { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.rec-item + .rec-item { border-top: 1px solid var(--divider, #DED8CC); }
.rec-text {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.6;
  color: var(--ink, #1B1B20);
  margin-bottom: 1.75rem;
}
.rec-text p + p { margin-top: 1rem; }
.rec-meta {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--divider, #DED8CC);
}
.rec-meta-text { flex: 1; min-width: 0; }
.rec-meta-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
}
.rec-meta-role {
  font-size: 0.92rem;
  color: var(--ink-mid, #55535C);
  line-height: 1.45;
  margin: 0.15rem 0 0;
}
.rec-meta-note {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mid, #55535C);
}
.rec-meta-date { text-transform: none; letter-spacing: normal; margin-left: 0.6rem; opacity: 0.7; }
.rec-meta-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--gold, #C4922A);
  text-decoration: none;
}
.rec-meta-linkedin:hover { text-decoration: underline; }
.rec-footer-link {
  display: block;
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--divider, #DED8CC);
  font-size: 0.85rem;
  color: var(--ink-mid, #55535C);
  text-decoration: none;
}
.rec-footer-link:hover { color: var(--gold, #C4922A); }


/* ═══════════════════════════════════════════════════════
   .pf-page — shared layout for sub-pages (Perspectives, Portfolio,
   Recommendations). Previously duplicated as inline styles inside each
   page's <head>; moved here so /recommendations and any future sub-page
   inherits the same nav clearance and header rhythm.
   ═══════════════════════════════════════════════════════ */
.pf-page { padding-top: var(--nav-h); }
.pf-header { padding-top: 4rem; padding-bottom: 1rem; }
.pf-header .section-label { display: block; margin-bottom: 0.75rem; }
.pf-intro { margin-top: 1rem; max-width: 640px; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-mid); }
.pf-back { display: inline-flex; align-items: center; gap: 0.4rem; margin: 3rem 0 0; font-size: 0.9rem; color: var(--ink-mid); transition: color 0.2s; }
.pf-back:hover { color: var(--gold); }
@media (max-width: 768px) { .pf-header { padding-top: 2.5rem; } }


/* ═══════════════════════════════════════════════════════
   Recommendations — staggered text-flow reveal on scroll.
   Each .rec-item enters via the global .reveal pattern (handled in
   portfolio.js); within an active item, the quote paragraphs and the
   attribution fade-and-slide-up sequentially for an editorial cascade.
   ═══════════════════════════════════════════════════════ */
html.js .rec-item .rec-text p,
html.js .rec-item .rec-meta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s cubic-bezier(0.2, 0.65, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.65, 0.2, 1);
  will-change: opacity, transform;
}
html.js .rec-item.active .rec-text p,
html.js .rec-item.active .rec-meta {
  opacity: 1;
  transform: none;
}
html.js .rec-item.active .rec-text p:nth-child(1) { transition-delay: 0.08s; }
html.js .rec-item.active .rec-text p:nth-child(2) { transition-delay: 0.22s; }
html.js .rec-item.active .rec-text p:nth-child(3) { transition-delay: 0.36s; }
html.js .rec-item.active .rec-text p:nth-child(4) { transition-delay: 0.50s; }
html.js .rec-item.active .rec-text p:nth-child(5) { transition-delay: 0.64s; }
html.js .rec-item.active .rec-text p:nth-child(6) { transition-delay: 0.78s; }
html.js .rec-item.active .rec-meta { transition-delay: 0.92s; }

@media (prefers-reduced-motion: reduce) {
  html.js .rec-item .rec-text p,
  html.js .rec-item .rec-meta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════
   Positioning thesis — single-statement section on the homepage
   between the Throughline and About. Visually a 'breathe' moment,
   editorial in feel, hairline rules above and below to signal a
   change in voice from proof to position.
   ═══════════════════════════════════════════════════════ */
.pov-wrap {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--surface);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.pov-inner { max-width: 760px; }
.pov-inner .section-label { display: block; margin-bottom: 0.85rem; }
.pov-headline {
  font-family: var(--ff-display);
  font-style: italic;
  margin: 0;
}
.pov-body {
  margin-top: 1.75rem;
  max-width: 64ch;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
}