/* ---------------------------------------------------------------
   Acephale — Masson design tokens
   Parchment & ink, burnt sienna accent, automatist line work.
--------------------------------------------------------------- */
@font-face {
  font-family: 'Ivory Echo Inline';
  src: url('assets/fonts/ivory-echo-inline.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivory Echo Filled';
  src: url('assets/fonts/ivory-echo-filled.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivory Echo Filled Body';
  src: url('assets/fonts/ivory-echo-filled-body.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Penumbral Grotesque';
  src: url('assets/fonts/penumbral-grotesque.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Now Headline';
  src: url('assets/fonts/futura-now-headline-light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Now Headline Regular';
  src: url('assets/fonts/futura-now-headline.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ece4cd;
  --ink: #241f16;
  --accent: #8e3b24;          /* burnt sienna on parchment */
  --accent-dark: #c8825e;     /* sienna raised for the dark band */
  --band-bg: #241f16;
  --band-fg: #e7dfc8;
  --band-soft: #e0d3b0;      /* deeper parchment: sections off ventures gently */

  /* Futura Now Headline (Light) is the site face; the nav and the landing
     ACEPHALE write-on are the deliberate exceptions (see .nav /
     .landing__title-ink). Full glyph coverage — fallbacks are safety only. */
  --font-display: 'Futura Now Headline', Georgia, serif;
  --font-hero: 'Ivory Echo Inline', Georgia, serif;
  /* titles/large text take the Regular cut; running text stays Light */
  --font-title: 'Futura Now Headline Regular', Georgia, serif;
  /* headings: the team-name face (Futura Now Regular), bolded */
  --font-header: 'Futura Now Headline Regular', Georgia, serif;
  --font-accent: 'Futura Now Headline', Georgia, serif;
  --font-mono: 'Futura Now Headline', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body: 'Futura Now Headline', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-nav-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --side: 48px;
  --max: 1240px;

  /* Easing: strong ease-out for entrances, strong in-out for on-screen movement */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* The handoff-specified curve, used only by the hero logo draw */
  --ease-draw: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------
   Reset / base
--------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
a:hover { opacity: 0.55; }
::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap { max-width: var(--max); margin: 0 auto; }

/* Cross-document view transitions: index <-> careers crossfades softly
   while the nav is snapshotted as its own stable group. Progressive
   enhancement — unsupported browsers navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: ease;
}
::view-transition-group(site-nav) { animation-duration: 200ms; }

/* Native anchor jumps (no-JS, initial hash load) clear the sticky nav */
section[id], footer[id] { scroll-margin-top: 84px; }

/* Page-progress mark: ghost outline bottom-right; the stroke draws in
   as you scroll and completes at the footer, with a percentage below. */
.progress-rail {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 90;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--accent-dark);
  pointer-events: none;
}
.progress-rail svg { width: 34px; display: block; }
.progress-ghost { opacity: 0.18; }
.progress-pct {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

/* Flying logo: fixed element the JS glides from the hero slot into the
   nav slot as you scroll; carries the draw animation so the hero intro
   is unchanged. Static logos stay for reduced motion / no-JS. */
.fly-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  pointer-events: none;
  display: none;
  color: var(--ink);
  will-change: transform;
}
.fly-logo svg { width: 100%; height: 100%; display: block; }
.fly-logo path {
  stroke-dasharray: 1 1;
  animation: logo-draw 2.4s var(--ease-draw) 0.3s both;
}
html.js-fly .fly-logo { display: block; }
/* while the hero logo is in flight, its nav slot shows a ghost of the
   mark as the landing target; the flying logo covers it when it docks */
html.js-fly .nav-word__logo { opacity: 0.22; visibility: visible; }
html.js-fly .landing__mark { visibility: hidden; }

/* Blinking caret between the wordmark's brackets */
.caret {
  display: inline-block;
  width: 0.55em;
  height: 0.14em;
  margin: 0 0.34em 0 0.12em; /* wordmark letter-spacing already pads the left */
  vertical-align: -0.05em;
  background: var(--accent);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  z-index: 1000;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 16px; opacity: 1; }

/* Paper texture — a woven-paper tile blended into the page background,
   underneath all content: text sits on it, and any surface with its own
   opaque background (the ink bands, the hatched landing/footer, portrait
   frames) covers it entirely. Toggleable: the `grain` class on <body>;
   press "g" or run toggleGrain() in the console (persisted). */
body.grain {
  background-image: url('assets/images/paper.webp');
  background-size: 1480px 1480px;
  background-blend-mode: multiply;
}

/* Surfaces the texture hides behind. The hatched sections use a gradient
   that mirrors their hatch mask, so as the pen lines fade out the paper
   texture fades in — one continuous material transition. */
.landing,
.page-hero {
  background: linear-gradient(to bottom, var(--bg) 45%, rgba(236, 228, 205, 0));
}
.footer {
  background: linear-gradient(to top, var(--bg) 55%, rgba(236, 228, 205, 0));
  border-top: 1px solid rgba(36, 31, 22, 0.3);
}
.portrait { background-color: var(--bg); }

/* Masson hatch texture — diagonal pen strokes, fading out */
.hatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    112deg,
    rgba(36, 31, 22, 0.05) 0px,
    rgba(36, 31, 22, 0.05) 1px,
    transparent 1px,
    transparent 13px
  );
}
.hatch--down {
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent);
  mask-image: linear-gradient(to bottom, black 45%, transparent);
}
.hatch--up {
  -webkit-mask-image: linear-gradient(to top, black 55%, transparent);
  mask-image: linear-gradient(to top, black 55%, transparent);
}
.hatch--rise {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 72%);
  mask-image: linear-gradient(to bottom, transparent, black 72%);
}

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.label--accent { color: var(--accent); }
.label--wide { font-size: 13px; letter-spacing: 0.3em; margin-top: 30px; opacity: 0.65; }
.label--tags { font-size: 10.5px; letter-spacing: 0.2em; margin-top: 36px; opacity: 0.55; }
.label--dim { font-size: 10.5px; letter-spacing: 0.16em; opacity: 0.5; }

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid currentColor;
  padding: 3px 7px;
  line-height: 1;
  display: inline-block;
  transition: opacity 0.2s ease, transform 160ms var(--ease-out);
}
.chip--sm { font-size: 10px; padding: 2px 6px; }
.chip:active { transform: scale(0.95); }

/* Section divider — a hand-drawn ink stroke that draws itself on scroll */
.section__center {
  display: grid;
  justify-items: center;
  text-align: center;
}
.divider { width: 140px; opacity: 0.5; }
.divider--ventures { opacity: 0.7; color: var(--accent); }
.divider path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease-out) 0.1s;
}
.divider.is-visible path { stroke-dashoffset: 0; }
.glyph-label { margin-top: 24px; }

/* ---------------------------------------------------------------
   Navigation — sticky, with sliding scrollspy indicator
--------------------------------------------------------------- */
.nav {
  /* the tab section keeps its original faces — exempt from the site face */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: sticky;
  top: 0;
  z-index: 100;
  view-transition-name: site-nav;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--side);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.is-scrolled { border-bottom-color: rgba(36, 31, 22, 0.25); }

.nav-word {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  letter-spacing: 0.22em;
  font-weight: 500;
}
.nav-word__logo { height: 22px; width: auto; display: block; }

.nav-links {
  position: relative;
  display: flex;
  gap: 40px;
  /* same face as the wordmark (inherited Helvetica from .nav) */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.nav-links a { padding-bottom: 6px; }
.nav-links a.is-active { opacity: 1; color: var(--accent); }
.nav-links a:not(.is-active) { opacity: 0.7; }
.nav-links a:not(.is-active):hover { opacity: 0.4; }

/* "← HOME" tab shown on pages other than the home page, set off from
   the section tabs by a hairline separator */
.nav-home { white-space: nowrap; }
.nav-sep {
  width: 1px;
  align-self: stretch;
  margin-bottom: 6px;
  background: rgba(36, 31, 22, 0.25);
}

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  width: 0;
  opacity: 0;
  transition: transform 0.3s var(--ease-in-out), width 0.3s var(--ease-in-out), opacity 0.2s ease;
  pointer-events: none;
}
.nav-indicator.is-visible { opacity: 1; }

/* ---------------------------------------------------------------
   Landing
--------------------------------------------------------------- */
.landing { position: relative; }
.landing__inner {
  position: relative;
  min-height: calc(100svh - 72px);
  padding: 48px var(--side) 96px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.landing__mark {
  width: 150px;
  margin-top: 64px;
  color: currentColor;
}
.landing__mark path {
  stroke-dasharray: 1 1;
  animation: logo-draw 2.4s var(--ease-draw) 0.3s both;
}
@keyframes logo-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.landing__title {
  position: relative;
  font-family: var(--font-hero);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(52px, 8vw, 104px);
  line-height: 1;
  letter-spacing: 0.14em;
  margin: 56px 0 0;
  margin-right: -0.14em;
}

/* The title is written in ink: a band of the Filled cut sweeps across as
   the pen tip, and the Inline letterforms trail behind it as the ink dries.
   Both cuts share metrics, so the overlay aligns exactly. */
.landing__title-base {
  display: inline-block;
  animation: title-write 1.05s cubic-bezier(0.45, 0, 0.55, 1) 1.1s both;
}
.landing__title-ink {
  position: absolute;
  inset: 0;
  /* pinned: the write-on relies on Ivory cuts sharing identical metrics */
  font-family: 'Ivory Echo Filled Body', Georgia, serif;
  animation: ink-sweep 1.05s cubic-bezier(0.45, 0, 0.55, 1) 1.1s both;
}
@keyframes title-write {
  from { clip-path: inset(-8% 100% -8% 0); }
  to { clip-path: inset(-8% 0 -8% 0); }
}
@keyframes ink-sweep {
  0% { clip-path: inset(-8% 100% -8% 0); opacity: 1; }
  88% { opacity: 1; }
  100% { clip-path: inset(-8% 0 -8% 97%); opacity: 0; }
}

.landing__claim {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.25;
  margin: 88px 0 0;
  max-width: 24ch;
  text-wrap: pretty;
}

/* Hero entrance choreography — quiet fade-ups around the logo draw */
.hero-seq {
  animation: hero-rise 0.7s var(--ease-out) both;
}
.hero-seq--1 { animation-delay: 0.1s; }
.hero-seq--2 { animation-delay: 0.9s; }
.hero-seq--3 { animation-delay: 1.8s; }
.hero-seq--4 { animation-delay: 1.95s; }
.hero-seq--5 { animation-delay: 2.1s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------
   01 The Firm
--------------------------------------------------------------- */
.firm { padding: 72px var(--side) 96px; }
.firm__desc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 96px;
  margin-top: 56px;
  max-width: 1080px;
  width: 100%;
  text-align: left;
}
.firm__desc p {
  font-family: var(--font-title);
  font-synthesis: none;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  margin: 0;
  text-wrap: pretty;
}
.firm__desc p:nth-child(2) { margin-top: 72px; }

/* ---------------------------------------------------------------
   02 Ventures — the single dark ink band
--------------------------------------------------------------- */
.ventures { color: var(--ink); }
.ventures__heading {
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  margin: 38px 0 0;
  max-width: 26ch;
  text-wrap: balance;
}

/* Free horizontal rail: vertical scroll passes through untouched; the
   cards scroll sideways natively (trackpad swipe) or by grab-dragging. */
/* The sand layer lives on a masked pseudo-element so its edges fade
   briefly into the parchment while the paper texture stays continuous. */
.ventures--free { position: relative; }
.ventures--free::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--band-soft);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 90px, black calc(100% - 90px), transparent);
  mask-image: linear-gradient(to bottom, transparent, black 90px, black calc(100% - 90px), transparent);
}
body.grain .ventures--free::before {
  background-image: url('assets/images/paper.webp');
  background-size: 1480px 1480px;
  background-blend-mode: multiply;
}
.vpin { padding: 88px 0 96px; }
.vhead { margin-bottom: 48px; }
.vhead .ventures__heading { margin-bottom: 0; }

.vrail {
  display: flex;
  gap: 24px;
  align-items: stretch;
  overflow-x: auto;
  padding-left: max(calc((100vw - 1240px) / 2 + 48px), 24px);
  padding-right: 48px;
  cursor: grab;
  scrollbar-width: none;
}
.vrail.is-dragging { cursor: grabbing; user-select: none; }
.vrail::-webkit-scrollbar { display: none; }
.port-card {
  width: min(460px, 82vw);
  flex: 0 0 auto;
  border: 1px solid rgba(36, 31, 22, 0.3);
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.port-logo { height: 52px; display: flex; align-items: center; }
.port-logo--ccte { height: 40px; width: auto; }
.port-logo--lsd { height: 48px; width: auto; mix-blend-mode: multiply; }
.port-logo--b4s { height: 48px; width: auto; filter: invert(1); opacity: 0.85; }
.port-logo--mark { color: var(--ink); opacity: 0.25; }
.port-logo--mark svg { height: 44px; width: auto; }
.port-name {
  font-family: var(--font-title);
  font-synthesis: none;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0;
}
.port-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0;
}
.port-desc {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  margin: 0;
}
.port-link { margin-top: auto; font-family: var(--font-mono); border-bottom-color: var(--accent); }
.rail-end {
  flex: 0 0 auto;
  width: 220px;
  display: grid;
  place-items: center;
  color: var(--ink);
  opacity: 0.14;
}
.rail-end svg { width: 120px; }

/* ---------------------------------------------------------------
   03 About
--------------------------------------------------------------- */
.about { padding: 96px var(--side); }
.about__head { margin-bottom: 72px; }
.about__heading {
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  margin: 38px 0 0;
  max-width: 30ch;
  text-wrap: balance;
}

.portrait {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(36, 31, 22, 0.35);
  background-image: repeating-linear-gradient(
    112deg,
    rgba(36, 31, 22, 0.06) 0px,
    rgba(36, 31, 22, 0.06) 1px,
    transparent 1px,
    transparent 9px
  );
}
.portrait span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.45;
  background: var(--bg);
  padding: 4px 10px;
}
.portrait { height: 200px; }
.portrait--principal { height: 310px; }
.portrait--photo {
  display: block;
  overflow: hidden;
  padding: 0;
  height: auto;
  aspect-ratio: 3 / 4;
}
.portrait--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --face-y is set per photo so every eye-line lands at the same height */
  object-position: 50% var(--face-y, 50%);
  display: block;
}

/* ---------------------------------------------------------------
   Stick-figure flip cards — each portrait starts as the person's
   hand-drawn figure (ink on bare paper, no frame) and spins on the
   Y axis to the photo. Sizing matches the old .portrait--photo box
   exactly (full card width, 3:4). State lives in aria-pressed.
--------------------------------------------------------------- */
.flip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  perspective: 1200px;
}
.flip .inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-in-out);
}
.flip[aria-pressed="true"] .inner { transform: rotateY(180deg); }
.face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face.front img {
  height: 74%;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  margin-bottom: 8%;
}
.face.back { transform: rotateY(180deg); }
.face.back.portrait--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--face-y, 50%);
  display: block;
}
/* Rishi's card sits centered above the grid, sized like a grid portrait */
.flip--principal {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 16px;
}
/* Rishi has no photo by choice: his figure spins a full turn instead */
.flip--spin.is-spinning .inner { animation: figure-spin 700ms var(--ease-in-out); }
@keyframes figure-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flip .inner { transition: none; }
  .flip--spin.is-spinning .inner { animation: none; }
}

.principal {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.principal--minimal {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 12px;
}
.principal__body { display: grid; gap: 16px; align-content: center; }

.person__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.person__name {
  font-family: var(--font-title);
  font-synthesis: none;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.person__name--lg { font-size: 31px; }
.person__role { font-size: 10px; letter-spacing: 0.14em; }
.person__bio {
  font-size: 16px;
  line-height: 1.85;
  margin: 0;
  max-width: 56ch;
}
.person__bio--sm { line-height: 1.75; }

/* Rishi leads, then a centered pyramid: three across, two centered below */
.team-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 64px 48px;
  margin-top: 72px;
}
.person {
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
  grid-column: span 2;
}
.person:nth-child(4),
.person:nth-child(5) {
  grid-column: span 3;
  width: 100%;
  max-width: 352px;
  justify-self: center;
}
.person > .person__row { margin-top: -4px; }

/* ---------------------------------------------------------------
   04 Careers — the landing's lined-paper treatment, rising into the
   footer: paper texture at the top, pen lines fading in below.
--------------------------------------------------------------- */
.careers {
  position: relative;
  padding: 40px var(--side) 110px;
  background: linear-gradient(to bottom, rgba(236, 228, 205, 0), var(--bg) 72%);
}
.careers > .wrap { position: relative; }

/* Index footer continues the careers section's lines at full strength */
.footer--lined { background: var(--bg); }
.careers__heading {
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  margin: 38px 0 0;
  text-wrap: balance;
}
.careers__intro {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 15.5px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  margin: 40px 0 0;
  max-width: 52ch;
}

/* ---------------------------------------------------------------
   05 Contact / Footer
--------------------------------------------------------------- */
.footer { position: relative; }
.footer__inner {
  position: relative;
  padding: 64px var(--side) 40px;
}
.footer__head { margin-bottom: 88px; }
.footer__top {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.footer__mark {
  width: 96px;
  color: currentColor;
  opacity: 0.9;
}
.footer__mark path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease-out) 0.1s;
}
.footer__mark.is-visible path { stroke-dashoffset: 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
  text-align: left;
}
.footer__col { display: grid; gap: 12px; justify-items: start; align-content: start; }
.footer__col > .label {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  opacity: 0.6;
}
.footer__value {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.footer__email {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 17px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  justify-self: start;
}
.footer__mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.footer__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 16px;
  letter-spacing: 0.01em;
}
.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 20px;
  font-size: 11px;
  opacity: 0.5;
}
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand-logo { height: 18px; width: auto; display: block; }
.footer__meta { display: flex; align-items: center; gap: 20px; }
.footer__greek { font-family: var(--font-mono); letter-spacing: 0.12em; }

/* ---------------------------------------------------------------
   Careers page
--------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: 96px var(--side) 48px;
}
.page-hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
.page-hero__title {
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 48px 0 0;
  max-width: 20ch;
  text-wrap: balance;
}
.page-hero__intro {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 15.5px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  margin: 40px 0 0;
  max-width: 56ch;
}

.roles { padding: 0 var(--side) 48px; }

/* Location lockup: the hand-drawn divider stroke flanking the text.
   --ink-rule is the shared, stretchable form of the section divider
   (same path as the inline .divider SVGs). */
:root { --ink-rule: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' preserveAspectRatio='none'><path d='M4,9 C28,3 52,12 80,7 C106,2.5 130,10 156,5.5' fill='none' stroke='%23241f16' stroke-opacity='0.45' stroke-width='1.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>"); }
.location {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 56px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(36, 31, 22, 0.6);
  white-space: nowrap;
}
.role__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: -4px 0 0;
}
.roles__list {
  display: grid;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
/* the same hand-drawn ink stroke as the section dividers, stretched to the
   full rule length the old hairlines had */
.role {
  --squiggle-sep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 787 14' preserveAspectRatio='none'><path d='M4,7 C20,9.9 33,9.9 49,7 C66,4.3 80,4.3 98,7 C115,10.3 128,10.3 145,7 C160,3.5 171,3.5 186,7 C201,10.4 212,10.4 226,7 C241,4.2 253,4.2 267,7 C284,11.1 297,11.1 313,7 C328,4.0 340,4.0 355,7 C373,11.3 386,11.3 404,7 C421,3.7 435,3.7 452,7 C471,9.7 486,9.7 506,7 C524,3.9 539,3.9 558,7 C573,9.8 585,9.8 600,7 C616,2.9 628,2.9 644,7 C659,10.6 671,10.6 687,7 C704,3.7 718,3.7 736,7 C753,9.7 766,9.7 783,7' fill='none' stroke='%23241f16' stroke-opacity='0.4' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  padding: 40px 0 46px;
  background-image: var(--squiggle-sep);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 12px;
}
.role:last-child {
  background-image: var(--squiggle-sep), var(--squiggle-sep);
  background-position: top center, bottom center;
  background-size: 100% 12px, 100% 12px;
}
.role__body { display: grid; gap: 16px; justify-items: start; }
.role__title {
  font-family: var(--font-title);
  font-synthesis: none;
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.role__desc {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 62ch;
}
.role__link {
  font-size: 12px;
  letter-spacing: 0.12em;
  font-family: var(--font-mono);
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  white-space: nowrap;
  margin-top: 8px;
  display: inline-block;
  transition: opacity 0.2s ease, transform 160ms var(--ease-out);
}
.role__link:active { transform: scale(0.97); }

.giving {
  background: var(--band-bg);
  color: var(--band-fg);
}
.giving ::selection { background: var(--accent-dark); color: var(--band-bg); }
.giving__inner { padding: 130px var(--side) 140px; }
.giving__heading {
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  margin: 38px 0 0;
  max-width: 28ch;
  text-wrap: balance;
}
.giving__intro {
  font-size: 14.5px;
  line-height: 1.85;
  opacity: 0.82;
  margin: 40px 0 0;
  max-width: 56ch;
}
.giving__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin-top: 96px;
  text-align: left;
}
.cause { display: grid; gap: 14px; align-content: start; }
.cause__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.2;
}
.cause__tag { color: var(--accent-dark); font-size: 10px; letter-spacing: 0.16em; }
.cause__desc {
  font-size: 13.5px;
  line-height: 1.75;
  opacity: 0.75;
  margin: 0;
}

.page-close { padding: 24px var(--side) 96px; }

/* Obround (pill) contact button */
.btn-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 36px;
  padding: 17px 34px 19px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out),
              transform 160ms var(--ease-out);
}
/* Pills are exempt from the global a:hover fade (the "Open roles" pill
   already escaped it via [data-reveal].is-visible, which outranks a:hover
   — this makes every pill behave that way on purpose, so they all fill
   the same solid var(--accent)). */
.btn-pill:hover { background-color: var(--accent); color: var(--bg); opacity: 1; }
.btn-pill:active { transform: scale(0.97); }

/* squiggly variant: the obround outline is a hand-drawn SVG stroke rather
   than a clean border; on hover the drawn shape itself fills sienna */
.btn-pill--squiggle { border: none; border-radius: 0; }
.btn-pill--squiggle:hover { background-color: transparent; }
.btn-pill__stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.btn-pill__stroke path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.25s var(--ease-out);
}
.btn-pill--squiggle:hover .btn-pill__stroke path { fill: var(--accent); }
.btn-pill--squiggle { position: relative; }
.btn-pill--squiggle .btn-pill__name,
.btn-pill--squiggle .btn-pill__tag { position: relative; z-index: 1; }

/* compact card-sized pill: pins to the card bottom where the old
   VISIT WEBSITE link sat */
.btn-pill--card {
  margin-top: auto;
  align-self: flex-start;
  gap: 8px;
  padding: 10px 24px 12px;
}
.btn-pill--card .btn-pill__name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.btn-pill--card .btn-pill__tag { font-size: 12px; letter-spacing: 0.1em; }
.btn-pill__name {
  font-family: var(--font-accent);
  font-synthesis: none;
  font-size: 19px;
  letter-spacing: 0.02em;
}
.btn-pill__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  white-space: nowrap;
  transition: color 0.25s var(--ease-out);
}
.btn-pill:hover .btn-pill__tag { color: var(--bg); }

/* ---------------------------------------------------------------
   Scroll reveals
--------------------------------------------------------------- */
[data-reveal],
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal].is-visible,
[data-reveal-group] > *.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

/* Reduced motion: fewer and gentler, not zero — keep short opacity fades,
   drop all movement and self-drawing strokes. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .landing__mark path { animation: none; stroke-dashoffset: 0; }
  .hero-seq { animation: hero-fade 0.2s ease both; }
  @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
  .landing__title-base { animation: hero-fade 0.2s ease both; }
  .landing__title-ink { animation: none; opacity: 0; }
  .divider path { transition: none; stroke-dashoffset: 0; }
  [data-reveal],
  [data-reveal-group] > * {
    transform: none !important;
  }
  [data-reveal].is-visible,
  [data-reveal-group] > *.is-visible {
    transition: opacity 0.2s ease !important;
  }
  .chip:active,
  .holding__link:active,
  .btn-pill:active,
  .role__link:active { transform: none; }
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --side: 24px; }

  .nav { padding: 18px var(--side); flex-wrap: wrap; gap: 16px; }
  .nav-links { gap: 22px; font-size: 10px; }

  .landing__inner { padding: 72px var(--side) 110px; }
  .landing__title { letter-spacing: 0.16em; margin-right: -0.16em; }

  .firm__cols,
  .holding__body--grid,
  .footer__grid { grid-template-columns: 1fr; }
  .firm__cols { gap: 40px; }

  .vpin { padding: 90px 0 70px; }
  .progress-rail { display: none; }
  .firm__desc { grid-template-columns: 1fr; }
  .firm__desc p:nth-child(2) { margin-top: 0; }
  .vrail { padding-left: var(--side); }

  .principal { grid-template-columns: 1fr; gap: 40px; }
  .team-grid { grid-template-columns: 1fr; gap: 56px; }
  .team-grid .person { grid-column: auto; max-width: none; }

  .role { padding: 36px 0 44px; }
  .giving__grid { grid-template-columns: 1fr; gap: 40px; }

  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
}