/* ==========================================================================
   Highgate Holdings - site styles

   Palette is taken directly from the investor deck theme. If the brand
   shifts, edit the custom properties below and the whole site follows.
   ========================================================================== */

:root {
  /* Brand palette (from the investor deck theme) */
  --green:        #1B4332;  /* primary dark green */
  --green-deep:   #143327;  /* hover / pressed state */
  --olive:        #6B7C3E;  /* secondary green */
  --brown:        #5C4A32;  /* warm brown, secondary text */
  --ink:          #2C2416;  /* near-black body text (warm, not neutral) */
  --cream:        #F7F3EE;  /* page ground */
  --tan:          #E8DDD0;  /* section fill, rules, borders */
  --tan-soft:     #F0E8DD;  /* lighter tan for large fills */
  --gold:         #C9973A;  /* accent, used sparingly */
  --white:        #FFFFFF;

  /* Type */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --measure: 1180px;   /* max content width */
  --narrow:  760px;    /* max width for running prose */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --section: clamp(3.5rem, 8vw, 6.5rem);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.2;
  color: var(--green);
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.15rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--olive); }

/* Visible focus for keyboard users - required for accessibility, do not remove */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--green); color: var(--white);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Section color treatments */
.section--cream { background: var(--cream); }
.section--tan   { background: var(--tan-soft); }
.section--green { background: var(--green); color: var(--tan); }
.section--green h2, .section--green h3 { color: var(--white); }
.section--green a { color: var(--white); }

.lede {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--brown);
}
.section--green .lede { color: var(--tan); }

/* Short gold rule used to open major sections */
.rule {
  width: 54px; height: 2px;
  background: var(--gold);
  border: 0; margin: 0 0 1.75rem;
}
.rule--center { margin-inline: auto; }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Header / navigation
   Logo sits top-left and links Home from every page. Nav is right-aligned.
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--tan);
  position: sticky; top: 0; z-index: 100;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: .9rem;
}

/* Logo lockup. flex: 0 0 auto plus max-width: none stops the flex row from
   squashing the mark on narrow screens - without them the global
   img { max-width: 100% } compresses it and distorts the letterforms. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo img { height: 44px; width: auto; max-width: none; }

@media (max-width: 480px) {
  .logo img { height: 38px; }
}
.logo__text {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.1;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.4rem); }

.nav a {
  font-size: .945rem;
  letter-spacing: .015em;
  color: var(--ink);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--green); border-bottom-color: var(--tan); }
.nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--tan);
  border-radius: 2px; padding: .55rem .8rem;
  font: inherit; font-size: .9rem; color: var(--green);
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    /* The containing block is the padding box of .site-header__inner, so 0
       lands on the viewport edge and the padding below restores the gutter. */
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--tan);
    padding: .5rem var(--gutter) 1.25rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: .8rem; border-bottom: 1px solid var(--tan); }
  .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
}

/* --------------------------------------------------------------------------
   Hero (Home only) - large image, firm name, one high-level line
   -------------------------------------------------------------------------- */

.hero { position: relative; background: var(--green); }

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  height: clamp(440px, 70vh, 740px);
  object-fit: cover;
  /* The hero band is far wider than the photograph, so cover crops it hard.
     Biasing upward keeps the church spire and skyline in frame instead of
     landing on the middle of the buildings. */
  object-position: 50% 22%;
}

/* Scrim keeps the headline legible over whatever photograph is dropped in */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,51,39,.62) 0%, rgba(20,51,39,.52) 45%, rgba(20,51,39,.84) 100%);
}

.hero__body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--gutter);
}

.hero__name {
  font-family: var(--serif);
  color: var(--white);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

.hero__divider {
  width: 92px; height: 1px; background: rgba(247,243,238,.55);
  border: 0; margin: 0 0 1.6rem;
}

/* Title case, set in the markup rather than with text-transform: capitalize,
   which would also capitalise "and". */
.hero__line {
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 2.15rem);
  line-height: 1.32;
  max-width: 24ch;
  text-wrap: balance;
  margin: 0 0 1.15rem;
}

.hero__sub {
  color: var(--tan);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.65;
  max-width: 58ch;
  margin: 0 0 2.2rem;
}

/* --------------------------------------------------------------------------
   Page title band (every page except Home)
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--green);
  color: var(--tan);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.page-head h1 { color: var(--white); margin-bottom: 0; }
.page-head p {
  color: var(--tan);
  max-width: 62ch;
  margin-top: 1.1rem;
  margin-bottom: 0;
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 2.1rem;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--white);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }

.btn--ghost { background: transparent; border-color: rgba(247,243,238,.7); color: var(--white); }
.btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--green); }

.btn--outline { background: transparent; color: var(--green); }
.btn--outline:hover { background: var(--green); color: var(--white); }

/* --------------------------------------------------------------------------
   Home - "at a glance" strip
   -------------------------------------------------------------------------- */

.glance { background: var(--tan-soft); border-bottom: 1px solid var(--tan); }
/* The middle column carries the longest value, so it gets extra width to keep
   the three columns visually balanced. */
.glance__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.25rem, 4vw, 3rem);
  text-align: center;
}
.glance__label {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brown); margin: 0 0 .45rem;
}
.glance__value {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--green); margin: 0; line-height: 1.4;
  text-wrap: balance;
}
@media (max-width: 700px) {
  .glance__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Card grids - the "buckets" used on About and Investment Criteria
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--tan);
  border-top: 3px solid var(--green);
  padding: clamp(1.5rem, 2.6vw, 2rem);
}
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--brown); font-size: .99rem; }

.section--green .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(232,221,208,.22);
  border-top-color: var(--gold);
}
.section--green .card p { color: var(--tan); }

/* Cards whose heading / description / examples should line up across the row.
   Subgrid gives all three cards the same row tracks, so the rule above the
   examples sits at one height regardless of description length. Only above the
   two-column breakpoint, where there is a single row to align. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .grid--align { grid-template-rows: auto 1fr auto; }
    .grid--align > .card {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
    .grid--align > .card > p { margin-bottom: 0; }
  }
}

/* Two-row variant for heading + bullet-list cards (About > Why This Segment).
   Same idea as .grid--align above, but these cards carry only a heading and a
   list, so they span two rows rather than three. Sharing the heading row keeps
   the first bullet of all three cards at one height even when one heading
   wraps to an extra line. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .grid--align-2 { grid-template-rows: auto 1fr; }
    .grid--align-2 > .card {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      /* A subgrid inherits the parent grid's row gap, and grid items do not
         collapse margins the way blocks do. Without both resets the heading
         would sit 55px off its list here but 22px off it below the
         breakpoint. The list's own margin-top sets the gap. */
      row-gap: 0;
    }
    .grid--align-2 > .card > h3 { margin-bottom: 0; }
  }
}

/* Illustrative examples inside an archetype card. Deliberately subordinate to
   the description above them - the archetype is the criterion, these are only
   what it looks like in practice. */
.card__examples {
  margin-top: 1.15rem;
  padding-top: .9rem;
  border-top: 1px solid var(--tan);
}
.card__examples span {
  display: block;
  margin-bottom: .55rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown);
}
.card__examples ul { list-style: none; margin: 0; padding: 0; }
.card__examples li {
  position: relative;
  padding-left: .95rem;
  margin-bottom: .35rem;
  font-size: .87rem;
  line-height: 1.45;
}
.card__examples li:last-child { margin-bottom: 0; }
.card__examples li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.section--green .card__examples { border-top-color: rgba(232,221,208,.22); }
.section--green .card__examples span { color: var(--gold); }
.section--green .card__examples li { color: var(--tan); }

/* The line that catches a reader who has just decided they do not fit. */
.section-note {
  max-width: 82ch;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  font-size: .95rem;
  line-height: 1.65;
  font-style: italic;
  font-weight: 600;
  color: var(--brown);
}
.section--green .section-note { color: var(--tan); }

/* Numbered cards - "What We Believe Will Win" */
.card__num {
  font-family: var(--serif);
  font-size: .82rem; letter-spacing: .12em;
  color: var(--gold);
  display: block; margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   Criteria columns - the three-panel block on Investment Criteria
   -------------------------------------------------------------------------- */

.criteria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--white);
  border: 1px solid var(--tan);
}

.criteria__head {
  background: var(--green);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 1.1rem clamp(1.25rem, 2.2vw, 1.75rem);
  margin: 0;
}
.criteria__col + .criteria__col .criteria__head { box-shadow: inset 1px 0 0 rgba(247,243,238,.18); }
.criteria__col + .criteria__col { border-left: 1px solid var(--tan); }

.criteria__list {
  list-style: none;
  margin: 0;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
}
.criteria__list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
  font-size: .99rem;
  color: var(--ink);
}
.criteria__list li:last-child { margin-bottom: 0; }
.criteria__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.criteria__list strong { color: var(--green); font-weight: 600; }

@media (max-width: 860px) {
  .criteria { grid-template-columns: 1fr; }
  .criteria__col + .criteria__col { border-left: 0; border-top: 1px solid var(--tan); }
}

/* --------------------------------------------------------------------------
   Deal Evaluation Approach - the dual-pronged graphic
   Two rows of three cards, each row labelled on the left, joined by a plus.
   -------------------------------------------------------------------------- */

.evaluation { margin-top: 2.5rem; }

.eval-row {
  display: grid;
  grid-template-columns: minmax(172px, 0.95fr) repeat(3, 1.55fr);
  gap: clamp(.75rem, 1.4vw, 1.1rem);
}

/* The row label reads as the heading for the three cards beside it. */
.eval-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--green);
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.2;
}

.eval-card {
  background: var(--white);
  border: 1px solid var(--tan);
  border-top: 4px solid var(--gold);
  padding: clamp(1.1rem, 2vw, 1.5rem);
}
.eval-card h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--tan);
  margin-bottom: .9rem;
}
.eval-card ul { list-style: none; margin: 0; padding: 0; }
.eval-card li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: .5rem;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--ink);
}
.eval-card li:last-child { margin-bottom: 0; }
.eval-card li::before {
  content: "";
  position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
}

/* The plus joins the two halves - both must hold, not either. It sits in the
   same grid as the rows so it centres exactly on the label column, however
   wide that column resolves to. */
.eval-join {
  display: grid;
  grid-template-columns: minmax(172px, 0.95fr) repeat(3, 1.55fr);
  gap: clamp(.75rem, 1.4vw, 1.1rem);
  padding-block: 1.1rem;
}
.eval-plus {
  grid-column: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .eval-row { grid-template-columns: 1fr; }
  .eval-label { padding: 1rem; }
  .eval-join { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Spec sheet - the quantitative criteria
   -------------------------------------------------------------------------- */

.specs { margin: 2.25rem 0 0; border-top: 1px solid var(--tan); }

.spec {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 2fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  border-bottom: 1px solid var(--tan);
}
.spec dt {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--green);
  line-height: 1.3;
}
.spec dd { margin: 0; color: var(--brown); }

@media (max-width: 640px) {
  .spec { grid-template-columns: 1fr; gap: .3rem; }
}

/* --------------------------------------------------------------------------
   Split rows - image beside text
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* --------------------------------------------------------------------------
   Timeline - Team page career background
   -------------------------------------------------------------------------- */

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.timeline__item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--tan);
}
.timeline__item + .timeline__item { border-left: 0; }

/* Subgrid makes all three cards share the same row tracks, so the years,
   role, bullets and skills block each line up across the row no matter how
   differently the content inside them wraps. Falls back to the flex column
   above where subgrid is unavailable. */
@supports (grid-template-rows: subgrid) {
  .timeline { grid-template-rows: auto auto auto 1fr auto; }
  .timeline__item {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}
.timeline__years {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .3rem;
}
/* The firm carries the recognition, so it takes the prominent line and the
   phase label sits underneath it as the qualifier. */
.timeline__firm {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--green);
  margin: 0 0 .35rem;
}
.timeline__role {
  font-size: .76rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brown);
  margin: 0 0 1.25rem;
}
.timeline__item > ul { margin: 0 0 1.75rem; padding-left: 1.1rem; color: var(--brown); font-size: .96rem; }
.timeline__item > ul > li { margin-bottom: .6rem; }
.timeline__item > ul > li:last-child { margin-bottom: 0; }

/* Key Skills Acquired - deliberately a different object to the summary
   bullets above it, so it reads as the takeaway rather than more detail. */
.timeline__skills {
  margin-top: auto;          /* fallback alignment where subgrid is unavailable */
  padding-top: 1.35rem;
  border-top: 2px solid var(--gold);
}
@supports (grid-template-rows: subgrid) {
  /* The shared row track handles alignment; no need to push it down. */
  .timeline__skills { margin-top: 0; }
}
.timeline__skills-label {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 .85rem;
}
/* Two even columns rather than free-flowing wrap, so every card shows the
   same number of tags per row. The tallest card needs three rows, so all
   three reserve that height - which lines the gold rules and the labels up
   across the row. --tag-h must match the li min-height for the maths to hold. */
.skill-tags {
  --tag-h: 2.15rem;
  --tag-gap: .5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tag-gap);
  align-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.skill-tags li {
  margin: 0;
  min-height: var(--tag-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--sans);
  /* Sized so the longest label ("Company Governance") clears a half-column
     without wrapping at the 1180px content width. */
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--green);
  /* Filled so each label holds its own weight on the white card, outlined in
     gold to tie it to the rule above. The outline runs the full way round
     rather than sitting on one edge, which suits the pill shape; text is
     centred for the same reason. All twelve are styled identically - nothing
     should suggest one skill outranks another. */
  background: var(--tan-soft);
  border: 1px solid rgba(201, 151, 58, .55);
  border-radius: 100px;
  /* Padding stays tight: "Company Governance" is the longest label and has to
     clear a half-column without wrapping at the 1180px content width. */
  padding: .34rem .5rem;
}

/* Stack early: three columns of this density get cramped before 860px, and
   cramped columns force the skill tags to wrap awkwardly. */
@media (max-width: 1040px) {
  .timeline { grid-template-columns: 1fr; grid-template-rows: none; }
  .timeline__item {
    display: flex;
    grid-row: auto;
    grid-template-rows: none;
    border-left: 1px solid var(--tan);
  }
  .timeline__item + .timeline__item { border-top: 0; }
  .timeline__skills { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Team / founder block
   -------------------------------------------------------------------------- */

.founder {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 800px) {
  .founder { grid-template-columns: 1fr; max-width: 620px; }
}

.founder__portrait { text-align: center; }
.founder__portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--tan);
}
.founder__name { font-family: var(--serif); font-size: 1.35rem; color: var(--green); margin: 1.25rem 0 .15rem; }
.founder__role { color: var(--brown); font-size: .95rem; margin: 0 0 .9rem; }

.linkedin {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; color: var(--green); text-decoration: none;
  border-bottom: 1px solid var(--tan); padding-bottom: 2px;
}
.linkedin:hover { border-bottom-color: var(--gold); }
.linkedin svg { width: 16px; height: 16px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Callout - "For Intermediaries" and similar
   -------------------------------------------------------------------------- */

.callout {
  background: var(--white);
  border: 1px solid var(--tan);
  border-left: 3px solid var(--gold);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.callout h3 { margin-bottom: .5rem; }
.callout p { color: var(--brown); }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

/* Single column now - the intro and the form share the narrow measure, so the
   intro needs spacing only. The two sentences use the default paragraph
   gap so they match the stacked ledes on Investment Criteria exactly. */
.contact-intro { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }

.form-field { margin-bottom: 1.4rem; }

/* "(optional)" hint inside a field label - normal weight so it reads as an
   aside rather than part of the label. */
.optional { font-weight: 400; color: var(--brown); }
.form-field label {
  display: block;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--green);
  font-weight: 600;
  margin-bottom: .45rem;
}
.form-field .req { color: var(--gold); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--tan);
  border-radius: 2px;
  padding: .8rem .9rem;
}
.form-field textarea { min-height: 170px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--olive); }

.form-note { font-size: .88rem; color: var(--brown); margin: -.4rem 0 1.75rem; }

/* Netlify honeypot - must stay in the DOM but hidden from people */
/* Honeypot wrapper. display:none specifically - Chrome's autofill will fill a
   field that is only pushed off-screen, which silently kills real
   submissions, but it skips display:none. Hidden inputs are still
   submitted, so Netlify still sees the field. */
.hp { display: none; }

/* --------------------------------------------------------------------------
   Prose lists used inside running copy
   -------------------------------------------------------------------------- */

.list-clean { list-style: none; margin: 0; padding: 0; }
/* Breathing room under a card heading. Adjacent margins collapse, so this
   value is the gap, not an addition to the heading's own margin. */
.card h3 + .list-clean { margin-top: 1.4rem; }
.list-clean li {
  position: relative; padding-left: 1.5rem; margin-bottom: .85rem; color: var(--brown);
}
.list-clean li:last-child { margin-bottom: 0; }
.list-clean li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 8px; height: 1px; background: var(--gold);
}
.section--green .list-clean li { color: var(--tan); }

/* Attribution line for published statistics. Deliberately quiet - it should
   be findable if challenged, not compete with the claims above it. */
.source-note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--brown);
}
.section--green .source-note { color: rgba(232,221,208,.7); }

/* --------------------------------------------------------------------------
   Numbered principles - "What We Believe Will Win"
   A vertical sequence rather than a card grid, so an odd number of items has
   nowhere to leave a gap.
   -------------------------------------------------------------------------- */

.principles { border-top: 1px solid var(--tan); margin-top: 2.25rem; }

.principle {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--tan);
}

.principle__num {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  line-height: 1.15;
  color: var(--gold);
}

.principle h3 { margin-bottom: .4rem; }
.principle p { color: var(--brown); margin: 0; }

@media (max-width: 640px) {
  .principle { grid-template-columns: 1fr; gap: .35rem; }
  .principle__num { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   Full-width image band, used to break up a long page
   -------------------------------------------------------------------------- */

.band { background: var(--tan); }
.band img {
  width: 100%;
  /* Track the photo's own ratio so wide viewports crop as little as possible;
     the caps keep the band from dominating very tall or very wide screens. */
  aspect-ratio: 2200 / 758;
  min-height: 240px;
  max-height: min(520px, 52vh);
  object-fit: cover;
  /* Bias up: protects the heads when the band letterboxes on wide screens. */
  object-position: 50% 25%;
}

/* Narrow screens crop horizontally instead of vertically - shift right so the
   second figure is not sliced off. */
@media (max-width: 700px) {
  .band img { object-position: 64% 50%; }
}

/* --------------------------------------------------------------------------
   Process flow - "What to Expect"
   A rail with arrowheads rather than a numbered list: the chevrons carry the
   direction, so the sequence reads as movement through a process instead of
   six unrelated points. The last marker is a filled diamond, which gives the
   run a terminus - it arrives somewhere rather than just stopping.
   -------------------------------------------------------------------------- */

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

.flow__step {
  position: relative;
  /* Left inset clears the rail. Padding rather than a grid column, because the
     marker is positioned out of flow and would not occupy a grid track. */
  padding-left: clamp(2.6rem, 4.5vw, 3.5rem);
  padding-bottom: clamp(1.9rem, 3.2vw, 2.6rem);
}
.flow__step:last-child { padding-bottom: 0; }

/* One continuous rail, drawn per step so it can start and stop at the first
   and last markers rather than overshooting them. */
.flow__step::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(44, 36, 22, .16);
}
.flow__step:first-child::before { top: .8rem; }
.flow__step:last-child::before  { bottom: auto; height: .8rem; }

/* Chevron: a square with two adjacent borders, turned 45deg. Sits on the rail
   so the line reads as the shaft and the chevron as the arrowhead. */
.flow__mark {
  position: absolute;
  left: 1.1rem;
  top: .52rem;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}

/* Terminus. */
.flow__step--end .flow__mark {
  top: .68rem;
  width: 9px;
  height: 9px;
  border: 0;
  background: var(--gold);
}

.flow__step h3 { margin: 0 0 .45rem; }
.flow__step p  { color: var(--brown); margin: 0; }

@media (max-width: 560px) {
  .flow__step { padding-left: 1.9rem; }
  .flow__step::before,
  .flow__mark { left: .55rem; }
}

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

/* Warm tan band. Deliberately lighter than the footer beneath it so the deep
   green footer reads as the anchor at the bottom of every page. */
.cta {
  background: var(--tan-soft);
  border-top: 1px solid var(--tan);
  color: var(--brown);
  text-align: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta h2 { color: var(--green); }
.cta p { max-width: 58ch; margin-inline: auto; margin-bottom: 2rem; }
.cta h2 + .btn { margin-top: .6rem; }   /* when the band has no supporting line */

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Deep green anchors the bottom of every page. */
.site-footer {
  background: var(--green);
  color: var(--tan);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: .94rem;
}
.site-footer__top {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(232,221,208,.16);
}
.site-footer__brand .logo__text { color: var(--white); }
/* Cream variant of the mark, since the footer ground is the same green */
.site-footer__brand img { height: 42px; width: auto; max-width: none; }
.site-footer__brand p { margin: .75rem 0 0; color: rgba(232,221,208,.75); max-width: 34ch; font-size: .9rem; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.footer-nav a { color: var(--tan); text-decoration: none; }
.footer-nav a:hover { color: var(--white); text-decoration: underline; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  color: rgba(232,221,208,.65);
  font-size: .86rem;
}
.site-footer__bottom a { color: rgba(232,221,208,.85); }

/* --------------------------------------------------------------------------
   Image placeholders
   Every placeholder is a real SVG in /images so nothing renders broken.
   To swap: drop your file in /images and update the src. See IMAGES.md
   -------------------------------------------------------------------------- */

.media { background: var(--tan); }
.media img { width: 100%; }
.media--4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.media--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .cta, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}