/* ==========================================================================
   Caucasus Ventures — visual design pass
   Reference: sequoiacap.com (editorial restraint) + inveoventures.com (structure)
   Brand constraints from CV_ID.pdf: Montserrat, #003C8C, #64C8F5
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --paper:  #f6f5f2;   /* cool paper, not warm cream */
  --paper-2:#efeeea;
  --ink:    #101418;
  --navy:   #003c8c;
  --sky:    #64c8f5;
  --rule:   #d8d5cf;
  --muted:  #6e7681;

  /* one typeface, per the brandbook — this token now only marks the label role */
  --label: "Montserrat", -apple-system, Segoe UI, Arial, sans-serif;
  --sans: "Montserrat", -apple-system, Segoe UI, Arial, sans-serif;

  --gut: 52px;              /* page gutter — Sequoia sits at ~50px, near full-bleed */
  --max: 2000px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--sky); color: var(--ink); }

.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---- utility type ------------------------------------------------------ */

/* kept as .mono for markup compatibility — it is a label style, not a typeface */
.mono {
  font-family: var(--label);
  font-size: 12.6px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--label); 
  font-size: 12.6px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
}

.display {
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.h-sec {
  font-weight: 300;
  font-size: clamp(2.13rem, 3.4vw, 3.36rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}

.lede {
  color: var(--muted);
  max-width: 58ch;
  font-size: 19.5px;
}

/* ---- header ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
}
.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 112px;
  border-bottom: 1px solid var(--rule);
}

/* The two standing destinations — Gate994 and the LP portal — are not sections
   of the site, so they sit on their own line above the section nav rather than
   competing with it. */
.head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.util { display: flex; align-items: center; gap: 18px; }
.util a {
  font-family: var(--label); font-weight: 500;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.util a:hover { color: var(--navy); }
.util span { color: var(--rule); font-size: 11.5px; }

/* the real brand lockup — assets/logo.svg, 122×50 */
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 46px; width: auto; }
.foot .brand img { height: 52px; }
.drawer .brand img { height: 48px; }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav a {
  font-family: var(--label); 
  font-size: 12.6px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s, color .18s;
}
.nav a:hover,
.nav a[aria-current] { border-color: var(--navy); color: var(--navy); }

/* the CTA is a button, not a nav link — win the specificity fight explicitly */
.nav a.btn {
  padding: 13px 22px;
  color: var(--paper);
  border: 1px solid var(--navy);
}
.nav a.btn:hover { background: transparent; color: var(--navy); border-color: var(--navy); }

.btn {
  display: inline-block;
  font-family: var(--label); 
  font-size: 12.6px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--paper);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.btn:hover { background: transparent; color: var(--navy); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--paper); }
.btn--onnavy { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.btn--onnavy:hover { background: transparent; color: var(--paper); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
}
.burger span { width: 26px; height: 1px; background: var(--ink); }

/* ---- hero -------------------------------------------------------------- */

.hero { padding: clamp(80px, 13vh, 150px) 0 0; }

.hero-line {
  text-align: center;
  font-size: clamp(2.69rem, 6.4vw, 6.05rem);
  max-width: 19ch;
  margin: 0 auto;
}

/* hand-drawn ring around one word */
.ring { position: relative; display: inline-block; white-space: nowrap; }
.ring svg {
  position: absolute;
  left: -7%; top: -16%;
  width: 114%; height: 132%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
  /* each pass is nudged a couple of degrees in script — the tilt is part of
     what stops the repeat from reading as a printed mark */
  transform-origin: 50% 50%;
  transition: transform .4s ease;
}
.ring path {
  fill: none;
  stroke: var(--sky);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* the dash length is set from the path's own length in script, so each of the
     five loops draws at its own rate rather than against a fixed guess */
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 1;
  transition: opacity .5s ease;
  animation: draw 1.1s cubic-bezier(.5,0,.2,1) .75s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-sub {
  text-align: center;
  margin: 34px auto 0;
  max-width: 46ch;
  color: var(--muted);
}
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ---- stats ------------------------------------------------------------- */

.stats {
  margin-top: clamp(70px, 11vh, 120px);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: 30px 0 34px;
  border-right: 1px solid var(--rule);
  padding-left: 26px;
}
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat b {
  display: block;
  font-weight: 300;
  font-size: clamp(2.35rem, 4vw, 3.47rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat span {
  font-family: var(--label); font-weight: 500;
  font-size: 12.6px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 12px;
}

/* ---- generic band ------------------------------------------------------ */

.band { padding: clamp(80px, 11vh, 134px) 0; }
.band--rule { border-top: 1px solid var(--rule); }

.band-head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 46ch);
  gap: 48px;
  align-items: end;
  margin-bottom: 52px;
}

/* ---- news mosaic ------------------------------------------------------- */

/* Four stories, four different sizes — the layout ranks the news instead of
   flattening it into an even row. */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mosaic-right { display: grid; grid-template-rows: auto auto; gap: 22px; }
.mosaic-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.m-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
}
/* left column is one 4:4 square; the right column stacks a 4:2 over two 2:2 */
.m--tall { height: 100%; min-height: 460px; }
.m--wide { aspect-ratio: 2 / 1; }
.m--sq   { aspect-ratio: 1 / 1; }

.m-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.3,0,.2,1);
}
.m-card:hover img { transform: scale(1.05); }

/* the scrim is what makes overlaid type legible on any photo */
.m-card::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,12,18,.93) 0%, rgba(8,12,18,.55) 32%, rgba(8,12,18,.12) 68%),
    /* second, shallow wash so the category label survives a bright sky at the top */
    linear-gradient(to bottom, rgba(8,12,18,.64) 0%, rgba(8,12,18,0) 28%);
}
.m-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
}
.m-card .eyebrow { color: var(--paper); opacity: .95; margin: 0; }
.m-card .eyebrow::before { background: var(--sky); }
.m-card h3 {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 10px;
  font-size: 25.3px;
}
.m--tall h3 { font-size: clamp(1.79rem, 2.6vw, 2.63rem); }
.m--wide h3 { font-size: clamp(1.46rem, 1.9vw, 1.96rem); }
.m-card time {
  font-family: var(--label); font-weight: 500;
  font-size: 12.6px;
  letter-spacing: 0.12em;
  opacity: .75;
}

/* an article with no image keeps a colour block rather than a grey placeholder */
.m-card--blank { background: var(--navy); }
.m-card--blank.is-sky { background: var(--sky); color: var(--ink); }
.m-card--blank::after { display: none; }
.m-card--blank .peak { width: 74px; height: auto; }
.m-card--blank .peak path { fill: var(--sky); }
.m-card--blank.is-sky .peak path { fill: var(--navy); }
.m-card--blank.is-sky .eyebrow { color: var(--ink); }
.m-card--blank.is-sky .eyebrow::before { background: var(--navy); }

/* plain article rows under the tiles */
.rows { margin-top: 46px; border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .25s cubic-bezier(.4,0,.2,1), color .2s;
}
.row:hover { padding-left: 14px; color: var(--navy); }
.row h4 { font-weight: 400; font-size: 21.8px; margin: 0; letter-spacing: -0.01em; }
.row time { font-family: var(--label); font-weight: 500; font-size: 12.6px; letter-spacing: 0.12em; color: var(--muted); }

/* ---- approach ---------------------------------------------------------- */

.approach { display: grid; gap: 0; }
.approach-item {
  display: grid;
  grid-template-columns: 200px 1fr minmax(0, 44ch);
  gap: 48px;
  padding: 42px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.approach-item:last-child { border-bottom: 1px solid var(--rule); }
.approach-item h3 {
  font-weight: 300;
  font-size: clamp(1.68rem, 2.4vw, 2.3rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.approach-item p { margin: 0; color: var(--muted); }

/* ---- portfolio logo matrix (signature element) -------------------------- */

.logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.logo-cell {
  position: relative;
  background: #fff;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  isolation: isolate;   /* keep mix-blend-mode inside the cell, not the page */
}
/* the source logos are wildly inconsistent (A-14) — cap them to one optical
   size so a full-bleed blob and a thin wordmark read at the same weight */
.logo-cell img {
  max-width: 74%;
  max-height: 52%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;      /* drops the white plates on the JPG logos */
  transition: opacity .25s;
}
.logo-cell .meta {
  position: absolute;
  inset: 0;
  background: var(--navy);
  color: var(--paper);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity .25s;
}
.logo-cell .meta b {
  font-weight: 400;
  font-size: 17.2px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.logo-cell .meta span {
  font-family: var(--label); font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: .75;
}
.logo-cell:hover .meta,
.logo-cell:focus-visible .meta { opacity: 1; }
.logo-cell:hover img { opacity: .12; }


/* ---- three-up columns -------------------------------------------------- */

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.col { border-top: 1px solid var(--ink); padding-top: 20px; }
.col h3 {
  max-width: 22ch;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.01em;
  margin: 16px 0 10px;
}
.col p { margin: 0; color: var(--muted); font-size: 17.8px; max-width: 42ch; }

/* ---- partners marquee -------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;   /* contain the logo blend mode */
}
.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: slide 44s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  flex: none;
  display: grid;
  place-items: center;
  width: 240px;
  padding: 30px 44px;
  border-right: 1px solid var(--rule);
}
/* partner logos arrive at wildly different ratios — normalise on height */
.marquee-item img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.15);
  opacity: .8;
  transition: filter .25s, opacity .25s;
}
.marquee-item:hover img { filter: none; opacity: 1; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- quote ------------------------------------------------------------- */

.quote {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  margin: 0;
  align-items: start;
}
.quote blockquote {
  margin: 0;
  max-width: 26ch;
  font-weight: 300;
  font-size: clamp(1.79rem, 3.2vw, 2.91rem);
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-indent: -0.42em; /* hang the opening quote mark on the margin */
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.quote figcaption img {
  width: 46px; height: 46px;
  object-fit: contain;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 5px;
}
.quote .who { line-height: 1.4; }
.quote .who strong { font-weight: 500; font-size: 17.2px; }
.quote .who span {
  display: block;
  font-family: var(--label); font-weight: 500;
  font-size: 12.6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- CTA band ---------------------------------------------------------- */

.cta {
  background: var(--navy);
  color: var(--paper);
  padding: clamp(76px, 11vh, 130px) 0;
}
.cta h2 {
  font-weight: 300;
  font-size: clamp(2.24rem, 4.6vw, 4.03rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 34px;
  max-width: 17ch;
}

/* ---- footer ------------------------------------------------------------ */

.foot { padding: 72px 0 40px; border-top: 1px solid var(--rule); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 44px;
}
.foot h4 {
  font-family: var(--label); 
  font-size: 12.6px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 11px; font-size: 17.2px; }
.foot a { border-bottom: 1px solid transparent; transition: border-color .18s; }
.foot a:hover { border-color: var(--ink); }
.foot .tagline { color: var(--muted); font-size: 17.2px; max-width: 30ch; margin: 16px 0 0; }

.subscribe { display: flex; border: 1px solid var(--ink); margin-top: 14px; }
.subscribe input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 16.1px;
  color: var(--ink);
  min-width: 0;
}
.subscribe input:focus { outline: 2px solid var(--navy); outline-offset: -2px; }
.subscribe button {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--label); font-weight: 500;
  font-size: 12.6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 18px;
  cursor: pointer;
}

/* The newsletter's answer, printed under the form it belongs to. */
.foot-msg { list-style: none; margin: 12px 0 0; padding: 0; }
.foot-msg li {
  font-family: var(--label); font-size: 12.6px; letter-spacing: .06em;
  color: var(--navy); margin: 0;
}
.foot-msg li.error { color: #a32020; }

.foot-base {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--label); font-weight: 500;
  font-size: 12.6px;
  letter-spacing: 0.1em;
  color: var(--muted);
  flex-wrap: wrap;
}

/* ---- mobile drawer ----------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--navy);
  color: var(--paper);
  padding: 30px var(--gut);
  transform: translateY(-100%);
  display: flex;
  flex-direction: column;
  /* while closed the drawer must be fully out of the paint and focus tree,
     otherwise its links stay tabbable and clickable behind the header */
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.6,0,.2,1), visibility 0s linear .4s;
}
.drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: transform .4s cubic-bezier(.6,0,.2,1);
}
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer button {
  background: none; border: 0; color: inherit;
  font-size: 34.5px; line-height: 1; cursor: pointer; padding: 0;
}
.drawer nav { margin-top: auto; margin-bottom: auto; }
.drawer nav a {
  display: block;
  font-weight: 300;
  font-size: clamp(2.02rem, 7vw, 2.91rem);
  letter-spacing: -0.02em;
  padding: 12px 0;
  border-bottom: 1px solid rgba(246,245,242,.18);
}

/* ---- cookie bar -------------------------------------------------------- */

.cookie {
  position: fixed;
  left: var(--gut); bottom: 24px;
  z-index: 80;
  width: min(420px, calc(100% - (var(--gut) * 2)));
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 20px;
}
.cookie p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.cookie .row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie .btn { padding: 10px 16px; }
.cookie details { margin-top: 14px; }
.cookie summary {
  font-family: var(--label); font-weight: 500; font-size: 12.6px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; color: var(--muted);
}
.cookie details ul { list-style: none; padding: 0; margin: 12px 0 0; }
.cookie details li {
  display: flex; justify-content: space-between;
  font-size: 14.9px; padding: 7px 0; border-top: 1px solid var(--rule);
}
/* Set once a choice has been made, and cleared by the footer's Cookie
   settings link. A class rather than [hidden], because .cookie sets display
   and would outrank the browser's own [hidden] rule. */
.cookie--off { display: none; }

/* ---- reveal on scroll -------------------------------------------------- */

/* hidden state only applies when JS is running — content is never lost */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.3,0,.2,1), transform .5s cubic-bezier(.3,0,.2,1);
}
.js [data-reveal].in { opacity: 1; transform: none; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--paper);
  padding: 12px 18px; z-index: 100;
  font-family: var(--label); font-weight: 500; font-size: 12.6px; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 1080px) {
  .nav, .head-right { display: none; }
  .burger { display: flex; }
  .approach-item { grid-template-columns: 1fr; gap: 16px; }
  .band-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .mosaic { grid-template-columns: 1fr; }
  .m--tall { min-height: 0; aspect-ratio: 1 / 1; height: auto; }
  .quote { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 720px) {
  :root { --gut: 22px; }
  .mosaic-pair { grid-template-columns: 1fr; }
  .m--sq { aspect-ratio: 4 / 3; }
  .m-body { padding: 22px; }
  .cols, .foot-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0; }
  .stat:last-child { border-bottom: 0; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .hero-line { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ring path { stroke-dashoffset: 0; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* ---- page head --------------------------------------------------------- */

.pagehead { padding: 66px 0 44px; border-bottom: 1px solid var(--rule); }
.crumb {
  font-family: var(--label); font-weight: 500; font-size: 12.6px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 22px;
}
.crumb a:hover { color: var(--navy); }
.pagehead h1 {
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -0.03em; line-height: 1.05;
  margin: 0; max-width: 20ch;
}
.pagehead .lede { margin: 24px 0 0; }

/* ---- filter bar -------------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.filters select {
  font-family: var(--label); font-weight: 500; font-size: 12.6px; letter-spacing: .08em;
  text-transform: uppercase; padding: 12px 15px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  border-radius: 0; cursor: pointer;
}
.filters input {
  padding: 12px 15px; border: 1px solid var(--rule);
  background: transparent; font-family: inherit; font-size: 16px; min-width: 220px;
}
.filters select:focus, .filters input:focus { outline: 2px solid var(--sky); outline-offset: -2px; }
.count {
  font-family: var(--label); font-weight: 500; font-size: 12.6px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 28px 0;
}

/* ---- portfolio grid ---------------------------------------------------- */

.pgrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  /* The cards carry their own ring, so the grid draws nothing. Filling the
     gaps from a rule-coloured background would leave a grey slab beside the
     last row whenever a filter returns fewer cards than there are columns. */
  gap: 0; background: none; border: 0;
}
.pcard {
  position: relative;
  background: #fff; padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
  /* inset ring rather than a border: the logos sit on white, so tinting the whole
     card on hover dirties them. An inset shadow also costs no layout width. */
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .2s;
}
.pcard:hover { box-shadow: inset 0 0 0 2px var(--navy); }

/* Status flag. A company can pass through more than one state — SPV first,
   then an exit — so the card shows the current one and counts the rest. The
   full history is spelled out on the company page. */
.pcard .flag {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  font-family: var(--label); font-weight: 600;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  /* Each status carries its own colour, set in the admin and written into a
     style attribute. This is the fallback for a status that has none. */
  background: var(--navy); color: var(--paper);
}
.pcard .flag i { font-style: normal; opacity: .65; }
/* A definite height, not aspect-ratio: the image's percentage max-height has to
   resolve against something, and against an aspect-ratio box it feeds back into
   the box's own size — which left rows misaligned by a few pixels. */
.pcard .shot { height: 150px; flex: none; display: grid; place-items: center; isolation: isolate; }
/* same optical cap as the home grid — the source logos are not consistent */
/* min-height:0 — a grid item's automatic minimum size otherwise beats max-height
   and the taller logos spill out of the frame into the caption. */
.pcard .shot img {
  max-width: 78%; max-height: 72%; min-width: 0; min-height: 0;
  object-fit: contain; mix-blend-mode: multiply;
}
.pcard .shot .noimg {
  font-weight: 300; font-size: 26px; letter-spacing: -0.02em;
  color: var(--muted); text-align: center;
}
.pcard h3 { margin: 0; font-weight: 500; font-size: 19px; }
.pcard .url {
  font-family: var(--label); font-weight: 500; font-size: 12px;
  letter-spacing: .06em; color: var(--muted); margin: 4px 0 0;
}
.pcard .tags { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  display: inline-block; font-family: var(--label); font-weight: 500; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--rule); color: var(--muted);
}

/* ---- people ------------------------------------------------------------ */

.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.person .shot {
  aspect-ratio: 3 / 4; margin-bottom: 18px;
  background: var(--navy); color: var(--paper);
  display: grid; place-items: center;
  font-weight: 300; font-size: 44px; letter-spacing: .02em;
}
.person .shot img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin: 0 0 4px; font-weight: 500; font-size: 19px; }
.person p { margin: 0; color: var(--muted); font-size: 15.5px; }
.person a {
  font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
  display: inline-block; margin-top: 12px;
}
.person a:hover { text-decoration: underline; }

/* ---- jobs -------------------------------------------------------------- */

.tabs { display: flex; gap: 40px; border-bottom: 1px solid var(--rule); }
/* The prototype used buttons; they are links now, because each tab is a URL
   the reader can share and the back button should return to. */
.tabs a,
.tabs button {
  background: none; border: 0; padding: 20px 0; margin-bottom: -1px;
  font-family: var(--label); font-weight: 500; font-size: 12.6px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on,
.tabs button.on { color: var(--ink); border-color: var(--navy); }

.with-side { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }
/* Contact sets two equal columns; the legal pages keep a narrow index.
   Both are overridden by the single-column rule in the mobile block. */
.with-side--even { grid-template-columns: 1fr 1fr; gap: 80px; }
.with-side--index { grid-template-columns: 240px 1fr; gap: 80px; }
/* Prose on the left, the sign-in card on the right, which stops growing. */
.with-side--signin { grid-template-columns: 1fr minmax(0, 420px); gap: 80px; }
.with-side--detail { grid-template-columns: 1fr 340px; gap: 80px; }

/* One or two related companies beside an article: the cards keep the width
   they have on the portfolio page rather than stretching across the band. */
.pgrid--narrow { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); }
.map { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--rule); filter: grayscale(1); }

/* The cookie table is the only wide element on a legal page, so it scrolls
   inside its own box rather than pushing the page sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 20px 0 32px; }
.cookie-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.cookie-table th,
.cookie-table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cookie-table th { font-family: var(--label); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; color: var(--muted); }

/* The document you are already reading should not look like somewhere to go. */
.side .row[aria-current="page"] h4 { color: var(--navy); }
.side h4 {
  font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 18px;
}
.side .f { margin-bottom: 18px; }
.side label { display: block; font-size: 14px; margin: 0 0 6px; color: var(--muted); }
.side select, .side input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rule);
  background: transparent; font-family: inherit; font-size: 15px; border-radius: 0;
}

.joblist { border-top: 1px solid var(--rule); }
.job {
  display: grid; grid-template-columns: 66px 1fr auto;
  gap: 26px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.job .mark {
  width: 66px; height: 66px; border: 1px solid var(--rule);
  background: #fff; display: grid; place-items: center; isolation: isolate;
}
.job .mark img { max-width: 72%; max-height: 58%; object-fit: contain; mix-blend-mode: multiply; }
.job h3 { margin: 0 0 8px; font-weight: 400; font-size: 21px; letter-spacing: -0.01em; }
.job .meta span:first-child { color: var(--ink); }
.job .meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--label); font-weight: 500; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- accordion --------------------------------------------------------- */

.acc { border-top: 1px solid var(--rule); max-width: 92ch; }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary {
  list-style: none; cursor: pointer; padding: 28px 0;
  font-size: 21px; font-weight: 400; letter-spacing: -0.01em;
  display: flex; justify-content: space-between; gap: 28px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--label); font-weight: 500; color: var(--navy); flex: none; }
.acc details[open] summary::after { content: "–"; }
.acc .a { padding: 0 0 28px; color: var(--muted); max-width: 78ch; margin: 0; }
/* Answers come out of the editor as rich text, so the first and last
   paragraph would otherwise push the padding out of shape. */
.acc .a > :first-child { margin-top: 0; }
.acc .a > :last-child { margin-bottom: 0; }

/* ---- fact cards -------------------------------------------------------- */

.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.fact { background: var(--paper); padding: 36px 32px; }
.fact h3 { margin: 0 0 14px; font-weight: 500; font-size: 19px; }
.fact p { margin: 0; color: var(--muted); font-size: 16.5px; }

/* ---- checklist --------------------------------------------------------- */

.check { list-style: none; padding: 0; margin: 0; max-width: 72ch; border-top: 1px solid var(--rule); }
.check li {
  padding: 22px 0 22px 44px; border-bottom: 1px solid var(--rule);
  position: relative; font-size: 19px; font-weight: 300;
}
.check li::before { content: "→"; position: absolute; left: 0; color: var(--sky); }

/* ---- prose ------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 { font-weight: 400; font-size: 26px; letter-spacing: -0.015em; margin: 46px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 20px; }
.prose ul { padding-left: 22px; margin: 0 0 20px; }
.prose li { margin-bottom: 9px; }
.prose blockquote {
  margin: 36px 0; padding-left: 28px; border-left: 2px solid var(--sky);
  font-weight: 300; font-size: 24px; line-height: 1.35; letter-spacing: -0.02em;
}

/* ---- article ----------------------------------------------------------- */

/* An article is read, not browsed: the header, the picture and the text share
   one centred axis, and the picture is allowed to be wider than the measure so
   it still carries the page without filling the screen. */
.pagehead--article { text-align: center; padding-bottom: 56px; }
.pagehead--article .crumb { margin-bottom: 30px; }
.pagehead--article .eyebrow { margin: 0 0 20px; justify-content: center; }
.pagehead--article h1 { max-width: 22ch; margin: 0 auto; }
.pagehead--article .byline { margin: 26px 0 0; }

/* Wide enough to carry the page, capped so a square image — several of the
   news pictures are square — does not fill the screen the way a landscape one
   would not. 700px is the height signed off in review. */
.article-hero { max-width: 920px; margin: 0 auto 60px; }
.article-hero img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 700px; width: auto; height: auto;
}

.prose--article { max-width: 68ch; margin: 0 auto; font-size: 18px; line-height: 1.72; }
/* A written page with no sidebar beside it — centre the column so it does not
   hug the left edge of a wide shell. */
.prose--solo { margin-inline: auto; }

/* ---- what the editor writes -------------------------------------------
   CKEditor emits figure.image for a picture, adds image-style-* for how it
   was placed and image_resized with an inline width when it was sized. None
   of that carried a style before, so an aligned image was not aligned and a
   half-width image was full width. These rules make the admin's choices real
   on the page. */
.prose figure.image { margin: 34px 0; }
.prose figure.image img { display: block; width: 100%; height: auto; }
.prose figure.image figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.prose figure.image.image_resized img { width: 100%; }
.prose figure.image-style-side {
  float: right;
  max-width: 45%;
  margin: 6px 0 20px 30px;
}
.prose figure.image-style-align-left {
  float: left;
  max-width: 45%;
  margin: 6px 30px 20px 0;
}
.prose figure.image-style-align-right {
  float: right;
  max-width: 45%;
  margin: 6px 0 20px 30px;
}
.prose .image-inline img { max-width: 100%; height: auto; vertical-align: baseline; }
/* A floated image must not run past the end of its own section. */
.prose::after { content: ""; display: block; clear: both; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 15px;
}
.prose table td,
.prose table th {
  border: 1px solid var(--rule);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}
.prose table th { font-weight: 500; background: var(--paper-2); }
.prose figure.table { margin: 30px 0; overflow-x: auto; }
.prose figure.table figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* mediaEmbed — a YouTube link pasted into the text */
.prose figure.media { margin: 34px 0; }
.prose figure.media oembed { display: block; }
.prose figure.media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

.prose .text-tiny { font-size: 0.75em; }
.prose .text-small { font-size: 0.875em; }
.prose .text-big { font-size: 1.15em; }
.prose .text-huge { font-size: 1.35em; }

/* the alignment tool */
.prose p[style*="text-align:center"],
.prose h2[style*="text-align:center"],
.prose h3[style*="text-align:center"] { text-align: center; }

@media (max-width: 640px) {
  /* Floating a picture beside text stops working at this width — it leaves a
     column two words wide. Everything goes full width instead. */
  .prose figure.image,
  .prose figure.image-style-side,
  .prose figure.image-style-align-left,
  .prose figure.image-style-align-right {
    float: none;
    max-width: 100%;
    width: 100% !important;
    margin: 26px 0;
  }
}

/* ---- files attached to a page ---------------------------------------- */
.attached { margin: 44px 0 0; border-top: 1px solid var(--rule); }
.attached h2 { font-size: 20px; font-weight: 400; margin: 26px 0 6px; }
.attached a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
}
.attached a:hover { opacity: 0.7; }
.attached .name { flex: 1; }
.attached .meta {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.prose--article .share { justify-content: flex-start; }
.byline {
  font-family: var(--label); font-weight: 500; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 32px;
}
.share { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); }

/* ---- news index grid --------------------------------------------------- */

.ngrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---- form -------------------------------------------------------------- */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form .f { display: flex; flex-direction: column; gap: 9px; }
.form .f--full { grid-column: 1 / -1; }
/* Sign-in has one field per row; the two-column default would strand the button. */
.form--one { grid-template-columns: 1fr; }
.form button.btn { align-self: flex-start; }
.form label {
  font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.form input, .form textarea {
  padding: 14px 16px; border: 1px solid var(--rule); background: #fff;
  font-family: inherit; font-size: 16.5px; color: var(--ink); border-radius: 0;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--sky); outline-offset: -2px; }
.form textarea { min-height: 160px; resize: vertical; }
/* Server-side validation only, so the message sits under the field it belongs to. */
.f-error { font-size: 13px; color: #a3231f; }
.form .f:has(.f-error) input,
.form .f:has(.f-error) textarea { border-color: #a3231f; }

.notice {
  border-left: 2px solid var(--navy);
  padding: 14px 0 14px 18px;
  margin: 0 0 28px;
  max-width: 78ch;
}
.notice--bad { border-left-color: #a3231f; }

/* ---- key/value list ---------------------------------------------------- */

.info { border-top: 1px solid var(--ink); }
.info > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 22px;
  padding: 17px 0; border-bottom: 1px solid var(--rule); font-size: 16.5px;
}
.info .k {
  font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- map placeholder --------------------------------------------------- */

.map {
  aspect-ratio: 16 / 10; border: 1px solid var(--rule); background: var(--paper-2);
  display: grid; place-items: center;
  font-family: var(--label); font-weight: 500; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- error pages ------------------------------------------------------- */

.err { text-align: center; padding: clamp(90px, 16vh, 190px) 0; }
.err .code {
  font-weight: 300; font-size: clamp(5rem, 16vw, 13rem);
  line-height: .9; letter-spacing: -0.05em; color: var(--sky);
}
.err h1 { font-weight: 300; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.03em; margin: 24px 0 16px; }
.err p { color: var(--muted); max-width: 46ch; margin: 0 auto 34px; }
.err .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- inner-page responsive --------------------------------------------- */

@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .people { grid-template-columns: repeat(3, 1fr); }
  .ngrid { grid-template-columns: repeat(2, 1fr); }
  .with-side { grid-template-columns: 1fr; gap: 32px; }
  .facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .pgrid { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .ngrid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .job { grid-template-columns: 1fr; gap: 14px; }
  .job .mark { display: none; }
  .info > div { grid-template-columns: 1fr; gap: 4px; }
  .tabs { gap: 24px; }
}

/* ---- pagination -------------------------------------------------------- */

.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 52px; }
.pager a, .pager span {
  min-width: 48px; height: 48px; padding: 0 12px;
  display: grid; place-items: center;
  font-family: var(--label); font-weight: 500; font-size: 13px; letter-spacing: .08em;
  border: 1px solid var(--rule); color: var(--muted);
  transition: color .2s, border-color .2s, background .2s;
}
.pager a:hover { border-color: var(--navy); color: var(--navy); }
.pager .on { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.pager .step { padding: 0 22px; text-transform: uppercase; }
/* first page has no previous — keep the slot so the row does not jump */
.pager .off { opacity: .35; pointer-events: none; }
.pager .gap { border-color: transparent; min-width: 24px; padding: 0; }
.pager-note {
  margin-left: auto;
  font-family: var(--label); font-weight: 500; font-size: 12.6px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 0; height: auto; min-width: 0; padding: 0;
}

@media (max-width: 720px) {
  .pager-note { display: none; }
  .pager .step { padding: 0 14px; }
}


/* ---- investor portal --------------------------------------------------- */

.signin {
  background: var(--paper-2); border: 1px solid var(--rule); padding: 36px 32px;
}
.signin .form input { background: #fff; }
/* the sign-in button is an <a> in the prototype, so it needs the input rhythm */
.signin .form .btn { text-align: center; }

/* The quiet line under a block: who you are signed in as, where to write. */
.side-note { color: var(--muted); font-size: 15px; margin-top: 26px; max-width: 62ch; }
.ink { color: var(--navy); border-bottom: 1px solid var(--navy); }

.note-demo {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--rule);
  font-family: var(--label); font-weight: 500;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.7; color: var(--muted);
}

.docs { list-style: none; padding: 0 0 28px; margin: 0; }
.docs li { border-bottom: 1px solid var(--rule); }
.docs li:last-child { border-bottom: 0; }
.docs a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 28px;
  padding: 14px 4px; font-size: 16.5px;
}
.docs a:hover { color: var(--navy); background: var(--paper-2); }
.doc-meta {
  flex: none;
  font-family: var(--label); font-weight: 500;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.docs a:hover .doc-meta { color: var(--navy); }
.doc-count {
  font-family: var(--label); font-weight: 500;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 auto 0 16px;
}
.acc summary { align-items: baseline; }


/* ---- ink link ----------------------------------------------------------- */

/* A drawn underline rather than a border. Eight passes of the same pen are held
   in the SVG and swapped one a second, so the line never settles — the same
   trick as a rough-drawn animation, where the wobble is the point. The beat is
   e2.vc's, measured on their page. */
.ink-link {
  display: inline-block;
  position: relative;
  padding-bottom: 24px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ink-link__text { display: inline-block; transition: color .2s, transform .2s; }
.ink-link__text span { font-size: .62em; vertical-align: .18em; margin-left: .1em; }
.ink-link:hover .ink-link__text { color: var(--navy); transform: translateX(3px); }

/* the drawn rule itself — placement is left to whatever it sits under */
.ink-rule { position: absolute; overflow: visible; pointer-events: none; }
/* the browser's own [hidden] rule only covers HTML elements, so the SVG groups
   need to be told explicitly */
.ink-rule > g[hidden] { display: none; }
.ink-rule path {
  fill: none;
  stroke: var(--sky);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.ink-link__rule { left: -2%; bottom: 0; width: 104%; height: 21px; }
.ink-link__rule path { stroke-width: 2; }
.ink-link:hover .ink-rule path { stroke: var(--navy); }

/* under a dateline the same hand has to press lighter — small caps cannot carry
   the weight the headline link does */
.ink-byline { position: relative; display: inline-block; padding-bottom: 14px; }
.ink-byline__rule { left: -3%; bottom: 0; width: 106%; height: 12px; }
.ink-byline__rule path { stroke-width: 1.5; }

/* the company mark now heads the Company panel */
.co-mark {
  border: 1px solid var(--rule); background: #fff;
  aspect-ratio: 2 / 1; margin-bottom: 26px;
  display: grid; place-items: center;
}
.co-mark img { max-width: 62%; max-height: 60%; object-fit: contain; mix-blend-mode: multiply; }

@media (prefers-reduced-motion: reduce) {
  .ink-link__text { transition: none; }
}

/* On a company page the quote has no eyebrow rail beside it. */
.quote--single { grid-template-columns: 1fr; margin-top: 56px; }