/*
  SLB Capital Advisors — built section-by-section from Figma v2.1 (650:309).

  Structure:
  1. Tokens  2. Base  3. Shared components  4. Header  5. Sections  6. Footer
  7. Mobile @media — MUST BE LAST, layout transformations only.

  Fluid rules: clamp() for type/spacing, intrinsic sizing for cards,
  text-wrap balance/pretty. No literal px widths on text containers.
*/

:root {
  /* Figma variables (get_variable_defs, 650:309) */
  --dark-blue: #031c34;
  --steel-blue: #4a6583;
  --light-blue: #9bc4e5;
  --bg-blue: #f2f7fb;
  --white: #ffffff;
  --black: #000000;
  --orange: #ef611b;
  --sand: #e6cf9c;

  /* Section-local colors read from design context */
  --navy-mid: #042d55;      /* footer / highlight-card gradient top */
  --navy-soft: #2c557d;     /* why-slb gradient bottom */
  --card-front: #2c4053;    /* flip card front */
  --cta-navy: #0d304e;      /* CTA banner */

  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;

  /* Shared fluid scales */
  --section-pad-y: clamp(60px, 4rem + 2.5vw, 100px);
  --section-pad-x: clamp(20px, 4.86vw, 70px);
  --h2-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);  /* 40px @1440 */
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dark-blue);
  background: var(--white);
  text-wrap: pretty;
}

main { display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  text-wrap: balance;
  line-height: 1.15;
  font-weight: 200;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { max-width: 100%; height: auto; display: block; }

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

.section-container {
  max-width: 1300px;
  margin-inline: auto;
}

/* === Shared components ============================================= */

/* Bordered button — Figma Link pattern (650:316 etc.) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 10px 13px 20px;
  border: 1px solid currentColor;
  font-size: 14.2px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 15px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
/* transform: scaleY(-1) is Figma flipping the arrow to point up-right; hover nudges it up-right. */
.btn img {
  flex: none;
  align-self: flex-end;
  transform: scaleY(-1);
  transition: transform 0.25s ease;
}
.btn:hover img,
.btn:focus-visible img {
  transform: translate(3px, -3px) scaleY(-1);
}
.btn--light { color: var(--white); }
.btn--light:hover { background: rgba(255, 255, 255, 0.12); }
.btn--dark { color: var(--dark-blue); }
.btn--dark:hover { background: rgba(3, 28, 52, 0.07); }

/* Eyebrow — icon + label (650:432 pattern) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: capitalize;
  color: var(--dark-blue);
}
.eyebrow img { width: 28px; height: 18px; }
.eyebrow--light { color: var(--white); }
.eyebrow--center { justify-content: center; text-align: center; }

/* Section heading (40px ExtraLight / 52px) */
.section-container > h2 {
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
  margin-top: 12px;
}

/* === Load animation ================================================ */
/* Blue screen. "Corporate Finance" (light blue) and "Real Estate" (white)
   flatten into lines as they ride in from the viewport edges, then stretch
   round the two venn circles into their outlines — drawn on a canvas by
   js/main.js. Stages are cumulative
   classes on .loader: s-ring (SVG rings take over from the canvas line) >
   s-lens (circle fills, overlap and SLB mark fade in) > loader--lift (overlay
   lifts while the venn shrinks onto the hero eyebrow icon). */

html.loaded .loader { display: none; }
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  animation: loader-out 0.9s ease 8s forwards; /* no-JS safety net */
}
.loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark-blue);
  transition: opacity 1s ease;
}
.loader--lift { pointer-events: none; }
.loader--lift::before { opacity: 0; }
body:has(.loader:not(.loader--lift)) { overflow: hidden; }

.loader__letters {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Sized and positioned by JS (width/height/translate) so it can fly. */
.loader__venn {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 1;
}
.loader__venn svg { width: 100%; height: 100%; overflow: visible; display: block; }

.venn__ring { fill: none; stroke-width: 1.5; opacity: 0; }
.venn__ring--left  { stroke: #fff; stroke-opacity: 0.55; }
.venn__ring--right { stroke: #9bc4e5; }
.loader.s-ring .venn__ring { opacity: 1; }

.venn__fill, .venn__lens, .venn__logo { opacity: 0; transition: opacity 1s ease; }
/* Each circle filled in its ring colour */
.venn__fill--left  { fill: #fff; fill-opacity: 0.2; }
.venn__fill--right { fill: #9bc4e5; fill-opacity: 0.35; }
.loader.s-lens .venn__fill,
.loader.s-lens .venn__lens,
.loader.s-lens .venn__logo { opacity: 1; }

/* Flight onto the eyebrow: the fill drops away so only the two rings land. */
.loader__venn.is-flying {
  transition: translate 1.1s cubic-bezier(0.6, 0, 0.25, 1), width 1.1s cubic-bezier(0.6, 0, 0.25, 1), height 1.1s cubic-bezier(0.6, 0, 0.25, 1);
}
.loader.loader--lift .venn__fill,
.loader.loader--lift .venn__lens,
.loader.loader--lift .venn__logo { opacity: 0; transition: opacity 0.5s ease; }
.loader__venn.is-fading { transition: opacity 0.6s ease; opacity: 0; }

/* The eyebrow icon only appears once the venn has landed on it. */
@media (prefers-reduced-motion: no-preference) {
  body:has(.loader:not(.loader--done)) .hero__eyebrow img { opacity: 0; }
}

@keyframes loader-out {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .authority__logos { flex-wrap: wrap; }
  .authority__logos li[aria-hidden] { display: none; }
  .authority__marquee::before, .authority__marquee::after { display: none; }
  .clients__ticker { height: auto; }
  .clients__track li { height: auto; padding-block: 0.2em; color: var(--dark-blue); opacity: 1; }
  .clients__track li[aria-hidden] { display: none; }
  .clients__ticker::before, .clients__ticker::after { display: none; }
}

/* === Header ======================================================== */

.site-header {
  --header-h: 100px;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-inline: var(--section-pad-x);
  min-height: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(135, 134, 134, 0.21);
  transition: background-color 0.3s ease, min-height 0.3s ease, box-shadow 0.3s ease;
}
/* Transparent over the hero; solid + compact once the page scrolls */
.site-header.is-scrolled {
  --header-h: 62px;
  background: rgba(3, 28, 52, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(3, 28, 52, 0.25);
}
.site-header.is-scrolled .site-header__inner { padding-top: 6px; padding-bottom: 6px; }
main [id] { scroll-margin-top: 90px; } /* anchor targets land below the fixed header */
.site-header.is-scrolled .site-header__logo img { width: clamp(78px, 6.5vw, 96px); }
.site-header__inner {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 12px;
  transition: padding 0.3s ease;
}
.site-header__logo img { width: clamp(90px, 8vw, 115px); height: auto; }
.site-header__nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.78vw, 40px);
}
.site-header__nav a {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 36px;
  text-transform: capitalize;
  color: var(--white);
  white-space: nowrap;
}
.site-header__nav a[aria-current="page"] {
  font-weight: 700;
  display: inline-block;
  border-bottom: 2px solid var(--light-blue);
}
.site-header__cta .btn { padding-block: 10px; text-transform: none; transition: background-color 0.25s ease, color 0.25s ease, padding 0.3s ease, line-height 0.3s ease; }
.site-header.is-scrolled .site-header__cta .btn { padding-block: 6px; line-height: 24px; }
/* Resources dropdown (1189:289) — frosted panel opens on hover only */
.site-header__dropdown { position: relative; }
.site-header__dropdown > a,
.site-header__dropdown > a[aria-current="page"] { display: inline-flex; align-items: center; gap: 10px; }
.site-header__dropdown > a img { width: 14px; height: 14px; }
.site-header__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  padding: 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(3, 28, 52, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(3, 28, 52, 0.25);
}
.site-header__submenu li { width: 100%; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.site-header__submenu li:last-child { border-bottom: 0; }
.site-header__submenu a { font-weight: 300; border: 0; }
.site-header__dropdown:hover .site-header__submenu { display: flex; }
.site-header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.site-header__toggle span {
  width: 24px; height: 2px; background: var(--white); display: block;
}

/* === Hero (650:310) ================================================ */

.hero {
  position: relative;
  min-height: clamp(620px, 100svh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url('/images/hero-bg-home.jpg') center / cover no-repeat var(--dark-blue);
}
/* Dark-blue tint so the photo sits back behind the headline */
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(3 28 52 / 0.55);
}
/* Swoosh gradient overlay — Rectangle 42082 */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/hero-swoosh.svg') center / cover no-repeat;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: calc(1300px + 2 * var(--section-pad-x));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 80px);
  padding-inline: var(--section-pad-x);
  padding-top: 100px; /* clear fixed-height nav */
}
.hero__eyebrow { margin-bottom: 20px; }
.hero__copy h1 {
  font-size: clamp(2.375rem, 1.55rem + 2.8vw, 4.0625rem); /* 65px @1440 */
  font-weight: 200;
  letter-spacing: -1px;
  line-height: 1.2;
  text-wrap: initial; /* lines are authored as spans; balance re-splits them */
}
/* Each line of the headline is its own span so it breaks where the design does */
.hero__copy h1 span { display: block; }
.hero__accent { color: var(--light-blue); }
.hero__copy > p {
  margin-top: 18px;
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
  letter-spacing: 0.4px;
  line-height: 30px;
  max-width: 52ch;
}

/* === Sticky stacking ============================================== */
/* The Firm pins while Experience scrolls over it; every other section scrolls
   normally. `--stack-top` is measured in js/main.js: 0 when the section fits
   the viewport, negative for taller ones so they pin bottom-aligned and no
   content is stranded below the fold. Opt-in via body.stacking so the no-JS /
   reduced-motion page stays in normal flow. */

/* Every section is positioned so the z-index order set in JS applies — without
   it the sections after The Firm paint under the pinned one. */
body.stacking main > section { position: relative; }

body.stacking main > section.is-stacked {
  position: sticky;
  top: var(--stack-top, 0px);
}

/* === Why SLB (650:428) ============================================ */

.why-slb {
  background: linear-gradient(to bottom, var(--dark-blue), var(--navy-soft));
  padding: var(--section-pad-y) var(--section-pad-x);
  color: var(--white);
}
.why-slb .section-container > h2 { color: var(--white); }
.why-slb__sub {
  margin-top: 12px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--bg-blue);
}
.why-slb__cta { margin-top: 30px; }
.why-slb__row {
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  max-width: 1040px;
  margin-inline: auto;
}
.why-slb__card {
  --venn-frame: rgb(155 196 229 / 0.33);
  --card-accent: var(--white);
  position: relative;
  flex: 1 1 0;
  align-self: stretch;
  opacity: 0.9;
  background-color: rgb(255 255 255 / 0.07);
  box-shadow: 0 12px 32px rgb(3 28 52 / 0.3);
}
.why-slb__card.venn-card--right { --card-accent: var(--light-blue); }
.why-slb__card-body {
  position: relative;
  height: 100%;
  padding: clamp(24px, 2.5vw, 36px);
  border-top: 4px solid var(--card-accent);
}
.why-slb__card h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem); /* 26px */
  font-weight: 200;
  line-height: 1.1;
  color: var(--card-accent);
}
.why-slb__card h3::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 8px;
  background: var(--card-accent);
}
.why-slb__card p {
  margin-top: 15px;
  font-size: 1rem;
  line-height: 26.4px;
  color: var(--bg-blue);
}
.why-slb__logo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(110px, 10vw, 144px);
  display: flex;
  justify-content: center;
  z-index: 1;
}
.why-slb__logo img { width: 90%; height: auto; }

/* --- Card-to-venn animation (650:450) ------------------------------- */
/* Shared by the homepage Why SLB section and the Why SLB page thesis. Default
   state (also the no-JS / reduced-motion / mobile state): the two readable
   cards with the SLB logo alone between them. js/main.js starts a [data-venn]
   section .venn-collapsed (each card's frame folded into its circle of the
   venn) and removes it once the row has scrolled into view, unfolding the
   circles into the cards on one long decelerating curve so it reads as a
   single deliberate move. On the homepage, as the row scrolls out, the two
   cards fly on as they are to the next section's eyebrow (flight rules
   below). */

.venn-card { position: relative; }
/* The frame is two pseudo-elements so it can start as a venn circle overlapping
   the other card's and grow into the card box (js/main.js measures where):
   ::after carries the fill, ::before the line, masked out where the logo sits
   so the circle lines end at the logo rather than running behind it. */
.venn-card::before,
.venn-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The line's left inset is a registered property so the mask can follow it
   through the move and the cut stays on the (static) logo. */
@property --line-left {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --line-top {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.venn-card::before,
.venn-card::after {
  --line-left: 0px;
  --line-top: 0px;
  left: var(--line-left);
  top: var(--line-top);
}
.venn-card::before { border: 1px solid var(--venn-frame, #e4e7ec); }
/* The logo cut only exists while folded (--cut-scale 1); unfolded it shrinks
   to nothing so the frame line runs all the way round the card. */
@property --cut-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
.venn-anim .venn-card::before {
  --cut-scale: 0;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, calc(var(--logo-cut-w, 0px) * var(--cut-scale)) calc(var(--logo-cut-h, 0px) * var(--cut-scale));
  -webkit-mask-position: 0 0, calc(var(--logo-cut-x, 0px) - var(--line-left) + var(--logo-cut-w, 0px) * (1 - var(--cut-scale)) / 2) calc(var(--logo-cut-y, 0px) - var(--line-top) + var(--logo-cut-h, 0px) * (1 - var(--cut-scale)) / 2);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: 100% 100%, calc(var(--logo-cut-w, 0px) * var(--cut-scale)) calc(var(--logo-cut-h, 0px) * var(--cut-scale));
  mask-position: 0 0, calc(var(--logo-cut-x, 0px) - var(--line-left) + var(--logo-cut-w, 0px) * (1 - var(--cut-scale)) / 2) calc(var(--logo-cut-y, 0px) - var(--line-top) + var(--logo-cut-h, 0px) * (1 - var(--cut-scale)) / 2);
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
/* The fill is cut where the logo's outline box sits so the box reads as a
   clear window onto the section background rather than the venn lens. */
.venn-anim .venn-card::after {
  --cut-scale: 0;
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, calc(var(--box-cut-w, 0px) * var(--cut-scale)) calc(var(--box-cut-h, 0px) * var(--cut-scale));
  -webkit-mask-position: 0 0, calc(var(--box-cut-x, 0px) - var(--line-left) + var(--box-cut-w, 0px) * (1 - var(--cut-scale)) / 2) calc(var(--box-cut-y, 0px) - var(--line-top) + var(--box-cut-h, 0px) * (1 - var(--cut-scale)) / 2);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: 100% 100%, calc(var(--box-cut-w, 0px) * var(--cut-scale)) calc(var(--box-cut-h, 0px) * var(--cut-scale));
  mask-position: 0 0, calc(var(--box-cut-x, 0px) - var(--line-left) + var(--box-cut-w, 0px) * (1 - var(--cut-scale)) / 2) calc(var(--box-cut-y, 0px) - var(--line-top) + var(--box-cut-h, 0px) * (1 - var(--cut-scale)) / 2);
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
.venn-anim {
  --venn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --venn-move: 2s;
  --fly-dur: 1.4s;
}
.venn-anim .venn-card__body { transition: opacity 0.7s ease 0.5s; }
.venn-anim .venn-card::before,
.venn-anim .venn-card::after {
  transition:
    left var(--venn-move) var(--venn-ease),
    --line-left var(--venn-move) var(--venn-ease),
    --line-top var(--venn-move) var(--venn-ease),
    --cut-scale var(--venn-move) var(--venn-ease),
    right var(--venn-move) var(--venn-ease),
    top var(--venn-move) var(--venn-ease),
    bottom var(--venn-move) var(--venn-ease),
    border-radius var(--venn-move) var(--venn-ease),
    background-color 0.9s ease,
    border-color 0.9s ease;
}
.venn-anim .venn-logo img {
  transition: transform var(--venn-move) var(--venn-ease);
}
.venn-measuring,
.venn-measuring *,
.venn-measuring *::before,
.venn-measuring *::after { transition: none !important; }

/* Folded: the copy is hidden and each frame is its circle, the two circles
   meeting in the venn overlap around the logo. */
.venn-anim .venn-card { transition: background-color 0.9s ease; }
.venn-collapsed .venn-card { background-color: transparent; }
.venn-anim .why-slb__card { transition: background-color 0.9s ease, box-shadow 0.9s ease; }
.venn-collapsed .why-slb__card { box-shadow: none; }
.venn-collapsed .venn-card__body { opacity: 0; transition-delay: 0s; }
.venn-collapsed .venn-card::before,
.venn-collapsed .venn-card::after {
  right: var(--frame-right, 0px);
  top: var(--frame-y, 0px);
  bottom: var(--frame-y, 0px);
  border-radius: 50%;
  transition-delay: 0.25s;
}
.venn-collapsed .venn-card::before,
.venn-collapsed .venn-card::after {
  --line-left: var(--frame-left, 0px);
  --line-top: var(--frame-y, 0px);
}
/* The circle lines run on behind the logo, as in the load-sequence venn */
.venn-collapsed .venn-card::after { --cut-scale: 1; background-color: var(--circle-fill); }
.venn-collapsed .venn-card::before { border-color: var(--circle-stroke); }
/* Folded, the circles are the load-sequence venn (loader.njk): the frames
   carry its rings and .venn-art beneath them its right-circle fill and lens. */
.venn-collapsed .venn-card--left {
  --circle-stroke: rgb(255 255 255 / 0.55);
  --circle-fill: transparent;
}
.venn-collapsed .venn-card--right {
  --circle-stroke: #9bc4e5;
  --circle-fill: transparent;
}
.venn-art { display: none; }
.venn-anim .venn-row { position: relative; }
.venn-anim .venn-art {
  --art-stop-a: rgb(91 143 203 / 0.22);
  --art-stop-b: rgb(255 255 255 / 0.06);
  --art-lens: #4a6583;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--venn-art-w, 0px);
  height: var(--venn-art-h, 0px);
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.venn-collapsed .venn-art { opacity: 1; }
/* The fill and lens are cut where the logo's outline box sits so the box
   reads as a clear window onto the section background. */
.venn-anim .venn-art {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, var(--art-cut-w, 0px) var(--art-cut-h, 0px);
  -webkit-mask-position: 0 0, var(--art-cut-x, 0px) var(--art-cut-y, 0px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: 100% 100%, var(--art-cut-w, 0px) var(--art-cut-h, 0px);
  mask-position: 0 0, var(--art-cut-x, 0px) var(--art-cut-y, 0px);
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
/* The fill stays solid behind the logo box in both folded venns. */
.venn-anim .venn-card::after,
.venn-anim .venn-art {
  -webkit-mask-image: none;
  mask-image: none;
}
.venn-art__stop-a { stop-color: var(--art-stop-a); }
.venn-art__stop-b { stop-color: var(--art-stop-b); }
.venn-art__lens { fill: var(--art-lens); }
.venn-collapsed .venn-logo img { transform: scale(var(--logo-fold-scale, 1.1)); }

.venn-anim .venn-card::after {
  transition:
    left var(--venn-move) var(--venn-ease),
    --line-left var(--venn-move) var(--venn-ease),
    --line-top var(--venn-move) var(--venn-ease),
    --cut-scale var(--venn-move) var(--venn-ease),
    right var(--venn-move) var(--venn-ease),
    top var(--venn-move) var(--venn-ease),
    bottom var(--venn-move) var(--venn-ease),
    border-radius var(--venn-move) var(--venn-ease),
    background-color 0.9s ease,
    border-color 0.9s ease,
    opacity 0.6s ease calc(var(--fly-dur, 0s) * 0.5);
}
.venn-anim .venn-logo img { transition: transform var(--venn-move) var(--venn-ease), opacity 0.6s ease calc(var(--fly-dur, 0s) * 0.5); }


/* === The Firm + stats (650:509) =================================== */

.firm {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.firm__lede {
  display: flex;
  gap: clamp(28px, 4.17vw, 60px);
}
.firm__eyebrow {
  flex: 0 0 auto;
  align-self: stretch;
  align-items: flex-start;
  padding-right: clamp(28px, 4.17vw, 60px);
  border-right: 1px solid rgba(74, 101, 131, 0.2);
}
.firm__body { flex: 1 1 0; min-width: 0; }
.firm__body h2 {
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
}
.firm__body > p {
  margin-top: 16px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
}
.firm__body .btn { margin-top: 16px; }
.firm__stats {
  margin-top: clamp(32px, 4.17vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.firm__stat {
  padding: 32px 28px;
  text-align: center;
}
.firm__stat-value {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  font-size: clamp(2.25rem, 1.9rem + 1.2vw, 3rem); /* 48px */
  font-weight: 200;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--dark-blue);
}
.firm__stat-value sup {
  font-size: 0.45em;
  font-weight: 500;
  line-height: 1;
  top: 0;
  padding-left: 3px;
  padding-top: 4px;
}
.firm__stat-label {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 22px;
  color: var(--steel-blue);
}

/* === Experience / flip cards (652:1537) =========================== */

.experience {
  position: relative;
  padding: var(--section-pad-y) var(--section-pad-x);
  background: url('/images/experience-bg-warehouse.jpg') center top / cover no-repeat var(--dark-blue);
  color: var(--white);
  overflow: hidden;
}
.experience__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(3 28 52 / 0.85) 0%, rgb(3 28 52 / 0.6) 40%, rgb(3 28 52 / 0.15) 75%, rgb(3 28 52 / 0) 100%);
}
.experience .section-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.experience .section-container > h2 { color: var(--white); margin-top: 0; }
.experience__divider {
  width: 35px;
  height: 2px;
  background: var(--steel-blue);
  margin-block: 12px;
}
.experience__sub {
  margin-top: 12px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  max-width: 75ch;
}
.experience__cta { margin-top: 22px; }
/* Bleeds to both edges of the section so the cards scroll edge to edge; the
   first card starts on the content edge and the 4th peeks in (1133:1749) */
.experience__viewport {
  margin-top: 40px;
  align-self: flex-start;
  width: calc(100% + 2 * var(--section-pad-x));
  margin-inline: calc(-1 * var(--section-pad-x));
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* horizontal drags move the cards, the page still scrolls */
  user-select: none;
}
.experience__viewport.is-dragging { cursor: grabbing; }
.experience__track {
  display: flex;
  gap: 20px;
  will-change: transform;
}
.experience__arrows {
  margin-top: 50px;
  align-self: center;
  display: flex;
  gap: 13px;
  justify-content: center;
}
.experience__arrow { border-radius: 50%; transition: opacity 0.2s ease; }
.experience__arrow:hover { opacity: 0.75; }

/* Experience card — front 611:1013; on hover the deal commentary (652:1557)
   fades in over it. Faces share a grid cell so the card is as tall as its
   taller face; a focused or tapped card (.is-flipped) shows it too. */
.exp-card {
  flex: 0 0 clamp(300px, 29.2vw, 420px);
  min-height: 230px;
  display: grid;
  outline: none;
}
.exp-card__inner {
  display: grid;
}
.exp-card__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px clamp(40px, 5vw, 73px);
  text-align: center;
  background: var(--card-front);
  border: 1px solid rgba(155, 196, 229, 0.4);
  border-top: 3px solid var(--light-blue);
}
.exp-card__back {
  padding: 18px clamp(24px, 2.6vw, 36px);
  background: var(--light-blue);
  border-color: var(--light-blue);
  border-top-color: var(--dark-blue);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.exp-card__back .exp-card__kicker { color: var(--dark-blue); }
.exp-card__back .exp-card__commentary { color: var(--dark-blue); font-weight: 400; }
.exp-card.is-flipped .exp-card__back,
.exp-card:focus-visible .exp-card__back,
.exp-card:has(.exp-card__cta:focus-visible) .exp-card__back {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s;
}
@media (hover: hover) {
  .exp-card:hover .exp-card__back {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .exp-card__back { transition: none; }
}
.exp-card__commentary {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 1.6;
  color: var(--white);
  text-wrap: pretty;
}
.exp-card__cta { margin-top: 14px; padding: 9px 10px 9px 16px; }
.exp-card__kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.89px;
  text-transform: uppercase;
  color: var(--light-blue);
}
/* Use of proceeds: a bulleted line under the deal type, quieter than the sector */
.exp-card__use {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bg-blue);
}
.exp-card__use::before { content: '\2022\00a0'; color: var(--light-blue); }
.exp-card__title { margin-top: 20px; }
.exp-card__sector {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 1.25;
  color: var(--white);
}
.exp-card__detail {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.89px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.exp-card__type {
  margin-top: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.17px;
  text-transform: uppercase;
  color: var(--light-blue);
}
.exp-card__role {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.17px;
  text-transform: uppercase;
  color: var(--white);
}

/* === Insights (650:601) =========================================== */

.insights {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.insights__sub {
  margin-top: 12px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  max-width: 118ch;
}
.insights__cta { margin-top: 32px; border-color: var(--black); font-weight: 300; }
/* Outlet logos: each slot stacks the outgoing and incoming logo in one grid cell */
.insights__logos {
  --logo-gap: clamp(20px, 4vw, 64px);
  margin-top: clamp(32px, 3.6vw, 52px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 2vw, 28px) var(--logo-gap);
}
.insights__logos li {
  flex: 0 0 calc((100% - 4 * var(--logo-gap)) / 5);
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: clamp(28px, 2.8vw, 42px);
  overflow: hidden;
}
.insights__logos li::before { content: none; }
.insights__logos img { grid-area: 1 / 1; justify-self: center; width: 100%; max-width: 200px; height: 100%; min-height: 0; object-fit: contain; }
.insights__logos.is-armed li { opacity: 0; }
.insights__logos.is-armed.is-in-view li { animation: logo-enter 0.75s cubic-bezier(0.33, 1, 0.68, 1) calc(var(--slot) * 0.1s) forwards; }
.insights__logos img.is-out { animation: logo-out 0.9s cubic-bezier(0.87, 0, 0.13, 1) forwards; }
.insights__logos img.is-in { animation: logo-in 0.9s cubic-bezier(0.87, 0, 0.13, 1) 0.1s backwards; }
@keyframes logo-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes logo-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-50%); } }
@keyframes logo-in { from { opacity: 0; transform: translateY(50%); } to { opacity: 1; transform: none; } }
.insights__grid {
  margin-top: 60px;
  display: flex;
  gap: clamp(24px, 3.26vw, 47px);
  align-items: stretch;
}

/* Featured insight card — 650:622 */
.insight-card {
  flex: 0 1 490px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(15, 19, 23, 0.11);
  padding: 26px;
  transition: box-shadow 0.25s ease;
}
.insight-card:hover { box-shadow: 0 8px 30px rgba(3, 28, 52, 0.1); }
.insight-card__media {
  aspect-ratio: 437 / 246;
  overflow: hidden;
  background: linear-gradient(162deg, #12304f 8%, #061424 92%);
}
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; }
.insight-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  font-size: 11.5px;
  letter-spacing: 0.23px;
  color: var(--steel-blue);
}
.insight-card__meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--steel-blue);
}
.insight-card__title {
  padding-top: 12px;
  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem); /* 24px */
  font-weight: 200;
  color: var(--black);
}
.insight-card__excerpt {
  padding-top: 10px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
}
.insight-card__read {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dark-blue);
}

.insights__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(15, 19, 23, 0.11);
}

/* Quote cards — 657:1251 */
.insights__quotes {
  display: flex;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(15, 19, 23, 0.11);
  flex: 1 1 0;
}
.quote-card {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  background: var(--white);
  border: 1px solid rgba(15, 19, 23, 0.11);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease;
}
/* Same lift as the featured insight card */
.quote-card:hover { box-shadow: 0 8px 30px rgba(3, 28, 52, 0.1); }
.quote-card blockquote {
  margin: 0;
  padding-bottom: 8px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--dark-blue);
  flex: 1;
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 12px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
}
.quote-card strong { font-weight: 500; color: var(--black); }

/* List rows — 657:1295 */
.insights__list { flex: 3 1 0; display: flex; flex-direction: column; }
.insights__list li { flex: 1 1 0; border-bottom: 1px solid rgba(15, 19, 23, 0.11); display: flex; }
.insights__list a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 75px);
  padding: 16px;
  transition: background-color 0.2s ease;
}
.insights__list a:hover { background: rgba(255, 255, 255, 0.6); }
.insights__list time {
  flex: 0 0 clamp(80px, 9vw, 137px);
  font-size: 12px;
  letter-spacing: 0.72px;
  line-height: 19.2px;
  text-transform: uppercase;
  color: var(--steel-blue);
}
.insights__list-title {
  flex: 1 1 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--dark-blue);
}
.insights__list-tag {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11.5px;
  color: var(--steel-blue);
  white-space: nowrap;
}

/* Homepage Insights — pull quotes row, light Market Update card, then newest Media/News/Insight as .media-card */
.insights__quotes--top {
  margin-top: clamp(36px, 4.2vw, 60px);
  flex-flow: row wrap;
  gap: clamp(16px, 1.7vw, 24px);
  padding-bottom: 0;
  border-bottom: 0;
}
.insights__quotes--top .quote-card--feature { flex: 1 1 min(100%, 420px); }
.insights__quotes--top .quote-card--feature figcaption { gap: 10px; flex-wrap: wrap; }
.insights__quotes--top .quote-card--feature figcaption > .quote-card__source { flex: 1 1 14ch; }
.insights__quotes--top .quote-card__link { margin-left: auto; }
.insights__market .market-card { margin-top: clamp(16px, 1.7vw, 24px); }
.media-cards.insights__cards {
  margin-top: clamp(16px, 1.7vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, 28%)), 1fr));
}
.insights__cards .media-card { display: flex; grid-row: auto; }
.insights__cards .media-card__more { align-self: flex-start; }

/* === Testimonials + CTA (650:687) ================================= */

.testimonials {
  background: var(--white);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.testimonials__sub {
  margin-top: 12px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
}
.testimonials__viewport {
  margin-top: 60px;
  margin-inline: calc(-1 * var(--section-pad-x));
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* horizontal swipes drive the carousel, page still scrolls */
}
.testimonials__viewport.is-dragging { cursor: grabbing; }
.testimonials__viewport:focus-visible {
  outline: 2px solid var(--steel-blue);
  outline-offset: 4px;
}
.testimonials__track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  margin-inline: auto;
  transition: transform 0.5s ease;
}
.t-card {
  position: relative;
  width: clamp(280px, 22.6vw, 325px);
  height: 331px;
  background: var(--bg-blue);
  padding: 19px 21px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.5s ease, height 0.5s ease;
}
/* Highlight gradient lives on ::before and crossfades in on the center card */
.t-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--navy-mid), var(--dark-blue));
  opacity: 0;
  transition: opacity 0.5s ease;
}
.t-card > * { position: relative; }
.t-card__quote { width: 32px; height: 32px; }
.t-card__quote--light { position: absolute; top: 19px; left: 21px; opacity: 0; }
.t-card blockquote {
  margin: 18px 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 23px;
  color: var(--dark-blue);
  transition: color 0.5s ease, font-size 0.5s ease, line-height 0.5s ease;
}
.t-card__attrib {
  margin-top: auto;
  padding: 0 0 12px 16px;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--black);
  transition: color 0.5s ease;
}
/* Glow spans hold the full blurred SVG canvas (294×410) so no hard edges show;
   positioned so the ellipse centers match Figma (650:724 / 650:725) */
.t-card__glow {
  position: absolute;
  width: 294px;
  height: 410px;
  background: url('/images/testimonial-glow.svg') center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.t-card__glow--br { left: 203px; top: 131px; }
.t-card__glow--tl { left: -153px; top: -235px; }

/* Whichever card sits in the CENTER position carries the highlight styling —
   applied/removed by js/main.js as the carousel moves (Figma 650:721) */
.t-card.is-center {
  width: clamp(300px, 24.4vw, 351px);
  height: 350px;
  padding: 18px 22px;
}
.t-card.is-center::before { opacity: 1; }
.t-card.is-center .t-card__glow { opacity: 1; }
.t-card.is-center .t-card__quote--dark { opacity: 0; }
.t-card.is-center .t-card__quote--light { opacity: 1; }
.t-card.is-center blockquote {
  font-size: 1.125rem;
  line-height: 26px;
  color: var(--white);
}
.t-card.is-center .t-card__attrib { color: var(--white); padding-left: 2px; }

.testimonials__dots {
  margin-top: 40px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.testimonials__dots button {
  width: 10px;
  height: 10px;
  border-radius: 15px;
  background: var(--light-blue);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.testimonials__dots button[aria-current="true"] {
  width: 29px;
  background: var(--steel-blue);
}

/* CTA banner — 650:761 */
.cta-banner {
  margin-top: 60px;
  background: var(--cta-navy);
  color: var(--white);
  padding: clamp(28px, 2.8vw, 40px) clamp(24px, 4.2vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.2vw, 32px) clamp(32px, 5vw, 80px);
}
.cta-banner h2 {
  font-size: clamp(2rem, 1.4rem + 2.1vw, 3.75rem); /* 60px */
  font-weight: 200;
  line-height: 1.1;
  max-width: 16ch;
  flex: 1 1 auto;
}
.cta-banner__left { flex: 1 1 auto; }
.cta-banner__left p {
  margin-top: 12px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
}
.cta-banner__right { flex: none; }
.cta-banner__right .btn { font-weight: 300; }
/* Testimonials are hidden, so the banner opens the section */
.testimonials > .section-container:first-child > .cta-banner { margin-top: 0; }

/* === Footer (650:776) ============================================= */

.site-footer { color: var(--white); }
.site-footer__main {
  background: linear-gradient(to bottom, var(--navy-mid), var(--dark-blue));
  padding: 40px var(--section-pad-x) 20px;
}
.site-footer__container { max-width: 1300px; margin-inline: auto; }
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 125px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 40px;
}
.site-footer__logo img { width: 115px; height: auto; }
.site-footer__linkedin {
  display: flex;
  background: var(--white);
  border: 1px solid var(--white);
  transition: opacity 0.2s ease;
}
.site-footer__linkedin:hover { opacity: 0.85; }
.site-footer__grid {
  display: flex;
  justify-content: space-between;
  gap: clamp(28px, 3vw, 40px);
  padding: 10px;
}
.site-footer__newsletter { flex: 0 1 505px; min-width: 0; padding: 10px; }
.site-footer__newsletter h2 {
  font-size: 23px;
  font-weight: 200;
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.site-footer__form input {
  display: block;
  width: min(405px, 100%);
  margin-top: 30px;
  padding: 0 0 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--white);
  font-family: var(--font-sans);
  font-size: 14.3px;
  font-weight: 200;
  letter-spacing: 0.5px;
  color: var(--white);
}
.site-footer__form input::placeholder { color: var(--light-blue); opacity: 1; }
.site-footer__form input:focus { outline: none; border-bottom-color: var(--light-blue); }
.site-footer__form .btn { margin-top: 30px; padding-block: 15px; font-weight: 200; }
.site-footer__status { margin-top: 16px; font-size: 14.3px; font-weight: 200; letter-spacing: 0.5px; line-height: 1.5; color: var(--light-blue); }
.site-footer__status.is-error { color: #ff8a73; }
.site-footer__signup { display: grid; }
.site-footer__signup > * { grid-area: 1 / 1; min-width: 0; }
.site-footer__thanks {
  align-self: start;
  width: min(405px, 100%);
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--white);
  visibility: hidden;
  outline: none;
}
.site-footer__thanks-title { margin-bottom: 8px; font-size: 18px; font-weight: 300; letter-spacing: 0.3px; line-height: 1.3; color: var(--white); }
.site-footer__thanks-text { font-size: 14.3px; font-weight: 200; letter-spacing: 0.5px; line-height: 1.5; color: var(--light-blue); }
.site-footer__signup.is-sent .site-footer__signup-form { visibility: hidden; }
.site-footer__signup.is-sent .site-footer__thanks { visibility: visible; }
.site-footer__links {
  flex: none;
  min-width: 0;
  padding-top: 10px;
}
.site-footer__link-columns {
  display: flex;
  gap: clamp(32px, 4vw, 60px);
}
.site-footer__link-columns ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.site-footer__link-columns a {
  font-size: 14.9px;
  font-weight: 200;
  letter-spacing: 0.5px;
  line-height: 30px;
  transition: color 0.2s ease;
}
.site-footer__link-columns a:hover { color: var(--light-blue); }
.site-footer__address {
  flex: none;
  padding-top: 10px;
  font-size: 14.9px;
  font-weight: 200;
  letter-spacing: 0.5px;
  line-height: 30px;
  font-style: normal;
}
.site-footer__bottom {
  background: var(--dark-blue);
  padding-inline: var(--section-pad-x);
}
.site-footer__bottom .site-footer__container {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.site-footer__bottom p {
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 0.2px;
}

/* === Interior page hero =========================================== */
/* Shared 320px banner for the subpages (Figma 819:1885 etc.). The bg
   layer is taller than the section and translated by the [data-parallax]
   scroll handler in js/main.js. */

.page-hero {
  position: relative;
  min-height: clamp(240px, 22.2vw, 320px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
  padding: 100px var(--section-pad-x) 24px; /* clear the absolute nav */
}
.page-hero__bg {
  position: absolute;
  inset: -22% 0;
  background: url('/images/hero-bg.jpg') center / cover no-repeat var(--dark-blue);
  will-change: transform;
}
/* Same tint + swoosh treatment as the homepage hero */
.page-hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(3 28 52 / 0.55);
}
.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/hero-swoosh.svg') center / cover no-repeat;
}
.page-hero__inner { position: relative; width: 100%; }
.page-hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.0625rem); /* 65px */
  font-weight: 200;
  letter-spacing: -1px;
  line-height: 1.15;
  text-wrap: balance;
}
.page-hero h1 .accent { color: var(--light-blue); }

/* Shared interior section rhythm */
.section--blue { background: var(--bg-blue); }
.section--white { background: var(--white); }
.section-body {
  margin-top: 20px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}

/* === Why SLB page (819:1885) ======================================= */

.thesis {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.thesis__intro h2 {
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
  margin-top: 12px;
  text-wrap: balance;
  text-transform: capitalize;
}
.thesis__body {
  margin-top: 20px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.thesis__intro h2 .accent { color: var(--steel-blue); }
.thesis__highlight {
  display: block;
  font-weight: inherit;
}
.thesis--white { background: var(--white); }
.thesis--dark {
  background: linear-gradient(to bottom, var(--dark-blue), var(--navy-soft));
  color: var(--white);
}
/* A fixed folded diameter (read by js/main.js), else the venn follows the cards' height */
@property --venn-fold-d {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
/* Matches the homepage Why SLB venn (its 1.3x card height) */
.thesis--dark { --venn-fold-d: clamp(279px, 205px + 7.2vw, 310px); }
.thesis--dark .thesis__intro h2 { color: var(--white); }
.thesis--dark .thesis__intro h2 .accent { color: var(--light-blue); }
.thesis--dark .thesis__body { color: var(--bg-blue); }
.thesis__actions {
  margin-top: clamp(24px, 2.8vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.thesis__cards {
  margin-top: clamp(40px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.2vw, 16px);
}
.thesis__logo {
  flex: 0 0 auto;
  width: clamp(96px, 8.5vw, 124px);
  display: flex;
  justify-content: center;
  z-index: 1;
}
.thesis__logo img { width: clamp(86px, 7.5vw, 110px); height: auto; }
/* Desktop: the two thesis cards share one row grid (subgrid), so their titles,
   intros and each pillar row line up across both cards whatever wraps. */
@media (min-width: 769px) {
  #thesis .thesis__cards { display: grid; grid-template-columns: minmax(0, 562px) auto minmax(0, 562px); grid-template-rows: repeat(7, auto); justify-content: space-between; row-gap: 0; }
  #thesis .skill-card { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; max-width: none; }
  #thesis .venn-card--left { grid-column: 1; }
  #thesis .venn-card--right { grid-column: 3; }
  #thesis .thesis__logo { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  #thesis .venn-card__body { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
  #thesis .skill-card__pillars { grid-row: 3 / -1; display: grid; grid-template-rows: subgrid; }
}
.skill-card {
  --venn-frame: rgba(15, 19, 23, 0.11);
  flex: 1 1 0;
  max-width: 562px;
  align-self: stretch;
  background: var(--bg-blue);
  padding: clamp(24px, 2.5vw, 36px);
}
.skill-card .venn-card__body { border-top: 3px solid var(--card-accent); padding-top: 20px; }
.skill-card.venn-card--left { --card-accent: var(--light-blue); --card-accent-soft: rgb(155 196 229 / 0.22); background-color: #eaf2fa; }
.skill-card.venn-card--right { --card-accent: var(--steel-blue); --card-accent-soft: rgb(74 101 131 / 0.12); }
.skill-card.venn-card--right h3 { color: var(--steel-blue); }
.venn-collapsed .skill-card.venn-card--left { background-color: transparent; }
.skill-card h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 200;
  line-height: 1.1;
  color: var(--dark-blue);
  text-wrap: balance;
}
.skill-card p {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 26.4px;
  color: var(--steel-blue);
}
.skill-card ul { margin-top: 24px; padding-left: 24px; list-style: disc; }
.skill-card li::marker { color: var(--card-accent); }
.skill-card li {
  padding: 8px 0;
  border-top: 1px solid #e4e7ec;
  transition: background-color 0.25s ease;
  font-size: 1rem;
  line-height: 26.4px;
  color: var(--steel-blue);
}
.skill-card li:last-child { border-bottom: 1px solid #e4e7ec; }
/* Why SLB thesis pillars: hover / focus swaps the label for its detail line, same type style */
.skill-card__pillars li { cursor: default; outline: none; }
.skill-card__pillars li:hover,
.skill-card__pillars li:focus-visible { background: var(--card-accent-soft); box-shadow: -24px 0 0 var(--card-accent-soft), 12px 0 0 var(--card-accent-soft); }
.skill-card__pillars li:hover .skill-card__detail,
.skill-card__pillars li:focus-visible .skill-card__detail { color: var(--dark-blue); }
/* Both lines share one grid cell so the row is always as tall as the longer
   one and the swap never reflows the card (or moves the logo beside it). */
.skill-card__swap { display: grid; }
.skill-card__pillar,
.skill-card__detail { grid-area: 1 / 1; display: block; text-wrap: pretty; }
.skill-card__detail { visibility: hidden; letter-spacing: -0.01em; }
.skill-card__pillars li:hover .skill-card__pillar,
.skill-card__pillars li:focus-visible .skill-card__pillar { visibility: hidden; }
.skill-card__pillars li:hover .skill-card__detail,
.skill-card__pillars li:focus-visible .skill-card__detail { visibility: visible; }
/* On the dark thesis the cards match the homepage Why SLB boxes */
.thesis--dark .skill-card {
  --venn-frame: rgb(155 196 229 / 0.33);
  --card-accent: var(--white);
  --card-accent-soft: rgb(242 247 251 / 0.1);
  padding: 0;
  background-color: rgb(255 255 255 / 0.07);
  box-shadow: 0 12px 32px rgb(3 28 52 / 0.3);
}
.thesis--dark .skill-card.venn-card--left { background-color: rgb(255 255 255 / 0.07); }
.thesis--dark .skill-card.venn-card--right { --card-accent: var(--light-blue); }
.thesis--dark .skill-card .venn-card__body {
  height: 100%;
  padding: clamp(24px, 2.5vw, 36px);
  border-top: 4px solid var(--card-accent);
}
.thesis--dark .skill-card h3,
.thesis--dark .skill-card.venn-card--right h3 { color: var(--card-accent); }
.thesis--dark .skill-card h3::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 8px;
  background: var(--card-accent);
}
.thesis--dark .skill-card p { margin-top: 15px; }
.thesis--dark.venn-anim .skill-card { transition: background-color 0.9s ease, box-shadow 0.9s ease; }
.thesis--dark.venn-collapsed .skill-card { background-color: transparent; box-shadow: none; }
.thesis--dark .skill-card p,
.thesis--dark .skill-card li { color: var(--bg-blue); border-color: rgb(242 247 251 / 0.18); }
.thesis--dark .skill-card__pillars li:hover .skill-card__detail,
.thesis--dark .skill-card__pillars li:focus-visible .skill-card__detail { color: var(--white); }

/* Photo band — the image is fixed to the viewport and revealed through the
   band as the page scrolls over it, so the photo holds still while the page
   moves. */
.photo-band {
  --band-h: clamp(280px, 38vw, 560px);
  position: relative;
  clip-path: inset(0);
  margin: 0;
  height: var(--band-h);
  line-height: 0;
}
.photo-band img {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
}

/* Banking pedigree — shared with Team page */
.pedigree {
  background: var(--white);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.pedigree__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 3vw, 40px);
}
.pedigree__copy { max-width: 1154px; display: flex; flex-direction: column; align-items: flex-start; }
.pedigree__copy h2 {
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
  margin-top: 12px;
  text-wrap: balance;
  text-transform: capitalize;
}
.pedigree__body {
  margin-top: 20px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.pedigree__copy .btn { order: 3; margin-top: clamp(28px, 3vw, 40px); }
/* Team page (1002:300) — the four stats sit below the copy */
.pedigree__stats { margin-top: 0; width: 100%; gap: 20px; }
/* Without a button below, offset the tiles' own padding so the section keeps the standard rhythm */
.pedigree__grid:not(:has(.pedigree__copy .btn)) .pedigree__stats { margin-block: -36px -32px; }
/* One row of four with | dividers between the numbers; narrower widths keep the wrapping grid */
@media (min-width: 1024px) {
  .pedigree__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .pedigree__stats .firm__stat { position: relative; }
  .pedigree__stats .firm__stat + .firm__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: clamp(72px, 6vw, 96px);
    transform: translateY(-50%);
    border-left: 1px solid rgba(74, 101, 131, 0.35);
  }
}

/* === Why SLB — By the numbers / Track Record (1133:2374) ============ */
.track-record {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad-y) var(--section-pad-x);
  color: var(--white);
}
.track-record .section-container { position: relative; }
.track-record .section-container > h2 { color: var(--white); }
.track-record__sub {
  margin-top: 12px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  text-wrap: pretty;
}
.track-record__stats { margin-top: 40px; }
.track-record .firm__stat-value,
.track-record .firm__stat-label { color: var(--white); }
/* The button sits below the stats on the Why SLB page */
.pedigree__grid:has(.pedigree__copy .btn) { position: relative; padding-bottom: calc(41px + clamp(28px, 3vw, 40px)); }
.pedigree__grid:has(.pedigree__copy .btn) .pedigree__copy .btn { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-top: 0; }

/* Media logos */
.authority {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.authority__sub {
  margin-top: 20px;
  max-width: 95ch;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.authority .section-container { display: flex; flex-direction: column; }
.authority .section-container > h2 { text-transform: none; }
.authority__actions {
  order: 3;
  margin-top: clamp(24px, 2.8vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.authority__marquee {
  order: 4;
  margin-top: clamp(24px, 2.8vw, 40px);
  position: relative;
}
/* Edge fades as overlays, not mask-image (iOS Safari paints masked animated content blank). */
.authority__marquee::before,
.authority__marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  z-index: 1;
  pointer-events: none;
}
.authority__marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-blue), transparent); }
.authority__marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-blue), transparent); }
/* The row is auto-scrolled by js/main.js (scrollLeft, no transform layer) and can be dragged/swiped. */
.authority__logos {
  --logo-w: clamp(180px, 17.4vw, 250px);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.authority__logos::-webkit-scrollbar { display: none; }
.authority__logos li {
  flex: 0 0 var(--logo-w);
  background: var(--white);
  border: 0.6px solid rgba(15, 19, 23, 0.11);
  padding: 15px;
}
.authority__logos li::before { content: none; }
.authority__logo-text {
  display: grid;
  place-items: center;
  aspect-ratio: 221 / 145;
  background: var(--bg-blue);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  letter-spacing: 0.12em;
  color: var(--dark-blue);
}
.authority__logos img {
  display: block;
  width: 100%;
  aspect-ratio: 221 / 145;
  height: auto;
  object-fit: contain;
  background: var(--bg-blue);
  box-sizing: border-box;
  padding: var(--logo-pad, 10px 14px);
}

/* Scroller controls for the mobile horizontal-scroll rows — shown by js/main.js
   only while the row actually overflows */
.scroller-nav { display: none; margin-top: 28px; align-self: center; width: 100%; justify-content: center; gap: 8px; }
.scroller-nav.is-scrollable { display: flex; }
.scroller-nav--dots button {
  width: 10px;
  height: 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.scroller-nav--dots button[aria-current="true"] { width: 29px; background: var(--white); }
.scroller-nav--arrows { gap: 13px; }
.scroller-nav--arrows button { border-radius: 50%; transition: opacity 0.2s ease; }
.scroller-nav--arrows button:hover { opacity: 0.75; }
.scroller-nav--arrows button:disabled { opacity: 0.3; cursor: default; }
.range:not(.range--dark) .scroller-nav--arrows img { filter: brightness(0.35); }
.scroller-nav--quotes { margin-top: 18px; margin-bottom: clamp(12px, 1.6vw, 24px); }
.scroller-nav--quotes.scroller-nav--dots button { background: rgba(15, 19, 23, 0.2); }
.scroller-nav--quotes.scroller-nav--dots button[aria-current="true"] { background: var(--dark-blue); }
.scroller-nav--stats { margin-top: 18px; }

/* Subpage CTA (880:7895) — title + line left, button right */
.cta--page { padding: 0 var(--section-pad-x) var(--section-pad-y); background: var(--white); }
.cta--page .cta-banner,
.testimonials .cta-banner {
  margin-top: 0;
  padding: clamp(28px, 2.8vw, 40px) clamp(36px, 4.2vw, 60px);
  background: var(--cta-navy);
}
.cta--page .cta-banner h2,
.testimonials .cta-banner h2 {
  font-size: var(--h2-size);
  line-height: 1.3;
  max-width: none;
  text-transform: capitalize;
  text-wrap: balance;
}
.cta--page .cta-banner h2 + p,
.testimonials .cta-banner h2 + p { margin-top: 8px; }
.section--blue + .cta--page, .authority + .cta--page, .team + .cta--page, .holistic + .cta--page, .experience-page + .cta--page, .insights-page:not(.insights-page--white) + .cta--page, .article + .cta--page { background: var(--bg-blue); }

/* === What We Do page (1032:3608) =================================== */

.approach {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.approach__grid { display: flex; align-items: flex-start; gap: clamp(32px, 4vw, 60px); }
.approach__grid > .eyebrow { flex: 0 0 min(30%, 240px); }
.approach__copy { flex: 1 1 0; min-width: 0; }
.approach__copy h2 {
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
  max-width: 30ch;
  text-wrap: balance;
  text-transform: capitalize;
}
#approach .approach__copy h2 { max-width: none; text-transform: none; text-wrap: wrap; }
@media (max-width: 767px) { #approach .approach__break { display: none; } }
.approach__body {
  margin-top: 20px;
  max-width: 118ch;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.approach .btn { margin-top: 32px; }

.solutions {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.solutions__bg {
  position: absolute;
  inset: 0;
  background: url('/images/hero-bg.jpg') center / cover no-repeat var(--dark-blue);
}
.solutions__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 28, 52, 0.9);
}
.solutions__grid {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 60px);
}
.solutions__copy { flex: 0 1 auto; min-width: min(100%, 260px); max-width: 420px; }
.solutions__copy h2 {
  margin-top: 12px;
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--white);
  white-space: nowrap;
}
.solutions__body {
  margin-top: 20px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--light-blue);
  text-wrap: pretty;
}
/* Full-width rows stacked beside the copy */
.solutions__list {
  flex: 0 0 auto;
  width: calc((100% - 325px - clamp(32px, 4vw, 60px)) * 0.75);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solutions__list li {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  letter-spacing: -0.2px;
  line-height: 1.22;
}
/* 1020:3054 — hovering / focusing a row unfolds its description beneath the
   name; the corner arrow signals the reveal and the click-through to its
   insight */
.solution { position: relative; }
.solution__link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}
.solution__name {
  padding-right: 26px;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--white);
}
.solution__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: auto;
  transform: rotate(-90deg);
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.solution:hover .solution__arrow,
.solution:focus-within .solution__arrow { opacity: 1; transform: translate(3px, -3px) rotate(-90deg); }
.solution__reveal {
  display: grid;
  grid-template-rows: max-content 0fr;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.1);
  border: 0.75px solid rgba(255, 255, 255, 0.2);
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
}
.solution__desc {
  overflow: hidden;
  min-height: 0;
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 1.3px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0;
  transition: opacity 0.3s ease, padding-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.solution:hover .solution__reveal,
.solution:focus-visible .solution__reveal,
.solution:focus-within .solution__reveal {
  grid-template-rows: max-content 1fr;
  background: #24405e;
  border-color: rgba(255, 255, 255, 0.35);
}
.solution:hover .solution__desc,
.solution:focus-visible .solution__desc,
.solution:focus-within .solution__desc { opacity: 1; padding-top: 10px; transition-delay: 0.1s, 0s; }

/* Use of Proceeds banner (What We Do): eyebrow + title over a row of linked scenario tiles */
.proceeds {
  background: var(--white);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.proceeds h2 {
  margin-top: 12px;
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
  text-transform: none;
}
.proceeds__list {
  margin-top: clamp(24px, 2.8vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(8px, 0.9vw, 12px);
}
.proceeds__item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 20px);
  padding: clamp(18px, 1.8vw, 26px);
  background: var(--bg-blue);
  border-top: 3px solid var(--light-blue);
  border-radius: 2px;
  color: var(--dark-blue);
}
.proceeds__icon {
  width: 26px;
  aspect-ratio: 1;
  background: #2f6cb0;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.proceeds__label {
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.3;
  text-wrap: balance;
}

.holistic {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
/* Eyebrow, title and copy on the left; the tiles card on the right */
.holistic__split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 4vw, 60px); }
.holistic__intro { min-width: 0; }
.holistic__copy { min-width: 0; }
.holistic__intro h2 {
  margin-top: 12px;
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
}
.holistic__body {
  margin-top: 20px;
  max-width: 118ch;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
/* 1192:638 — white card holding six pale tiles */
.holistic__tiles {
  --tile-min: 160px;
  --tile-gap: clamp(8px, 0.9vw, 12px);
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tile-gap);
  padding: clamp(14px, 1.6vw, 22px);
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 0 0 0.5px #e4e5e9;
}
.holistic__tile {
  flex: 1 1 var(--tile-min);
  max-width: calc((100% - (var(--cols, 1) - 1) * var(--tile-gap)) / var(--cols, 1));
  background: var(--bg-blue);
  color: var(--black);
  border-radius: 2px;
  min-height: clamp(60px, 4.8vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px clamp(10px, 1vw, 16px);
  text-align: center;
  font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.35;
  text-wrap: balance;
  transition: background-color 0.3s ease;
}
.holistic__tile:hover { background: var(--tile-hover, var(--bg-blue)); }
.holistic__tile:nth-child(1) { --tile-hover: #9dadb9; }
.holistic__tile:nth-child(2) { --tile-hover: #a5b9cf; }
.holistic__tile:nth-child(3) { --tile-hover: #b8babe; }
.holistic__tile:nth-child(4) { --tile-hover: #d8e2eb; }
.holistic__tile:nth-child(5) { --tile-hover: #e8eef4; }
.holistic__tile:nth-child(6) { --tile-hover: #e9e6e6; }
/* Clients (1192:638) — "We advise" on the left, "We partner with" on the right, each over its own marquee */
.clients-band {
  background: var(--white);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.clients {
  color: var(--dark-blue);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 60px);
  row-gap: 12px;
}
.clients__eyebrow { grid-column: 1 / -1; }
.clients__group { min-width: 0; }
.clients__group + .clients__group {
  padding-left: clamp(32px, 4vw, 60px);
  border-left: 1px solid rgba(74, 101, 131, 0.25);
}
@media (max-width: 900px) {
  .clients { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .clients__group + .clients__group { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(74, 101, 131, 0.25); }
}
.clients__group {
  --name-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  /* one ticker row = one title line (or two lines of a long name) */
  --row: max(calc(var(--h2-size) * 1.3), calc(var(--name-size) * 2.9));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 2.5vw, 40px);
}
.clients__title {
  margin: 0;
  font-size: var(--h2-size);
  font-weight: 200;
  line-height: 1.3;
  text-transform: capitalize;
  white-space: nowrap;
}
.clients__title .accent { color: var(--steel-blue); }
/* Three rows visible; js/main.js steps scrollTop one row at a time so the
   middle row stays level with the title. Edge fades are overlays (no
   mask-image, see iOS note on the media marquee). */
.clients__ticker { position: relative; min-width: 0; height: calc(var(--row) * 3); }
.clients__ticker::before,
.clients__ticker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--row);
  z-index: 1;
  pointer-events: none;
}
.clients__ticker::before { top: 0; background: linear-gradient(180deg, var(--white), rgb(255 255 255 / 0)); }
.clients__ticker::after { bottom: 0; background: linear-gradient(0deg, var(--white), rgb(255 255 255 / 0)); }
.clients__track {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  line-height: 1.2;
}
.clients__track li {
  display: flex;
  align-items: center;
  height: var(--row);
  color: var(--steel-blue);
  cursor: default;
  font-size: var(--name-size);
  font-weight: 300;
  opacity: 0.7;
  text-wrap: balance;
  transition: color 0.4s ease, opacity 0.4s ease;
}
.clients__track li.is-current { color: var(--dark-blue); opacity: 1; }

.range {
  background: var(--white);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.range .section-container { display: flex; flex-direction: column; align-items: flex-start; }
.range .section-container > h2 { text-transform: capitalize; }
.range .section-container > h2.range__title--as-written { text-transform: none; }
.range__body {
  margin-top: 20px;
  max-width: 95ch;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
}
/* Wrapping row of equal tiles; js/main.js sets --cols so each tile caps at one
   column's width and a short last row centres (see [data-center-rows]) */
.range__grid {
  --tile-min: 180px;
  --tile-gap: 10px;
  margin-top: clamp(36px, 4vw, 60px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tile-gap);
}
.range__grid li {
  flex: 1 1 var(--tile-min);
  max-width: calc((100% - (var(--cols, 1) - 1) * var(--tile-gap)) / var(--cols, 1));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-blue);
  border: 0.75px solid rgba(3, 28, 52, 0.2);
  min-height: clamp(110px, 11vw, 158px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px clamp(16px, 2vw, 30px);
  text-align: center;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 300;
  letter-spacing: -0.2px;
  line-height: 1.22;
  color: var(--black);
  text-wrap: balance;
  transition: color 0.35s ease;
}
.range__grid li::before {
  content: '';
  position: absolute;
  inset: -0.75px -0.75px auto;
  height: 3px;
  z-index: 2;
  pointer-events: none;
  background: var(--accent, var(--steel-blue));
  transition: background-color 0.35s ease;
}
.range--dark .range__grid li { --accent: var(--light-blue); }
/* 1135:3716 — Property Types variant: dark photo background, translucent tiles */
.range--dark { position: relative; overflow: hidden; color: var(--white); }
/* Experience page: Scenarios directly under Property Types reads as one dark band */
.range--dark + .range--dark { padding-top: 0; }
.range--dark .section-container { position: relative; }
.range--dark .section-container > h2 { color: var(--white); }
.range--dark .range__body { color: var(--light-blue); }
.range--dark .range__grid li {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}
.range__tile > span { position: relative; z-index: 1; }
/* 929:* hover variant — the property photo fades up behind a white label */
.range__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.45s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.range__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(3 28 52 / 0.45);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.range__tile:hover,
.range__tile:focus-visible { color: var(--white); outline: none; text-shadow: 0 1px 8px rgb(0 0 0 / 0.35); }
.range__tile:hover .range__photo,
.range__tile:focus-visible .range__photo { opacity: 1; transform: scale(1); }
.range__tile:hover::after,
.range__tile:focus-visible::after { opacity: 1; }
.range__grid .range__tile:hover,
.range__grid .range__tile:focus-visible { --accent: var(--sand); }
.range--dark .range__grid .range__tile:hover,
.range--dark .range__grid .range__tile:focus-visible { --accent: var(--sand); }
/* 1135:32xx hover variant — photo at 70% under a light navy wash */
.range--dark .range__tile:hover .range__photo,
.range--dark .range__tile:focus-visible .range__photo { opacity: 0.7; }
.range--dark .range__tile::after { background: rgb(3 28 52 / 0.15); }

/* Experience page: Property Types banners. Industries: full-width photo that crossfades
   with the rotating industry, text over a left-weighted scrim. Use of Proceeds: navy band,
   right-aligned sentence whose scenarios reveal one at a time
   ([data-industry-rotator] / [data-uses-reveal], js/main.js). */
.exp-banner {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--dark-blue);
}
.exp-banner .section-container { position: relative; z-index: 1; }
.exp-banner--photo {
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 72px var(--section-pad-x);
}
.exp-banner--photo .section-container { width: 100%; }
.exp-banner__slides { position: absolute; inset: 0; }
.exp-banner__slide {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s ease, transform 6s ease-out;
}
.exp-banner__slide.is-current { opacity: 1; transform: scale(1); }
.exp-banner--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(3 28 52 / 0.92) 0%, rgb(3 28 52 / 0.78) 40%, rgb(3 28 52 / 0.25) 75%, rgb(3 28 52 / 0.1) 100%),
    linear-gradient(0deg, rgb(3 28 52 / 0.55), transparent 40%);
}
.exp-banner--band { padding: clamp(48px, 4.5vw, 64px) var(--section-pad-x) clamp(56px, 5vw, 72px); }
.exp-banner--band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 85% 0%, #0a2a49, transparent 60%);
  pointer-events: none;
}
.exp-banner__row { display: flex; justify-content: flex-end; }
.exp-banner__block { min-width: 0; }
.exp-banner__row .exp-banner__block { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.exp-banner__subhead { margin: 0 0 16px; text-transform: none; }
.exp-banner__subhead img { flex: none; }
.exp-banner__sentence {
  margin: 0;
  max-width: 34em;
  font-size: clamp(18px, 1.6vw + 8px, 22px);
  font-weight: 300;
  letter-spacing: 0.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.exp-banner--photo .exp-banner__sentence { max-width: 30em; text-shadow: 0 1px 12px rgb(3 28 52 / 0.5); }
.exp-banner__rot { color: var(--light-blue); transition: opacity 0.35s ease; }
.exp-banner__rot.is-fading { opacity: 0; }
.exp-banner__word { display: none; }
.exp-banner__word.is-current { display: inline; }
.exp-banner__use b { color: var(--light-blue); font-weight: inherit; }
.exp-banner__use { display: inline-block; transition: opacity 0.5s ease, transform 0.5s ease; }
.exp-banner__uses.is-armed .exp-banner__use { opacity: 0; transform: translateY(6px); }
.exp-banner__uses.is-armed .exp-banner__use.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .exp-banner__rot, .exp-banner__slide, .exp-banner__use { transition: none; }
  .exp-banner__slide { transform: none; }
}

/* === Team page (1002:300) ========================================== */

.team {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.team__intro h2 {
  margin-top: 12px;
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
  text-wrap: balance;
  text-transform: capitalize;
}
.team__body {
  margin-top: 20px;
  max-width: 95ch;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.team__grid {
  margin-top: clamp(36px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(16px, 1.7vw, 24px);
}
.team-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid rgba(15, 19, 23, 0.11);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.team-tile:hover,
.team-tile:focus-visible { box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25); outline: none; }
.team-tile__media {
  position: relative;
  display: block;
  margin: 10px 10px 0;
  aspect-ratio: 283 / 317;
  overflow: hidden;
  border-radius: 4px;
  background: var(--white);
}
.team-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1);
  transition: filter 0.35s ease;
}
/* 1047:4093 — portraits sit in grayscale and come to full colour on hover */
.team-tile:hover .team-tile__media img,
.team-tile:focus-visible .team-tile__media img { filter: none; }
.team-tile__body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 24px; }
.team-tile__name {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  font-weight: 300;
  color: var(--black);
}
.team-tile__role {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--dark-blue);
}
.team-tile__summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 19, 23, 0.11);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--steel-blue);
}

/* === Modals (docs/modals.md pattern; bio layout from 943:1300) ===== */

.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  inset: 0;
}
.modal::backdrop { background: rgba(3, 28, 52, 0.65); }
.modal__panel {
  position: fixed;
  inset: 0;
  background: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.modal__content { flex: 1 1 auto; }
/* Rail of controls: close on top, then next / previous */
.modal__rail {
  position: sticky;
  top: 0;
  align-self: flex-end;
  display: flex;
  gap: 2px;
  margin: 12px;
  z-index: 1;
}
.modal__close,
.modal__nav {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: filter 0.2s ease;
}
.modal__close:hover, .modal__nav:hover { filter: brightness(1.15); }
.modal__close { background: var(--light-blue); }
.modal__close img { transform: rotate(45deg); }
.modal__nav { background: var(--steel-blue); }
.modal__nav--prev img { transform: rotate(180deg); }
@media (min-width: 768px) {
  .modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal__panel {
    position: relative;
    inset: auto;
    margin: auto;
    width: min(1000px, 90vw);
    max-height: 90vh;
    box-shadow: 0 24px 64px rgba(3, 28, 52, 0.3);
    flex-direction: row;
    align-items: flex-start;
    overflow: visible;
    background: transparent;
  }
  .modal__content { min-width: 0; max-height: 90vh; overflow-y: auto; background: var(--white); }
  .modal__rail {
    position: static;
    align-self: flex-start;
    flex-direction: column;
    margin: 0;
    flex: none;
  }
}
body.modal-open { overflow: hidden; }

/* Bio modal content */
.bio-modal__top {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 3.2vw, 46px);
  padding: clamp(24px, 2.8vw, 40px) clamp(24px, 3vw, 40px) clamp(24px, 2.1vw, 30px);
  background: linear-gradient(to top, var(--dark-blue), var(--navy-mid));
  color: var(--white);
}
.bio-modal__lead { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.bio-modal__role {
  font-size: 12px;
  font-weight: 300;
  line-height: 2.07;
  color: var(--light-blue);
}
.bio-modal__lead h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: 300;
  line-height: 1.68;
  text-transform: capitalize;
}
.bio-modal__summary {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.53;
  color: var(--light-blue);
  text-wrap: pretty;
}
.bio-modal__contact {
  margin-top: 23px;
  padding-top: 23px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.bio-modal__contact a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.bio-modal__contact a:hover { background: rgba(255, 255, 255, 0.14); }
.bio-modal__contact img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.bio-modal__contact li:nth-child(2) img { width: 30px; height: 30px; filter: none; }
.bio-modal__photo {
  flex: none;
  position: relative;
  display: block;
  width: min(347px, 38%);
  aspect-ratio: 347 / 257;
  align-self: flex-start;
  overflow: hidden;
  border-radius: 4px;
}
.bio-modal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bio-modal__details { padding: clamp(24px, 2.1vw, 30px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); }
.bio-modal__details h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 400;
  text-transform: capitalize;
  color: var(--dark-blue);
}
.bio-modal__details h3 + .bio-modal__bio { margin-top: 10px; }
.bio-modal__bio {
  padding-left: 24px;
  list-style: disc;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
}
.bio-modal__bio li::marker { color: var(--steel-blue); }
.bio-modal__bio + h3 { margin-top: clamp(20px, 2vw, 28px); }
.bio-modal__education {
  margin-top: 10px;
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
}

/* === Experience page (831:3263) ==================================== */

.experience-page {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.experience-page__sub {
  margin-top: 20px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.experience-page__grid {
  margin-top: clamp(36px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
.exp-card--static { flex: none; width: auto; }
.exp-card[hidden] { display: none; }
.experience-page .section-container + .section-container .experience-page__grid { margin-top: clamp(28px, 3vw, 40px); }

/* Experience page: Property Types as one row of split-flap tiles
   ([data-flip-board]). js/main.js keeps N tiles and flips each one through
   every Nth type; .range__flap copies of the old/new tile fold over the real
   one on the centre hinge and are removed once they land. */
.range__grid[data-flip-board] { flex-wrap: nowrap; }
@media (min-width: 769px) {
  .range__grid[data-flip-board] li { flex: 1 1 0; min-width: 0; max-width: none; }
}
.range__grid[data-flip-board] li { container-type: inline-size; }
.range__grid[data-flip-board] .range__tile > span { font-size: min(1em, 14cqi); }
.range__flap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  background: rgb(38 58 78);
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.range__flap > span { position: relative; z-index: 1; font-size: min(1em, 14cqi); }
.range__flap--top { clip-path: inset(0 0 50% 0); }
.range__flap--bottom { clip-path: inset(50% 0 0 0); }
.range__flap--top::after,
.range__flap--bottom::after {
  content: '';
  position: absolute;
  inset: calc(50% - 0.5px) 0 auto;
  height: 1px;
  z-index: 2;
  background: rgba(3, 28, 52, 0.55);
}

/* === Insights page (1004:1903) ===================================== */

.insights-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px var(--section-pad-x);
  max-width: calc(1300px + 2 * var(--section-pad-x));
  margin-inline: auto;
}
.insights-filter {
  padding: 9px 18px;
  border: 1px solid #e2e6ea;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--steel-blue);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.insights-filter:hover { border-color: var(--steel-blue); }
.insights-filter[aria-pressed="true"] { background: var(--dark-blue); border-color: var(--dark-blue); color: var(--white); }
.btn.insights-filter { border-radius: 0; border-color: currentColor; font-size: 14.2px; padding: 13px 10px 13px 20px; }
.btn.insights-filter[aria-pressed="true"] { background: transparent; color: var(--dark-blue); }
/* Resources hub filters: icon + label chips. `.is-current` marks the filtered group, or the group in view while "All" is shown */
.insights-page__filters--tiles { gap: clamp(8px, 0.8vw, 12px); }
.insights-page__filters.insights-page__filters--tiles[data-sticky-filters] { transition: box-shadow 0.25s ease; }
.insights-filter--tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 0;
  background: var(--white);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.insights-filter--tile[aria-pressed="true"]:not(.is-current) { background: var(--white); border-color: #e2e6ea; color: var(--steel-blue); }
.insights-filter--tile.is-current { background: var(--dark-blue); border-color: var(--dark-blue); color: var(--white); }
.insights-filter__icon {
  flex: none;
  width: 16px;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.insights-filter--tile:not(.is-current) .insights-filter__icon { background: #2f6cb0; }

.insights-page {
  background: var(--bg-blue);
  padding: clamp(36px, 2.25rem + 1.5vw, 60px) var(--section-pad-x);
}
.insights-page--white { background: var(--white); }
.insights-page .section-container > h2 { margin-top: 0; }
.insights-page .section-container > .eyebrow + h2 { margin-top: 12px; }
.insights-page__grid {
  margin-top: clamp(28px, 3vw, 44px);
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3vw, 44px);
}
.insights-page__quotes {
  flex: 0 1 500px;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.insights-page__quotes .quote-card { flex: none; }
.insights-page__quotes--row {
  margin-top: clamp(28px, 3vw, 44px);
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(16px, 1.7vw, 24px);
}
.insights-page__quotes--row .quote-card { flex: 1 1 min(100%, 420px); }
.insights-page__cards,
.insights-page__events { margin-top: clamp(16px, 1.7vw, 24px); }
.insights-page .section-container > h2 + .insights-page__cards,
.insights-page .section-container > h2 + .insights-page__events { margin-top: clamp(28px, 3vw, 44px); }
.insights-page__notes {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Resources sub-pages (/resources/media|insights|news) — chip-filtered list */
.resources-list__intro { max-width: 60ch; font-size: 1rem; line-height: 26.4px; color: var(--steel-blue); text-wrap: pretty; }
.resources-list__notes { margin-top: clamp(28px, 3vw, 44px); }
.resources-list__notes li[hidden] { display: none; }
.resources-list__tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.resources-list__tags span { padding: 3px 10px; border: 1px solid #e2e6ea; border-radius: 12px; font-size: 11px; letter-spacing: 0.4px; color: var(--steel-blue); }
.resources-list__empty { margin-top: 32px; color: var(--steel-blue); }
/* Media (/resources/media/) — outlet logo marquee under the hero + logo cards */
.media-logos { background: var(--white); padding: clamp(20px, 2.5vw, 36px) var(--section-pad-x); }
.media-logos .section-container > h2 { margin-top: 12px; text-transform: none; }
.media-logos .eyebrow + h2 + .authority__marquee { margin-top: clamp(24px, 2.6vw, 40px); }
.media-logos .authority__marquee { margin-top: 0; }
#media .eyebrow + h2 + .authority__marquee { margin-top: clamp(24px, 2.6vw, 40px); }
#media .authority__marquee + * { margin-top: clamp(24px, 2.6vw, 40px); }
.authority__marquee--bare::before { background: linear-gradient(90deg, var(--white), transparent); }
.authority__marquee--bare::after { background: linear-gradient(270deg, var(--white), transparent); }
.authority__marquee--bare .authority__logos { gap: clamp(40px, 4.5vw, 72px); align-items: center; }
.authority__marquee--bare .authority__logos li { flex: none; background: none; border: 0; padding: 0; }
.authority__marquee--bare .authority__logos img { width: auto; height: clamp(30px, 2.8vw, 42px); aspect-ratio: auto; padding: 0; background: none; }
.authority__marquee--bare .authority__logo-text { aspect-ratio: auto; background: none; }
.resources-list--cards .resources-list__intro { max-width: none; }
.media-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 1.7vw, 24px);
}
/* Resource cards — styled after the Experience cards (.exp-card): dark face,
   light-blue top rule, rectangular uppercase category tags. */
.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--card-front);
  border: 1px solid rgba(155, 196, 229, 0.4);
  border-top: 3px solid var(--light-blue);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.media-card:hover, .media-card:focus-within { background: #34495e; border-color: rgba(155, 196, 229, 0.85); border-top-color: var(--light-blue); transform: translateY(-2px); }
.media-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.media-card__tags span { padding: 5px 10px; border: 1px solid rgba(155, 196, 229, 0.55); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; line-height: 1.3; text-transform: uppercase; color: var(--light-blue); }
.media-card__logo { margin-top: clamp(18px, 1.8vw, 26px); height: 40px; display: flex; align-items: center; }
.media-card__logo img { display: block; max-width: min(100%, 170px); max-height: 100%; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.media-card__wordmark { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; color: var(--white); }
.media-card__date { margin-top: clamp(18px, 1.8vw, 26px); font-size: 10px; font-weight: 500; letter-spacing: 1.89px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.media-card h3 {
  margin-top: 10px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 300;
  letter-spacing: -0.2px;
  line-height: 1.35;
  color: var(--white);
  text-wrap: balance;
}
.media-card h3 a { color: inherit; }
.media-card h3 a::after { content: ""; position: absolute; inset: 0; }
.media-card__blurb { margin-top: 12px; font-size: 13px; font-weight: 300; letter-spacing: 0.3px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.media-card__more { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 500; letter-spacing: 1.89px; text-transform: uppercase; color: var(--light-blue); }
.media-card__more img { transform: scaleY(-1); transition: transform 0.25s ease; }
.media-card:hover .media-card__more img { transform: translate(3px, -3px) scaleY(-1); }
/* Each card is 5 rows of the list grid (subgrid), so tags, date and title
   line up across a row even when one card's tags wrap to two lines. */
@supports (grid-template-rows: subgrid) {
  .media-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .media-card__tags { align-self: start; }
  .media-card__more { align-self: end; justify-self: start; }
}
.media-card__date:empty, .media-card__blurb:empty { margin-top: 0; }
/* News, Insights + Events — fixed "Back to top" tab, shown once the visitor scrolls past the first screen */
.back-to-top {
  position: fixed;
  right: clamp(16px, 2.2vw, 32px);
  bottom: clamp(16px, 2.2vw, 32px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--card-front);
  border: 1px solid rgba(155, 196, 229, 0.4);
  border-top: 3px solid var(--light-blue);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.89px;
  text-transform: uppercase;
  color: var(--light-blue);
  box-shadow: 0 8px 24px rgba(3, 28, 52, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover, .back-to-top:focus-visible { background: #34495e; border-color: rgba(155, 196, 229, 0.85); border-top-color: var(--light-blue); }
.back-to-top img { transform: rotate(180deg); transition: transform 0.25s ease; }
.back-to-top:hover img { transform: rotate(180deg) translateY(3px); }
/* Events (/resources/events/) — vertical timeline: rail + dot, connector into a dark card */
.events-page .resources-list__intro { max-width: none; }
.events-timeline {
  --rail-x: 7px;
  --card-pad: clamp(22px, 2.4vw, 34px);
  --dot-y: calc(var(--card-pad) + 6px);
  padding: 0;
  list-style: none;
  position: relative;
  margin-top: clamp(32px, 3.5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.7vw, 24px);
}
.events-timeline::before {
  content: "";
  position: absolute;
  left: var(--rail-x);
  top: calc(var(--dot-y) + 8px);
  bottom: 0;
  width: 2px;
  margin-left: -0.5px;
  background: rgba(155, 196, 229, 0.7);
}
.events-timeline__item {
  position: relative;
  padding-left: clamp(30px, 2.8vw, 44px);
}
.events-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--rail-x) - 7px);
  top: var(--dot-y);
  z-index: 1;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid var(--light-blue);
  background: var(--card-front);
}
.events-timeline__item::after {
  content: "";
  position: absolute;
  left: calc(var(--rail-x) + 8px);
  width: calc(clamp(30px, 2.8vw, 44px) - var(--rail-x) - 8px);
  top: calc(var(--dot-y) + 7px);
  height: 2px;
  background: rgba(155, 196, 229, 0.7);
}
.events-timeline__item.is-upcoming::before { background: var(--light-blue); }
.events-timeline__when {
  margin-top: clamp(18px, 1.8vw, 26px);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.89px;
  text-transform: uppercase;
  color: var(--light-blue);
}
.events-timeline__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--card-pad);
  background: var(--card-front);
  border: 1px solid rgba(155, 196, 229, 0.4);
  border-top: 3px solid var(--light-blue);
}
.events-timeline__item.is-upcoming .events-timeline__body {
  background: #34495e;
  border-color: var(--light-blue);
  box-shadow: 0 14px 36px rgba(3, 28, 52, 0.22);
}
.media-card__tags .events-timeline__badge { background: var(--light-blue); border-color: var(--light-blue); color: var(--dark-blue); }
.events-timeline__body h2 {
  margin-top: 10px;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
  font-weight: 300;
  letter-spacing: -0.2px;
  line-height: 1.35;
  color: var(--white);
  text-wrap: balance;
}
.events-timeline__preview {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.events-timeline__item.is-open .events-timeline__preview { display: block; overflow: visible; }
.events-timeline__toggle {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.89px;
  text-transform: uppercase;
  color: var(--light-blue);
}
.events-timeline__toggle[hidden] { display: none; }
.events-timeline__toggle img { transition: transform 0.25s ease; }
.events-timeline__item.is-open .events-timeline__toggle img { transform: rotate(180deg); }
.events-timeline__cta { margin-top: 22px; }
.events-timeline__item[hidden] { display: none; }
.events-page__more { margin-top: clamp(36px, 3.5vw, 52px); padding-left: clamp(32px, 3vw, 48px); }
.events-page__more[hidden] { display: none; }

/* "All" view shows the first three notes per group; a tab expands the group */
.insights-page:not(.is-expanded):not(.resources-list) .insights-page__notes li:nth-child(n + 4) { display: none; }
.insights-page__date {
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: #2f6cb0;
}
.insights-page__notes h3 {
  margin-top: 6px;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 400;
  color: var(--dark-blue);
  text-wrap: balance;
}
.insights-page__notes h3 a:hover { text-decoration: underline; }
.insights-page__blurb {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 23px;
  color: var(--steel-blue);
}
.insights-page__read {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-blue);
}
.insights-page__read:hover { text-decoration: underline; }
.insights-page__more {
  margin-top: clamp(20px, 2vw, 32px);
  padding-top: 20px;
  border-top: 1px solid rgba(15, 19, 23, 0.11);
  display: flex;
  justify-content: flex-end;
}
/* Row lists already end on a rule */
.insights-page__list + .insights-page__more { padding-top: 0; border-top: 0; }

.market-card {
  margin-top: clamp(28px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  padding: 24px;
  background: var(--bg-blue);
  border: 1px solid rgba(15, 19, 23, 0.11);
}
.market-card > img {
  flex: none;
  width: min(280px, 100%);
  aspect-ratio: 280 / 186;
  height: auto;
  object-fit: cover;
}
.market-card__body { flex: 1 1 0; min-width: 0; }
.market-card__tag {
  display: inline-block;
  padding: 4px 10px 5px;
  border-radius: 4px;
  background: #e8f0fa;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  color: #2f6cb0;
}
.market-card h3 {
  margin-top: 16px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 400;
  color: var(--dark-blue);
}
.market-card__body > p:not(.market-card__tag) {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 23px;
  color: var(--steel-blue);
}
.insights-page--white .market-card { background: var(--bg-blue); }

.insights-page__list { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid rgba(15, 19, 23, 0.11); }
.insights-page__list li { min-height: 100px; }
.insights-page__list a { padding: 16px 40px; }
.insights-page__list .insights__list-title { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }

/* --- Resources page enhancements ------------------------------------ */

/* Filter bar sticks to the top once the hero scrolls away */
.insights-page__filters[data-sticky-filters] {
  position: sticky;
  top: 76px; /* js/main.js pins this to the compact header's measured height */
  max-width: none;
  padding-inline: max(var(--section-pad-x), (100% - 1300px) / 2);
  z-index: 5;
  background: var(--bg-blue);
  border-bottom: 1px solid rgba(155, 196, 229, 0.4);
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}
.insights-page__filters.is-stuck {
  padding-block: 12px;
  box-shadow: 0 6px 24px rgba(3, 28, 52, 0.08);
}
.market-card__tag .mid-dot { margin: 0 6px; }

/* Publication wordmark badge (text until outlet logos are supplied) */
.pub-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 8px;
  border: 1px solid rgba(3, 28, 52, 0.18);
  border-radius: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  color: var(--dark-blue);
  white-space: nowrap;
}
.pub-mark--sm { padding: 2px 6px; font-size: 10px; }

.insights-page__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Quote cards link to the coverage they came from */
.quote-card--linked figcaption { flex-wrap: wrap; }
.quote-card--linked figcaption > span:not(.pub-mark) { flex: 1 1 0; min-width: 0; }
.quote-card__link { font-weight: 600; color: var(--dark-blue); white-space: nowrap; }
.quote-card__link:hover { text-decoration: underline; }
.quote-card--linked { position: relative; cursor: pointer; }
.quote-card--linked .quote-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Pull quotes (home + Resources hub) — no box: navy italic on the page background,
   light-blue left rule and quotation mark, so they read as quotes rather than cards */
.quote-card--feature {
  position: relative;
  padding: 4px clamp(16px, 1.8vw, 24px) 0 clamp(20px, 2.2vw, 30px);
  background: none;
  border: 0;
  border-left: 3px solid var(--light-blue);
  box-shadow: none;
}
.quote-card--feature:hover { box-shadow: none; }
.quote-card--feature::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  right: clamp(12px, 1.4vw, 20px);
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 3rem + 1.5vw, 4.75rem);
  line-height: 1;
  color: var(--light-blue);
  pointer-events: none;
}
.quote-card--feature blockquote {
  position: relative;
  padding-bottom: clamp(12px, 1.2vw, 18px);
  padding-right: clamp(36px, 3.6vw, 52px);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.2px;
  line-height: 1.5;
  color: var(--dark-blue);
  text-wrap: pretty;
}
.quote-card--feature figcaption {
  padding-top: 12px;
  border-top-color: rgba(47, 108, 176, 0.2);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.89px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--steel-blue);
}
.quote-card--feature .pub-mark { padding: 5px 10px; border-color: var(--light-blue); border-radius: 0; font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; line-height: 1.3; text-transform: uppercase; color: var(--steel-blue); }
.quote-card--feature .mid-dot { margin-inline: 6px; }
.quote-card--feature .quote-card__source { flex: 1 1 auto; }
.insights__quotes--top, .insights-page__quotes--row { margin-bottom: clamp(12px, 1.6vw, 24px); }
.quote-card--feature .quote-card__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--dark-blue); }
.quote-card--feature .quote-card__link:hover { text-decoration: none; }
.quote-card__link img { transform: scaleY(-1); }
.quote-card--feature .quote-card__link img { transition: transform 0.25s ease; }
.quote-card--feature .quote-card__link:hover img,
.quote-card--feature:hover .quote-card__link img { transform: translate(3px, -3px) scaleY(-1); }

/* Featured (first) insight row */
.insights-page__notes li.is-featured {
  padding: clamp(18px, 2vw, 26px);
  background: var(--bg-blue);
  border-left: 3px solid #2f6cb0;
}
.insights-page:not(.insights-page--white) .insights-page__notes li.is-featured { background: var(--white); }
.insights-page__notes li.is-featured h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); }
.insights-page__notes li.is-featured .insights-page__blurb { font-size: 15px; line-height: 25px; }

/* Row hover accent: rule slides in from the left, arrow nudges right */
.insights-page__notes li { position: relative; padding-left: 14px; }
.insights-page__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: #2f6cb0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.insights-page__notes li:hover::before,
.insights-page__notes li:focus-within::before { transform: scaleY(1); }
.insights-page__notes li.is-featured::before { display: none; }
.insights-page__arrow { display: inline-block; transition: transform 0.25s ease; }
.insights-page__read:hover .insights-page__arrow,
.insights-page__notes li:hover .insights-page__arrow { transform: translateX(5px); }
.insights__list a img { transition: transform 0.25s ease; }
.insights__list a:hover img { transform: translateX(5px); }

/* Market update key stats */
.market-stats {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.market-stat {
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid rgba(15, 19, 23, 0.11);
}
.market-stat dt {
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.4;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.market-stat dd { margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.market-stat__value {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--dark-blue);
  font-variant-numeric: tabular-nums;
}
.market-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.market-stat__delta img { flex: none; }
.market-stat__delta--up img { transform: rotate(-90deg); }
.market-stat__delta--down img { transform: rotate(90deg); }
.market-stat__delta--up { color: #1f7a4d; }
.market-stat__delta--down { color: #b3412f; }
/* Resources hub Market Update — dark face matching .media-card / .quote-card--feature */
.market-card--dark,
.insights-page--white .market-card--dark {
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--card-front);
  border: 1px solid rgba(155, 196, 229, 0.4);
  border-top: 3px solid var(--light-blue);
}
.market-card--dark .market-card__tag {
  padding: 5px 10px;
  border: 1px solid rgba(155, 196, 229, 0.55);
  border-radius: 0;
  background: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.3;
  color: var(--light-blue);
}
.market-card--dark h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 300; letter-spacing: -0.2px; line-height: 1.3; text-wrap: balance; }
.market-card--dark h3 a { color: var(--white); }
.market-card--dark .market-card__body > .market-card__through { margin-top: 6px; font-style: italic; color: var(--light-blue); }
.market-card--dark .market-card__body > p:not(.market-card__tag, .market-card__through) { font-size: 13px; font-weight: 300; letter-spacing: 0.3px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); text-wrap: pretty; }
.market-card--dark .market-stat { background: rgba(3, 28, 52, 0.35); border: 1px solid rgba(155, 196, 229, 0.3); }
.market-card--dark .market-stat dt { font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.market-card--dark .market-stat__value { color: var(--white); }
.market-card--dark .market-stat__delta { color: rgba(255, 255, 255, 0.6); }
.market-card--dark .market-stat__delta img { filter: brightness(0) invert(1); opacity: 0.85; }
.market-card--dark .market-stat__delta--up { color: #7fd1a4; }
.market-card--dark .market-stat__delta--down { color: #f19a8a; }
.market-card--dark .insights-page__read { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 10px; font-weight: 500; letter-spacing: 1.89px; text-transform: uppercase; color: var(--light-blue); }
.market-card--dark .insights-page__read:hover { text-decoration: none; }
.market-card--dark .insights-page__read img { transform: scaleY(-1); transition: transform 0.25s ease; }
.market-card--dark .insights-page__read:hover img { transform: translate(3px, -3px) scaleY(-1); }
/* Resources hub Market Update — light variant (white face on the --bg-blue section) */
.market-card--light,
.insights-page--white .market-card--light {
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--white);
  border: 1px solid rgba(74, 101, 131, 0.22);
  border-top: 3px solid var(--light-blue);
}
.market-card--light > img { box-shadow: 0 10px 28px rgba(3, 28, 52, 0.22); }
.market-card--light .market-card__tag {
  padding: 5px 10px;
  border: 1px solid rgba(74, 101, 131, 0.4);
  border-radius: 0;
  background: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.3;
  color: var(--steel-blue);
}
.market-card--light h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 300; letter-spacing: -0.2px; line-height: 1.3; text-wrap: balance; }
.market-card--light h3 a { color: var(--dark-blue); }
.market-card--light .market-card__body > .market-card__through { margin-top: 6px; font-style: italic; color: var(--steel-blue); }
.market-card--light .market-card__body > p:not(.market-card__tag, .market-card__through) { font-size: 13px; font-weight: 300; letter-spacing: 0.3px; line-height: 1.6; color: var(--steel-blue); text-wrap: pretty; }
.market-card--light .market-stat { background: var(--bg-blue); border: 1px solid rgba(74, 101, 131, 0.18); }
.market-card--light .market-stat dt { font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(74, 101, 131, 0.75); }
.market-card--light .market-stat__value { color: var(--dark-blue); }
.market-card--light .market-stat__delta { color: rgba(74, 101, 131, 0.75); }
.market-card--light .market-stat__delta--up { color: #1f7a4d; }
.market-card--light .insights-page__read { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 10px; font-weight: 500; letter-spacing: 1.89px; text-transform: uppercase; color: var(--steel-blue); }
.market-card--light .insights-page__read:hover { text-decoration: none; }
.market-card--light .insights-page__read img { transform: scaleY(-1); transition: transform 0.25s ease; }
.market-card--light .insights-page__read:hover img { transform: translate(3px, -3px) scaleY(-1); }

/* Scroll-in reveal (staggered by JS via --reveal-i) */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* === Contact page (827:2621) ======================================= */

.contact {
  background: var(--bg-blue);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.contact__grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 110px);
}
.contact__info { flex: 1 1 0; min-width: 0; }
.contact__info h2 {
  margin-top: 12px;
  font-size: var(--h2-size);
  line-height: 1.3;
  color: var(--black);
  text-wrap: balance;
  text-transform: capitalize;
}
.contact__body {
  margin-top: 20px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 30px;
  color: var(--steel-blue);
  text-wrap: pretty;
}
.contact__details { margin-top: clamp(28px, 3vw, 44px); }
.contact__details li { display: flex; gap: 24px; padding: 10px 0; }
.contact__label {
  flex: 0 0 128px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--steel-blue);
}
.contact__details p {
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--black);
  overflow-wrap: anywhere;
}
.contact__details a:hover { text-decoration: underline; }
.contact__linkedin {
  display: inline-flex;
  margin-top: clamp(32px, 3.5vw, 48px);
  width: 50px;
  height: 50px;
  background: var(--white);
  border: 1px solid var(--dark-blue);
  transition: opacity 0.2s ease;
}
.contact__linkedin:hover { opacity: 0.85; }
.contact__linkedin img { display: block; width: 50px; height: 50px; }

.contact__form {
  flex: 0 1 560px;
  min-width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact__form h2 {
  font-size: var(--h2-size);
  font-weight: 200;
  color: var(--black);
  margin-bottom: 22px;
}
/* Label sits inside the white card, above the input (827:2621) */
.contact__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 20px 12px;
  background: var(--white);
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.contact__field:focus-within { border-color: var(--steel-blue); }
.contact__field label {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--steel-blue);
}
.contact__field label span { color: #e0341b; margin-left: 4px; }
.contact__field input,
.contact__field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dark-blue);
}
.contact__field textarea { min-height: 110px; resize: vertical; }
.contact__field input::placeholder,
.contact__field textarea::placeholder { color: rgba(74, 101, 131, 0.5); }
.contact__field input:focus,
.contact__field textarea:focus { outline: none; }
.contact__field--message { min-height: 155px; }
.contact__form .btn { align-self: flex-start; margin-top: 18px; }
.contact__form .btn:disabled { opacity: 0.6; pointer-events: none; }
.contact__status { font-size: 1rem; line-height: 1.5; color: var(--steel-blue); }
.contact__status.is-error { color: #e0341b; }

/* Form embedded in an article body (e.g. Market Update sign-up) */
.article__form {
  flex: none;
  max-width: 720px;
  margin-top: clamp(24px, 1rem + 1.5vw, 40px);
  padding-top: clamp(24px, 1rem + 1.5vw, 40px);
  border-top: 1px solid rgba(74, 101, 131, 0.25);
}
.article__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
}
.article__form-full { grid-column: 1 / -1; }
.article .contact__field { border-color: rgba(74, 101, 131, 0.25); }
.article .contact__field:focus-within { border-color: var(--steel-blue); }

/* === Resource article (Media / News / Insight detail, src/resource-article.njk) === */
/* No hero on these pages: the fixed header sits on a solid navy band */
body:not(.has-hero) .site-header { background: var(--dark-blue); }
.article {
  background: var(--bg-blue);
  padding: calc(100px + clamp(36px, 2.25rem + 1.5vw, 60px)) var(--section-pad-x) clamp(36px, 2.25rem + 1.5vw, 60px);
}
.article__back {
  display: inline-block;
  color: var(--steel-blue);
  font-size: 0.9375rem;
  letter-spacing: 0.5px;
}
.article__back:hover { color: var(--orange); }
.article__pager {
  margin-top: clamp(28px, 3vw, 48px);
  padding-top: 20px;
  border-top: 1px solid rgba(15, 19, 23, 0.11);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}
.article__pager-next { margin-left: auto; }
.article__footer + .article__pager { margin-top: 20px; }
.article__title {
  margin-top: clamp(16px, 1.5vw, 24px);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-weight: 200;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--dark-blue);
  text-wrap: balance;
}
.article__meta { margin-top: clamp(14px, 1.2vw, 20px); margin-bottom: clamp(20px, 2vw, 32px); }
.article__image {
  display: block;
  width: 100%;
  max-height: min(210px, 20vw);
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: clamp(24px, 2.5vw, 40px);
}
.article__body {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.75;
  letter-spacing: 0.2px;
  color: var(--steel-blue);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.article__body > * + * { margin-top: 1.1em; }
.article__body h2,
.article__body h3,
.article__body h4 {
  color: var(--dark-blue);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
  margin-top: 1.8em;
}
.article__body h2 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); }
.article__body h3 { font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); }
.article__body h4 { font-size: 1.0625rem; letter-spacing: 0.5px; }
.article__body strong { color: var(--dark-blue); font-weight: 600; }
.article__body a { color: var(--dark-blue); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--orange); }
.article__body ul,
.article__body ol { padding-left: 1.4em; }
.article__body ul { list-style: disc; }
.article__body ul > li { padding-left: 0.25em; }
.article__body ul > li::marker { color: var(--steel-blue); font-weight: 600; }
.article__body li + li { margin-top: 0.4em; }
.article__body blockquote {
  margin-inline: 0;
  padding-left: 1.2em;
  border-left: 3px solid var(--light-blue);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1em;
  color: var(--dark-blue);
}
.article__body img { max-width: 100%; height: auto; border-radius: 6px; }
.article__body figure { margin-inline: 0; }
/* The CMS editor stores a bare <img> (no <figure>): keep it on its own block line */
.article__body > img { display: block; }
/* [venn: …] in an article body: the homepage Why SLB venn, labelled */
.article-venn {
  margin-block: clamp(28px, 3vw, 44px);
  padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px);
  background: linear-gradient(to bottom, var(--dark-blue), var(--navy-soft));
  border-radius: 6px;
}
.article-venn__art {
  position: relative;
  width: min(100%, 520px);
  margin-inline: auto;
  aspect-ratio: 449.09 / 317;
}
.article-venn__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.article-venn__label {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 26%;
  font-size: clamp(0.8125rem, 0.65rem + 0.55vw, 1.125rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-align: center;
  text-wrap: balance;
  color: var(--white);
}
.article-venn__label--left { left: 15.5%; }
.article-venn__label--centre { left: 50%; font-weight: 500; }
.article-venn__label--right { left: 84.5%; color: var(--light-blue); }
.article-venn__label img { width: clamp(34px, 2vw + 22px, 60px); height: auto; border-radius: 0; }
/* The CMS editor stores list items as <li><p>…</p></li> */
.article__body li > p { margin: 0 !important; }
/* …and table cells as <td><p>…</p></td> */
.article__body td > p, .article__body th > p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.article__body figcaption { font-size: 0.875rem; margin-top: 0.5em; }
.article__body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.article__body th,
.article__body td { padding: 0.6em 0.8em; border-bottom: 1px solid rgba(15, 19, 23, 0.11); text-align: left; vertical-align: top; }
.article__body th { color: var(--dark-blue); font-weight: 600; }
.article__footer {
  margin-top: clamp(28px, 3vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article__layout {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 56px);
  align-items: start;
}
.article__layout--rail { grid-template-columns: 3px minmax(0, 1fr) clamp(230px, 24vw, 300px); }
.article__main { min-width: 0; }
/* Read-progress hairline, sticky in the left gutter (js/main.js scales the fill) */
.article__progress {
  position: sticky;
  top: 120px;
  align-self: stretch;
  max-height: calc(100vh - 160px);
  background: rgba(74, 101, 131, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.article__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--light-blue);
  transform-origin: top;
  transform: scaleY(0);
}
.article__popular { position: sticky; top: 120px; }
.article__popular-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Compact media-cards for the article rail */
.article__popular .media-card { padding: clamp(14px, 1.4vw, 20px); }
.article__popular .media-card__tags span { padding: 4px 8px; font-size: 9px; }
.article__popular .media-card__date { margin-top: 12px; }
.article__popular .media-card h3 { margin-top: 8px; font-size: 1rem; }
.article__popular .media-card__more { padding-top: 14px; }

/* === Why Sale Leasebacks Work ====================================== */

/* === Mobile (max-width: 768px) — layout transformations ONLY ====== */


@media (max-width: 900px) {
  /* Homepage Insights cards → stacked (three cards would leave an orphan in two columns) */
  .media-cards.insights__cards { grid-template-columns: 1fr; }

  /* Nav → hamburger drawer */
  .site-header__toggle { display: flex; }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark-blue);
    padding: 16px var(--section-pad-x) 28px;
  }
  body.nav-open .site-header__nav { display: block; max-height: calc(100vh - 100%); overflow-y: auto; }
  .site-header__nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .site-header__submenu { position: static; transform: none; display: flex; align-items: flex-start; padding: 0 0 0 20px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header__submenu li { border: 0; text-align: left; }
  .site-header__cta { margin-top: 12px; }

  /* Hero → stacked */
  .hero__inner { flex-direction: column; align-items: flex-start; padding-block: 140px 60px; }

  /* Clients → eyebrow + title above the marquee */
  .clients { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  /* Article rail → stacked below the article; progress hairline hidden */
  .article__layout, .article__layout--rail { grid-template-columns: 1fr; }
  .article__progress { display: none; }
  .article__popular {
    position: static;
    margin-top: clamp(28px, 3vw, 48px);
    padding-top: clamp(20px, 2vw, 28px);
    border-top: 1px solid rgba(15, 19, 23, 0.11);
  }

}

@media (max-width: 768px) {
  /* Why SLB row → single column, logo between cards */
  .why-slb__row { flex-direction: column; gap: 24px; }
  .why-slb__card { width: 100%; flex-basis: auto; }
  .why-slb__logo img { width: 52%; }
  .thesis__cards { flex-direction: column; gap: 24px; }
  .skill-card { width: 100%; max-width: none; flex-basis: auto; }
  .thesis__logo img { width: 64px; }

  /* Firm lede rail → stacked */
  .firm__lede { flex-direction: column; }
  .firm__eyebrow { border-right: 0; border-bottom: 1px solid rgba(74, 101, 131, 0.2); padding: 0 0 16px; }

  /* Resources filter bar → single scrollable row so the sticky bar stays short */
  .insights-page__filters[data-sticky-filters] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .insights-page__filters[data-sticky-filters]::-webkit-scrollbar { display: none; }
  .insights-page__filters[data-sticky-filters] .insights-filter { flex: none; }

  /* Insights grid → stacked */
  .insights__grid { flex-direction: column; }
  .insight-card { flex-basis: auto; }
  .insights__quotes:not(.insights__quotes--top) { flex-direction: column; }
  .insights__list li { flex-basis: auto; }
  .insights__list a { flex-wrap: wrap; gap: 8px 16px; }
  .insights__list time { flex-basis: 100%; }
  .insights__list-title { flex-basis: 100%; }

  /* CTA banner → stacked */
  .cta-banner { flex-direction: column; align-items: flex-start; }
  .cta-banner__right { flex-basis: auto; }

  /* Footer → stacked */
  .site-footer__grid { flex-direction: column; }
  .site-footer__newsletter { flex-basis: auto; }

}

/* Interior pages — mobile layout transformations */
@media (max-width: 768px) {
  /* Pedigree copy + list → stacked */
  .pedigree__grid { flex-direction: column; }

  /* Our Approach eyebrow + copy → stacked, all left aligned */
  .approach__grid { flex-direction: column; }
  .holistic__split { grid-template-columns: 1fr; }
  .approach__grid > .eyebrow { flex-basis: auto; }

  /* Advisory solutions copy + rows → stacked; tiles become a swipeable row
     with their descriptions open (no hover on touch) */
  .solutions__grid { flex-direction: column; }
  .solutions__copy { flex-basis: auto; max-width: none; margin-bottom: 20px; }
  .solutions__copy h2 { white-space: normal; }
  .solutions__list {
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--section-pad-x));
    padding-inline: var(--section-pad-x);
    scroll-padding-inline: var(--section-pad-x);
  }
  .solutions__list::-webkit-scrollbar { display: none; }
  .solutions__list { flex-direction: row; }
  .solutions__list li { flex: 0 0 min(82%, 340px); scroll-snap-align: start; align-self: stretch; display: flex; }
  .solution__link { flex: 1 1 auto; display: flex; flex-direction: column; }
  .solution__reveal {
    flex: 1 1 auto;
    grid-template-rows: max-content 1fr;
    background: #24405e;
    border-color: rgba(255, 255, 255, 0.35);
  }
  .solution__desc { opacity: 1; padding-top: 10px; }
  .solution__arrow { opacity: 1; }

  /* Industries / Property Types → swipeable row, two tiles per view, arrows below */
  .range__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--section-pad-x));
    width: auto;
    align-self: stretch;
    padding-inline: var(--section-pad-x);
    scroll-padding-inline: var(--section-pad-x);
  }
  .range__grid::-webkit-scrollbar { display: none; }
  .range__grid li { flex: 0 0 calc(50% - 5px); max-width: none; scroll-snap-align: start; }
  /* Touch has no hover: show the photo state by default */
  .range__grid .range__tile { color: var(--white); text-shadow: 0 1px 8px rgb(0 0 0 / 0.35); }
  .range__tile .range__photo { opacity: 1; transform: scale(1); }
  .range__tile::after { opacity: 1; }
  .range--dark .range__tile .range__photo { opacity: 0.7; }
  .range__grid .range__tile { --accent: var(--white); }

  /* Team → two tiles per row */
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .team-tile__body { padding: 14px 12px 18px; }

  /* Insights quotes + notes → stacked */
  .insights-page__grid { flex-direction: column; }
  .insights-page__quotes { flex-basis: auto; width: 100%; }
  .market-card { flex-direction: column; align-items: stretch; }
  .market-card > img { flex-basis: auto; width: 100%; aspect-ratio: 5 / 2; }

  /* Resources Market Update stats + pull quotes → swipeable rows */
  .market-stats[data-scroller] {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(22px, 2.4vw, 34px));
    padding-inline: clamp(22px, 2.4vw, 34px);
    scroll-padding-inline: clamp(22px, 2.4vw, 34px);
  }
  .market-stats[data-scroller]::-webkit-scrollbar { display: none; }
  .market-stats[data-scroller] .market-stat { flex: 0 0 min(72%, 240px); scroll-snap-align: start; }
  .insights-page__quotes--row[data-scroller], .insights__quotes--top[data-scroller] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: auto;
    margin-inline: calc(-1 * var(--section-pad-x));
    padding-inline: var(--section-pad-x);
    scroll-padding-inline: var(--section-pad-x);
  }
  .insights-page__quotes--row[data-scroller]::-webkit-scrollbar, .insights__quotes--top[data-scroller]::-webkit-scrollbar { display: none; }
  .insights-page__quotes--row[data-scroller] .quote-card, .insights__quotes--top[data-scroller] .quote-card { flex: 0 0 min(85%, 340px); scroll-snap-align: start; }
  .insights-page__quotes--row[data-scroller] .quote-card--feature figcaption, .insights__quotes--top[data-scroller] .quote-card--feature figcaption { flex-wrap: wrap; gap: 10px; }
  .insights-page__quotes--row[data-scroller] .quote-card__link, .insights__quotes--top[data-scroller] .quote-card__link { flex-basis: 100%; margin-left: 0; }
  .insights-page__list a { padding-inline: 16px; }

  /* Contact info + form → stacked */
  .contact__grid { flex-direction: column; }
  .contact__form { flex-basis: auto; width: 100%; }

  /* Bio modal → photo above copy */
  .bio-modal__top { flex-direction: column; }
  .bio-modal__photo { flex-basis: auto; width: 100%; max-width: 347px; order: -1; }
}

/* Touch devices have no hover: keep the thesis detail lines visible */
@media (hover: none) {
  .skill-card__swap { display: block; }
  .skill-card__pillar,
  .skill-card__detail { visibility: visible; }
  .skill-card__detail { padding-top: 4px; }
}


/* Mobile modal rail → sticky vertical stack at the top right (close, next, previous) */
@media (max-width: 767px) {
  .modal__rail { order: -1; top: 12px; flex-direction: column; margin: 12px 12px -160px; }
  .modal__close, .modal__nav { width: 48px; height: 48px; }
  .modal__close img { width: 30px; height: 30px; }
  .modal__nav img { width: 26px; height: 26px; }
  .bio-modal__top { padding-right: 72px; }
}

@media (max-width: 900px) {
  /* Use of Proceeds → one row per scenario (five tiles would orphan in a grid) */
  .proceeds__list { grid-template-columns: minmax(0, 1fr); }
  .proceeds__item { flex-direction: row; align-items: center; }
}

@media (max-width: 600px) {
  .insights__logos li { flex-basis: calc((100% - 2 * var(--logo-gap)) / 3); }
}

@media (max-width: 640px) {
  .exp-banner--photo { min-height: 360px; padding-block: 56px; }
  .exp-banner--photo::after { background: linear-gradient(0deg, rgb(3 28 52 / 0.92) 10%, rgb(3 28 52 / 0.6) 100%); }
}