/* ═══════════════════════════════════════════════════════════
   RESET & TOKENS
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* navy brand ink (replaces forest green #0D3328) */
  --ink:        #0A0F2E;
  --ink-2:      #141B4A;
  --ink-soft:   rgba(10,15,46,.7);
  --ink-faint:  rgba(10,15,46,.4);

  /* glossy blob accents (replaces mint #76F7D1 / #B0FFE2) */
  --accent-1:   #6B84D6;
  --accent-2:   #A9BEF0;

  /* paper neutrals — a faintly green off-white fading to cool gray
     (Sept'26 rev 2, replaces the blue-gray). --paper-top/-bottom paint
     the page ground in body::before; the rest are tints of the same. */
  --paper-top:    #F8FDF6;
  --paper-bottom: #D6DAD9;
  --bg:         #EEF2EE;
  --bg-panel:   #E4E8E5;
  --bg-panel-2: #D7DCD9;
  --bg-soft:    #EEF1EE;
  --card-bg:    #E6EAE7;
  --gray-ph:    #CBD0CD;

  /* the lighter beige the Key Areas columns sit on */
  --beige:      #F2ECE0;
  --beige-line: rgba(10,15,46,.14);

  --white:      #FFFFFF;
  --line:       #D3D8D5;
  --line-dark:  rgba(255,255,255,.2);

  /* Iowan = headers only; Libre Franklin = body copy; Barlow = eyebrows/labels */
  --serif:   'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans:    'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
  --label:   'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* the page ground: top-down paper gradient, a soft vignette and a touch of
   grain. Fixed to the viewport so the light sections read as one surface
   rather than stacked bands; dark sections simply paint over it. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 110% 85% at 50% 42%, transparent 58%, rgba(34,42,38,.12) 100%),
    linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;background:none;border:none;font-family:inherit}
img{display:block;max-width:100%}

.wrap{max-width:1280px;margin:0 auto;padding:0 80px}
.eyebrow{
  font-family:var(--label);
  font-size:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);
}
.eyebrow.on-dark{color:var(--white)}
.h-xl{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,6.2vw,80px);line-height:1.1;
  color:var(--ink);
}
.h-xl.on-dark{color:var(--white)}
.h-huge{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,9vw,120px);line-height:1.1;
  color:var(--white);
}
/* no orphaned last words: headings balance their lines and running copy
   avoids stranding a single word on the last one */
h1,h2,h3,.h-xl,.h-huge,.ways-row-title,.pub-title{text-wrap:balance}
p,li,.pub-subtitle,.popular-title,.ways-row-desc,.person-role{text-wrap:pretty}
/* a hand-placed break for where balancing picks the wrong pair of lines;
   narrow screens drop it and let the line wrap on its own */
@media (max-width:820px){.br-wide{display:none}}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* icon-arrow — small 24x24 diagonal arrow used across buttons/cards */
.icon-arrow{width:24px;height:24px;flex-shrink:0;color:var(--ink)}
.icon-arrow svg{width:100%;height:100%}
.icon-arrow.on-dark{color:var(--white)}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:11px 16px;border:1px solid var(--ink);color:var(--ink);
  font-size:16px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;
  background:transparent;transition:background .18s,color .18s;white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--white)}
.btn--white{border-color:var(--white);color:var(--white)}
.btn--white:hover{background:var(--white);color:var(--ink)}
.btn--solid{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--solid:hover{background:var(--ink-2)}

/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
.site-nav{position:sticky;top:20px;z-index:500;padding:0 24px}
.nav-main{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:31px;
  max-width:1280px;margin:0 auto;padding:16px 32px;
  background:var(--white);border-radius:16px;
  box-shadow:0 10px 30px rgba(10,15,46,.12);
  transition:background-color .3s ease,box-shadow .3s ease;
}
.nav-logo .logo-img{height:32px;width:auto;display:block}
.nav-items{display:flex;align-items:center;gap:20px}
.nav-item{font-size:16px;font-weight:400;color:#000;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:opacity .15s}
.nav-item:hover{opacity:.6}
.nav-badge{font-size:9px;font-weight:700;letter-spacing:.06em;background:var(--ink);color:var(--white);padding:2px 6px;border-radius:3px}
.nav-cta{font-size:16px;font-weight:500;color:#000;text-transform:none}
.nav-cta:hover{opacity:.6}
.nav-item,.nav-cta,.nav-logo .logo-img{transition:color .3s ease,filter .3s ease,opacity .15s}
/* home only — the nav floats clear over the hero with white type so the
   banner isn't boxed in, and takes its white panel back before it can run
   into the banner's caption (initNavOverHero sets .is-solid) */
.site-nav--over:not(.is-solid) .nav-main{background:transparent;box-shadow:none}
.site-nav--over:not(.is-solid) .nav-item,
.site-nav--over:not(.is-solid) .nav-cta{color:var(--white)}
.site-nav--over:not(.is-solid) .logo-img{filter:brightness(0) invert(1)}
.site-nav--over:not(.is-solid) .nav-badge{background:var(--white);color:var(--ink)}
.nav-mobile-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:40px;height:40px;flex-shrink:0;
}
.nav-mobile-toggle span{
  display:block;width:22px;height:2px;border-radius:1px;
  background:var(--ink);transition:background .3s ease,transform .3s ease,opacity .3s ease;
}
.site-nav--over:not(.is-solid) .nav-mobile-toggle span{background:var(--white)}
.mobile-menu-open .nav-mobile-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-open .nav-mobile-toggle span:nth-child(2){opacity:0}
.mobile-menu-open .nav-mobile-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* forced dark bars once the menu itself is open, even over a transparent hero,
   since the open panel is a solid white sheet underneath */
.mobile-menu-open .nav-mobile-toggle span{background:var(--ink)!important}

.mobile-menu{
  display:none;position:absolute;top:100%;left:0;right:0;margin-top:8px;
  background:var(--white);border-radius:16px;box-shadow:0 10px 30px rgba(10,15,46,.12);
  padding:12px;flex-direction:column;
  max-height:calc(100vh - 100px);overflow-y:auto;
}
.mobile-menu-item{
  font-size:17px;font-weight:400;color:var(--ink);padding:14px 12px;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;
}
.mobile-menu-item:last-of-type{border-bottom:none}
.mobile-menu-item.is-current{font-weight:600}
.mobile-menu-cta{
  margin-top:8px;text-align:center;padding:14px 12px;border-radius:10px;
  background:var(--ink);color:var(--white);font-size:16px;font-weight:500;
}

/* ═══════════════════════════════════════════════════════════
   BLOB DECORATIONS — glossy navy "clover" glow, echoes the
   reference art. Reused (rotated/mirrored) in the "Four ways" panel.
═══════════════════════════════════════════════════════════ */
.blob-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%}
.blob--core{
  width:900px;height:900px;filter:blur(90px);opacity:.6;
  background:radial-gradient(circle at 35% 35%, var(--ink-2), transparent 68%);
}
.blob--ring-a{
  width:520px;height:680px;border:220px solid var(--accent-1);
  filter:blur(120px);opacity:.55;
}
.blob--ring-b{
  width:480px;height:560px;border:220px solid var(--accent-2);
  filter:blur(120px);opacity:.5;
}
.blob-field--top .blob--core{left:-120px;top:-540px;transform:rotate(-40deg)}
.blob-field--top .blob--ring-a{left:230px;top:-420px;transform:rotate(35deg)}
.blob-field--top .blob--ring-b{left:330px;top:-500px;transform:rotate(35deg)}
.blob-field--bottom .blob--core{left:-120px;bottom:-540px;transform:rotate(140deg)}
.blob-field--bottom .blob--ring-a{left:230px;bottom:-420px;transform:rotate(-145deg)}
.blob-field--bottom .blob--ring-b{left:330px;bottom:-500px;transform:rotate(-145deg)}

/* ═══════════════════════════════════════════════════════════
   HERO — full-bleed single-story spotlight with a bottom tab
   strip to switch between our 4 stories (Bain.com pattern)
═══════════════════════════════════════════════════════════ */
#hero{
  position:relative;overflow:hidden;background:var(--ink);
  /* no top padding: the photo runs up under the transparent nav rather
     than leaving a solid navy band behind it */
  margin-top:-92px;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
}
.story-hero-viewport{position:relative;flex:1;min-height:0;overflow:hidden}
.story-hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s ease;
}
.story-hero-slide.is-active{opacity:1;visibility:visible;z-index:1}
.story-hero-slide img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* the top fade keeps the white nav type legible over bright photos */
.story-hero-slide::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,15,46,.6) 0%, rgba(10,15,46,.22) 110px, transparent 220px),
    linear-gradient(100deg, rgba(10,15,46,.9) 0%, rgba(10,15,46,.6) 38%, rgba(10,15,46,.18) 68%),
    linear-gradient(0deg, rgba(10,15,46,.7) 0%, transparent 26%, transparent 74%, rgba(10,15,46,.35) 100%);
}
.story-hero-copy{
  position:absolute;inset:0;z-index:2;max-width:740px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:20px;
  padding:24vh 80px 40px;
}
.story-hero-copy .eyebrow{margin-bottom:0}
/* hero type levels, shared by every page opener (home slides and the
   .about-hero-title pages): sub heading = .eyebrow, title = plain serif at
   one size (round 3 drops the italics), body = .pubs-hero-lede */
.story-hero-title{
  font-family:var(--serif);font-weight:400;letter-spacing:-.005em;
  font-size:clamp(36px,5vw,64px);line-height:1.08;color:var(--white);
}
.story-hero-link{
  display:inline-flex;align-items:center;gap:12px;width:fit-content;
  font-size:16px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;
  color:var(--white);transition:opacity .15s;
}
.story-hero-link:hover{opacity:.7}
/* sits at the end of the tab strip, level with the story labels */
.story-hero-scroll{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 80px 0 32px;
  color:rgba(255,255,255,.7);background:none;border:none;cursor:pointer;transition:color .15s;
}
.story-hero-scroll:hover{color:var(--white)}
.story-hero-scroll span{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.story-hero-scroll-circle{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
}
.story-hero-tabs{
  position:relative;z-index:2;display:flex;margin-bottom:44px;
  border-top:1px solid rgba(255,255,255,.15);
}
.story-hero-tab{
  flex:1;padding:32px 28px;text-align:left;position:relative;
  color:rgba(255,255,255,.5);font-size:15px;font-weight:500;letter-spacing:.01em;
  transition:color .2s;border-right:1px solid rgba(255,255,255,.12);
  background:none;
}
/* progress-bar fill sits right above each tab's label, animates in
   sync with the 5s autoplay interval, and snaps back instantly when
   a slide stops being active (no reverse-play flicker) */
.story-hero-tab::before{
  content:'';position:absolute;top:-1px;left:0;width:0;height:3px;
  background:var(--white);transition:width 5s linear;
}
.story-hero-tab:not(.is-active)::before{transition:none;width:0}
.story-hero-tab.is-active{color:var(--white)}
.story-hero-tab.is-active::before{width:100%}
/* mobile-only prev/pause/next controls, replacing the tab strip */
.story-hero-controls{display:none;align-items:center;gap:14px;padding:20px 24px}
.story-hero-ctrl{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.4);color:var(--white);background:none;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s,border-color .15s;
}
.story-hero-ctrl:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.story-hero-ctrl .reformist-icon-pause,.story-hero-ctrl .reformist-icon-play{width:12px;height:12px}
.story-hero-ctrl.is-paused .reformist-icon-pause{display:none}
.story-hero-ctrl.is-paused .reformist-icon-play{display:block}

/* ═══════════════════════════════════════════════════════════
   OUR APPROACH — majority white, with a soft blue nuance
   (ported from opsi2, recolored from near-black/green)
═══════════════════════════════════════════════════════════ */
#approach{position:relative;overflow:hidden;padding:112px 0 48px}
.approach-lead{max-width:1000px;margin:0 auto;text-align:center}
.approach-headline{
  font-family:var(--serif);
  font-size:clamp(32px,4.4vw,56px);line-height:1.12;color:var(--ink);
}
.approach-sub{
  margin:28px auto 0;max-width:860px;
  font-size:clamp(18px,1.6vw,21px);line-height:1.65;color:var(--ink-soft);
}
.approach-statement{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.2vw,40px);line-height:1.4;color:var(--ink-faint);
  max-width:920px;margin-bottom:56px;
}
.approach-statement em{font-style:italic;font-weight:700;color:var(--ink)}
.approach-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;
  padding-top:40px;border-top:1px solid var(--line);text-align:center;
}
.metric-card .metric-num{font-family:var(--serif);font-size:2.75em;line-height:1;margin-right:.1em;display:block;margin-bottom:.15em;color:var(--ink);font-weight:700}
.metric-card{
  padding:28px 24px;border-radius:14px;
  background:rgba(107,132,214,.05);border:1px solid rgba(107,132,214,.14);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.metric-card p{margin:0}
.metric-card:hover{
  background:rgba(107,132,214,.09);border-color:rgba(107,132,214,.28);
  box-shadow:0 14px 28px rgba(10,15,46,.06);
  animation:metric-jiggle .4s ease;
}
@keyframes metric-jiggle{
  0%,100%{transform:rotate(0)}
  30%{transform:rotate(-.8deg)}
  60%{transform:rotate(.8deg)}
  80%{transform:rotate(-.4deg)}
}
@media (prefers-reduced-motion:reduce){.metric-card:hover{animation:none}}

/* the photo pan: every card is pinned to the same point far below the
   section and rotated into place, so turning the ring walks them along a
   shallow curve from one edge to the other. Thirty-two slots of 11.25°
   close the circle, so the loop never jumps when it comes back around. */
.approach-carousel{
  position:relative;height:360px;margin:64px 0 56px;overflow:hidden;
  -webkit-mask-image:
    linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
    linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in,source-over;
  mask-image:
    linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),
    linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect;
}
.approach-ring{
  position:absolute;left:50%;top:1630px;width:0;height:0;
  animation:approach-pan 120s linear infinite;
}
.approach-card{
  position:absolute;left:-130px;top:-1620px;width:260px;height:325px;
  transform-origin:130px 1620px;transform:rotate(calc(var(--i) * 11.25deg));
  border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(10,15,46,.14);
}
.approach-card img{width:100%;height:100%;object-fit:cover}
@keyframes approach-pan{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.approach-ring{animation:none}}
.approach-cols p{font-size:18px;font-weight:400;line-height:1.85;color:var(--ink-soft);margin:0}

/* ═══════════════════════════════════════════════════════════
   FOUR WAYS WE MOVE CHANGE
═══════════════════════════════════════════════════════════ */
#ways{padding:88px 0 120px}
.ways-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:64px;text-align:center}
.ways-head .h-xl{font-size:clamp(28px,3.2vw,44px)}
.ways-body{display:flex;align-items:center;gap:80px}
.ways-visual{
  flex:0 0 46.8%;aspect-ratio:600/710;
  display:flex;align-items:center;justify-content:center;
}
.ways-visual-mark{width:86%;height:auto}
.ways-list{flex:1;display:flex;flex-direction:column}
.ways-row{
  display:block;padding:24px 16px;margin:0 -16px;border-bottom:1px solid var(--line);cursor:pointer;
  color:inherit;text-decoration:none;transition:background .2s ease;
}
/* a faint wash on hover, so a row reads as clickable before it is clicked */
.ways-row:hover{background:rgba(10,15,46,.05)}
.ways-row:first-child{border-top:1px solid var(--ink)}
.ways-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ways-row-label{font-family:var(--label);font-size:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);flex:1}
/* the shared arrow is drawn diagonally, so -45° points it up and +45°
   swings it to the right under the cursor */
.ways-row .icon-arrow{opacity:.45;transform:rotate(-45deg);transition:opacity .2s,transform .35s cubic-bezier(.3,.7,.4,1)}
.ways-row.is-active .icon-arrow{opacity:1}
.ways-row:hover .icon-arrow{opacity:1;transform:rotate(45deg)}
.ways-row-title{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.2;color:var(--ink);margin-top:8px}
.ways-row-desc{font-size:18px;line-height:1.5;color:var(--ink-soft);margin-top:8px}

/* OUR INSIGHTS (home) — the library's cover grid, linking into it */
#home-publications{padding:24px 0 120px}
.ways-head .link-arrow{margin-top:16px}
#home-publications .link-arrow{color:var(--ink);border-color:var(--ink-faint)}
#home-publications .link-arrow:hover{color:var(--ink);border-color:var(--ink)}

/* ═══════════════════════════════════════════════════════════
   THE REFORMIST — peeking video slider (ported from
   new-web-tp-helmi's ReformistSlider.tsx) + latest articles
═══════════════════════════════════════════════════════════ */
#reformist{background:var(--ink);color:var(--white);padding:96px 0;overflow:hidden}
.reformist-head{max-width:1280px;margin:0 auto 32px;padding:0 80px;text-align:center}
.reformist-head .eyebrow{margin-bottom:12px}
.reformist-head .h-xl{font-size:clamp(32px,4vw,44px);margin-bottom:12px}
.reformist-head p{font-size:18px;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto}

/* small "which channel is this" labels above the video slider / article grid */
.reformist-channel-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:400;line-height:1.2;
  color:var(--white);margin-bottom:24px;
}
.reformist-channel-icon{
  width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;
}
.reformist-channel-icon--play::before{content:'\25B6';margin-left:1px}
.reformist-channel-label--newsletter{margin-top:56px}
.reformist-channel-icon--mail{border-radius:4px}
.reformist-channel-icon--mail::before{content:'\2709'}

.reformist-slider{
  position:relative;padding:8px 0 16px;
  -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
  mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
}
.reformist-track{display:flex;align-items:center;gap:24px;transition:transform .6s cubic-bezier(.25,1,.5,1);will-change:transform;touch-action:pan-y;cursor:grab}
.reformist-card{
  position:relative;flex:0 0 auto;width:min(720px,52vw);aspect-ratio:16/9;
  border-radius:20px;overflow:hidden;cursor:pointer;
  opacity:.7;transform:scale(.96);transition:opacity .4s,transform .4s;box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.reformist-card:hover{opacity:.92}
.reformist-card.is-active{opacity:1;transform:scale(1)}
.reformist-card img{width:100%;height:100%;object-fit:cover}
.reformist-card iframe{width:100%;height:100%;border:none;display:block}
.reformist-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 55%);pointer-events:none}
.reformist-card-bottom{
  position:absolute;inset:0 0 0 0;z-index:1;padding:20px 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
}
.reformist-watch{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.7);color:var(--white);
  font-family:var(--sans);font-size:13px;font-weight:500;backdrop-filter:blur(6px);
  transition:background .2s,color .2s,border-color .2s;
}
.reformist-watch:hover{background:#f6c194;color:#18181B;border-color:#f6c194}
.reformist-playpause{
  position:relative;flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);transition:background .2s;
}
.reformist-card:not(.is-active) .reformist-playpause{display:none}
.reformist-playpause:hover{background:rgba(0,0,0,.8)}
.reformist-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.reformist-ring-progress{stroke-dasharray:132;stroke-dashoffset:132}
.reformist-icon-pause,.reformist-icon-play{width:14px;height:14px;position:relative}
.reformist-icon-pause::before,.reformist-icon-pause::after{content:'';position:absolute;top:0;bottom:0;width:4px;background:var(--white);border-radius:1px}
.reformist-icon-pause::before{left:2px}
.reformist-icon-pause::after{right:2px}
.reformist-icon-play{display:none;margin-left:2px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--white)}
.reformist-playpause.is-paused .reformist-icon-pause{display:none}
.reformist-playpause.is-paused .reformist-icon-play{display:block}

/* the slider itself is masked at the edges, so the arrows sit in an
   unmasked stage around it or they would fade out with the cards */
.reformist-stage{position:relative}
/* clones only fill the edges of the peek — they are not click targets */
.reformist-card[data-clone]{pointer-events:none}
.reformist-arrow{
  position:absolute;top:calc(50% - 24px);z-index:3;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:var(--white);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);transition:background .2s,transform .2s;
}
.reformist-arrow:hover{background:rgba(0,0,0,.8);transform:scale(1.06)}
.reformist-arrow--prev{left:24px}
.reformist-arrow--next{right:24px}
.reformist-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}
.reformist-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;
  font-family:var(--sans);font-size:15px;font-weight:500;color:rgba(255,255,255,.8);
  transition:color .15s;
}
.reformist-cta:hover{color:var(--white)}
.reformist-cta-yt{display:inline-flex;width:24px;height:24px;color:#FF0000}
.reformist-cta-yt svg{width:100%;height:100%}
.reformist-cta-substack{display:inline-flex;width:22px;height:22px;color:#FF6719}
.reformist-cta-substack svg{width:100%;height:100%}
.popular-cta{justify-content:center;margin-top:36px}
.reformist-dots button{height:6px;width:6px;border-radius:100px;background:rgba(255,255,255,.3);transition:all .3s}
.reformist-dots button:hover{background:rgba(255,255,255,.6)}
.reformist-dots button.is-active{width:32px;background:#f6c194}

.popular-head{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.12);padding-top:32px;margin-bottom:28px;
}
.popular-head .eyebrow{color:rgba(255,255,255,.5)}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:2px;transition:color .15s,border-color .15s;
}
.link-arrow:hover{color:var(--white);border-color:var(--white)}
.link-arrow::after{content:'\2192'}
.popular-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.popular-card{display:block}
.popular-thumb{aspect-ratio:16/10;margin-bottom:16px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.06)}
.popular-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.popular-card:hover .popular-thumb img{transform:scale(1.04)}
.popular-title{font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.45;color:var(--white);margin-bottom:8px}
.popular-card:hover .popular-title{text-decoration:underline;text-underline-offset:3px}
.popular-meta{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.45)}

/* ═══════════════════════════════════════════════════════════
   LSE 100X IMPACT / I-CLIMB
═══════════════════════════════════════════════════════════ */
#initiatives{padding:72px 0}
.initiatives-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;text-align:center}
.initiatives-col{display:flex;flex-direction:column;align-items:center;gap:20px}
.initiatives-label{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);color:var(--ink);margin:0;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.initiatives-logo{height:64px;width:auto;max-width:260px;object-fit:contain}
.initiatives-col:last-child .initiatives-logo{height:80px}
.initiatives-logo--mit{height:52px;margin:6px 0}
.initiatives-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:-4px;
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--ink-faint);padding-bottom:2px;
  transition:color .15s,border-color .15s;
}
.initiatives-more:hover{color:var(--accent-1);border-color:var(--accent-1)}

/* ═══════════════════════════════════════════════════════════
   TRUSTED BY THE PUBLIC POLICY ECOSYSTEM — infinite marquee
   (ported from new-web-tp-helmi's PartnerLogos.tsx)
═══════════════════════════════════════════════════════════ */
#covered{padding:64px 0 80px;overflow:hidden}
.covered-head{
  font-size:clamp(24px,3vw,34px);text-align:center;margin-bottom:56px;
}
.marquee{
  width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);
  mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);
}
.marquee-row{overflow:hidden}
.marquee-row + .marquee-row{margin-top:40px}
.marquee-track{
  display:flex;align-items:center;gap:56px;width:max-content;flex-shrink:0;
  padding-right:56px;
}
.marquee-row--left{display:flex}
.marquee-row--left .marquee-track{animation:marquee-left 42s linear infinite}
.marquee-row--right{display:flex}
.marquee-row--right .marquee-track{animation:marquee-right 42s linear infinite}
.marquee-track img{
  height:28px;width:auto;max-width:140px;object-fit:contain;flex-shrink:0;
  filter:grayscale(1);opacity:.55;transition:opacity .2s;
}
.marquee-track img:hover{opacity:1}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes marquee-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .marquee-row--left .marquee-track,.marquee-row--right .marquee-track{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — merged CTA + contact/legal + brand, one continuous
   dark section (ported from new-web-tp-helmi's SiteFooter.tsx)
═══════════════════════════════════════════════════════════ */
.site-footer{position:relative;overflow:hidden;background:#120F0D;color:var(--white)}
.site-footer-bg{position:absolute;inset:-10% 0;z-index:0;pointer-events:none}
/* event photo kept quiet: black & white, low contrast, mostly transparent */
.site-footer-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.78);opacity:.24}
.site-footer-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.5) 55%,rgba(0,0,0,.66));pointer-events:none}
.site-footer-grid{display:none}
.site-footer-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 80px}

.site-footer-cta{
  min-height:26vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:48px 0;
}
.site-footer-cta .h-xl{text-align:left;font-size:clamp(32px,4.5vw,56px)}
#footer-typewriter{color:rgba(255,255,255,.85)}
.footer-cursor{display:inline-block;width:.5em;color:rgba(255,255,255,.7);animation:footer-cursor-blink 1.05s step-end infinite}
@keyframes footer-cursor-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.site-footer-email{
  margin-top:20px;font-size:20px;color:rgba(255,255,255,.6);transition:color .15s;
}
.site-footer-email:hover{color:var(--white)}

.site-footer-columns{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;
  padding:40px 0;border-top:1px solid rgba(255,255,255,.06);
}
.site-footer-label{
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);display:block;margin-bottom:18px;
}
.site-footer-columns p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.8)}
.site-footer-contact-list{display:flex;flex-direction:column;gap:16px}
.site-footer-contact-list a{font-size:18px;line-height:1.5;color:rgba(255,255,255,.8);transition:color .15s}
.site-footer-contact-list a:hover{color:var(--white)}
.site-footer-contact-list b{display:block;margin-bottom:2px;font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}

.site-footer-brand{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;
  padding:24px 0 20px;border-top:1px solid rgba(255,255,255,.06);
}
.site-footer-copy{
  padding:0 0 28px;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.4);text-align:center;
}
.site-footer-brand .logo-img{height:24px;width:auto;display:block;filter:brightness(0) invert(1)}
.footer3-social{display:flex;align-items:center;gap:22px;margin-left:auto}
.footer3-social a,
.contact-social a{
  display:block;width:24px;height:24px;opacity:.85;
  transition:transform .2s cubic-bezier(.3,.7,.4,1),opacity .2s;
}
.footer3-social img,
.contact-social img{width:100%;height:100%;object-fit:contain}
/* a small shrink under the cursor reads as the icon giving to the click */
.footer3-social a:hover,
.contact-social a:hover{transform:scale(.86);opacity:1}
.footer3-social a:active,
.contact-social a:active{transform:scale(.78)}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — opener
═══════════════════════════════════════════════════════════ */
.nav-item.is-current{font-weight:600}

/* full-bleed photo, copy anchored bottom-left, intro band directly below */
#about-hero{
  position:relative;overflow:hidden;background:var(--ink);
  margin-top:-92px;min-height:56vh;display:flex;align-items:flex-end;
}
.about-hero-media{position:absolute;inset:0}
.about-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 65%}
.about-hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(0deg, var(--ink) 0%, rgba(10,15,46,.85) 10%, rgba(10,15,46,.45) 28%, rgba(10,15,46,.15) 55%, rgba(10,15,46,0) 80%),
    linear-gradient(90deg, rgba(10,15,46,.55) 0%, transparent 58%);
}
.about-hero-inner{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:32px}
.about-hero-title{
  font-weight:400;letter-spacing:-.005em;
  font-size:clamp(36px,5vw,64px);line-height:1.05;max-width:900px;margin:12px 0 0;
}

/* opener statement — the lead that used to sit inside the hero, now its
   own dark band under the photo. Flat: one size, no display/body split. */
#opener{position:relative;overflow:hidden;padding:64px 0;background:var(--ink)}
#opener .wrap{position:relative;z-index:2}
.opener-copy{max-width:880px;display:flex;flex-direction:column;gap:22px}
.opener-copy p{font-size:20px;line-height:1.75;color:rgba(255,255,255,.75)}
.opener-copy em{font-style:italic;font-weight:700;color:var(--white)}
/* the lead reads as a headline; the two lines after it are plain body */
.opener-copy .opener-lead{
  margin-bottom:18px;font-family:var(--serif);font-weight:400;letter-spacing:-.005em;
  font-size:clamp(30px,3.8vw,48px);line-height:1.15;color:var(--white);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — vision & mission
═══════════════════════════════════════════════════════════ */
#vision{position:relative;overflow:hidden;padding:96px 0}
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
/* the vision slides in first, the mission fades up three seconds later
   (initVisionReveal); both are simply visible without JS or with
   reduced motion */
.vision-block.v-anim{opacity:0}
.vision-block.v-anim:first-child{transform:translateX(-36px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.8,.3,1)}
.vision-block.v-anim:last-child{transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.8,.3,1)}
.vision-block.v-anim.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.vision-block.v-anim{opacity:1;transform:none;transition:none}}
.vision-block .eyebrow{display:block;margin-bottom:20px}
.vision-text{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.2vw,28px);line-height:1.5;color:var(--ink-faint);
}
.vision-text em{font-style:italic;font-weight:700;color:var(--ink)}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — strategic focus
═══════════════════════════════════════════════════════════ */
#focus{padding:120px 0}
.focus-head{max-width:900px;margin:0 auto 40px;text-align:center}
.focus-head .eyebrow{display:block;margin-bottom:12px}
.focus-head .h-xl{font-size:clamp(30px,3.6vw,48px)}
.focus-placeholder{
  display:block;width:100%;max-width:1120px;margin:0 auto;
  border-radius:12px;box-shadow:0 1px 2px rgba(10,15,46,.06),0 24px 48px rgba(10,15,46,.1);
}

.focus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.focus-card{
  background:var(--white);border:1px solid var(--line);padding:32px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.focus-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,15,46,.09)}
.focus-num{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent-1)}
.focus-title{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.2;color:var(--ink)}
.focus-desc{font-size:17px;line-height:1.7;color:var(--ink-soft)}
.focus-areas{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:16px;line-height:1.65;color:var(--ink-soft);
}
.focus-areas-label{
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-1);display:block;margin-bottom:6px;
}
.focus-areas em{font-style:italic}

/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE — testimonials
═══════════════════════════════════════════════════════════ */
.testimonial-card{
  background:var(--white);border:1px solid var(--line);padding:32px;
  display:flex;flex-direction:column;gap:20px;
}
.testimonial-meta{display:flex;flex-direction:column;gap:6px}
.testimonial-title{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--ink)}
.testimonial-sub{font-size:14px;color:var(--ink-soft)}
.testimonial-intro{margin-top:8px;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.testimonial-quote{border-left:2px solid var(--accent-1);padding-left:24px;display:flex;flex-direction:column;gap:14px}
.testimonial-quote p{font-size:17px;line-height:1.75;color:var(--ink)}
.testimonial-attr{display:flex;flex-direction:column;gap:2px;padding-top:16px;border-top:1px solid var(--line)}
.testimonial-name{font-weight:600;font-size:16px;color:var(--ink)}
.testimonial-role,.testimonial-org{font-size:14px;color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — our journey (timeline)
═══════════════════════════════════════════════════════════ */
/* the section pins while scrolling advances the year — JS sets
   .journey-scroll's height from the number of years */
#journey{position:relative;background:var(--ink)}
.journey-scroll{position:relative}
.journey-sticky{
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 0;overflow:hidden;
}
/* without min-width:0 this flex child refuses to shrink below the year
   rail's min-content width, blowing past the viewport on narrow screens */
.journey-sticky > .wrap{min-width:0;width:100%}
.journey-head{max-width:900px;margin-bottom:56px}
.journey-head .eyebrow{display:block;margin-bottom:12px}
.journey-head .h-xl{font-size:clamp(30px,3.6vw,48px)}
/* years run along a rail; only the selected year's story renders, which
   keeps six milestones to roughly the height of one */
.journey-rail{
  position:relative;display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid rgba(255,255,255,.18);margin-bottom:44px;
}
/* runs from the active year's dot to the next while that year is showing,
   so the reader can see the timeline advancing (initJourneyRail drives it) */
.journey-rail-progress{
  position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--accent-2);transition:width .25s linear;
}
.journey-year{
  position:relative;flex:0 0 auto;padding:26px 0 0;background:none;
  font-family:var(--serif);font-size:clamp(19px,2.1vw,28px);line-height:1.1;
  color:rgba(255,255,255,.4);white-space:nowrap;transition:color .25s ease;
}
.journey-year::before{
  content:'';position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.28);transition:background .25s ease,transform .25s ease;
}
.journey-year:hover{color:rgba(255,255,255,.72)}
.journey-year.is-active{color:var(--white)}
.journey-year.is-active::before{background:var(--accent-2);transform:scale(1.35)}

.journey-panels{min-height:300px}
.journey-panel{display:none}
.journey-panel.is-active{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:64px;align-items:center;
  animation:journey-in .45s cubic-bezier(.16,.8,.3,1);
}
@keyframes journey-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.journey-panel.is-active{animation:none}}
.journey-copy{max-width:620px}
.journey-title{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,32px);line-height:1.25;color:var(--white);margin-bottom:14px}
.journey-panel p{font-size:18px;line-height:1.8;color:rgba(255,255,255,.72)}

/* photo slot — masked at the edges and desaturated onto the navy so it
   dissolves into the background rather than sitting on it as a box */
.journey-photo{position:relative;aspect-ratio:4/3;overflow:hidden}
.journey-photo img{
  width:100%;height:100%;object-fit:cover;
  mix-blend-mode:luminosity;opacity:.62;
}
.journey-photo img.is-brightened{filter:brightness(1.7) contrast(1.05);opacity:.85}
.journey-photo img.is-zoomed{transform:scale(1.32);transform-origin:50% 76%}
.journey-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(10,15,46,.25) 32%, transparent 62%);
}
.journey-photo{
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 58% 48%, #000 40%, rgba(0,0,0,.55) 66%, transparent 88%);
  mask-image:radial-gradient(ellipse 78% 82% at 58% 48%, #000 40%, rgba(0,0,0,.55) 66%, transparent 88%);
}

/* about-page additions to the shared "ways" pillar block */
.ways-kicker{font-size:19px;line-height:1.6;color:var(--ink-soft)}
.approach-intro{max-width:900px;margin:0 auto 64px;display:flex;flex-direction:column;gap:18px}
.approach-intro p{font-size:18px;line-height:1.8;color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE — the four pillars
   The rail on the left is a tab set, not a scroll-spy: the panel
   changes only when a pillar is clicked (see initPillarTabs),
   never as a side effect of scrolling past it.
═══════════════════════════════════════════════════════════ */
/* opener + intro band reuse the about page's treatments wholesale */
#product-hero{
  position:relative;overflow:hidden;background:var(--ink);
  margin-top:-92px;min-height:56vh;display:flex;align-items:flex-end;
}
#product-hero .about-hero-media img{object-position:center 30%}
#product-intro{position:relative;overflow:hidden;padding:64px 0;background:var(--ink)}
#product-intro .wrap{position:relative;z-index:2}

#pillars{padding:120px 0}
.pillars-grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:80px}
.pillar-nav,.pillar-stage{min-width:0}

/* rail */
.pillar-nav-sticky{position:sticky;top:132px}
.pillar-nav .eyebrow{display:block;margin-bottom:22px;font-size:13px;letter-spacing:.12em;color:var(--ink-faint)}
.pillar-nav-list{display:flex;flex-direction:column}
.pillar-nav-item{
  display:flex;align-items:baseline;gap:12px;text-align:left;
  padding:14px 0 14px 16px;border-left:2px solid transparent;
  transition:border-color .25s ease;
}
.pillar-nav-num{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--ink-faint);transition:color .25s ease;
}
.pillar-nav-name{
  font-family:var(--serif);font-size:clamp(19px,2.1vw,24px);line-height:1.2;
  color:var(--ink-faint);transition:color .25s ease;
}
.pillar-nav-item:hover .pillar-nav-name{color:var(--ink-soft)}
/* the click ring is noise on a tab rail; keyboard focus still gets one */
.pillar-nav-item:focus{outline:none}
.pillar-nav-item:focus-visible{outline:2px solid var(--accent-1);outline-offset:3px}
.pillar-nav-item.is-active{border-left-color:var(--ink)}
.pillar-nav-item.is-active .pillar-nav-name{color:var(--ink)}
.pillar-nav-item.is-active .pillar-nav-num{color:var(--accent-1)}

/* only the selected pillar renders; the fade-up is the journey panels' */
.pillar-panel{display:none}
.pillar-panel.is-active{display:block;animation:journey-in .45s cubic-bezier(.16,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.pillar-panel.is-active{animation:none}}

.pillar-panel-meta,
.pub-meta{
  display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid var(--ink);padding-top:14px;
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}
.pillar-title{font-size:clamp(32px,4vw,52px);margin-top:20px}
.pillar-block{margin-top:56px}
.pillar-figure{margin:32px 0 0}
.pillar-figure img{width:100%;height:auto;border-radius:12px}
.pillar-kicker{border-top:1px solid var(--line);padding-top:14px;margin-bottom:24px}
.pillar-kicker .eyebrow{font-size:13px;letter-spacing:.12em;color:var(--ink-faint)}
.pillar-statement{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.2vw,28px);line-height:1.45;color:var(--ink-faint);max-width:760px;
}
.pillar-statement em{font-style:italic;font-weight:700;color:var(--ink)}
.pillar-body{margin-top:22px;font-size:18px;line-height:1.8;color:var(--ink-soft);max-width:680px}

/* approach — divided columns between two hairlines */
.pillar-approach{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pillar-approach-item{padding:28px 28px 28px 0}
.pillar-approach-item + .pillar-approach-item{border-left:1px solid var(--line);padding-left:28px}
/* a row-start beyond the first row still matches the sibling rule above —
   this cancels it once JS (initApproachDividers) has identified the item
   as the actual start of a wrapped row */
.pillar-approach-item.is-row-start{border-left:0;padding-left:0}
.pillar-approach-title{
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-top:10px;
}
.pillar-approach-desc{margin-top:12px;font-size:17px;line-height:1.7;color:var(--ink-soft)}

.pillar-services{display:flex;flex-wrap:wrap;gap:10px}
.pillar-services li{
  padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:var(--white);
  font-size:15px;line-height:1.4;color:var(--ink);transition:border-color .2s ease;
}
.pillar-services li:hover{border-color:var(--ink)}

/* selected work — each row opens the full business case in a modal */
.pillar-work{border-top:1px solid var(--line)}
.pillar-work-item{border-bottom:1px solid var(--line)}
.pillar-work-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  width:100%;text-align:left;padding:20px 12px 20px 0;
  transition:padding-left .2s ease,background .2s ease;
}
.pillar-work-row:hover{background:var(--bg-soft);padding-left:12px}
.pillar-work-text{display:block;min-width:0}
.pillar-work-title{display:block;font-size:18px;font-weight:600;line-height:1.5;color:var(--ink);max-width:760px}
.pillar-work-partner{display:block;margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.pillar-work-row .icon-arrow{margin-top:4px;opacity:.3;transition:opacity .2s ease,transform .2s ease}
.pillar-work-row:hover .icon-arrow{opacity:1;transform:translate(2px,-2px)}
.pillar-work-row:focus{outline:none}
.pillar-work-row:focus-visible{outline:2px solid var(--accent-1);outline-offset:-2px}
/* .pillar-approach and .pillar-work already close with their own bottom rule,
   so the next block's kicker must not draw a second, redundant one right below it */
.pillar-block:has(.pillar-approach) + .pillar-block .pillar-kicker,
.pillar-block:has(.pillar-work) + .pillar-block .pillar-kicker{
  border-top:none;padding-top:0;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — people (braintrust + team)
═══════════════════════════════════════════════════════════ */
#team{padding:120px 0}
.team-head{max-width:1120px;margin-bottom:80px}
.team-head .eyebrow{display:block;margin-bottom:12px}
.team-head .h-xl{font-size:clamp(28px,3.4vw,44px)}
.team-group{margin-bottom:96px}
.team-group:last-child{margin-bottom:0}
.team-group-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding-bottom:24px;margin-bottom:40px;border-bottom:1px solid var(--line);
}
/* a group divider, not a heading — deliberately unlike the serif section title */
.team-group-title{
  font-family:var(--label);font-weight:600;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2;color:var(--ink);
}
.team-group-note{font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:620px}
.team-unit{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;
  padding:36px 0;border-top:1px solid var(--line);
}
/* the head already draws a rule, so the unit right after it must not add
   a second one (:first-child never matched — the head is the first child) */
.team-group-head + .team-unit{border-top:none;padding-top:0}
.team-unit-label{
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}
/* braintrust has no per-unit label, so its grid sits in the content track
   to line up with the labelled team units above */
.team-unit--nolabel .person-grid{grid-column:2}

/* one card size across both groups — the braintrust grid sits on the same
   200px-indented track as the team units so the photos match exactly */
.person-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
.person-card{
  display:flex;flex-direction:column;text-align:left;padding:0;background:none;border:none;
  cursor:pointer;font-family:inherit;color:inherit;
  transition:transform .18s ease;
}
.person-card:active{transform:scale(.985)}
.person-card:focus-visible{outline:2px solid var(--accent-1);outline-offset:4px}
.person-photo{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;
  background:var(--card-bg);margin-bottom:16px;
}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.person-card:hover .person-photo img{transform:scale(1.04)}
.person-photo--initials{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:clamp(30px,3.6vw,52px);letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  background:linear-gradient(150deg,var(--ink-2),var(--ink));
}
.person-photo::after{
  content:'+';position:absolute;right:10px;bottom:10px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(10,15,46,.82);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;
}
.person-card:hover .person-photo::after,
.person-card:focus-visible .person-photo::after{opacity:1;transform:none}
.person-name{font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.person-nick{font-weight:400;color:var(--ink-faint)}
.person-role{font-size:15px;line-height:1.5;color:var(--ink-soft);margin-top:4px}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — person detail modal
═══════════════════════════════════════════════════════════ */
body.modal-open{overflow:hidden}
/* visibility (not display) so the open/close can actually animate —
   visibility flips instantly on open, and is delayed on close so the
   fade-out finishes before the layer stops being hit-testable */
.person-modal,
.case-modal{
  position:fixed;inset:0;z-index:900;
  visibility:hidden;opacity:0;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.person-modal.is-open,
.case-modal.is-open{
  visibility:visible;opacity:1;
  transition:opacity .3s ease,visibility 0s linear 0s;
}
.person-modal-backdrop,
.case-modal-backdrop{position:absolute;inset:0;background:rgba(6,9,26,.78);backdrop-filter:blur(4px)}
.person-modal-panel,
.case-modal-panel{
  position:relative;z-index:1;max-width:760px;margin:6vh auto;max-height:88vh;overflow-y:auto;
  background:var(--ink);color:var(--white);border-radius:16px;padding:40px;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .34s cubic-bezier(.16,.8,.3,1),transform .34s cubic-bezier(.16,.8,.3,1);
}
.person-modal.is-open .person-modal-panel,
.case-modal.is-open .case-modal-panel{opacity:1;transform:none}
/* long profiles and cases scroll inside the panel — give that scrollbar a
   white, overlaid handle so it stands out against the navy */
.person-modal-panel,
.case-modal-panel{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.75) rgba(255,255,255,.12)}
.person-modal-panel::-webkit-scrollbar,
.case-modal-panel::-webkit-scrollbar{width:10px}
.person-modal-panel::-webkit-scrollbar-track,
.case-modal-panel::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:10px}
.person-modal-panel::-webkit-scrollbar-thumb,
.case-modal-panel::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.75);border-radius:10px;
  border:2px solid transparent;background-clip:content-box;
}
.person-modal-panel::-webkit-scrollbar-thumb:hover,
.case-modal-panel::-webkit-scrollbar-thumb:hover{background:#fff;background-clip:content-box}
@media (prefers-reduced-motion:reduce){
  .person-modal,.person-modal-panel,
  .case-modal,.case-modal-panel{transition:opacity .01s linear,visibility 0s}
}
.person-modal-close,
.case-modal-close{
  position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
  transition:border-color .15s,color .15s,background .15s;
}
.person-modal-close:hover,
.case-modal-close:hover{border-color:var(--white);color:var(--white);background:rgba(255,255,255,.08)}
.person-modal-head{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding-right:48px}
.person-modal-photo{
  width:88px;height:88px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:30px;color:rgba(255,255,255,.9);
}
.person-modal-photo img{width:100%;height:100%;object-fit:cover}
.person-modal-name{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.2;color:var(--white)}
.person-modal-name .person-nick{color:rgba(255,255,255,.5)}
.person-modal-role{
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);margin-top:8px;
}
.person-modal-body p{font-size:17px;line-height:1.8;color:rgba(255,255,255,.75);margin-bottom:16px}
.person-block{margin-top:28px}
.person-block-label{
  display:block;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;
}
.person-chips{display:flex;flex-wrap:wrap;gap:8px}
.person-chips li{
  font-size:14px;line-height:1.4;padding:7px 13px;border-radius:100px;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.82);
}
.person-list li{
  position:relative;padding-left:20px;margin-bottom:12px;
  font-size:16px;line-height:1.7;color:rgba(255,255,255,.75);
}
.person-list li::before{
  content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE — business case modal
   Shares the person modal's shell (above); the long-form copy
   lives in a hidden .pillar-case-detail inside each row, so
   there is no parallel JS data blob to keep in sync.
═══════════════════════════════════════════════════════════ */
.case-modal-head{margin-bottom:32px;padding-right:48px}
.case-modal-eyebrow{
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:14px;
}
.case-modal-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.8vw,32px);
  line-height:1.25;color:var(--white);
}
.case-modal-partner,
.pub-by{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.7);
}
.case-modal-partner b,
.pub-by b{
  display:block;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:5px;
}
.case-block{margin-bottom:30px}
.case-block-label{
  display:block;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px;
}
.case-block p{font-size:17px;line-height:1.8;color:rgba(255,255,255,.75);margin-bottom:14px}
.case-block p:last-child{margin-bottom:0}
.case-report{margin-top:6px;font-size:14px;padding:12px 20px}
.case-report .icon-arrow{width:18px;height:18px;color:currentColor}

/* ═══════════════════════════════════════════════════════════
   PUBLICATIONS PAGE
   One pinned report in a slim strip, the rest as covers in a grid.
   Each card's write-up lives in a hidden .pub-detail beside it
   and opens in the case modal's shell, widened to hold the cover
   (see initPubModal).
═══════════════════════════════════════════════════════════ */
#pubs-hero,#wwr-hero,#contact-hero{
  position:relative;overflow:hidden;background:var(--ink);
  margin-top:-92px;padding:220px 0 96px;
}
/* KEY AREAS — four columns on beige, each revealing its sector photo on
   hover; the copy sits over the top right, as in the client's reference */
#wwr-hero{
  background:var(--beige);padding:0;min-height:92vh;
  display:flex;align-items:flex-start;
}
/* the banner photo sits under the columns, washed back in beige so the
   columns stay light until one of them is hovered */
.sector-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.sector-bg img{width:100%;height:100%;object-fit:cover}
.sector-bg::after{content:'';position:absolute;inset:0;background:rgba(242,236,224,.86)}
.sector-columns{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
.sector-col{
  position:relative;overflow:hidden;display:flex;align-items:flex-end;
  padding:48px 32px;border-right:1px solid var(--beige-line);color:var(--ink);
}
.sector-col:last-child{border-right:none}
.sector-col img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform .9s cubic-bezier(.16,.8,.3,1);
}
.sector-col::after{
  content:'';position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(0deg,rgba(10,15,46,.8),rgba(10,15,46,.2));
}
.sector-col:hover img,.sector-col:focus-visible img{opacity:1;transform:none}
/* a column with no photo yet has nothing to reveal, so it skips the wash */
.sector-col:has(img):hover::after,.sector-col:has(img):focus-visible::after{opacity:1}
.sector-col:has(img):hover .sector-col-name,
.sector-col:has(img):focus-visible .sector-col-name{color:var(--white)}
.sector-col-name{
  position:relative;z-index:2;font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2vw,30px);line-height:1.15;transition:color .4s ease;
}

.sector-intro{position:relative;z-index:2;padding-top:190px;pointer-events:none}
.sector-intro-inner{position:relative;max-width:540px;margin-left:auto}
/* a soft beige haze behind the copy: invisible against the plain beige,
   but enough of a plate to keep the text legible once a column reveals a
   photo underneath it — whatever that photo's tone happens to be */
.sector-intro-inner::before{
  content:'';position:absolute;inset:-40px -48px -44px;z-index:-1;
  background:radial-gradient(110% 92% at 62% 46%,
    rgba(242,236,224,.72) 0%, rgba(242,236,224,.64) 45%,
    rgba(242,236,224,.4) 75%, rgba(242,236,224,0) 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .45s ease;
}
/* where :has() is available the plate only fades in while a column is
   showing its photo, so the resting state is plain beige; elsewhere it
   simply stays on, which costs nothing against the beige */
@supports selector(:has(*)){
  .sector-intro-inner::before{opacity:0}
  #wwr-hero:has(.sector-col:hover) .sector-intro-inner::before,
  #wwr-hero:has(.sector-col:focus-visible) .sector-intro-inner::before{opacity:1}
}
#wwr-hero .about-hero-title{color:var(--ink);max-width:none}
#wwr-hero .pubs-hero-lede{color:var(--ink-soft)}

/* Insights hero: same dark band as contact-hero, with the pen photo
   set into the right side (pre-cropped with transparent padding) so it
   never crosses under the title. */
#pubs-hero .wrap{max-width:780px;margin-left:0}
#pubs-hero .about-hero-title{font-size:clamp(36px,5vw,68px)}
.pubs-hero-media{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;
  display:flex;justify-content:flex-end;align-items:flex-end;
  pointer-events:none;
}
.pubs-hero-media img{
  height:88%;width:auto;max-width:42%;object-fit:contain;object-position:bottom right;
  opacity:.85;
  -webkit-mask-image:linear-gradient(120deg,transparent,#000 38%);
  mask-image:linear-gradient(120deg,transparent,#000 38%);
}
#pubs-hero .wrap,#wwr-hero .wrap,#contact-hero .wrap{position:relative;z-index:2}
.pubs-hero-lede{margin-top:16px;max-width:680px;font-size:20px;line-height:1.75;color:rgba(255,255,255,.72)}

#library,#past-work-list{padding:96px 0 128px}

/* Reports | Publications | Stories tab switcher */
.pub-tabs{
  display:flex;justify-content:center;gap:48px;
  border-bottom:1px solid var(--line);
}
.pub-tab{
  padding:0 0 18px;
  font-family:var(--label);font-size:18px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s ease,border-color .15s ease;
}
.pub-tab:hover{color:var(--ink)}
.pub-tab.is-active{color:var(--ink);border-bottom-color:var(--ink)}
.pub-panel[hidden]{display:none}
.pub-panel{padding-top:28px}

.pub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 32px}

/* Publications and Reports read as rows — cover on the left, the write-up
   on the right with its "By" credit — laid out two per line so a single
   card doesn't stretch edge to edge. */
#tab-publications .pub-grid,
#tab-reports .pub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
#tab-reports .pub-card,
#tab-publications .pub-card{
  display:flex;align-items:flex-start;gap:32px;height:100%;
  padding:24px;background:var(--white);border:1px solid var(--line);border-radius:14px;
  transition:box-shadow .35s ease,border-color .35s ease;
}
#tab-reports .pub-card:hover,
#tab-publications .pub-card:hover{box-shadow:0 16px 40px rgba(10,15,46,.09);border-color:var(--bg-panel-2)}
/* the body is a flex column so the "Read more" pill always pins to the
   card's bottom edge, keeping every card the same height regardless of
   how long its title or subtitle runs (long text clips instead, per
   Sept'26 rev-4 feedback: "by default it should all have same height") */
#tab-reports .pub-body,
#tab-publications .pub-body{display:flex;flex-direction:column;flex:1;min-width:0}
#tab-reports .pub-title,
#tab-publications .pub-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#tab-reports .pub-subtitle,
#tab-publications .pub-subtitle{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#tab-reports .pub-cover,
#tab-publications .pub-cover{margin-bottom:0;flex:0 0 180px}
#tab-reports .pub-card:hover .pub-cover,
#tab-publications .pub-card:hover .pub-cover{transform:none}
.pub-by-line{
  display:block;margin-top:14px;
  font-family:'Libre Baskerville',var(--serif);font-style:italic;font-size:14px;color:var(--ink-faint);
}
#tab-reports .pub-by-line,
#tab-publications .pub-by-line{margin-bottom:24px}
.pub-by-name{font-family:var(--sans);font-style:normal;color:var(--ink-soft)}
.pub-item{min-width:0}
.pub-card{display:flex;flex-direction:column;width:100%;text-align:left;color:inherit}
.pub-card:focus{outline:none}
.pub-card:focus-visible{outline:2px solid var(--accent-1);outline-offset:6px;border-radius:12px}

/* covers are near-3:4 portraits; the few that run a little wider lose a
   sliver at the sides, never the title */
.pub-cover{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:10px;
  background:var(--card-bg);margin-bottom:22px;
  box-shadow:0 1px 2px rgba(10,15,46,.06),0 16px 34px rgba(10,15,46,.1);
  transition:transform .35s cubic-bezier(.16,.8,.3,1),box-shadow .35s ease;
}
.pub-cover img{width:100%;height:100%;object-fit:cover}
.pub-card:hover .pub-cover{
  transform:translateY(-6px);
  box-shadow:0 1px 2px rgba(10,15,46,.06),0 28px 52px rgba(10,15,46,.17);
}
/* a landscape cover is shown whole, floated on a blurred copy of itself */
.pub-cover--wide img{position:relative;z-index:1;object-fit:contain}
.pub-cover--wide .pub-cover-fill{
  position:absolute;inset:0;z-index:0;object-fit:cover;
  filter:blur(22px) brightness(.55);transform:scale(1.25);
}
.pub-cover::after{
  content:'+';position:absolute;z-index:2;right:12px;bottom:12px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(10,15,46,.82);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;
}
.pub-card:hover .pub-cover::after,
.pub-card:focus-visible .pub-cover::after{opacity:1;transform:none}

/* Case-study cards — hovering a cover washes it in the brand navy (#161e3e →
   #060b23) and offers "Read more", echoing the home banner's link. These
   cards are links, not modals, so they drop the "+" badge. */
a.pub-card .pub-cover::after{display:none}
.pub-cover-more{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:22px;
  background:linear-gradient(180deg,rgba(22,30,62,.86),rgba(6,11,35,.94));
  opacity:0;transition:opacity .35s ease;
}
.pub-cover-more > span{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;
  color:var(--white);transform:translateY(8px);transition:transform .35s cubic-bezier(.16,.8,.3,1);
}
.pub-card:hover .pub-cover-more,
.pub-card:focus-visible .pub-cover-more{opacity:1}
.pub-card:hover .pub-cover-more > span,
.pub-card:focus-visible .pub-cover-more > span{transform:none}

.pub-date{
  display:block;font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
}
.pub-title{
  display:block;margin-top:10px;font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,1.7vw,22px);line-height:1.25;color:var(--ink);
}
.pub-subtitle{display:block;margin-top:8px;font-size:17px;line-height:1.55;color:var(--ink-soft)}

/* modal — the case modal's shell, widened so the cover can sit beside the copy */
.pub-modal .case-modal-panel{
  max-width:1000px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start;
}
.pub-modal-cover{position:sticky;top:0}
.pub-modal-cover img{width:100%;height:auto;border-radius:10px;box-shadow:0 24px 48px rgba(0,0,0,.45)}
.pub-modal .case-modal-head{margin-bottom:0}
.pub-modal-subtitle{margin-top:12px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.72)}
.pub-modal-body .pub-by{margin:20px 0 30px}
.pub-modal-body p{font-size:17px;line-height:1.8;color:rgba(255,255,255,.75);margin-bottom:16px}
.pub-modal-body .pub-lead{
  font-family:var(--serif);font-size:clamp(19px,2vw,22px);line-height:1.45;
  color:var(--white);margin-bottom:20px;
}
.pub-modal-body .person-list{margin-bottom:20px}
.pub-note{
  margin:6px 0 24px;padding:16px 18px;border-left:2px solid var(--accent-2);
  background:rgba(255,255,255,.05);border-radius:0 8px 8px 0;
}
.pub-note b{
  display:block;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:6px;
}
.pub-modal-body .pub-note p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.7);margin:0}
.pub-modal-body .case-report{margin-top:12px}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
   Dark hero (shares #pubs-hero/#wwr-hero rules) + one light band
   with email channels, socials, address and an embedded map.
═══════════════════════════════════════════════════════════ */
#contact-detail{position:relative;overflow:hidden;padding:96px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-intro{margin:0 0 44px;max-width:640px;font-size:20px;line-height:1.75;color:var(--ink-soft)}
.contact-group{margin-bottom:32px}
.contact-group:last-child{margin-bottom:0}
.contact-group .eyebrow{display:block;margin-bottom:8px}
.contact-group a{font-size:20px;color:var(--ink);transition:color .15s}
.contact-group a:hover{color:var(--accent-1)}
.contact-social{display:flex;align-items:center;gap:22px;margin-top:14px}
/* the icons ship white; ink them for the light band. The shrink transition
   is restated here because .contact-group a (above) would otherwise win. */
.contact-social img{filter:brightness(0)}
.contact-group .contact-social a{transition:transform .2s cubic-bezier(.3,.7,.4,1),opacity .2s}
.contact-address{font-size:17px;line-height:1.75;color:var(--ink-soft);margin:8px 0 16px;max-width:420px}
.contact-maplink{display:inline-block;margin-bottom:20px;font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink)}
.contact-map iframe{
  width:100%;aspect-ratio:4/3;border:0;border-radius:14px;
  filter:grayscale(1) contrast(1.03);transition:filter .3s;
}
.contact-map iframe:hover{filter:none}

/* ═══════════════════════════════════════════════════════════
   CAREER PAGE
   Shares the dark hero (#contact-hero) + one light band with
   the current openings state.
═══════════════════════════════════════════════════════════ */
#career-detail{position:relative;overflow:hidden;padding:96px 0}
.career-empty{max-width:620px}
.career-empty .eyebrow{display:block;margin-bottom:16px}
.career-empty h2{margin:0 0 16px;font-size:clamp(28px,3.4vw,44px)}
.career-empty p{font-size:20px;line-height:1.75;color:var(--ink-soft);margin:0 0 28px}
.career-empty-link{
  display:inline-block;font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--ink);transition:color .15s,border-color .15s;
}
.career-empty-link:hover{color:var(--accent-1);border-color:var(--accent-1)}

/* Newsletter tab on Publications — the homepage's Long-Form Newsletter
   block, reused as-is inside a self-contained dark panel since its
   popular-card and reformist-cta styling assumes a dark background. */
.newsletter-panel{background:var(--ink);color:var(--white);border-radius:24px;padding:56px}
.newsletter-panel .reformist-channel-label--newsletter{margin-top:0}
@media (max-width:640px){.newsletter-panel{padding:36px 24px}}

.career-list-head{max-width:900px;margin-bottom:40px}
.career-list-head .eyebrow{display:block;margin-bottom:16px}
.career-list-head h2{margin:0;font-size:clamp(26px,3.4vw,38px);white-space:nowrap}

.career-list{max-width:760px;display:flex;flex-direction:column;gap:16px}
.career-role-row{
  width:100%;display:flex;align-items:center;gap:20px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 28px;
  text-align:left;box-shadow:0 1px 2px rgba(10,15,46,.06),0 16px 34px rgba(10,15,46,.1);
  transition:box-shadow .18s,transform .35s cubic-bezier(.16,.8,.3,1);
}
.career-role-row:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(10,15,46,.06),0 22px 44px rgba(10,15,46,.14);
}
.career-role-icon{
  flex-shrink:0;width:44px;height:44px;border-radius:16px;background:var(--bg-panel);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background-color .18s,border-color .18s;
}
.career-role-icon svg{width:20px;height:20px}
.career-role-row:hover .career-role-icon{animation:metric-jiggle .4s ease}
@media (prefers-reduced-motion:reduce){.career-role-row:hover .career-role-icon{animation:none}}
.career-role-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.career-role-row-tag{
  font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-1);
}
.career-role-row-title{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,22px);color:var(--ink)}
.career-role-row-more{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--ink);
}
.career-role-row-more .icon-arrow{width:16px;height:16px}
.career-role-sub{color:var(--ink-soft);font-size:.7em}
.career-role-footnote{
  max-width:760px;font-size:15px;color:var(--ink-soft);
  margin-top:32px;padding-left:28px;text-align:left;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .wrap{padding:0 40px}
  #ways,#approach{padding:80px 0}
  .ways-body{flex-direction:column;gap:48px}
  .ways-visual{flex:none;width:100%;aspect-ratio:auto}
  .ways-visual-mark{width:min(64%,380px)}
  .approach-cols{grid-template-columns:1fr;gap:32px}
  .initiatives-grid{grid-template-columns:1fr;gap:40px}
  .reformist-head{padding:0 40px}
  .reformist-card{width:68vw}
  .popular-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer-inner{padding:0 40px}
  .site-footer-grid{padding:0 40px}
  .site-footer-columns{grid-template-columns:1fr}
  .career-list-head h2{white-space:normal}
  .career-role-row{flex-wrap:wrap}
  .career-role-row-more{margin-left:64px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  /* about page */
  #vision,#focus,#team,#opener{padding:80px 0}
  .journey-sticky{padding:80px 0}
  #about-hero{min-height:70vh}
  .about-hero-inner{padding-top:170px;padding-bottom:56px}
  .vision-grid{grid-template-columns:1fr;gap:40px}
  .focus-grid{grid-template-columns:1fr;gap:16px}
  .journey-rail{gap:20px;overflow-x:auto;scrollbar-width:none}
  .journey-panel.is-active{grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:36px}
  .journey-rail::-webkit-scrollbar{display:none}
  /* product page */
  #pillars,#product-intro{padding:80px 0}
  #product-hero{min-height:70vh}
  .pillars-grid{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:48px}
  .pillar-nav-sticky{top:120px}
  /* publications page */
  #pubs-hero,#wwr-hero,#contact-hero{padding:180px 0 72px}
  .pubs-hero-media img{max-width:40%}
  #library,#past-work-list{padding:80px 0 96px}
  .pub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 28px}
  .team-unit{grid-template-columns:1fr;gap:20px}
  .team-unit--nolabel .person-grid{grid-column:auto}
  .team-group{margin-bottom:72px}
  .person-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .nav-items{display:none}
  .nav-main{padding:14px 20px}
  .nav-cta{display:none}
  .nav-mobile-toggle{display:flex}
  .mobile-menu-open .mobile-menu{display:flex}
  body.mobile-menu-open{overflow:hidden}
  #hero{min-height:88vh}
  .story-hero-copy{padding:19vh 24px 40px;max-width:100%}
  .story-hero-scroll{display:none}
  .story-hero-tab{display:none}
  .story-hero-controls{display:flex}
  .story-hero-tabs{margin-bottom:24px}
  .reformist-arrow{display:none}
  .reformist-card{width:80vw}
  .popular-grid{grid-template-columns:1fr 1fr;gap:16px}
  .site-footer-cta{min-height:44vh}
  .site-footer-brand{flex-direction:column;align-items:flex-start}
  .marquee-track{gap:36px;padding-right:36px}
  /* about page */
  .about-hero-title{font-size:clamp(30px,7.4vw,42px)}
  .journey-rail{gap:22px}
  .journey-panels{min-height:0}
  .journey-scroll{height:auto}
  .journey-sticky{position:static;min-height:0;padding:80px 0}
  .journey-panel.is-active{grid-template-columns:1fr;gap:28px}
  .journey-photo{aspect-ratio:16/10}
  #about-hero{min-height:64vh}
  .about-hero-inner{padding-top:150px;padding-bottom:44px}
  .opener-copy p{font-size:18px}
  .person-grid{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .team-group-head{gap:16px}
  /* product page — the rail becomes a scrolling strip above the panel */
  #product-hero{min-height:64vh}
  /* pillar-nav spans both rows so its sticky child has the whole
     section's height to stay pinned within, not just its own short row;
     pointer-events keep the (mostly empty) spanned box from blocking
     clicks on pillar-stage content beneath it */
  .pillars-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0}
  .pillar-nav{grid-column:1;grid-row:1 / span 2;pointer-events:none}
  .pillar-stage{grid-column:1;grid-row:2}
  .pillar-nav-sticky{
    position:sticky;top:84px;z-index:40;pointer-events:auto;
    margin:0 -40px;padding:0 40px 24px;background:var(--bg);
  }
  .pillar-nav .eyebrow{margin-bottom:14px}
  .pillar-nav-list{
    display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;
    border-top:1px solid var(--line);
  }
  .pillar-nav-item{
    flex-direction:row;align-items:baseline;gap:8px;
    margin-top:-1px;padding:14px 0;
    border-left:0;border-top:2px solid transparent;
  }
  .pillar-nav-item.is-active{border-left-color:transparent;border-top-color:var(--ink)}
  .pillar-title{margin-top:16px}
  .pillar-block{margin-top:44px}
  /* auto-fit would still give two tracks here; the dividers below assume one */
  .pillar-approach{grid-template-columns:1fr}
  .pillar-approach-item{padding:24px 0}
  .pillar-approach-item + .pillar-approach-item{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .pillar-work-row{gap:16px;padding-right:0}
  .pillar-work-row:hover{padding-left:0;background:none}
  .person-modal-panel,
  .case-modal-panel{margin:0;max-width:none;min-height:100%;border-radius:0;padding:28px 22px 48px}
  .person-modal-head{flex-direction:column;align-items:flex-start;gap:16px;padding-right:40px}
  .person-photo::after{opacity:1;transform:none}
  /* publications page */
  #pubs-hero,#wwr-hero,#contact-hero{padding:150px 0 56px}
  .pubs-hero-lede{font-size:18px}
  #pubs-hero .wrap{max-width:none}
  .pubs-hero-media{display:none}
  .approach-carousel{height:260px;margin:48px 0 40px}
  .approach-card{width:190px;height:238px;left:-95px;transform-origin:95px 1620px}
  #wwr-hero{display:block;min-height:0;padding:150px 0 0}
  .sector-columns{position:static;grid-template-columns:repeat(2,1fr);height:56vh;margin-top:36px}
  .sector-bg{display:none}
  .sector-intro{padding-top:0}
  .sector-intro-inner{max-width:none;margin-left:0}
  .pub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px}
  .career-role-meta{grid-template-columns:1fr}
  .pub-tabs{
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:32px;
    padding-bottom:1px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .pub-tabs::-webkit-scrollbar{display:none}
  .pub-tab{flex:0 0 auto;white-space:nowrap}
  #tab-reports .pub-grid,
  #tab-publications .pub-grid{grid-template-columns:1fr;gap:20px}
  #tab-reports .pub-card,
  #tab-publications .pub-card{grid-template-columns:120px minmax(0,1fr);gap:20px;padding:18px}
  .pub-cover::after{opacity:1;transform:none}
  .pub-modal .case-modal-panel{grid-template-columns:1fr;gap:28px}
  .pub-modal-cover{position:static;max-width:150px}
}
/* phones — covers shrink to a thumbnail beside the text, so nine reports
   don't turn into nine screens of scrolling */
@media (max-width:560px){
  .pub-tabs{gap:24px}
  .pub-tab{font-size:16px}
  .popular-grid{grid-template-columns:1fr}
  .person-grid{grid-template-columns:1fr;gap:28px 16px}
  .pub-grid{grid-template-columns:1fr;gap:28px}
  #tab-reports .pub-grid,
  #tab-publications .pub-grid{grid-template-columns:1fr;gap:28px}
  .pub-grid .pub-card{
    display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr;
    column-gap:18px;align-items:start;
  }
  .pub-grid .pub-cover{grid-row:1 / span 3;margin-bottom:0;border-radius:8px}
  .pub-cover::after{display:none}
  .pub-cover-more{display:none}
  .pub-card:hover .pub-cover{transform:none}
  .pub-grid .pub-date,.pub-grid .pub-title,.pub-grid .pub-subtitle{grid-column:2}
  .pub-grid .pub-title{margin-top:6px;font-size:19px}
  .pub-grid .pub-subtitle{font-size:15px}
}


/* ═══════════════════════════════════════════════════════════
   OUR APPROACH — pillar photo galleries + Key Services story cards
   (Sept'26 rev-8)
═══════════════════════════════════════════════════════════ */
.pillar-gallery{position:relative;margin-top:32px;border-radius:14px;overflow:hidden;background:var(--card-bg)}
.pg-viewport{position:relative;aspect-ratio:16/9}
.pg-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.pg-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease}
.pg-slide img{width:100%;height:100%;object-fit:cover;display:block}
.pg-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.88);color:var(--ink);border:0;cursor:pointer;
  box-shadow:0 2px 10px rgba(10,15,46,.18);transition:background .15s,transform .15s;
}
.pg-btn:hover{background:var(--white)}
.pg-btn:focus-visible,.pg-dot:focus-visible{outline:2px solid var(--accent-1);outline-offset:2px}
.pg-prev{left:14px}
.pg-next{right:14px}
.pg-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:2px}
/* 24px hit area around a 8px dot keeps the touch target usable */
.pg-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.pg-dot::before{
  content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(10,15,46,.15);transition:background .2s,transform .2s;
}
.pg-dot.is-active::before{background:var(--white);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.pg-slide,.pg-slide.is-active{transition:none}}

/* story cards under Past Work reuse the Past Work card (.pub-card) */
.pillar-stories{margin-top:32px;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}

/* Past Work thumbnails — one subtle, shared grade so five different photos
   read as a set without recolouring any of them */
.pub-cover.pw-thumb img{filter:saturate(.95) contrast(1.03) sepia(.05)}

@media (max-width:640px){
  .pg-viewport{aspect-ratio:4/3}
  .pg-btn{width:44px;height:44px}
  .pg-prev{left:8px}
  .pg-next{right:8px}
  .pillar-gallery{border-radius:10px}
  .pillar-stories{grid-template-columns:1fr;gap:28px}
}


/* Home publications (rev-9) — hovering a cover washes it in #0e122e and says
   "See more", so it is obvious the card opens a pop-up. Touch screens have no
   hover, so the overlay stays off there. */
#home-publications .pub-cover::after{
  content:'See more';inset:0;width:100%;height:100%;border-radius:0;
  background:rgba(14,18,46,.9);color:var(--white);
  font-family:var(--label);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transform:none;opacity:0;transition:opacity .3s ease;
}
#home-publications .pub-card:hover .pub-cover::after,
#home-publications .pub-card:focus-visible .pub-cover::after{opacity:1}
@media (hover:none){
  #home-publications .pub-cover::after,
  #home-publications .pub-card:hover .pub-cover::after{opacity:0}
}

/* metrics on phones — a long figure like "+371,000" must not stretch the grid
   track past the column */
@media (max-width:1080px){
  .approach-cols{grid-template-columns:minmax(0,1fr)}
  .approach-cols .metric-card{min-width:0}
}
@media (max-width:480px){
  .approach-cols .metric-num{font-size:clamp(34px,10.5vw,49.5px)}
}


/* ═══════════════════════════════════════════════════════════
   REV 10 — home
═══════════════════════════════════════════════════════════ */
/* metric boxes in #fafff8 */
.metric-card{background:#fafff8;border-color:rgba(107,132,214,.2)}
.metric-card:hover{background:#fafff8;border-color:rgba(107,132,214,.38)}
.metric-card p{line-height:1.6}
.metric-card p strong:not(.metric-num){color:var(--ink)}

/* Reformist CTAs are real buttons, bigger and easier to spot */
.reformist-cta{
  width:fit-content;margin:28px auto 0;padding:18px 36px;
  background:var(--white);color:var(--ink);border-radius:100px;
  font-size:18px;font-weight:600;gap:12px;min-height:56px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.reformist-cta:hover{color:var(--ink);background:#f6c194;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.34)}
.reformist-cta-yt{width:30px;height:30px}
.reformist-cta-substack{width:28px;height:28px}
.popular-cta{margin-top:36px}
.newsletter-panel .reformist-cta{background:var(--ink);color:var(--white)}
.newsletter-panel .reformist-cta:hover{background:var(--ink-2);color:var(--white)}

/* "Tonton Video" sits dead centre of the cover and appears on hover */
.reformist-card-bottom{justify-content:flex-end}
.reformist-watch{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  opacity:0;padding:14px 26px;font-size:16px;font-weight:600;z-index:2;
  transition:opacity .25s ease,transform .25s ease,background .2s,color .2s,border-color .2s;
}
.reformist-card:hover .reformist-watch,
.reformist-watch:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.reformist-watch{opacity:1;transform:translate(-50%,-50%)}}

/* LSE 100x / I-CLIMB / MIT Solve — a touch larger */
.initiatives-label{font-size:clamp(23px,2.6vw,31px)}
.initiatives-logo{height:80px;max-width:320px}
.initiatives-col:last-child .initiatives-logo{height:100px}
.initiatives-logo--mit{height:66px}
.initiatives-more{font-size:14px}


/* ═══════════════════════════════════════════════════════════
   REV 10 — About
═══════════════════════════════════════════════════════════ */
/* opener: the lead sits between the headline and the body in size */
.opener-copy .opener-lead{font-size:clamp(22px,2.3vw,28px);line-height:1.35;margin-bottom:6px}
.opener-copy{gap:14px}

/* darker body copy; the two highlighted phrases start in the body colour and
   light up (full ink + a sweeping underline) once scrolled to */
.vision-text{color:rgba(10,15,46,.8)}
.vision-text em{
  color:inherit;font-weight:700;
  background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100%/0 2px;
  transition:color .9s ease,background-size 1.1s cubic-bezier(.16,.8,.3,1);
}
.vision-text em.is-lit{color:var(--ink);background-size:100% 2px}
@media (prefers-reduced-motion:reduce){.vision-text em{transition:none}}

/* journey — scroll-driven. The section pins; each scroll step moves the line
   on to the next year (initJourneyScroll sets the height and the progress). */
.journey-scroll.is-pinned .journey-sticky{position:sticky;top:0;height:100vh;min-height:0;padding:96px 0 32px;justify-content:center}
.journey-scroll.is-pinned .journey-head{margin-bottom:28px}
.journey-scroll.is-pinned .journey-rail{margin-bottom:28px}
.journey-scroll.is-pinned .journey-panels{min-height:0}
.journey-scroll.is-pinned .journey-rail-progress{transition:none}
.journey-scroll-hint{
  display:flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.journey-scroll-hint svg{animation:jhint 1.6s ease-in-out infinite}
@keyframes jhint{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.journey-scroll-hint svg{animation:none}}
.journey-copy{display:flex;flex-direction:column;gap:12px}
.journey-copy .journey-title{margin-bottom:2px}
.journey-panel p{font-size:17px;line-height:1.7}
/* tighter, people-first framing for every journey photo */
.journey-photo img{transform:scale(var(--z,1));transform-origin:var(--ox,50%) var(--oy,50%);object-position:var(--ox,50%) var(--oy,50%)}
.journey-photo img.is-zoomed{transform:scale(var(--z,1))}

/* team — bigger photo cards with the name on an overlay box */
.team-group-title{font-size:20px;letter-spacing:.14em}
.team-group-note{font-size:19px;max-width:none}
@media (min-width:1100px){#our-team .team-group-note{white-space:nowrap}}
.team-unit{grid-template-columns:minmax(0,1fr);gap:24px}
.team-unit--nolabel .person-grid{grid-column:auto}
.team-unit-label{font-size:18px;letter-spacing:.12em}
.person-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.person-card{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--card-bg);isolation:isolate}
.person-card .person-photo{position:absolute;inset:0;aspect-ratio:auto;margin:0;border-radius:0;z-index:0;overflow:hidden}
.person-card .person-photo img{object-position:center 22%;transition:transform .6s cubic-bezier(.16,.8,.3,1)}
.person-card:hover .person-photo img,.person-card:focus-visible .person-photo img{transform:scale(1.06)}
.person-photo::after{display:none}
.person-box{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-height:84px;padding:16px 74px 16px 20px;border-radius:16px;
  background:var(--white);color:var(--ink);text-align:left;
  transition:background .4s ease,color .4s ease,backdrop-filter .4s ease,box-shadow .4s ease;
}
.person-box .person-name{font-size:19px;line-height:1.25;font-weight:600;color:inherit}
.person-box .person-nick{color:inherit;opacity:.55}
.person-box .person-role{font-size:14.5px;line-height:1.4;margin-top:0;color:inherit;opacity:.72}
.person-plus{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink);background:var(--white);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
/* hover / keyboard focus: the box turns to navy glass, so the person shows
   through it as a soft silhouette */
.person-card:hover .person-box,.person-card:focus-visible .person-box{
  background:linear-gradient(100deg,rgba(72,90,176,.55) 0%,rgba(20,27,74,.9) 62%,rgba(10,15,46,.94) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 12px 30px rgba(10,15,46,.3);
}
.person-card:hover .person-plus,.person-card:focus-visible .person-plus{
  background:transparent;border-color:rgba(255,255,255,.75);color:var(--white);transform:translateY(-50%) rotate(90deg);
}
.person-photo--initials{font-size:clamp(44px,5vw,72px)}

/* scroll reveal: photo wipes in top to bottom, name box rises bottom to top;
   each row waits for the reader to scroll to it (initTeamReveal) */
.tm-anim .person-card:not(.is-in) .person-photo{clip-path:inset(0 0 100% 0)}
.tm-anim .person-card:not(.is-in) .person-box{opacity:0;transform:translateY(56px)}
.tm-anim .person-card .person-photo{transition:clip-path .9s cubic-bezier(.16,.8,.3,1) var(--d,0s)}
.tm-anim .person-card .person-box{transition:opacity .7s ease calc(var(--d,0s) + .25s),transform .8s cubic-bezier(.16,.8,.3,1) calc(var(--d,0s) + .25s),background .4s ease,color .4s ease,box-shadow .4s ease}
.tm-anim .person-card:not(.is-in){pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .tm-anim .person-card:not(.is-in) .person-photo{clip-path:none}
  .tm-anim .person-card:not(.is-in) .person-box{opacity:1;transform:none}
}
@media (max-width:1080px){.person-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.person-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .person-box{left:10px;right:10px;bottom:10px;min-height:0;padding:12px 52px 12px 14px}
  .person-box .person-name{font-size:16px}.person-box .person-role{font-size:13px}
  .person-plus{width:34px;height:34px;right:10px}.person-plus svg{width:18px;height:18px}}
@media (max-width:520px){.person-grid{grid-template-columns:minmax(0,1fr)}.person-card{aspect-ratio:1/1.05}
  .person-box .person-name{font-size:18px}.person-box .person-role{font-size:14px}.person-plus{width:42px;height:42px}}

/* four pillars — one point in focus at a time, driven by scroll */
#ways .ways-row{opacity:var(--wf,1);transition:opacity .25s linear}


/* ═══════════════════════════════════════════════════════════
   REV 10 — Reframing Indonesia's 2045 Vision (scroll-driven venn morph)
═══════════════════════════════════════════════════════════ */
#vision2045{position:relative;padding:0}
.v45-wrap{position:relative;height:320vh}
.v45-stage{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  max-width:1280px;margin:0 auto;padding:112px 40px 28px;
}
.v45-head{text-align:center}
.v45-head .eyebrow{display:block;margin-bottom:10px}
.v45-head .h-xl{font-size:clamp(28px,3.3vw,44px)}
.v45-card{
  flex:1 1 auto;min-height:0;background:#fafff8;border:1px solid var(--line);border-radius:22px;
  padding:26px 40px 24px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 1px 2px rgba(10,15,46,.05),0 24px 56px rgba(10,15,46,.08);
}
.v45-titles{position:relative;flex:0 0 auto;min-height:2.6em;margin-bottom:6px}
.v45-titles h3{
  position:absolute;top:0;left:0;right:0;margin:0;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.3vw,30px);line-height:1.25;color:var(--ink);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1);
}
.v45-t2{opacity:0}
.v45-row{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:56px}
.v45-svg-col{flex:0 1 auto;height:100%;min-height:0;aspect-ratio:1;max-width:60%;display:flex}
.v45-svg-col svg{width:100%;height:100%;display:block;overflow:visible}
.v45-legend{flex:0 0 min(340px,32%);display:flex;flex-direction:column;gap:26px;opacity:0;transition:opacity .4s linear}
.v45-li{display:flex;gap:16px;align-items:flex-start}
.v45-sw{flex:0 0 28px;width:28px;height:28px;border-radius:6px;margin-top:4px}
.v45-li h4{margin:0 0 4px;font-family:var(--serif);font-size:clamp(20px,1.7vw,24px);font-weight:700;color:var(--ink)}
.v45-li p{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--ink-soft)}
.v45-simple,.v45-dt{font-family:var(--serif);font-weight:700;fill:#fff;text-anchor:middle}
.v45-ds{font-family:var(--sans);fill:rgba(255,255,255,.94);text-anchor:middle}
.v45-di{font-family:var(--serif);font-style:italic;fill:rgba(255,255,255,.85);text-anchor:middle}
.v45-detail{opacity:0}
.v45-grain{pointer-events:none;mix-blend-mode:overlay}
@media (max-width:900px){
  .v45-stage{padding:84px 16px 16px;gap:12px}
  .v45-card{padding:18px 16px 16px}
  .v45-row{flex-direction:column;gap:14px;justify-content:flex-start}
  .v45-svg-col{max-width:100%;width:100%;height:auto;flex:1 1 auto;min-height:0;aspect-ratio:auto}
  .v45-legend{flex:0 0 auto;width:100%;gap:12px}
  .v45-li h4{font-size:18px}.v45-li p{font-size:14px;line-height:1.4}
  .v45-sw{flex-basis:22px;width:22px;height:22px}
}
@media (max-width:560px){.v45-di{display:none}}
@media (prefers-reduced-motion:reduce){.v45-legend,.v45-titles h3{transition:none}}


/* ═══════════════════════════════════════════════════════════
   REV 10 — Our Approach: white page, cards, key services, work thumbnails
═══════════════════════════════════════════════════════════ */
body.page-approach{background:#fff;--ink-soft:#26262b;--ink-faint:#55555c}
body.page-approach::before{display:none}
.page-approach #pillars{background:#fff}
.page-approach .pillar-body,.page-approach .pillar-approach-desc,.page-approach .pillar-statement{color:#1d1d22}
.page-approach .pillar-statement em{color:#000}
.page-approach .pillar-approach-desc,.page-approach .pillar-body{font-size:18px}
.page-approach .pillar-nav-item{color:#6b6b73}
.page-approach .pillar-nav-item.is-active{color:var(--ink)}

/* The Challenge and Selected Work sit on #f3f3f3 cards */
.page-approach .pillar-block:has(.pillar-statement),
.page-approach .pillar-block:has(.pillar-work){
  background:#f3f3f3;border-radius:22px;padding:34px 36px 38px;
}
.page-approach .pillar-block:has(.pillar-statement) .pillar-kicker,
.page-approach .pillar-block:has(.pillar-work) .pillar-kicker{border-top:none;padding-top:0}

/* sections arrive one by one as the reader scrolls */
.pb-reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.8,.3,1)}
.pb-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pb-reveal{opacity:1;transform:none;transition:none}}

/* Our Key Services — filled pills, top four then "click to view all" */
.page-approach .pillar-services{gap:12px}
.page-approach .pillar-services li{
  padding:11px 22px;border:none;border-radius:999px;background:var(--ink);color:var(--white);
  font-size:16px;line-height:1.35;transition:background .2s ease,transform .2s ease;
}
.page-approach .pillar-services li:hover{background:var(--ink-2);transform:translateY(-1px)}
.pillar-services[data-collapsible]:not(.is-open) li:nth-child(n+5){display:none}
.pillar-services[data-collapsible].is-open li:nth-child(n+5){animation:pw-pop .45s cubic-bezier(.16,.8,.3,1) both}
@keyframes pw-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.pw-toggle{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:12px 24px;border-radius:999px;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:15px;font-weight:600;min-height:46px;
  transition:background .2s ease,color .2s ease;
}
.pw-toggle:hover{background:var(--ink);color:var(--white)}
.pw-toggle::after{content:'';width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.pw-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}

/* Selected Work — thumbnail cards; case-study cards go navy on hover */
.page-approach .pillar-work{border-top:none;display:flex;flex-direction:column;gap:14px}
.page-approach .pillar-work-item{border-bottom:none;border-radius:16px;background:#fff;overflow:hidden;transition:box-shadow .3s ease,transform .3s ease}
.page-approach .pillar-work-item[hidden]{display:none}
.page-approach .pillar-work-row{
  display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:22px;
  padding:14px 26px 14px 14px;position:relative;isolation:isolate;
  transition:background .3s ease,color .3s ease;
}
.page-approach .pillar-work-row:hover{padding-left:14px;background:#f0f0f2}
.page-approach .pillar-work-item:hover{box-shadow:0 8px 22px rgba(10,15,46,.07)}
.pw-thumb{display:block;width:132px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;flex:none;background:var(--card-bg)}
.pw-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pw-thumb--tile{display:grid;place-items:center;background:linear-gradient(140deg,#28357e,var(--ink))}
.pw-thumb--tile span{font-family:var(--serif);font-size:28px;letter-spacing:.04em;color:rgba(255,255,255,.92)}
.pillar-work-row:hover .pw-thumb img{transform:scale(1.06)}
.page-approach .pillar-work-title{font-size:19px;color:var(--ink)}
.page-approach .pillar-work-partner{color:#3b3b42}
.pw-case-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 14px;border-radius:999px;
  background:rgba(10,15,46,.08);color:var(--ink);
  font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease;
}
.is-case .pillar-work-row::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(105deg,#0a0f2e 0%,#182468 58%,#2c3f9a 100%);
  transition:opacity .35s ease;
}
.is-case .pillar-work-row:hover::before,.is-case .pillar-work-row:focus-visible::before{opacity:1}
.is-case .pillar-work-row:hover,.is-case .pillar-work-row:focus-visible{background:transparent}
.is-case .pillar-work-row:hover .pillar-work-title,.is-case .pillar-work-row:focus-visible .pillar-work-title{color:var(--white)}
.is-case .pillar-work-row:hover .pillar-work-partner,.is-case .pillar-work-row:focus-visible .pillar-work-partner{color:rgba(255,255,255,.78)}
.is-case .pillar-work-row:hover .pw-case-badge,.is-case .pillar-work-row:focus-visible .pw-case-badge{background:var(--white);color:var(--ink)}
.is-case .pillar-work-row:hover .icon-arrow,.is-case .pillar-work-row:focus-visible .icon-arrow{color:var(--white)}
.page-approach .pillar-work-row .icon-arrow{opacity:.5}
.pw-toggle--work,.pillar-work + .pw-toggle{margin-top:22px}
@media (max-width:640px){
  .page-approach .pillar-block:has(.pillar-statement),.page-approach .pillar-block:has(.pillar-work){padding:22px 18px 26px;border-radius:18px}
  .page-approach .pillar-work-row{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:12px}
  .page-approach .pillar-work-row .icon-arrow{display:none}
  .pw-thumb{width:88px;border-radius:10px}.pw-thumb--tile span{font-size:20px}
  .page-approach .pillar-work-title{font-size:16px}.page-approach .pillar-work-partner{font-size:14px}
  .pw-case-badge{font-size:11px;padding:5px 10px}
}

/* popup: the case-study button leads the write-up */
.case-modal-body > .case-report{margin:0 0 32px}

/* "What they said about us": the context is a small note; the review leads */
.page-approach .testimonial-card{background:transparent;border:none;padding:0;gap:22px}
.page-approach .testimonial-meta{
  background:#f3f3f3;border-radius:14px;padding:16px 20px;gap:4px;max-width:560px;
}
.page-approach .testimonial-title{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.4;color:#1d1d22}
.page-approach .testimonial-sub{font-size:13px;color:#3b3b42}
.page-approach .testimonial-intro{margin-top:6px;font-size:14px;line-height:1.55;color:#3b3b42}
.page-approach .testimonial-quote{border-left-color:var(--ink);padding-left:28px;gap:20px}
.page-approach .testimonial-quote p{font-size:19px;line-height:1.8;color:#1d1d22}
.testimonial-quote[data-stagger] .st-item{opacity:0;transform:translateY(22px);transition:opacity .8s ease var(--sd,0s),transform .9s cubic-bezier(.16,.8,.3,1) var(--sd,0s)}
.testimonial-quote[data-stagger] .st-item.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.testimonial-quote[data-stagger] .st-item{opacity:1;transform:none;transition:none}}


/* ═══════════════════════════════════════════════════════════
   REV 10 — Publications: smaller cards
═══════════════════════════════════════════════════════════ */
#tab-reports .pub-grid,#tab-publications .pub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#tab-reports .pub-card,#tab-publications .pub-card{gap:16px;padding:14px;border-radius:12px}
#tab-reports .pub-cover,#tab-publications .pub-cover{flex:0 0 104px;border-radius:8px}
#tab-reports .pub-date,#tab-publications .pub-date{font-size:11px}
#tab-reports .pub-title,#tab-publications .pub-title{margin-top:6px;font-size:16.5px;line-height:1.3;-webkit-line-clamp:3}
#tab-reports .pub-subtitle,#tab-publications .pub-subtitle{margin-top:6px;font-size:14px;line-height:1.5;-webkit-line-clamp:2}
#tab-reports .pub-by-line,#tab-publications .pub-by-line{margin-top:8px;margin-bottom:0;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#library{padding-top:72px}
@media (max-width:1180px){#tab-reports .pub-grid,#tab-publications .pub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  #tab-reports .pub-grid,#tab-publications .pub-grid{grid-template-columns:1fr;gap:14px}
  #tab-reports .pub-card,#tab-publications .pub-card{flex-direction:row;display:flex;padding:12px}
  #tab-reports .pub-cover,#tab-publications .pub-cover{flex:0 0 84px}
}

/* ═══════════════════════════════════════════════════════════
   REV 10 — Contact: one continuous navy page, details up in the first view
═══════════════════════════════════════════════════════════ */
.page-contact #contact-hero{padding:150px 0 28px}
.page-contact #contact-hero .about-hero-title{font-size:clamp(34px,4.4vw,56px)}
.page-contact #contact-hero .pubs-hero-lede{max-width:640px;margin-top:14px}
.page-contact #contact-detail{background:var(--ink);color:var(--white);padding:8px 0 96px}
.page-contact #contact-detail::before{content:'';position:absolute;left:80px;right:80px;top:0;height:1px;background:rgba(255,255,255,.16);z-index:1}
.page-contact .contact-grid{padding-top:36px;position:relative;z-index:2}
.page-contact .contact-group .eyebrow{color:rgba(255,255,255,.6)}
.page-contact .contact-group a{color:var(--white)}
.page-contact .contact-group a:hover{color:var(--accent-2)}
.page-contact .contact-address{color:rgba(255,255,255,.78)}
.page-contact .contact-maplink{color:var(--white);border-bottom-color:var(--white)}
.page-contact .contact-social img{filter:brightness(0) invert(1)}
.page-contact .contact-map iframe{filter:grayscale(1) contrast(1.03) invert(.9) hue-rotate(180deg)}
.page-contact .contact-map iframe:hover{filter:none}
@media (max-width:1080px){.page-contact #contact-detail::before{left:40px;right:40px}}
@media (max-width:640px){.page-contact #contact-hero{padding:120px 0 16px}.page-contact #contact-detail::before{left:20px;right:20px}}

/* pinned journey: photo height is capped so the tallest milestone fits the screen */
.journey-scroll.is-pinned .journey-panel.is-active{align-items:center}
.journey-scroll.is-pinned .journey-photo{aspect-ratio:auto;height:min(44vh,380px);width:100%}
.journey-scroll.is-pinned .journey-panels{flex:0 0 auto}
@media (min-width:700px){
  .journey-scroll.is-pinned .journey-panel.is-active{grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:40px}
  .journey-scroll.is-pinned .journey-photo{height:min(42vh,360px)}
}


/* ── rev-10 fixes after review ─────────────────────────────── */
/* team: compact name box so faces stay clear (full title lives in the profile) */
.person-card{aspect-ratio:3/4}
.person-card .person-photo img{object-position:center 12%}
.person-box{left:12px;right:12px;bottom:12px;min-height:0;gap:2px;padding:12px 64px 12px 16px;border-radius:14px}
.person-box .person-name{font-size:17px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.person-box .person-nick{display:none}
.person-box .person-role{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.person-plus{width:40px;height:40px;right:12px}
.person-plus svg{width:20px;height:20px}
.person-card:hover .person-plus,.person-card:focus-visible .person-plus{transform:translateY(-50%) rotate(45deg)}
@media (max-width:760px){.person-box{padding:10px 52px 10px 12px}.person-box .person-name{font-size:15px}.person-box .person-role{font-size:12.5px}.person-plus{width:34px;height:34px}}
@media (max-width:520px){.person-card{aspect-ratio:4/5}.person-box .person-name{font-size:17px}.person-box .person-role{font-size:13.5px}.person-plus{width:38px;height:38px}}

/* venn: bigger diagram, small legend underneath */
.v45-row{flex-direction:column;gap:12px;justify-content:flex-start;align-items:stretch}
.v45-svg-col{flex:1 1 0;min-height:0;width:100%;max-width:100%;height:auto;aspect-ratio:auto;justify-content:center}
.v45-svg-col svg{height:100%;width:auto;max-width:100%}
.v45-legend{flex:0 0 auto;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 40px}
.v45-li{gap:10px;align-items:center}
.v45-sw{flex:0 0 16px;width:16px;height:16px;border-radius:4px;margin-top:0}
.v45-li h4{display:inline;font-size:15px;margin:0 6px 0 0}
.v45-li p{display:inline;font-size:13.5px;line-height:1.4}
.v45-li > div{max-width:300px}
.v45-card{padding:22px 32px 18px}
@media (max-width:900px){.v45-legend{flex-direction:column;align-items:flex-start;gap:8px;padding:0 4px}.v45-li h4{font-size:14px}.v45-li p{font-size:12.5px}.v45-svg-col{flex:1 1 0}}

/* Reformist CTAs on phones */
@media (max-width:480px){
  .reformist-cta{padding:14px 20px;font-size:15px;gap:8px;min-height:52px;max-width:100%;text-align:center;flex-wrap:wrap;justify-content:center}
  .reformist-cta-yt,.reformist-cta-substack{width:24px;height:24px}
}

/* team box type a step smaller so more of the title fits before the ellipsis */
.person-box{padding:11px 58px 11px 15px}
.person-box .person-name{font-size:16px;line-height:1.22}
.person-box .person-role{font-size:12.5px;line-height:1.35;-webkit-line-clamp:2}
.person-plus{width:38px;height:38px;right:11px}
@media (max-width:760px){.person-box{padding:9px 48px 9px 11px}.person-box .person-name{font-size:14.5px}.person-box .person-role{font-size:12px}.person-plus{width:32px;height:32px}}
@media (max-width:520px){.person-box .person-name{font-size:16px}.person-box .person-role{font-size:13px}.person-plus{width:36px;height:36px}}

/* the "+" stays a "+" on hover — only its colours change */
.person-card:hover .person-plus,.person-card:focus-visible .person-plus{transform:translateY(-50%)}

/* hero play/pause: bars with a clear gap between them, and a bigger play triangle */
.story-hero-ctrl .reformist-icon-pause,.story-hero-ctrl .reformist-icon-play{width:16px;height:16px}
.story-hero-ctrl .reformist-icon-pause::before,.story-hero-ctrl .reformist-icon-pause::after{width:4px;border-radius:2px}
.story-hero-ctrl .reformist-icon-pause::before{left:2px}
.story-hero-ctrl .reformist-icon-pause::after{right:2px}
.story-hero-ctrl .reformist-icon-play{width:0;height:0;margin-left:3px;border-width:8px 0 8px 13px}

/* ── final touches ─────────────────────────────────────────── */
/* LSE / MIT Solve / I-CLIMB: labels, logos and "Find out more" each sit on a shared row */
@supports (grid-template-rows:subgrid){
  @media (min-width:1081px){
    .initiatives-grid{grid-template-rows:auto 110px auto;row-gap:22px}
    .initiatives-col{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:22px;justify-items:center;align-items:center;gap:22px}
    .initiatives-col .initiatives-logo{margin:0;align-self:center}
    .initiatives-col .initiatives-more{margin-top:0;align-self:start}
    .initiatives-label{min-height:0}
  }
}
.initiatives-logo{object-position:center}

/* publications: compact, but the covers stay readable */
#tab-reports .pub-card,#tab-publications .pub-card{flex-direction:row;align-items:flex-start;gap:18px;padding:16px}
#tab-reports .pub-cover,#tab-publications .pub-cover{flex:0 0 128px;width:128px;height:auto;align-self:flex-start}
#tab-reports .pub-title,#tab-publications .pub-title{font-size:17px}
#tab-reports .pub-subtitle,#tab-publications .pub-subtitle{font-size:14px}
@media (max-width:640px){#tab-reports .pub-cover,#tab-publications .pub-cover{flex:0 0 96px;width:96px}}

/* footer typewriter: the cursor has a fixed 2px width and only its colour blinks,
   so the "?" never drifts away from the word */
.footer-cursor{display:none}
#footer-typewriter::after{
  content:'';display:inline-block;width:2px;height:.85em;margin-left:3px;vertical-align:-.06em;
  background:rgba(255,255,255,.7);animation:footer-caret 1.05s step-end infinite;
}
@keyframes footer-caret{0%,50%{background-color:rgba(255,255,255,.7)}50.01%,100%{background-color:transparent}}
@media (prefers-reduced-motion:reduce){#footer-typewriter::after{animation:none}}

/* career: two short paragraphs under the heading */
.career-empty p{max-width:860px}
.career-empty p + p{margin-top:-4px}
.career-empty p:first-of-type{margin-bottom:18px}
.career-empty{max-width:880px}


/* works with no photo: no placeholder tile, the text simply starts further left */
.page-approach .pillar-work-row:not(:has(.pw-thumb)){grid-template-columns:minmax(0,1fr) auto;padding:22px 26px}
@media (max-width:640px){.page-approach .pillar-work-row:not(:has(.pw-thumb)){grid-template-columns:minmax(0,1fr);padding:16px 14px}}