/* Self-hosted fonts — Fraunces + Source Serif 4 (latin, latin-ext). No external requests. */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-796716.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-39ce20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-796716.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-39ce20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sourceserif4-567048.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/sourceserif4-3f37ed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/sourceserif4-567048.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/sourceserif4-3f37ed.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   PALETTE & TYPE — change the whole site from these lines
   ============================================================ */
:root {
  --cream:      #FBF7F1;
  --paper:      #FFFDFA;
  --ink:        #1E1C19;
  --muted:      #6C655B;
  --rule:       #E4DACB;
  --accent:     #2F5D50;
  --accent-ink: #24483F;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;

  --measure: 34rem;      /* max line length for body copy */
  --page:    72rem;      /* max page width */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); border-top: 1px solid var(--rule); }
/* Keep the sticky nav from covering a section heading when an anchor is clicked */
section[id] { scroll-margin-top: 5.25rem; }
.section > .wrap > h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); margin-bottom: 0.75rem; }
.lede { color: var(--muted); font-size: 1.0625em; max-width: 40rem; }

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--cream);
  padding: 0.75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .nav { background: var(--cream); }
}
.nav__inner {
  max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter);
  min-height: 4.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__mark {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.01em; text-decoration: none; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.nav__links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: 0.9375rem; color: var(--muted); text-decoration: none;
  padding-block: 0.25rem; border-bottom: 1px solid transparent;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Mobile: anchors are redundant on a one-page scroll site — keep the button only */
@media (max-width: 47.99em) {
  .nav__links { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.25rem;
  border-radius: 2px;
  text-decoration: none;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
  transition: background 0.18s, transform 0.18s;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-ink); color: #fff; transform: translateY(-1px); }
.btn--lg { font-size: 1.0625rem; padding: 0.95rem 1.75rem; }

/* ============================================================
   HERO — deliberately short so the next section peeks above the fold
   ============================================================ */
.hero { padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.25rem, 4.5vw, 3.25rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hero h1 {
  font-size: clamp(2rem, 4.9vw, 3.05rem);
  max-width: 26ch;
  text-wrap: balance;
}
.hero__byline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem;
  margin: 1.5rem 0 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.hero__name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.hero__role { color: var(--muted); font-size: 0.9375rem; }
.hero__bio p { font-size: 1.03em; }
/* Photo: 4:5 portrait. Styles work for both an <img> and the placeholder <div>. */
.portrait {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #EFE7DA;
  border: 1px solid var(--rule);
  border-radius: 2px;
  display: grid; place-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  width: 100%;
}

/* The photo holds still while the intro scrolls past it, releasing at the end
   of the hero. Sticky is bounded by its containing block, so the column must
   stretch the full grid row - pinning the image directly made it come unstuck
   partway down the text. 6rem clears the 4.25rem nav. */
.portrait__col { align-self: stretch; }
.portrait { position: sticky; top: 6rem; }
.portrait small { display: block; text-transform: none; letter-spacing: 0; margin-top: 0.4rem; font-size: 0.8125rem; }

@media (max-width: 47.99em) {
  .hero__grid { grid-template-columns: 1fr; }
  /* Thumbnail, not a hero block: the headline must be the first thing read.
     Nothing sticks on mobile - the photo would eat a phone screen. */
  .portrait__col { order: -1; max-width: 10rem; align-self: start; }
  .portrait { position: static; }
  .portrait { font-size: 0.625rem; letter-spacing: 0.1em; }
  .portrait small { font-size: 0.6875rem; margin-top: 0.25rem; }
}

/* ============================================================
   APPROACH — plain language left, hard numbers right
   ============================================================ */
/* The criteria panel reads as one framed strip across the section: four cells
   side by side, divided by hairlines, rather than a narrow stacked list. The
   outer rule closes the shape; the inner rules do the column work, so no cell
   needs its own box. */
.spec {
  margin-top: 2.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;           /* keeps the cell dividers inside the rounded corners */
}
.spec dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.spec dl > div {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border-right: 1px solid var(--rule);
}
.spec dl > div:last-child { border-right: 0; }
.spec dt {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
}
.spec dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.25;
}

/* Two up, then one. The dividers switch from vertical to horizontal so the
   frame never leaves a stray rule hanging at a row end. */
@media (max-width: 61.99em) {
  .spec dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec dl > div:nth-child(2n) { border-right: 0; }
  .spec dl > div:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 34.99em) {
  .spec dl { grid-template-columns: 1fr; }
  .spec dl > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .spec dl > div:last-child { border-bottom: 0; }
}



/* ============================================================
   HOW I CLOSE — numbered sequence + partner logos
   ============================================================ */
/* Two steps per row, so eight steps occupy four rows rather than eight. The
   rule above each cell keeps the row structure legible across the gutter. */
.steps {
  list-style: none; counter-reset: step; margin: 2.5rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}
.steps > li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--rule); }

@media (max-width: 47.99em) {
  .steps { grid-template-columns: 1fr; }
  .steps > li:nth-last-child(-n + 2) { border-bottom: 0; }
  .steps > li:last-child { border-bottom: 1px solid var(--rule); }
}
.steps > li::before {
  content: counter(step);
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.75rem; line-height: 1;
  color: var(--accent);
  grid-row: span 2;
  padding-top: 0.1em;
  font-variant-numeric: lining-nums;
}
.steps h3 { font-size: 1.1875rem; margin-bottom: 0.4rem; }
.steps p { color: var(--muted); }

.partners {
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.partner {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.partner__label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
/* Logo slot. The figure is a fixed-height box so both cards align regardless of
   logo proportions; the logo itself is sized to match the OTHER logo optically,
   not to an identical pixel height — equal heights make a wide wordmark look
   bigger than a stacked lockup.
   Logos render in full colour: these two exist to borrow credibility, and
   greyscaling them made them easy to scroll straight past. If a future partner
   brings a clashing logo, greyscale-until-hover is the fallback. */
.partner__figure {
  height: 5.5rem;
  display: flex; align-items: center;
}
/* max-height is in PX, not rem, and deliberately so: each value is the logo's own
   native pixel height. The supplied files are low-resolution, so anything larger
   upscales and goes soft. If either firm provides an SVG (or a 2-3x PNG), raise
   these freely - that is the only way to go bigger without losing sharpness. */
.partner__logo {
  max-height: 83px; max-width: 100%;
  width: auto; height: auto;
}
.partner__logo--wide { max-height: 37px; }
/* Empty slot, kept for any future partner without a logo yet */
.partner__slot {
  height: 2.5rem;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  display: grid; place-content: center;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
/* Kept for a partner whose logo is not a legible wordmark on its own */
.partner__name { font-family: var(--font-display); font-weight: 600; }

@media (max-width: 34.99em) { .partners { grid-template-columns: 1fr; } }

/* ============================================================
   ADVISORS - three vertical cards
   ============================================================ */
.advisors {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: 2.5rem;
}
.advisor__photo {
  width: 7.15rem; height: 7.15rem;
  border-radius: 50%;
  background: #EFE7DA;
  border: 1px solid var(--rule);
  object-fit: cover;
  display: block;
}
.advisor__name { font-size: 1.1875rem; margin: 1rem 0 0; }
.advisor__role {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
  margin: 0.35rem 0 0.9rem;
}
.advisor__points { list-style: none; margin: 0; padding: 0; }
.advisor__points li {
  position: relative;
  padding: 0 0 0.6rem 1.15rem;
  font-size: 0.9688rem;
  color: var(--muted);
}
.advisor__points li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 0.3125rem; height: 0.3125rem;
  background: var(--accent);
  border-radius: 50%;
}
.advisor__points li:last-child { padding-bottom: 0; }

/* Hover swap. Both images occupy the same box so nothing reflows; the second
   is hidden from assistive tech since it carries no extra information. */
.advisor__swap { position: relative; display: block; width: 7.15rem; height: 7.15rem; }
.advisor__swap .advisor__photo { position: absolute; inset: 0; }
.advisor__photo--alt { opacity: 0; transition: opacity 0.25s ease; }
.advisor:hover .advisor__photo--alt,
.advisor:focus-within .advisor__photo--alt { opacity: 1; }

@media (max-width: 61.99em) {
  .advisors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 41.99em) {
  .advisors { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--paper); }
.contact h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.contact__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.contact__direct { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9375rem; }
.contact__direct span { color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem;
  font-size: 0.875rem; color: var(--muted);
}
.footer__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--accent-ink); }

/* ============================================================
   PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media print {
  .nav, .btn { display: none; }
  body { background: #fff; }
  }