/*
  IKONA Partners — site styles.
  Built section-by-section from Figma fileKey Rgn8ra2sGlIcBlfNssUXGK using fluid responsive patterns.

  Section order matches Figma vertical order:
  1. Tokens / fonts / base / typography utilities
  2. Container / shared components (eyebrow, section heading, pill button)
  3. Header (nav)
  4. Hero
  5. Logo marquee
  6. Who We Are
  7. Transactions
  8. What We Look For
  9. Sectors
  10. Testimonials
  11. Team + bio modals
  12. FAQs
  13. Footer
  14. Marquee primitive (shared by logo-marquee, who-we-are, testimonials, footer)
  15. Mobile @media transformations — MUST BE LAST
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --c-ink: #0a0a0a;
  --c-ink-muted: #a5a5a5;
  --c-paper: #ffffff;
  --c-paper-muted: #f4f4f0;
  --c-teal: #026670;
  --c-teal-soft: #cce0e1;
  --c-dark: #0a0a0a;
  --c-dark-2: #141414;
  --c-line: rgba(10, 10, 10, 0.1);
  --c-line-dark: rgba(255, 255, 255, 0.12);

  --r-card: 16px;
  --r-card-lg: 20px;
  --r-section: 24px;
  --r-pill: 44px;

  --t-section-pad-y: clamp(48px, 4vw + 32px, 96px);
  --t-section-pad-x: clamp(20px, 3vw, 40px);

  /* Typography — fluid scales derived from desktop Figma at 1440px */
  --font-display: 'Instrument Sans', 'Stack Sans Headline', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Headlines (clamp = mobile_min, fluid_calc, desktop_max) */
  --fs-hero: clamp(3rem, 1.2rem + 8vw, 9.375rem);          /* 48px → 150px */
  --fs-h2: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);            /* 36px → 64px */
  --fs-h3: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem);        /* 28px → 42px */
  --fs-eyebrow: clamp(0.875rem, 0.78rem + 0.3vw, 1.125rem); /* 14px → 18px */
  --fs-lead: clamp(1.125rem, 0.95rem + 0.7vw, 1.6875rem);   /* 18px → 27px */
  --fs-body: clamp(0.9375rem, 0.88rem + 0.35vw, 1.125rem);  /* 15px → 18px */
  --fs-cta-lg: clamp(1.375rem, 1.15rem + 1vw, 2rem);        /* 22px → 32px */

  --lh-tight: 1.0;
  --lh-display: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.5;
}

/* ============================================================
   2. Fonts
   ============================================================ */
/* Inter — Google Fonts (loaded via <link> in base.njk) */
/* Instrument Sans — Google Fonts (loaded via <link> in base.njk) */
/* TODO: swap to licensed Stack Sans Headline webfont when designer provides files. See docs/assets-needed.md. */

/* ============================================================
   3. Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Always reserve scrollbar gutter — keeps page width constant whether scrollbar is
     visible or hidden. Critical for modal open: body.modal-open sets overflow:hidden
     which would normally remove the scrollbar and shift content rightward. With stable
     gutter, no shift happens. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { display: block; }

section[id] {
  scroll-margin-top: var(--header-h, 88px);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
  line-height: var(--lh-display);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img, video { max-width: 100%; height: auto; display: block; }

button { font: inherit; cursor: pointer; }

/* ============================================================
   4. Container / shared components
   ============================================================ */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--t-section-pad-x);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-ink);
  letter-spacing: 0;
}

.eyebrow img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.eyebrow--light { color: var(--c-paper); }

.eyebrow--light img {
  filter: invert(1) brightness(2);
}

.section-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: var(--lh-snug);
  margin-block: 0;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-pill);
  border: 0;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.pill-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.18);
}

.pill-btn__arrow {
  width: 0.875rem;
  height: 0.875rem;
  display: inline-block;
}

/* Reveal helper used by scroll-in animations */
[data-reveal] {
  --reveal-y: 16px;
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   5. Header / nav
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: clamp(20px, 2vw, 32px) clamp(28px, 3vw, 48px);
  transition: background 300ms ease, backdrop-filter 300ms ease, box-shadow 300ms ease, padding 300ms;
  margin: .75rem 1rem 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1440px;
  margin-inline: auto;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  height: 36px;
}

.site-header__logo img {
  height: 100%;
  width: auto;
  display: block;
}

/* logo-white.svg from the CDN is already white — no filter needed by default.
   When the header turns light (scrolled state), swap to the blue/ink variant. */
/* .site-header.is-scrolled .site-header__logo-mark {
  content: url('/images/brand/logo-blue.svg');
} */

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 45px);
}

.site-header__nav-list {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-link {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--c-paper);
  letter-spacing: -0.05em;
  line-height: 1.5;
  position: relative;
  transition: color 200ms ease;
}

.site-header__nav-link::after {
  content: '';
  position: absolute;
  inset: auto 0 -4px 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 250ms ease;
}

.site-header__nav-link:hover::after { transform: scaleX(1); }

.site-header__toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: flex-end;
}

.site-header__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--c-paper);
  transition: transform 250ms ease, opacity 250ms ease;
}

/* Scrolled state — solid background, ink text */
.site-header.is-scrolled {
  background: #1F3130;
  padding: clamp(20px, 1vw, 32px) clamp(28px, 3vw, 48px);
  border-radius: 1.125rem;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.06);
}

/* .site-header.is-scrolled .site-header__nav-link { color: var(--c-ink); } */
.site-header.is-scrolled .site-header__logo-mark { filter: none; }
.site-header.is-scrolled .site-header__toggle span { background: var(--c-ink); }

/* Non-hero pages (legal pages, thank-you, 404) have a light background, so the
   default transparent/white-text header would be invisible at the top. Render the
   solid pill state from load — the JS still toggles .is-scrolled on top of this,
   so scrolled behavior is unchanged. */
body:not(.has-hero) .site-header {
  background: #1F3130;
  border-radius: 1.125rem;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.06);
}

/* Mobile drawer is a body-level sibling of <header>. Hidden on desktop;
   the mobile @media block at the end of the file flips it to display:grid. */
.mobile-drawer { display: none; }

/* ============================================================
   6. Hero
   ============================================================ */
.hero {
  position: relative;
  margin: 16px;
  border-radius: var(--r-section);
  overflow: hidden;
  isolation: isolate;
  /* fill viewport minus hero's outer margin (16px×2) minus logo strip allowance (~130px)
     so the logo strip's top sliver peeks just above the fold on load. */
  min-height: calc(100vh + 8rem);
  color: var(--c-paper);
  display: flex;
  flex-direction: column;
  background: #08161e;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg-poster { z-index: 0; }
.hero__bg-video { z-index: 1; }
.overlay {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(52, 209, 224, 0.20) 0%, rgba(52, 209, 224, 0.20) 100%);
}

/* .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
} */

.hero__inner { z-index: 3; }

.hero__features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(96px, 13vh, 160px) clamp(24px, 3vw, 40px) clamp(40px, 6vh, 72px);
  gap: clamp(32px, 5vh, 64px);
  margin: 0 auto;
}

.hero__copy { max-width: min(60ch, 100%); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  color: var(--c-paper);
  text-transform: capitalize;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.hero__eyebrow-line {
  width: 53px;
  height: auto;
  flex-shrink: 0;
}

.hero__heading {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__heading span { display: block; }

.hero__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}

.hero__support {
  max-width: 35ch;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--c-paper);
}

.hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 60px);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-paper);
}

.hero__feature {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.hero__feature::before {
  content: '+';
  font-size: 1.15em;
  line-height: 1;
  color: var(--c-paper);
  opacity: 0.95;
}

/* Body anchor for header transparency control */
body.has-hero { padding-top: 0; }
body:not(.has-hero) { padding-top: 88px; }

/* ============================================================
   7. Logo Marquee — Figma 363:1202
   ============================================================ */
.logo-marquee {
  background: var(--c-paper);
  padding-block: 32px;
}

.logo-marquee__inner {
  position: relative;
  border-block: 1px dashed #e6e6e6;
  height: 98px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.logo-marquee__label {
  position: absolute;
  inset: 0 auto 0 clamp(20px, 3vw, 48px);
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--c-paper);
  padding-right: 32px;
  z-index: 2;
  max-width: clamp(260px, 27vw, 380px);
}

.logo-marquee__label p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0;
}

.logo-marquee__star {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.logo-marquee__track-wrap {
  /* Hard left edge at the label's right edge — logos physically cannot exist in the label region. */
  position: absolute;
  inset: 0 0 0 clamp(300px, 30vw, 440px);
  -webkit-mask-image: linear-gradient(to right, black 0, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, black 0, black 92%, transparent 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.logo-marquee__item {
  height: 48px;
  display: flex;
  align-items: center;
  padding-inline: clamp(24px, 3vw, 48px);
}

.logo-marquee__item img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.8);
  transition: filter 250ms ease;
}

.logo-marquee__item:hover img { filter: none; }

/* ============================================================
   Marquee primitive — shared by logo-marquee, who-we-are, testimonials, footer
   Uses CSS @keyframes for a smooth GPU-accelerated infinite loop.
   ============================================================ */
.marquee {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  backface-visibility: hidden;
}

.marquee__row {
  display: flex;
  align-items: self-end;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.who-we-are__marquee:nth-child(2) .marquee__row {
  align-items: self-start;
}

.marquee--scroll {
  animation: marquee-scroll linear infinite;
  animation-duration: 330s;
}

.marquee--scroll-reverse { animation-direction: reverse; }

/* Pause-on-hover is gated to real-pointer devices. On iOS the :hover state
   sticks to whatever the user last tapped, which would pause the marquee
   until they tap somewhere else — including any incidental tap on the page. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover { animation-play-state: paused; }
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee--scroll { animation: none; }
}

/* ============================================================
   8. Who We Are — Figma 363:1519
   ============================================================ */
.who-we-are {
  background: var(--c-paper);
  padding-top: 4rem;
  overflow: hidden;
}

.who-we-are__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(48px, 5vw, 96px);
}

.who-we-are__intro > .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.who-we-are__heading {
  grid-column: 1;
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2rem, 0.6rem + 4vw, 4rem);
  line-height: 1.25;
}

.who-we-are__cta {
  grid-column: 2;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--c-teal);
  font-family: var(--font-body);
  font-size: var(--fs-cta-lg);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  white-space: nowrap;
  transition: transform 250ms ease;
}

.who-we-are__cta:hover { transform: translateX(4px); }

.who-we-are__cta img {
  width: clamp(20px, 2vw, 32px);
  height: clamp(20px, 2vw, 32px);
}

.cta-link { /* shared cta-link styling */
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   Per-word color-shift heading — driven by scroll-progress in main.js.
   Each .word gets its own --word-start / --word-end (set once by JS).
   The parent's --shift-progress (0 → 1) is updated on scroll.
   Inside each word, a hard-stop gradient is positioned at the
   threshold within that word — so words past the threshold are dark,
   words before are gray, and the one word straddling it gets a
   per-character dark→gray gradient.
   ============================================================ */
@property --shift-progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

[data-color-shift] {
  --shift-progress: 0;
  /* Feather width inside each word's gradient — soft transition band, in % of word width. */
  --feather: 35;
  color: var(--c-ink-muted);   /* fallback for engines without @property text-clip */
  /* No CSS transition — let JS scroll-driven --shift-progress update happen in real time.
     Each scroll frame sets the new value and the gradient repaints immediately, so the reveal
     tracks your scroll position exactly instead of lagging behind / continuing after you stop. */
}

[data-color-shift] .word {
  --word-start: 0;
  --word-end: 1;
  /* --word-fg / --word-bg are overridable from any ancestor so headings can animate
     to/from non-default colors. We use the fallback form var(--name, default) inside
     the gradient so ancestor declarations cascade correctly (a direct declaration on
     .word would block inheritance, which is why we don't set defaults here). */
  /* The threshold position WITHIN each word, 0..1. Scaled so the gradient band STARTS
     fully off-screen-left when progress = word-start (word fully bg) and ENDS fully
     off-screen-right when progress = word-end (word fully fg). No bleed at extremes. */
  background-image: linear-gradient(
    to right,
    var(--word-fg, var(--c-ink)) 0%,
    var(--word-fg, var(--c-ink))
      calc(
        ((var(--shift-progress) - var(--word-start))
          / (var(--word-end) - var(--word-start))
          * (100% + (var(--feather) * 2%)))
        - (var(--feather) * 1%)
        - (var(--feather) * 0.5%)
      ),
    var(--word-bg, var(--c-ink-muted))
      calc(
        ((var(--shift-progress) - var(--word-start))
          / (var(--word-end) - var(--word-start))
          * (100% + (var(--feather) * 2%)))
        - (var(--feather) * 1%)
        + (var(--feather) * 0.5%)
      ),
    var(--word-bg, var(--c-ink-muted)) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  [data-color-shift] { --shift-progress: 1; }
}

/* Dual marquee */
.who-we-are__marquees {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: clamp(64px, 6vw, 120px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* Mobile-only single-row scroll strip — replaces the dual marquee on small
   viewports. Hidden by default; the mobile @media block flips display + hides
   the desktop marquees. */
.who-we-are__strip { display: none; }

.who-we-are__marquee {
  width: max-content;
}

.who-we-are__tile {
  position: relative;
  flex-shrink: 0;
  margin-inline: 12px;
  width: clamp(320px, 35vw, 540px);
  aspect-ratio: 1 / .45;
  border-radius: var(--r-card-lg);
  overflow: hidden;
  isolation: isolate;
}
.who-we-are__marquee:nth-child(1) .who-we-are__tile:nth-child(3) {
  aspect-ratio: 1 / .5;
}
.who-we-are__marquee:nth-child(2) .who-we-are__tile:nth-child(3){
  aspect-ratio: 1 / .5;
}

.who-we-are__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.who-we-are__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.5vw, 32px);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.who-we-are__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.7rem + 0.5vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-paper);
  text-align: center;
  text-wrap: balance;
  margin: 0;
}

.who-we-are__tile:hover .who-we-are__overlay,
.who-we-are__tile:focus-within .who-we-are__overlay {
  opacity: 1;
}

.who-we-are__tile:hover img {
  transform: scale(1.02);
}

/* Pause BOTH marquees the moment the cursor enters the marquees container.
   Hovering directly on .who-we-are__marquee fails because tiles slide away
   from the cursor before :hover registers. Hovering the static parent
   (.who-we-are__marquees) catches the cursor early so tiles stop, and then
   the per-tile hover overlay can reliably trigger.
   Gated to real-pointer devices for the same iOS sticky-hover reason. */
@media (hover: hover) and (pointer: fine) {
  .who-we-are__marquees:hover .who-we-are__marquee {
    animation-play-state: paused;
  }
}

/* ============================================================
   9. Transactions — Figma 363:1261. Dark, sticky heading, See More
   ============================================================ */
.transactions {
  background: #1f3130;
  color: var(--c-paper);
  position: relative;
  padding-top: 2rem;
  /* No overflow:hidden here — it would break position:sticky on .transactions__sticky. */
}

.transactions__sticky {
  position: sticky;
  top: var(--header-h, 88px);
  z-index: 0;
  /* The pinned box stretches across the viewport. Without this, it intercepts
     clicks on .transactions__more below whenever they overlap vertically. */
  pointer-events: none;
  padding-block: clamp(16px, 1.5vw, 24px) clamp(32px, 4vw, 60px);
  background: linear-gradient(180deg, #1f3130 0%, #1f3130 65%, rgba(31, 49, 48, 0) 100%);
  filter: blur(var(--blur-amount, 0px));
  transition: filter 80ms linear;
}

.transactions__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 1.5vw, 20px);
}

.transactions__intro .eyebrow { color: var(--c-paper); }

.transactions__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.5rem + 5.5vw, 6.25rem);   /* 40px → 100px */
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin: 0;
}

/* Card grid — 16-col template captures Figma's proportions and alignment.
   Large cards span 5 cols (≈31%), small cards span 4 cols (≈25%, slightly bigger
   than Figma's 22% to give the long stat labels room to breathe).
   `.` spacer cells absorb inter-card gutters. col-gap=0 so widths stay exact.
   Per-position align-self below mirrors Figma's deliberate top/bottom anchoring per row.
   Mobile collapses to 1 col. */
.transactions__cards {
  /* Cards layer above the pinned title so they pass IN FRONT of it as they scroll up. */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  /* Default — Figma 363:1261 composition for the initial 12 cards only.
     The See-More rows are added by the [data-expanded="true"] override below
     (and only then) so the unexpanded state doesn't reserve empty row space. */
  grid-template-areas:
    "p1  p1  p1  p1  p1  .   p2  p2  p2  p2  .   p3  p3  p3  p3  p3"
    ".   .   p4  p4  p4  p4  p4  .   .   p5  p5  p5  p5  p5  .   . "
    "p6  p6  p6  p6  .   p7  p7  p7  p7  p7  .   .   p8  p8  p8  p8"
    "p9  p9  p9  p9  p9  .   p10 p10 p10 p10 .   p11 p11 p11 p11 p11"
    ".   .   .   .   .   .   p12 p12 p12 p12 p12 .   .   .   .   . ";
  column-gap: 0;
  row-gap: clamp(36px, 4.5vw, 65px);
  padding-block: clamp(48px, 6vw, 96px);
  align-items: stretch;
}

/* Extend the grid only as far as the last revealed card so empty named rows
   never reserve space. Batches map to grid-row ranges:
     batch=1 → adds rows 6-9 (cards 13-23)
     batch=2 → adds rows 10-13 (cards 24-32) */
.transactions[data-revealed-batch="1"] .transactions__cards,
.transactions[data-revealed-batch="2"] .transactions__cards {
  grid-template-areas:
    "p1  p1  p1  p1  p1  .   p2  p2  p2  p2  .   p3  p3  p3  p3  p3"
    ".   .   p4  p4  p4  p4  p4  .   .   p5  p5  p5  p5  p5  .   . "
    "p6  p6  p6  p6  .   p7  p7  p7  p7  p7  .   .   p8  p8  p8  p8"
    "p9  p9  p9  p9  p9  .   p10 p10 p10 p10 .   p11 p11 p11 p11 p11"
    ".   .   .   .   .   .   p12 p12 p12 p12 p12 .   .   .   .   . "
    "p13 p13 p13 p13 .   p14 p14 p14 p14 p14 .   .   p15 p15 p15 p15"
    ".   .   p16 p16 p16 p16 p16 .   .   p17 p17 p17 p17 p17 .   . "
    "p18 p18 p18 p18 p18 .   p19 p19 p19 p19 .   p20 p20 p20 p20 p20"
    "p21 p21 p21 p21 .   p22 p22 p22 p22 p22 .   .   p23 p23 p23 p23";
}

.transactions[data-revealed-batch="2"] .transactions__cards {
  grid-template-areas:
    "p1  p1  p1  p1  p1  .   p2  p2  p2  p2  .   p3  p3  p3  p3  p3"
    ".   .   p4  p4  p4  p4  p4  .   .   p5  p5  p5  p5  p5  .   . "
    "p6  p6  p6  p6  .   p7  p7  p7  p7  p7  .   .   p8  p8  p8  p8"
    "p9  p9  p9  p9  p9  .   p10 p10 p10 p10 .   p11 p11 p11 p11 p11"
    ".   .   .   .   .   .   p12 p12 p12 p12 p12 .   .   .   .   . "
    "p13 p13 p13 p13 .   p14 p14 p14 p14 p14 .   .   p15 p15 p15 p15"
    ".   .   p16 p16 p16 p16 p16 .   .   p17 p17 p17 p17 p17 .   . "
    "p18 p18 p18 p18 p18 .   p19 p19 p19 p19 .   p20 p20 p20 p20 p20"
    "p21 p21 p21 p21 .   p22 p22 p22 p22 p22 .   .   p23 p23 p23 p23"
    "p24 p24 p24 p24 p24 .   p25 p25 p25 p25 p25 .   p26 p26 p26 p26"
    ".   .   p27 p27 p27 p27 p27 .   .   p28 p28 p28 p28 p28 .   . "
    "p29 p29 p29 p29 p29 .   p30 p30 p30 p30 .   p31 p31 p31 p31 p31"
    ".   .   .   .   .   .   p32 p32 p32 p32 .   .   .   .   .   . ";
}

.transactions__card {
  /* Outer card chip. Solid color (not rgba) so the blurred sticky title cannot bleed
     through translucent layers as cards pass over it. Color = section bg + 6% white blend. */
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  background: #2d3f3e;
  border-radius: 21.4px;
  padding: clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px) clamp(16px, 1.5vw, 22px);
  cursor: default;
  border: 0;
}

/* Per-position assignment — maps 1:1 to Figma layout at node 363:1261.
   align-self mirrors Figma's deliberate top/bottom anchoring per row:
   smalls flush with adjacent larges, not floating centered. */
.transactions__card--pos-1  { grid-area: p1; }
.transactions__card--pos-2  { grid-area: p2;  align-self: end;   } /* Bonafide: bottom-flush row 1 */
.transactions__card--pos-3  { grid-area: p3; }
.transactions__card--pos-4  { grid-area: p4; }
.transactions__card--pos-5  { grid-area: p5; }
.transactions__card--pos-6  { grid-area: p6;  align-self: start; } /* SmartPass: top-flush row 3 */
.transactions__card--pos-7  { grid-area: p7; }
.transactions__card--pos-8  { grid-area: p8;  align-self: start; } /* Intelligent Audit: top-flush row 3 */
.transactions__card--pos-9  { grid-area: p9; }
.transactions__card--pos-10 { grid-area: p10; align-self: start; } /* Rental History: top-flush row 4 */
.transactions__card--pos-11 { grid-area: p11; }
.transactions__card--pos-12 { grid-area: p12; }

/* See-More positions — same align-self pattern as initial 12 (small cards
   anchor top or bottom flush with adjacent larges instead of floating centered). */
.transactions__card--pos-13 { grid-area: p13; align-self: start; }
.transactions__card--pos-14 { grid-area: p14; }
.transactions__card--pos-15 { grid-area: p15; align-self: start; }
.transactions__card--pos-16 { grid-area: p16; }
.transactions__card--pos-17 { grid-area: p17; }
.transactions__card--pos-18 { grid-area: p18; }
.transactions__card--pos-19 { grid-area: p19; align-self: end;   }
.transactions__card--pos-20 { grid-area: p20; }
.transactions__card--pos-21 { grid-area: p21; align-self: start; }
.transactions__card--pos-22 { grid-area: p22; }
.transactions__card--pos-23 { grid-area: p23; align-self: start; }
.transactions__card--pos-24 { grid-area: p24; }
.transactions__card--pos-25 { grid-area: p25; }
.transactions__card--pos-26 { grid-area: p26; align-self: end;   }
.transactions__card--pos-27 { grid-area: p27; }
.transactions__card--pos-28 { grid-area: p28; }
.transactions__card--pos-29 { grid-area: p29; }
.transactions__card--pos-30 { grid-area: p30; align-self: end;   }
.transactions__card--pos-31 { grid-area: p31; }
.transactions__card--pos-32 { grid-area: p32; }

.transactions__card-inner {
  position: relative;
  width: 100%;
  border-radius: 14.4px;
  background: #314342;
  overflow: hidden;
  isolation: isolate;
  transition: background 250ms ease;
}

/* Large card inner box — Figma 441/194 ≈ 2.27:1 */
.transactions__card--large .transactions__card-inner { aspect-ratio: 441 / 194; }
/* Small card inner box — Figma 298/120 ≈ 2.48:1 */
.transactions__card--small .transactions__card-inner { aspect-ratio: 298 / 120; }

/* Ensure inner box has a minimum height so wide logos still appear large. */
.transactions__card-inner { min-height: 130px; }
.transactions__card--small .transactions__card-inner { min-height: 100px; }

.transactions__card:hover { background: #324443; }

.transactions__card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px);
  transition: opacity 280ms ease;
}

.transactions__card-face--default { opacity: 1; }

/* Hover state — Figma 363:564 (large), 363:789 (small).
   Large cards: mint-green (#62d8b5). Small cards: gold (#bf9000). */
.transactions__card-face--hover {
  opacity: 0;
  background: #bf9000;
  color: #0a0a0a;
  border-radius: inherit;
  padding: clamp(14px, 1.8vw, 24px);
}

.transactions__card--large .transactions__card-face--hover {
  background: #62d8b5;
}

.transactions__card:hover .transactions__card-face--default { opacity: 0; }
.transactions__card:hover .transactions__card-face--hover { opacity: 1; }

.transactions__card-face--default img {
  /* Logo bounding box mirrors Figma masks (~85% width / ~60% height of inner box).
     Default: force every logo to a white silhouette so dark-on-transparent source
     files read on the dark card. Cards whose source has a baked-in background
     (flagged with [data-logo-bg="baked"] from the template) opt out below. */
  width: 85%;
  height: 65%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* .transactions__card[data-logo-bg="baked"] .transactions__card-face--default img {
  filter: none;
} */

/* Small cards have a tighter mask region in Figma — back off slightly. */
.transactions__card--small .transactions__card-face--default img {
  width: 78%;
  height: 100%;
}

.transactions__card-name {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem);
  font-weight: 500;
  color: var(--c-paper);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.transactions__card--small .transactions__card-name {
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem);
}

/* Hover stats — value + label pairs separated by a vertical dashed divider.
   Same 2-column layout on large AND small cards (only fonts and gaps scale down). */
.transactions__card-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vw, 53px);
  width: 100%;
}

.transactions__card--small .transactions__card-stats {
  gap: clamp(14px, 2.5vw, 36px);
}

.transactions__card-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.transactions__card--small .transactions__card-stat {
  gap: 3px;
}

.transactions__card-stat-value {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 0.75rem + 1.5vw, 2.125rem);
  line-height: 1;
}

.transactions__card--small .transactions__card-stat-value {
  font-size: clamp(1rem, 0.75rem + 0.5vw, 1.25rem);
}

.transactions__card-stat-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.6875rem, 0.6rem + 0.2vw, 0.75rem);
  line-height: 1.25;
  text-wrap: balance;
}

.transactions__card--small .transactions__card-stat-label {
  font-size: clamp(0.625rem, 0.55rem + 0.1vw, 0.6875rem);
}

.transactions__card-stat-divider {
  flex: 0 0 1px;
  align-self: stretch;
  margin-block: clamp(8px, 1.2vw, 16px);
  border-left: 1px dashed currentColor;
  opacity: 0.6;
}

.transactions__card--small .transactions__card-stat-divider {
  margin-block: clamp(6px, 0.8vw, 10px);
}

.transactions__card-desc {
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.transactions__card--hidden { display: none; }

/* JS flips data-hidden to "false" on each batch of 12 cards revealed via the
   "See More" button. Per-card visibility is gated here; the section-level
   data-expanded flag separately gates the See-More grid rows in .transactions__cards. */
.transactions__card--hidden[data-hidden="false"] {
  display: flex;
  animation: card-reveal 400ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--reveal-delay, 0) * 30ms);
}

@keyframes card-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "See More" reveal — Figma 127:2200 (default), 127:2201 (hover).
   The dashed band fills with teal #026670 on hover, text + arrow stay white. */
.transactions__more-wrap {
  /* Stack above .transactions__sticky (z-index: 0), matching .transactions__cards.
     Without this, the blurred pinned heading bleeds through the See More text. */
  position: relative;
  z-index: 1;
  border-block: 1px dashed var(--c-teal);
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  transition: background-color 220ms ease;
}

.transactions__more-wrap:hover { background: #026670; }

.transactions__more {
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
  padding-block: clamp(20px, 2.5vw, 28px);
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: var(--fs-cta-lg);
  font-weight: 500;
  letter-spacing: -0.03em;
  cursor: pointer;
}

.transactions__more-arrow {
  width: clamp(20px, 2vw, 32px);
  height: clamp(20px, 2vw, 32px);
  /* SVG ships as black; invert to white for the dark band. */
  filter: brightness(0) invert(1);
}

/* ============================================================
   10. What We Look For — Figma 363:1231
   ============================================================ */
.wwlf {
  background: rgba(31, 49, 48, 0.1);
  padding-block: clamp(48px, 5vw, 80px);
}

.wwlf__inner { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }

.wwlf__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 48px);
}

.wwlf__stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wwlf__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 0.5rem + 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--c-ink);
  margin: 0;
}

.wwlf__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0;
}

.wwlf__note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(31, 49, 48, 0.08);
  padding: 14px 20px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
  line-height: 1.5;
  margin: 0;
}

.wwlf__note img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.wwlf__note strong {
  font-weight: 700;
}

/* ============================================================
   11. Sectors — Figma 363:1214. Scroll-driven sequential active state
   ============================================================ */
.sectors {
  background: var(--c-paper);
  padding: 4rem 0;
}

.sectors__inner { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 80px); }

.sectors__header {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
}

.sectors__header .eyebrow { grid-column: 1 / -1; }

.sectors__heading {
  font-size: clamp(2.5rem, 0.8rem + 5vw, 5rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: none;
}

/* Color-shift headings where some words animate TO --c-ink-muted (instead of full
   --c-ink). The initial color must read clearly lighter than --c-ink-muted so those
   muted-target words still have a visible reveal. */
.sectors__heading,
.team__heading,
.faqs__heading,
.who-we-are__heading {
  --word-bg: color-mix(in srgb, var(--c-ink-muted) 40%, var(--c-paper) 60%);
}

.sectors__heading .word--muted-target,
.team__heading .word--muted-target,
.faqs__heading .word--muted-target,
.who-we-are__heading .word--muted-target {
  --word-fg: var(--c-ink-muted);
}

.sectors__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.125rem);
  line-height: 1.5;
  color: #5D5D5D;
  margin: 0;
  max-width: 38ch;
  /* Anchor the sub-copy roughly at the vertical midpoint of the heading.
     align-self: center keeps it centered relative to the tall heading on the left. */
  align-self: center;
}

.sectors__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sectors__item {
  border-top: 1px solid #232323;
  position: relative;
  transition: background 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.sectors__item:last-child { border-bottom: 1px solid #232323; }

.sectors__row {
  display: grid;
  /* Lead takes the lion's share so long names like "Govtech and Non-profit"
     fit on a single line; desc column is narrow so the parenthetical detail
     wraps to a tidy multi-line block at the right. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 64px);
  align-items: start;
  padding: clamp(32px, 3.5vw, 56px) 0;
  min-height: 180px;
  transition: padding 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sectors__lead {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 16px);
}

.sectors__name-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.sectors__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 0.4rem + 4vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--c-ink);
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.sectors__index {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.5rem);
  color: var(--c-ink);
  line-height: 1;
  margin-top: clamp(8px, 1vw, 16px);
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.sectors__title {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
  line-height: 1.5;
  color: #5D5D5D;
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.sectors__desc {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
  line-height: 1.5;
  color: #5D5D5D;
  margin: 0;
  /* Drop the right-column detail to align optically with the name's cap height,
     matching the index's offset. */
  margin-top: clamp(8px, 1vw, 16px);
  max-width: 38ch;
  transition: color 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.sectors__desc::first-letter { text-transform: uppercase; }

/* Active state — full row dark, white text. Scroll-driven only (no :hover).
   The "indent" is achieved with translateX on the name+desc — purely visual, doesn't
   change row width and doesn't reflow text (preventing the layout-jump issue). */
.sectors__item[data-active="true"] {
  background: #1f3130;
}

.sectors__item[data-active="true"] .sectors__name,
.sectors__item[data-active="true"] .sectors__index,
.sectors__item[data-active="true"] .sectors__title,
.sectors__item[data-active="true"] .sectors__desc {
  color: var(--c-paper);
}

/* Smooth translateX indent for active row contents — applied to the name+index group
   and the description independently so they shift together without reflowing.
   Slight stagger: the transform delays 60ms behind the color shift, so the row "settles"
   into its active state rather than snapping. GPU-composited via will-change. */
.sectors__lead,
.sectors__desc {
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1) 60ms;
}

.sectors__item[data-active="true"] .sectors__lead {
  transform: translateX(clamp(16px, 3vw, 40px));
}

.sectors__item[data-active="true"] .sectors__desc {
  transform: translateX(calc(-1 * clamp(16px, 3vw, 40px)));
}

/* ============================================================
   12. Testimonials — Figma 363:1281. Dark, two-row opposite-direction marquee
   ============================================================ */
.testimonials {
  background: #1f3130;
  color: var(--c-paper);
  padding: 3.75rem 0;
  overflow: hidden;
}

.testimonials__intro {
  display: grid;
  /* Heading takes ~60% on the left; sub-copy sits in a right-anchored ~30% column
     with extra empty space between them, pushing the sub further right per Figma. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  column-gap: clamp(60px, 10vw, 180px);
  align-items: end;
  margin-bottom: clamp(48px, 5vw, 96px);
}

.testimonials__intro .eyebrow { color: var(--c-paper); }

/* Testimonials uses the cyan-fill outline variant — no inversion needed (override .eyebrow--light img filter). */
.testimonials__eyebrow img { filter: none; }

.testimonials__heading {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 0.6rem + 5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--c-paper);
  margin: clamp(16px, 2vw, 32px) 0 0;
}

.testimonials__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.125rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 40ch;
}

.testimonials__marquees {
  display: flex;
  flex-direction: column;
  gap: 32px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* Manual horizontal scroll on each row — replaces the previous CSS-keyframe
   auto-marquee. Mirrors the footer image strip pattern: native overflow scroll
   gives touch-swipe on mobile and trackpad / mouse-wheel on desktop, snap
   aligns each card to the row's left edge, and scrollbars stay hidden.
   overscroll-behavior-x: contain prevents horizontal swipes from leaking
   into page-level history navigation. */
.testimonials__marquee {
  overflow-x: auto;
  /* No scroll-snap here — Safari (and to a lesser extent Chrome) snaps even
     during JS-driven scrollLeft updates, which yanks the auto-advance back
     each frame and freezes the loop. Cards have consistent widths, so manual
     scroll still reads cleanly without snap assistance. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonials__marquee::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex-shrink: 0;
  width: clamp(340px, 28vw, 413px);
  margin-inline: 10px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  /* Stretch to the row's max height so every card matches the tallest neighbor;
     the footer's margin-top: auto pushes the name/title to the bottom of each card. */
}

.testimonial-card__icon { width: 28px; height: 28px; flex-shrink: 0; margin-bottom: 8px; }

.testimonial-card__quote {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--c-paper);
  margin: 0 0 32px;
}

.testimonial-card__footer { margin-top: auto; }

.testimonial-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-paper);
  margin: 0;
  line-height: 1.2;
}

.testimonial-card__title {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 4px 0 0;
}

/* Cards stretch to a uniform height per row, sized to the tallest quote. */
.testimonials__marquee .marquee__row {
  align-items: stretch;
}

/* ============================================================
   13. Team — Figma 363:1432 + bio modals
   ============================================================ */
.team {
  background: var(--c-paper);
  padding-top: 4rem;
}

.team__inner { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 80px); }

.team__header {
  /* Mirror the team__grid layout so the sub-copy aligns with the info card's text below.
     The team grid is 4 columns; heading takes the left half (cols 1-2), sub-copy takes
     the right half (cols 3-4) where the gray info card sits below. Sub-copy then has
     30px padding-left to match the info card's internal text inset. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: end;
}

.team__header > div {
  grid-column: 1 / span 2;
}

.team__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.8rem + 4.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: clamp(16px, 2vw, 32px) 0 0;
}


.team__sub {
  grid-column: 3 / -1;
  /* 30px = the info card's internal padding (.team__info { padding: 30px }) so
     this text's left edge aligns vertically with the "We solely represent..." text below. */
  padding-left: 30px;
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.125rem);
  line-height: 1.5;
  color: #5d5d5d;
  margin: 0;
  max-width: 50ch;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.team-card {
  position: relative;
  aspect-ratio: 325 / 321;
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: rgba(33, 33, 33, 0.05);
  display: block;
  width: 100%;
  isolation: isolate;
}

.team-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to top so the headshot's face never gets cropped from the top edge,
     regardless of the card's aspect ratio (which may differ from the photo's). */
  object-position: top center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.team-card:hover .team-card__photo { transform: scale(1.03); }

.team-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--c-paper);
  text-align: left;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 350ms ease, transform 350ms ease;
}

.team-card:hover .team-card__overlay,
.team-card:focus-visible .team-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

.team-card__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

.team-card__role {
  font-family: var(--font-body);
  font-size: 0.875rem;
  margin: 4px 0 0;
  opacity: 0.85;
}

.team__info {
  position: relative;
  grid-column: span 2;
  background: rgba(33, 33, 33, 0.05);
  border-radius: var(--r-card);
  padding: 30px;
  overflow: hidden;
  aspect-ratio: 670 / 321;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
}

@container (max-width: 600px) {
  .team__info { grid-column: span 1; aspect-ratio: auto; }
}

.team__info-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(50%, 60%, 417px);
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}

.team__info-text,
.team__info-stat {
  position: relative;
  z-index: 1;
}

.team__info-text {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
  line-height: 1.5;
  color: #3a3a3a;
  margin: 0;
  max-width: 75%;
}

.team__info-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1rem + 3vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1;
}

.team__info-label {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: #5d5d5d;
  margin: 8px 0 0;
}

/* ============================================================
   Modal — full-screen mobile, centered desktop
   Used by Team bio modals.
   ============================================================ */
.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  inset: 0;
  /* Smooth entry — fade + soft scale-up. Native <dialog> snaps open by default,
     this animation softens it. The `display` transition + @starting-style is needed
     so the keyframes run on the very first open (instead of being skipped). */
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              overlay 280ms allow-discrete,
              display 280ms allow-discrete;
}

.modal[open] {
  opacity: 1;
  pointer-events: auto;
}

@starting-style {
  .modal[open] { opacity: 0; }
}

.modal::backdrop {
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              overlay 280ms allow-discrete,
              display 280ms allow-discrete;
}

.modal[open]::backdrop { opacity: 1; }

@starting-style {
  .modal[open]::backdrop { opacity: 0; }
}

.modal__panel {
  position: fixed;
  inset: 0;
  background: var(--c-paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  /* Subtle scale + translate-y entrance — pairs with the .modal opacity fade. */
  transform: translateY(8px) scale(0.985);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.modal[open] .modal__panel {
  transform: translateY(0) scale(1);
}

@starting-style {
  .modal[open] .modal__panel { transform: translateY(8px) scale(0.985); }
}

.modal__close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  margin: clamp(12px, 2vw, 20px);
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.modal__close:focus { outline: none; }
.modal__close:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
}

/* Team modal — uses teal X button (Figma 195:93) */
.team-modal__close {
  background: var(--c-teal);
  color: var(--c-paper);
}

.team-modal__close:focus-visible {
  outline-color: var(--c-paper);
}

.team-modal__close img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Scroll lock — `scrollbar-gutter: stable` on <html> means hiding the scrollbar via
   overflow: hidden no longer shifts the page rightward. */
body.modal-open { overflow: hidden; }

/* Team modal — dark left panel (image), white right panel (content) */
.team-modal__panel {
  display: flex;
  flex-direction: column;
}

.team-modal__left {
  flex: 0 0 auto;
  height: 50vh;
  background: var(--c-ink);
  position: relative;
}

.team-modal__left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Top-anchored — never crop from the top of the headshot. */
  object-position: top center;
}

.team-modal__right {
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--c-paper);
}

.team-modal__head { display: flex; flex-direction: column; gap: 6px; }

.team-modal__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.375rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  color: var(--c-ink);
}

.team-modal__last { color: var(--c-ink-muted); }

.team-modal__role {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #5d5d5d;
  margin: 0;
  font-weight: 400;
}

.team-modal__rule {
  border: 0;
  border-top: 1px solid #e6e6e6;
  margin: 0;
}

.team-modal__icons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.team-modal__icons img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.7;
}

.team-modal__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 4px;
  transition: background 200ms ease, opacity 200ms ease;
}

.team-modal__icon-link:hover {
  background: rgba(2, 102, 112, 0.08);
  opacity: 1;
}

.team-modal__icon-link:focus-visible {
  outline: 2px solid var(--c-accent, #026670);
  outline-offset: 2px;
}

.team-modal__bio {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #5d5d5d;
}

.team-modal__bio p { margin-block: 0 1em; }
.team-modal__bio p:last-child { margin-bottom: 0; }

/* Desktop layout (and short-height landscape phones): 2-column with dark image
   left, content right. The portrait mobile fallback above stacks image on top
   at 50vh — on phone-landscape that crops to "foreheads only" and forces the
   user to scroll past >2 screens of content, so we use this same horizontal
   layout there too. */
@media (min-width: 768px), (orientation: landscape) and (max-height: 500px) {
  .modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal__panel {
    position: relative;
    inset: auto;
    margin: auto;
    width: min(1000px, 92vw);
    max-height: 88vh;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
    overflow: hidden;
  }
  .team-modal__panel {
    flex-direction: row;
    position: relative;
  }
  .team-modal__left {
    flex: 0 0 clamp(180px, 40vw, 341px);
    height: auto;
    background: transparent;
  }
  .team-modal__right {
    flex: 1 1 auto;
    overflow-y: auto;
    gap: 20px;
    padding: 30px;
  }
  .team-modal__close {
    position: absolute;
    top: 30px;
    right: 30px;
    margin: 0;
    z-index: 3;
  }
}

/* ============================================================
   14. FAQs — Figma 412:1300. Accordion +/-, exclusive (one open).
   ============================================================ */
.faqs {
  background: var(--c-paper);
  padding: 4rem 0;
}

.faqs__inner { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 80px); }

.faqs__header { text-align: left; }

.faqs__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.8rem + 4.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: clamp(16px, 2vw, 32px) 0 16px;
}

.faqs__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.5rem);
  line-height: 1.4;
  color: #5d5d5d;
  margin: 0;
}

/* FAQ pill-chip component — Figma 412:1311. Each item is a rounded light-gray pill
   with the question + a thin "+" icon on the right. Opens on hover (click on touch). */
.faqs__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq {
  background: #f3f3f3;
  border-radius: 44px;
  padding: 4px 8px;
  transition: border-radius 250ms ease;
}

.faq.is-open {
  border-radius: 28px;
  padding-bottom: 8px;
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2vw, 28px);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--c-ink);
  border-radius: 40px;
}

.faq__q { flex: 1 1 auto; text-wrap: balance; }

.faq__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq.is-open .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
}

.faq__answer-inner > div {
  padding: 0 clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: #3a3a3a;
  max-width: none;
}

.faq__answer-inner > div p { margin-block: 0 1em; }
.faq__answer-inner > div p:last-child { margin-bottom: 0; }

/* ============================================================
   Legal pages — Privacy Policy, Business Continuity Plan.
   Static text pages on base.njk; body:not(.has-hero) already clears
   the sticky header, so this just sets a readable measure + rhythm.
   ============================================================ */
.legal-page {
  padding: clamp(40px, 5vw, 80px) var(--t-section-pad-x) clamp(56px, 6vw, 112px);
}

.legal-page__shell {
  max-width: 760px;
  margin: 0 auto;
}

.legal-page__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-teal);
}

.legal-page__title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  color: var(--c-ink);
  text-wrap: balance;
}

.legal-page__subhead {
  margin: clamp(28px, 3vw, 44px) 0 12px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  text-wrap: balance;
}

.legal-page__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
}

.legal-page__body p {
  margin: 0 0 1.25em;
  text-wrap: pretty;
}

.legal-page__body p:last-child { margin-bottom: 0; }

/* ============================================================
   Footer — Figma 363:1453. Dark, image strip + newsletter + nav + LinkedIn.
   ============================================================ */
.site-footer {
  background: var(--c-paper);
  padding: 0 16px 16px;
}

.site-footer__shell {
  background: #1f3130;
  color: var(--c-paper);
  border-radius: var(--r-section);
  padding: clamp(24px, 3vw, 30px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
  overflow: hidden;
}

.site-footer__images {
  display: flex;
  gap: 16px;
  margin-bottom: clamp(40px, 4vw, 64px);
  overflow: hidden;
}

.site-footer__img {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 342 / 239;
  border-radius: var(--r-section);
  overflow: hidden;
}

.site-footer__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-footer__img:nth-child(3) img {
  object-position: top;
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 5vw, 96px);
  margin-bottom: 32px;
}

.site-footer__newsletter { max-width: 512px; display: flex; flex-direction: column; gap: 20px; }

.site-footer__newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0;
  color: var(--c-paper);
}

.newsletter-form {
  position: relative;
  display: flex;
  align-items: center;
}

.newsletter-form__input {
  flex: 1 1 auto;
  height: 56px;
  background: transparent;
  border: 1px solid #e6e6e6;
  border-radius: 100px;
  padding: 0 64px 0 24px;
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.newsletter-form__input::placeholder { color: rgba(255, 255, 255, 0.7); }

.newsletter-form__input:focus {
  outline: 2px solid var(--c-teal-soft);
  outline-offset: 2px;
}

.newsletter-form__submit {
  position: absolute;
  inset: 8px 8px 8px auto;
  width: 40px;
  height: 40px;
  background: var(--c-paper);
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.newsletter-form__submit img {
  width: 16px;
  height: 16px;
}

/* Inline submit feedback: hide the form, reveal the thank-you line in place */
.newsletter-form.is-submitted { display: none; }

.newsletter-form__success {
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.newsletter-form__success:focus { outline: none; }

.site-footer__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 44px;
  color: var(--c-paper);
  padding: 4px;
  transition: background 200ms ease;
}

.site-footer__linkedin:hover { background: rgba(255, 255, 255, 0.18); }

.site-footer__linkedin-icon {
  width: 16px;
  height: 16px;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.site-footer__col-title {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-paper);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

.site-footer__col a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 200ms ease;
}

.site-footer__col a:hover { color: var(--c-paper); }

.site-footer__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 32px 0 24px;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-paper);
  flex-wrap: wrap;
}

.site-footer__bottom p { margin: 0; }

.site-footer__legal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.site-footer__legal a { color: var(--c-paper); }

.site-footer__legal a:hover { color: var(--c-teal-soft); }

.site-footer__divider {
  color: var(--c-ink-muted);
}

/* Broker-dealer / FINRA disclosure — fine print, full width below the bottom row */
.site-footer__disclaimer {
  margin: clamp(20px, 2vw, 28px) 0 0;
  max-width: 70ch;
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  line-height: 1.5;
  color: var(--c-ink-muted);
  text-wrap: pretty;
}

/* Design credit — subtle, below the disclaimer */
.site-footer__credit {
  margin: clamp(12px, 1.5vw, 18px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  line-height: 1.5;
  color: var(--c-ink-muted);
}

.site-footer__credit a {
  color: var(--c-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}

.site-footer__credit a:hover { color: var(--c-paper); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   15. Mobile @media transformations — keep at end of file
   ============================================================ */
/* Header drawer activates for phones AND tablet-portrait. iPad portrait sits
   between 810–1024px in CSS pixels (iPad 9th gen 810, iPad Air 834, iPad Pro
   13" exactly 1024), and per CD convention receives the mobile drawer.
   Landscape on tablets stays on the desktop nav. */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
  /* Equalize visible insets on mobile: side padding 28px + 16px header
     margin = 44px to viewport edge. Top padding 40px lands the 36px-tall
     logo image at y=44 (40 + (44-36)/2), matching the side inset. */
  .site-header { padding: 40px clamp(28px, 5vw, 32px); }

  /* ---------- Mobile drawer (body-level <aside class="mobile-drawer">) ----------
     The drawer lives OUTSIDE the header — as a sibling of <header>, not a
     descendant. This is intentional: it removes every interaction the
     previous nested layout suffered from:
       - the header's stacking context can't trap the drawer
       - the header's backdrop-filter (scrolled state) can't establish a
         containing block that clips the drawer's `inset: 0`
       - the header's transitions can't desync with the drawer's fade
     The header (z-50) sits ABOVE the drawer (z-40) so the hamburger-to-X
     toggle remains tappable while the drawer is open.

     Desktop nav + inline CTA are not used at these breakpoints — hide them
     entirely and let the drawer carry its own copies. */
  .site-header__nav,
  .site-header__cta {
    display: none;
  }

  /* Show hamburger toggle */
  .site-header__toggle {
    display: inline-flex;
    position: relative;
  }

  /* When the drawer is open, fade the header's scrolled-state styling so
     the teal pill / shadow / blur don't visibly sit ON TOP of the drawer.
     Logo and toggle stay visible (they have their own colors). Timed to
     match the drawer's 260ms fade so the two motions read as one. */
  body.is-nav-open .site-header {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
      background 260ms cubic-bezier(0.2, 0, 0, 1),
      box-shadow 260ms cubic-bezier(0.2, 0, 0, 1),
      backdrop-filter 260ms cubic-bezier(0.2, 0, 0, 1),
      -webkit-backdrop-filter 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  /* ---------- Drawer panel ---------- */
  .mobile-drawer {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #026670;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 260ms;
  }

  .mobile-drawer__inner {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(96px, 16vh, 140px) clamp(44px, 11vw, 64px) clamp(48px, 9vh, 80px);
    gap: clamp(40px, 8vh, 72px);
  }

  /* "Menu" eyebrow — tracked-out label above the link list */
  .mobile-drawer__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-paper);
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    padding-bottom: clamp(16px, 3vh, 24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  /* Editorial link column */
  .mobile-drawer__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: start;
  }
  .mobile-drawer__list > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  .mobile-drawer__link {
    font-family: var(--font-display, 'Stack Sans Headline'), serif;
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--c-paper);
    text-decoration: none;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: clamp(16px, 5vw, 28px);
    padding: clamp(20px, 3.5vh, 32px) 0;
  }

  .mobile-drawer__num {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--c-paper);
    opacity: 0.5;
    transform: translateY(-0.4em);
  }

  .mobile-drawer__label {
    display: inline-block;
    transition: transform 250ms ease;
  }
  .mobile-drawer__link:active .mobile-drawer__label { transform: translateX(4px); }

  /* CTA pill at the baseline of the column */
  .mobile-drawer__cta {
    justify-self: start;
    background: var(--c-paper);
    color: var(--c-ink);
    width: max-content;
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  /* ---------- OPEN STATE ----------
     Drawer fades (0-260ms); children cascade-rise on the same easing with
     tight delays so the entire reveal completes within ~480ms in ONE
     motion. No staggered keyframes, no separate panel transitions. */
  body.is-nav-open { overflow: hidden; }

  body.is-nav-open .mobile-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 0s;
  }

  body.is-nav-open .mobile-drawer__eyebrow {
    opacity: 0.55;
    transform: translate3d(0, 0, 0);
    transition-delay: 60ms;
  }
  body.is-nav-open .mobile-drawer__list > li:nth-child(1) {
    opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 100ms;
  }
  body.is-nav-open .mobile-drawer__list > li:nth-child(2) {
    opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 140ms;
  }
  body.is-nav-open .mobile-drawer__list > li:nth-child(3) {
    opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 180ms;
  }
  body.is-nav-open .mobile-drawer__cta {
    opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 220ms;
  }

  /* Hamburger → X morph (toggle is in the header, visible above drawer) */
  body.is-nav-open .site-header__toggle span { background: var(--c-paper); }
  body.is-nav-open .site-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.is-nav-open .site-header__toggle span:nth-child(2) { opacity: 0; }
  body.is-nav-open .site-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Backdrop blur on main content while drawer is open */
  main { transition: filter 260ms cubic-bezier(0.2, 0, 0, 1); }
  body.is-nav-open main { filter: blur(2px); }

  @media (prefers-reduced-motion: reduce) {
    .mobile-drawer__eyebrow,
    .mobile-drawer__list > li,
    .mobile-drawer__cta {
      transition: none;
      transform: none;
    }
    body.is-nav-open .mobile-drawer__eyebrow { opacity: 0.55; transition: none; }
    body.is-nav-open .mobile-drawer__list > li,
    body.is-nav-open .mobile-drawer__cta { opacity: 1; transition: none; }
  }
}

/* Phone-only layout adjustments (the drawer-activation rules above apply more
   broadly, but the section layouts below stay phone-only). */
@media (max-width: 768px) {

  .hero__inner {
    padding-top: clamp(112px, 16vh, 160px);
  }

  .hero__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .who-we-are__intro {
    grid-template-columns: 1fr;
  }
  .who-we-are__heading { grid-column: 1; }
  .who-we-are__cta { grid-column: 1; justify-self: start; margin-top: clamp(16px, 3vw, 24px); }

  /* Hide the desktop dual marquee; show the single-row scroll strip instead.
     overscroll-behavior-x: contain prevents horizontal swipes from chaining to
     page-level navigation. Native scrollbar hidden — touch shows the browser's
     own brief indicator during swipe. */
  .who-we-are__marquees { display: none; }
  .who-we-are__strip {
    display: block;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: clamp(64px, 6vw, 120px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  }
  .who-we-are__strip::-webkit-scrollbar { display: none; }
  .who-we-are__strip-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
  }

  .team__header { grid-template-columns: 1fr; }
  /* The desktop sub-copy is shifted right (grid-column: 3/-1 + 30px padding)
     to align with the info card below. On a single-column mobile layout that
     alignment doesn't apply — reset both so the sub copy left-aligns with the
     eyebrow + heading. */
  .team__sub { grid-column: 1 / -1; padding-left: 0; }
  .team__grid { grid-template-columns: 1fr; }
  .team__info { grid-column: span 1; aspect-ratio: auto; min-height: 280px; }
  .team__info-text { max-width: 70%; }

  .testimonials__intro { grid-template-columns: 1fr; align-items: start; }

  .site-footer__main { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__nav { grid-template-columns: 1fr 1fr; }
  .site-footer__nav .site-footer__col:nth-child(3) { grid-column: 1 / -1; }

  .site-footer__images {
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
            mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
  }
  .site-footer__images::-webkit-scrollbar { display: none; }
  .site-footer__img {
    flex: 0 0 68%;
    border-radius: 12px;
    scroll-snap-align: start;
  }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Mobile — collapse the named-area scatter to a uniform 1-column stack. */
  .transactions__cards {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    row-gap: clamp(14px, 3vw, 22px);
  }
  /* See-More expanded states re-declare grid-template-areas with the desktop
     16-column scatter at higher specificity (.transactions[data-revealed-batch]
     .transactions__cards). Re-flatten them here so clicking See More on mobile
     doesn't snap the grid back to 16 implicit auto-tracks and cause horizontal
     overflow. */
  .transactions[data-revealed-batch="1"] .transactions__cards,
  .transactions[data-revealed-batch="2"] .transactions__cards {
    grid-template-areas: none;
  }
  .transactions__card,
  .transactions__card[class*="--pos-"] {
    grid-area: auto;
    align-self: stretch;
  }
  /* Force uniform large aspect ratio on mobile so small + large cards don't visually differ */
  .transactions__card--small .transactions__card-inner { aspect-ratio: 441 / 194; }
  .transactions__card--small .transactions__card-face--default img {
    width: 85%;
    height: 65%;
  }
}

@media (max-width: 757px) {
  /* Logo marquee — phones-portrait: stack the label above the track so the
     marquee gets the full viewport width. At ≤480px the overlay layout left
     the logos with only ~75px of horizontal space because the label reserves
     260–300px on the left. */
  .logo-marquee__inner {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-block: 16px;
  }
  .logo-marquee__label {
    position: static;
    inset: auto;
    max-width: none;
    padding-right: 0;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
  }
  .logo-marquee__track-wrap {
    position: static;
    inset: auto;
    height: 64px;
  }
  .logo-marquee__item { padding-inline: 16px; }
}

@media (max-width: 768px) {
  .logo-marquee .marquee--scroll { animation-duration: 165s; }
}

/* WWLF stats — at iPad-portrait (~810–1024) and phone-landscape (short-height),
   the default auto-fit minmax(180px, 1fr) wraps "Rule of 40+" to its own row.
   Force 4 columns in this band so all 4 stats fit cleanly. Phone-portrait
   stays on the default stacked auto-fit layout. Tablet-landscape + desktop
   already fit 4 wide, so this only narrows tracks where needed. */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 500px) {
  .wwlf__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile landscape — Team cards: smaller portrait tiles that fit in viewport.
   On phone landscape (~375px tall), the mobile 1-col grid makes each card
   ~full-viewport-width × ~full-viewport-width (aspect-ratio is near 1:1), so
   the card is taller than the viewport and the user only sees the top of the
   headshot. Switch to a 2-column grid with height-constrained portrait cards
   so the entire bio photo fits on screen. */
@media (max-height: 600px) and (orientation: landscape) {
  .team__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-items: center;
  }
  .team-card {
    aspect-ratio: 1 / 1;
    height: clamp(180px, 62vh, 260px);
    width: auto;
    max-width: 100%;
  }
  .team__info {
    grid-column: span 2;
    aspect-ratio: auto;
    min-height: 140px;
    justify-self: stretch;
  }
}

/* Mobile landscape — bio modal: side-by-side, image fits inside the screen.
   On short landscape viewports (phones in landscape: ~320–430px tall), neither
   the mobile (full-width × 50vh) nor the desktop (341px-wide × short panel
   height) layouts let you see the whole portrait headshot. Constrain the image
   column to the headshot's 2:3 ratio so the photo is fully visible. */
@media (max-height: 600px) and (orientation: landscape) {
  .modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal__panel {
    position: relative;
    inset: auto;
    margin: auto;
    width: min(960px, 96vw);
    height: 92vh;
    max-height: 92vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  }
  .team-modal__panel {
    flex-direction: row;
    height: 100%;
  }
  .team-modal__left {
    flex: 0 0 auto;
    aspect-ratio: 2 / 3;
    height: 100%;
    max-width: 40vw;
    background: var(--c-ink);
  }
  .team-modal__left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .team-modal__right {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: clamp(14px, 2.4vw, 24px);
    gap: 10px;
  }
  .team-modal__name {
    font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  }
  .team-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 36px;
    height: 36px;
    z-index: 3;
  }
  .team-modal__close img {
    width: 14px;
    height: 14px;
  }
}

/* Sectors single-column collapse — uses a wider breakpoint (991px) than the rest
   of the site (768px) because the two-column desktop layout (large name on left,
   long description on right) needs more horizontal room before it reads well.
   Also disables the active-row translateX so the indent flourish doesn't push
   text past the container edge on the narrower viewport. */
@media (max-width: 991px), (orientation: landscape) and (max-height: 500px) {
  .sectors__header { grid-template-columns: 1fr; }
  .sectors__row { grid-template-columns: 1fr; gap: 12px; }
  .sectors__item[data-active="true"] .sectors__lead,
  .sectors__item[data-active="true"] .sectors__desc { transform: none; }
  /* Stack the [NN] index above the name on narrower viewports. In the default
     flex row, a wrapped name shrinks to fit while the index keeps its natural
     width and pins to the top-right, leaving dead space next to the second
     line. column-reverse keeps DOM order intact but visually places the index
     above the name so wrapping never produces empty space. */
  .sectors__name-wrap { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
  .sectors__index { margin-top: 0; }
  /* Active-row indent for mobile — instead of the desktop translateX (which we
     disabled above because it clips text on narrower screens), grow the row's
     horizontal padding by 1rem when the item turns green. The existing
     `transition: padding ...` on .sectors__row animates the inset smoothly,
     mirroring the desktop indent flourish. */
  .sectors__item[data-active="true"] .sectors__row { padding-inline: 1rem; }
}

/* Sectors phone-landscape — let the description fill more of the screen
   instead of clustering in the right third. */
@media (orientation: landscape) and (max-height: 500px) {
  .sectors__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 40px); }
  .sectors__desc { max-width: none; }
}

/* Team cards on phone-landscape — the default aspect-ratio: 325/321 (~square)
   gives cards ~380px tall on a 812-wide viewport, taller than the viewport
   itself. Override to a wide aspect so each card fits comfortably. */
@media (orientation: landscape) and (max-height: 500px) {
  .team-card { aspect-ratio: 16 / 10; }
}