/* ==========================================================================
   Direction C — Visual first
   Builds on va.css (tokens) and direction-b.css (chart-title type, deck,
   AIM cover). Full-bleed photography, navy and amber bands, a large logo,
   an animated data hero and a moving chart wall.
   ========================================================================== */

/* ---------- Logo (vector rebuild: SVG mark + live Gotham wordmark) ---------- */
.logo {
  --logo-ink: #2c2d2d;
  display: inline-flex; align-items: flex-end; gap: 0.4em;
  font-size: 20px;                 /* scales the whole lockup */
  text-decoration: none; line-height: 1;
  transition: font-size 300ms var(--ease-out);
}
.logo__mark { width: 4.1em; height: auto; flex: none; }
.logo__word { display: grid; font-family: var(--font-display); padding-bottom: 0.05em; }
.logo__name { font-size: 1.24em; letter-spacing: 0.012em; color: var(--logo-ink); white-space: nowrap; transition: color 300ms; }
.logo__sub {
  margin-top: 0.42em; padding: 0 13% 0 5%;
  font-size: 0.5em; color: #f7ae2b;
  text-align: justify; text-align-last: justify;
}
.logo--light { --logo-ink: #fff; }

/* ---------- Header: transparent over the hero, solid on scroll ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 112px; transition: min-height 300ms var(--ease-out); }
.hdr.is-solid { background: var(--paper); box-shadow: 0 1px 0 var(--rule), 0 12px 32px -24px oklch(0.25 0.03 235 / 0.35); }
.hdr.is-solid .wrap { min-height: 76px; }
.hdr.is-solid .logo { font-size: 15px; }
.hdr:not(.is-solid) .logo { --logo-ink: #fff; }
/* Six nav items need ~1200px inline, so Direction C collapses to the menu below that
   (va.css collapses at 1024px; this extends the same panel up to 1199px) */
.hdr .nav__list a, .hdr .nav__login, .hdr .nav__actions .btn { white-space: nowrap; }
.hdr .nav__actions .btn { flex-shrink: 0; }
@media (min-width: 1025px) and (max-width: 1199px) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-sm) var(--gutter) var(--space-lg);
    box-shadow: 0 24px 40px -24px oklch(0.25 0.02 235 / 0.25);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .js .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .nav__list { flex-direction: column; gap: 0; }
  .js .nav__list a { padding-block: var(--space-sm); border-bottom: 1px solid var(--rule); font-size: var(--step-1); }
  .js .nav__list a[aria-current='page'] { border-bottom-color: var(--rule); color: var(--navy); }
  .js .nav__list a[aria-current='page']::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--amber); margin-right: 10px; vertical-align: 2px; }
  .js .nav__actions { justify-content: space-between; padding-top: var(--space-md); }
}
@media (min-width: 1200px) {
  .hdr .nav__list { gap: 20px; }
  .hdr .nav { gap: var(--space-md); }
}
@media (min-width: 1200px) and (max-width: 1320px) {
  .hdr:not(.is-solid) .logo { font-size: 17px; }
  .hdr .nav__list { gap: var(--space-sm); }
}
@media (min-width: 1200px) {
  .hdr:not(.is-solid) .nav__list a { color: oklch(1 0 0 / 0.86); }
  .hdr:not(.is-solid) .nav__list a:hover { color: #fff; border-bottom-color: var(--amber); }
  .hdr:not(.is-solid) .nav__login { color: oklch(1 0 0 / 0.86); }
}
.hdr:not(.is-solid) .nav-toggle { color: #fff; border-color: oklch(1 0 0 / 0.4); }
@media (max-width: 1024px) {
  .hdr .logo { font-size: 15px; }
  .hdr.is-solid .logo { font-size: 13px; }
  .hdr .wrap { min-height: 84px; }
  .hdr.is-solid .wrap { min-height: 68px; }
}
@media (max-width: 420px) {
  .hdr .logo, .hdr.is-solid .logo { font-size: 11.5px; }
}

/* ---------- Shared photo plumbing ---------- */
.photo { position: absolute; inset: 0; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.credit { position: absolute; right: var(--gutter); bottom: 12px; z-index: 2; font-size: 0.6875rem; color: oklch(1 0 0 / 0.6); }
.credit a { color: inherit; }
.on-dark { color: #fff; }
.on-dark .ct { color: #fff; }
.on-dark .ct-sub { color: oklch(1 0 0 / 0.74); }
.on-dark .label { color: oklch(1 0 0 / 0.7); }
.on-dark .label--amber { color: var(--amber); }
.on-dark .arrow-link { color: #fff; }

/* ---------- Hero ---------- */
.c-hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 960px);
  display: grid; align-items: end;
  padding: 150px 0 clamp(48px, 6vw, 88px);
  background: var(--navy-deep); color: #fff; overflow: hidden;
}
.c-hero .photo img { object-position: 50% 62%; transform: scale(1.04); filter: saturate(1.05) brightness(1.08); }
.c-hero h1, .c-hero__lede { text-shadow: 0 2px 24px oklch(0.2 0.035 235 / 0.55); }
.c-hero .photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, oklch(0.2 0.035 235 / 0.86) 0%, oklch(0.22 0.035 235 / 0.62) 36%, oklch(0.24 0.035 235 / 0.18) 70%, oklch(0.24 0.035 235 / 0.08) 100%),
    linear-gradient(0deg, oklch(0.2 0.035 235 / 0.78) 0%, transparent 34%),
    linear-gradient(180deg, oklch(0.2 0.035 235 / 0.55) 0%, transparent 22%);
}
.c-hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.c-hero__main { display: grid; gap: var(--space-md); }
.c-badge {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-xs); justify-self: start;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: oklch(1 0 0 / 0.1); border: 1px solid oklch(1 0 0 / 0.2);
  font-size: var(--step--2); color: #fff; text-decoration: none;
  transition: background-color 200ms;
}
.c-badge:hover { background: oklch(1 0 0 / 0.16); }
.c-badge b { background: var(--amber); color: var(--navy-deep); padding: 3px 10px; border-radius: 999px; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.c-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 1.4rem + 3.9vw, 4.75rem); line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance;
}
.c-hero h1 span { display: block; color: var(--amber); }
.c-hero__lede { font-size: var(--step-1); line-height: 1.6; color: oklch(1 0 0 / 0.84); max-width: 52ch; }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); }

/* Animated data card */
.c-chart {
  background: oklch(0.2 0.03 235 / 0.9);
  border: 1px solid oklch(1 0 0 / 0.14); border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 40px 80px -40px oklch(0 0 0 / 0.6);
}
.c-chart__title { font-weight: 900; font-size: 1.25rem; line-height: 1.15; color: #fff; }
.c-chart__sub { font-size: var(--step--2); color: oklch(1 0 0 / 0.66); margin-top: 4px; }
.c-chart svg { display: block; width: 100%; height: auto; margin-top: var(--space-sm); overflow: visible; }
.c-chart .grid line { stroke: oklch(1 0 0 / 0.12); }
.c-chart text { font-family: var(--font-text); font-size: 16px; fill: oklch(1 0 0 / 0.6); }
.c-chart .line { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.c-chart .area { fill: url(#gtf-fill); }
.c-chart .dot { fill: var(--amber); }
.c-chart .ring { fill: none; stroke: var(--amber); stroke-width: 2; transform-origin: 580px 118px; }
.c-chart .callout-text { font-weight: 700; font-size: 18px; fill: #fff; }
.c-chart .callout-text tspan.sub { font-weight: 400; fill: oklch(1 0 0 / 0.66); }
.c-chart__foot { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid oklch(1 0 0 / 0.12); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: oklch(1 0 0 / 0.55); }
.c-chart__foot span:last-child { color: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  .c-chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease-out) 0.4s forwards; }
  .c-chart .area { opacity: 0; animation: fade 1.2s ease 1.6s forwards; }
  .c-chart .late { opacity: 0; animation: fade 0.6s ease 2.4s forwards; }
  .c-chart .ring { animation: ping 2.4s ease-out 2.8s infinite; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }
  @keyframes ping { 0% { transform: scale(1); opacity: 1; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
}
@media (max-width: 1024px) {
  .c-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .c-hero { padding-top: 132px; }
  .c-hero .photo::after { background: linear-gradient(180deg, oklch(0.2 0.035 235 / 0.5) 0%, oklch(0.2 0.035 235 / 0.72) 40%, oklch(0.2 0.035 235 / 0.94) 75%); }
  .c-hero .photo img { object-position: 42% 30%; }
}

/* ---------- Proof band ---------- */
.c-proof { background: var(--slide); border-bottom: 1px solid var(--rule); padding-block: var(--space-lg); }
.c-proof .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); }
.c-proof ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); list-style: none; margin: 0; padding: 0; }
.c-proof ul { gap: var(--space-xs) 0; }
.c-proof li { font-family: var(--font-display); font-size: var(--step-0); color: var(--navy); display: inline-flex; align-items: center; }
.c-proof li + li::before { content: ''; width: 6px; height: 6px; background: var(--amber); margin-inline: var(--space-md); }
@media (max-width: 640px) {
  .c-proof ul { gap: var(--space-2xs) var(--space-md); }
  .c-proof li + li::before { display: none; }
}

/* ---------- Chart wall ---------- */
.c-wall { background: var(--navy); color: #fff; padding-block: clamp(64px, 7vw, 112px); overflow: hidden; }
.c-wall__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-xl); }
.wall {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.wall__track { display: flex; gap: var(--space-md); width: max-content; padding-block: var(--space-2xs); }
.wall__item { margin: 0; display: grid; gap: var(--space-2xs); width: clamp(300px, 30vw, 460px); }
.wall__item .slide { border: 0; box-shadow: 0 30px 50px -30px oklch(0 0 0 / 0.6); transition: transform 300ms var(--ease-out); }
.wall__item:hover .slide { transform: translateY(-4px); }
.wall__item figcaption { font-size: var(--step--2); color: oklch(1 0 0 / 0.72); display: flex; justify-content: space-between; gap: var(--space-sm); }
.wall__item figcaption b { color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .wall__track { animation: marquee 70s linear infinite; }
  .wall:hover .wall__track, .wall:focus-within .wall__track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .wall { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .wall__track [aria-hidden='true'] { display: none; }
}
.c-wall__foot { margin-top: var(--space-xl); }

/* ---------- Feature rows (full-bleed split) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(560px, 46vw, 720px); background: var(--slide); }
.feature + .feature { border-top: 1px solid var(--rule); }
.feature__media { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: clamp(32px, 5vw, 72px); background: var(--navy-deep); }
.feature__media .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0.2 0.035 235 / 0.55), oklch(0.2 0.035 235 / 0.1) 60%); }
.feature__media > :not(.photo):not(.credit):not(.arcs) { position: relative; z-index: 1; width: 100%; }
.feature__text { display: grid; gap: var(--space-md); align-content: center; padding: clamp(40px, 6vw, 104px); max-width: 680px; }
.feature--flip .feature__media { order: 2; }
.feature--flip .feature__text { justify-self: end; }
.feature__text ul { list-style: none; padding: var(--space-md) 0 0; margin: 0; display: grid; gap: var(--space-2xs); border-top: 1px solid var(--rule); }
.feature__text li { position: relative; padding-left: 1.25rem; }
.feature__text li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--amber); }
.feature__text li span { color: var(--ink-3); }
.feature__num { font-size: var(--label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-ink); }
.feature .deck { max-width: 560px; margin-inline: auto; }
.feature .cover-wrap { margin-inline: auto; max-width: 440px; }
.feature .cover-wrap::before { background: #fff; opacity: 0.2; }
.feature .swap { max-width: 620px; margin-inline: auto; }
.feature .swap__note { color: oklch(1 0 0 / 0.66); }
.feature .seg { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.25); }
.feature .seg button { color: oklch(1 0 0 / 0.85); }
.feature .seg button[aria-pressed='true'] { background: var(--amber); color: var(--navy-deep); }
.arcs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
@media (max-width: 960px) {
  .feature { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .feature--flip .feature__media { order: 0; }
  .feature__media { min-height: 380px; }
  .feature__text { max-width: none; }
}

/* ---------- Numbers band ---------- */
.c-numbers { background: var(--amber); color: var(--navy-deep); padding-block: clamp(56px, 6vw, 96px); }
.c-numbers .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-xl) var(--space-lg); }
.c-num { display: grid; gap: var(--space-2xs); align-content: start; border-top: 2px solid var(--navy-deep); padding-top: var(--space-md); }
.c-num b { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.5rem, 2rem + 5vw, 6.25rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.c-num strong { font-size: var(--step-1); font-weight: 900; }
.c-num span { font-size: var(--step--1); color: oklch(0.27 0.035 235 / 0.85); }

/* ---------- Free research cards ---------- */
.c-free { padding-block: var(--section); background: var(--paper); }
.c-free__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-xl); }
.cards { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--space-lg); }
.card { display: grid; gap: var(--space-xs); align-content: start; text-decoration: none; color: inherit; }
.card__img { aspect-ratio: 16 / 9; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 500ms var(--ease-out); }
.card:hover .card__img img { transform: scale(1.04); }
.card__meta { display: flex; gap: var(--space-xs); font-size: var(--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--space-2xs); }
.card__meta span:first-child { color: var(--amber-ink); }
.card__title { font-weight: 700; font-size: var(--step-1); line-height: 1.3; color: var(--ink); }
.card:hover .card__title { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.card__dek { font-size: var(--step--1); color: var(--ink-2); }
.card--lead { grid-row: span 2; background: var(--navy-deep); color: #fff; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius); align-content: space-between; }
.card--lead .card__img { max-width: 480px; }
.card--lead .card__title { color: #fff; }
.card--lead .card__dek { color: oklch(1 0 0 / 0.78); }
.card--lead .card__meta { color: oklch(1 0 0 / 0.66); }
.card--lead .card__meta span:first-child { color: var(--amber); }
.card--lead .card__title { font-family: var(--font-text); font-weight: 900; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; }
.card--lead .card__img { aspect-ratio: 16 / 9; border: 0; }
.c-free__more { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
@media (max-width: 1024px) { .cards { grid-template-columns: 1fr 1fr; } .card--lead { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 600px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Voices over photo ---------- */
.c-voices { position: relative; isolation: isolate; color: #fff; padding-block: clamp(80px, 9vw, 144px); background: var(--navy-deep); overflow: hidden; }
.c-voices .photo { z-index: -1; }
.c-voices .photo img { filter: grayscale(0.3); }
.c-voices .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.22 0.035 235 / 0.95), oklch(0.24 0.035 235 / 0.82)); }
.c-voices .quote-lead { color: #fff; max-width: 26ch; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
.c-voices .cite__name { color: #fff; }
.c-voices .cite__org { color: oklch(1 0 0 / 0.66); }
.c-voices .quotes { margin-top: var(--space-2xl); }
.c-voices .quotes blockquote { border-top-color: oklch(1 0 0 / 0.25); }
.c-voices .quotes blockquote p { color: oklch(1 0 0 / 0.84); }

/* ---------- Team ---------- */
.c-team { padding-block: var(--section); background: var(--slide); }
.c-team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
@media (max-width: 1100px) { .c-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .c-team__grid { grid-template-columns: minmax(0, 1fr); } }
.member { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); background: var(--paper-2); border-radius: var(--radius); align-content: start; }
.member img { width: 128px; height: 128px; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius); }
.member__name { font-family: var(--font-display); font-size: var(--step-2); color: var(--navy); line-height: 1.15; }
.member__role { font-size: var(--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-ink); margin-top: 6px; }
.member p:last-child { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--space-xs); }
@media (max-width: 420px) { .member { padding: var(--space-md); } .member img { width: 96px; height: 96px; } }

/* ---------- Closer over photo ---------- */
.c-close { position: relative; isolation: isolate; color: #fff; padding-block: clamp(96px, 11vw, 176px); background: var(--navy-deep); overflow: hidden; }
.c-close .photo { z-index: -1; }
.c-close .photo img { object-position: 50% 40%; }
.c-close .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.2 0.035 235 / 0.94) 0%, oklch(0.22 0.035 235 / 0.72) 50%, oklch(0.24 0.035 235 / 0.25) 100%); }
.c-close__inner { display: grid; gap: var(--space-md); max-width: 680px; }
.c-close h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.c-close__inner p { font-size: var(--step-1); color: oklch(1 0 0 / 0.84); max-width: 52ch; }
.c-close__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); }

/* ---------- Footer additions ---------- */
.site-footer .logo { font-size: 16px; }
.footer-credits { font-size: 0.75rem; color: oklch(0.72 0.012 235); padding-bottom: var(--space-lg); }
.footer-credits a { color: oklch(0.86 0.012 235); }

/* Newsletter signup band (Beehiiv embed) */
.c-news { background: var(--navy-deep); color: #fff; padding-block: clamp(56px, 6vw, 96px); }
.c-news__wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.c-news__copy { display: grid; gap: var(--space-2xs); }
.c-news .ct { color: #fff; }
.c-news .ct-sub { color: oklch(1 0 0 / 0.74); }
.c-news__form { min-height: 120px; }
@media (max-width: 960px) { .c-news__wrap { grid-template-columns: minmax(0, 1fr); } }