/* ==========================================================================
   Valley Oak — site styles
   Ported from the Claude Design artboard "Valley Oak Home v5.dc.html".
   Tokens and the shared chrome (header, footer, buttons, section headings)
   live at the top so the sibling pages — Financial, Investments, Academy,
   Team, Camp CPAs — can reuse them without duplication.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Surfaces, dark → light */
  --ink:            #12161D;  /* page ground */
  --surface:        #1E2635;  /* raised panels, footer, doors */
  --surface-alt:    #1B2231;  /* "how it fits" band, form fields */
  --surface-deep:   #222B3C;  /* philosophy band, emphasised step */
  --surface-sunken: #161C26;  /* Fit Finder explainer column */
  --surface-well:   #0D1117;  /* recessed media well */

  /* Type */
  --text:           #E9EDF3;
  --text-bright:    #F7F8FA;
  --text-muted:     rgb(233 237 243 / 0.70);
  --text-faint:     rgb(233 237 243 / 0.60);
  --text-ghost:     rgb(233 237 243 / 0.45);
  --text-on-deep:   rgb(247 248 250 / 0.75);

  --accent:         #8FB4E0;
  --rule:           #44536B;
  --hairline:       rgb(233 237 243 / 0.15);

  --font-sans:      'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:     'Newsreader', Georgia, 'Times New Roman', serif;

  /* Rhythm */
  --gutter:         56px;
  --page-max:       1400px;   /* full-bleed sections with padded content */
  --content-max:    1288px;   /* inner content of banded sections */
  --radius:         4px;
}

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

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, blockquote, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

:where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.skip-link:focus { left: 0; color: var(--ink); }

/* --- Shared type ---------------------------------------------------------- */

.accent { color: var(--accent); font-style: italic; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.eyebrow--wide { font-size: 13px; letter-spacing: 0.24em; margin-bottom: 20px; }

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1.15;
}
.section-title--lg { font-size: clamp(32px, 4.2vw, 42px); line-height: 1.12; }

.section-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-top: 16px;
  text-wrap: pretty;
}
.section-body--flush { margin-top: 0; }

.inline-link {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.inline-link:hover { color: var(--text-bright); border-bottom-color: var(--text-bright); }

/* Small caps-y link with the accent underline, used as a section "more" link */
.link-underline {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  white-space: nowrap;
}

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

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn--sm { padding: 12px 24px; font-size: 13px; }
.btn--lg { padding: 16px 34px; }

.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--text-bright); color: var(--ink); }

.btn--ghost {
  border: 1.5px solid rgb(247 248 250 / 0.45);
  background: rgb(18 22 29 / 0.35);
  color: var(--text-bright);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-row { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-row--center { justify-content: center; margin-top: 32px; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
}

/* Wordmark, optionally locked up with a sub-brand label on the arm pages. */
.brand { display: flex; align-items: baseline; gap: 10px; }

.brand__word {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 500;
}
.brand__dot { color: var(--accent); }

.brand__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.nav-links [aria-current="page"] { color: var(--accent); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  border-bottom: 1.5px solid var(--rule);
  isolation: isolate;
}

.hero__img {
  width: 100%;
  height: 640px;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.75) brightness(0.55);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(18 22 29 / 0.55) 0%,
    rgb(18 22 29 / 0.25) 40%,
    rgb(18 22 29 / 0.82) 100%
  );
}

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

.hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 6vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 20ch;
  color: var(--text-bright);
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.45);
}

.hero__lede {
  font-size: 17px;
  line-height: 1.7;
  max-width: 58ch;
  margin: 26px auto 34px;
  color: rgb(247 248 250 / 0.85);
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

/* --- Three doors ---------------------------------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
}

.door {
  padding: 48px 44px 52px;
  border-right: 1.5px solid var(--rule);
  transition: background-color 0.2s ease;
}
.door:nth-child(odd) { background: var(--surface); }
.door:last-child { border-right: 0; }
.door:hover { background: var(--surface-deep); color: inherit; }

.door__kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 14px;
}

.door__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  margin-bottom: 14px;
}

.door__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.door__cta {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}

/* --- How the suite fits --------------------------------------------------- */

.fit {
  background: var(--surface-alt);
  border-bottom: 1.5px solid var(--rule);
  padding: 56px var(--gutter);
}

.fit__grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}

.step { padding: 26px 24px; border-right: 1.5px solid var(--rule); }
.step:last-child { border-right: 0; }
.step--emphasis { background: var(--surface-deep); }

.step__when {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--accent);
  margin-bottom: 8px;
}

.step__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  margin-bottom: 8px;
}

.step__body { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.step--emphasis .step__body { color: var(--text-on-deep); }

/* --- The evolution -------------------------------------------------------- */

.story {
  padding: 72px var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.story .section-body { font-size: 15.5px; margin-top: 18px; }
.story .eyebrow { margin-bottom: 14px; }

.timeline__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.timeline__row:last-child { border-bottom: 0; }

.timeline__year {
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--accent);
}

.timeline__text { font-size: 15px; line-height: 1.55; padding-top: 4px; margin-left: 0; }

/* --- Philosophy ----------------------------------------------------------- */

.philosophy {
  background: var(--surface-deep);
  color: var(--text-bright);
  padding: 72px var(--gutter);
}

.philosophy__grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.philosophy__quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.2;
}

.principles { display: grid; gap: 22px; }

.principle { display: grid; grid-template-columns: 28px 1fr; gap: 16px; }

.principle__num {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--accent);
}

.principle__text { font-size: 15px; line-height: 1.6; color: var(--text-on-deep); }
.principle__text b { color: var(--text-bright); }

/* --- Team ----------------------------------------------------------------- */

.team {
  padding: 72px var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
}

.team__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.member__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(0.85) brightness(0.94);
  background: var(--surface);
}

.member__name {
  font-family: var(--font-serif);
  font-size: 19px;
  margin-top: 12px;
}

.member__role { font-size: 13px; color: var(--accent); font-weight: 600; }

/* --- Closing CTA ---------------------------------------------------------- */

.cta {
  border-top: 1.5px solid var(--rule);
  padding: 72px var(--gutter);
  text-align: center;
}

.cta__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1;
  max-width: 24ch;
  margin: 0 auto;
}

.cta__title--wide { max-width: 26ch; }

.cta__lede {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgb(233 237 243 / 0.65);
  max-width: 52ch;
  margin: 18px auto 30px;
}
.cta__lede--wide { max-width: 56ch; margin-bottom: 0; }

.cta__meta { font-size: 14px; color: var(--text-faint); margin-top: 18px; }
.cta__phone { white-space: nowrap; }

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

.site-footer {
  border-top: 1.5px solid var(--rule);
  padding: 36px var(--gutter);
  background: var(--surface);
}

.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer__legal {
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

.footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgb(233 237 243 / 0.75);
  height: fit-content;
}

.footer__copy {
  max-width: var(--content-max);
  margin: 16px auto 0;
  font-size: 12px;
  color: var(--text-ghost);
}

/* ==========================================================================
   Responsive — the artboard is a fixed desktop composition, so every
   multi-column grid below collapses at the width where it starts to crowd.
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --gutter: 40px; }

  .story,
  .fit__grid,
  .philosophy__grid { grid-template-columns: 1fr; gap: 40px; }

  .team__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; justify-content: center; text-align: center; }
  .nav-links { order: 3; width: 100%; justify-content: center; gap: 24px; flex-wrap: wrap; }

  .hero__img { height: 560px; }

  .doors { grid-template-columns: 1fr; }
  .door { border-right: 0; border-bottom: 1.5px solid var(--rule); }
  .door:last-child { border-bottom: 0; }

  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1.5px solid var(--rule); }
  .step:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 22px; }

  .hero__img { height: 620px; }
  .hero__lede { font-size: 15.5px; margin: 20px auto 28px; }
  .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .btn { text-align: center; }

  .door { padding: 36px 26px 40px; }
  .door__title { font-size: 28px; }

  .team__grid { grid-template-columns: repeat(2, 1fr); }

  .timeline__row { grid-template-columns: 64px 1fr; gap: 14px; }
  .timeline__year { font-size: 20px; }
}

/* ==========================================================================
   Shared page components
   Used by financial / investments / academy / team / camp-cpas. Kept generic
   so a sixth page needs markup, not new CSS.
   ========================================================================== */

/* --- Section scaffolding -------------------------------------------------- */

.section {
  padding: 64px var(--gutter);
  max-width: var(--page-max);
  margin: 0 auto;
}
.section--lg   { padding: 72px var(--gutter); }
.section--rule { border-top: 1.5px solid var(--rule); }

/* Title on the left, small caps eyebrow on the right */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.section-head--tight { margin-bottom: 14px; }
.section-head--flush { margin-bottom: 0; }
.section-head .eyebrow { margin-bottom: 0; }

.section-title--md { font-size: clamp(26px, 3.2vw, 32px); }
.section-title--xl { font-size: clamp(34px, 4.6vw, 44px); font-weight: 300; }

/* Standalone section heading with no eyebrow beside it */
.heading-gap { margin-bottom: 32px; }

.lede {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 64ch;
  margin: 0 0 36px;
}
.band--deep .lede { color: rgb(247 248 250 / 0.7); }

.note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(233 237 243 / 0.55);
}

/* Full-bleed colour band with a constrained inner column */
.band { padding: 64px var(--gutter); }
.band--lg      { padding: 72px var(--gutter); }
.band--deep    { background: var(--surface-deep); color: var(--text-bright); }
.band--surface { background: var(--surface); border-top: 1.5px solid var(--rule); }

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

.band__split {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.band__split--wide { grid-template-columns: 0.8fr 1.2fr; }

/* --- Grid utilities ------------------------------------------------------- */

.stack-lg { display: grid; gap: 28px; }

.cols { display: grid; gap: 24px; }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
.cols--5 { grid-template-columns: repeat(5, 1fr); }
.cols--gap-lg { gap: 28px; }
.cols--spaced { margin-top: 28px; }

/* Cells inside one shared outer border, divided by hairlines */
.grid-bordered {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--rule);
}
.grid-bordered > * {
  padding: 32px;
  border-right: 1.5px solid var(--rule);
}
.grid-bordered > *:last-child { border-right: 0; }
.grid-bordered .cell--emphasis { background: var(--surface-deep); color: var(--text-bright); }

/* Two panes split by a single rule, edge to edge */
.split-rule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
}
.split-rule > * { padding: 56px; }
.split-rule > :first-child {
  border-right: 1.5px solid var(--rule);
  background: var(--surface);
}

/* --- Cards and panels ----------------------------------------------------- */

.card {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.card--quiet {
  border: 1px solid rgb(247 248 250 / 0.25);
  padding: 30px;
}
.card__media {
  width: 100%;
  height: 170px;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.85);
  background: var(--surface);
}
.card__body  { padding: 26px 28px; }
.card__kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 8px;
}
.card__step {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 12px;
}
.card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.card__title--lg { font-size: 26px; }
.card__body-text { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.card--quiet .card__body-text { color: rgb(247 248 250 / 0.7); font-size: 14.5px; line-height: 1.65; }

.panel {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.panel__head {
  background: var(--surface);
  padding: 28px 32px;
  border-bottom: 1.5px solid var(--rule);
}
.panel__body { padding: 28px 32px; }
.panel__kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 8px;
}
.panel__title { font-family: var(--font-serif); font-weight: 400; font-size: 30px; }
.panel__body p { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 20px; }
.panel__cta { margin: 22px 0 0; }

/* Engagement tiers (Investments) */
.tier__kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 10px;
}
.tier__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  margin-bottom: 14px;
}
.tier__body { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin-bottom: 20px; }
.cell--emphasis .tier__body { color: var(--text-on-deep); }

/* Small timeline entries inside a band (Investments: first 90 days) */
.mini__when {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 8px;
}
.mini__text { font-size: 14.5px; line-height: 1.6; color: var(--text-on-deep); }

/* --- Lists ---------------------------------------------------------------- */

.numbered { display: grid; gap: 10px; font-size: 14px; }
.numbered li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; line-height: 1.55; }
.numbered__n { font-family: var(--font-serif); color: var(--accent); }

.dashlist { display: grid; gap: 8px; font-size: 13.5px; color: rgb(233 237 243 / 0.8); }
.dashlist li::before { content: "— "; }
.cell--emphasis .dashlist { color: rgb(247 248 250 / 0.85); }

/* Two-column checklist of disciplines, each row underlined */
.covers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  font-size: 14.5px;
  line-height: 1.5;
}
.covers li { border-bottom: 1px solid var(--hairline); padding: 8px 0; }

/* --- Image band ----------------------------------------------------------- */

.image-band {
  position: relative;
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
}
.image-band__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.75);
  background: var(--surface);
}
.image-band__caption {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 32px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: #F2F5F9;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

/* --- Page heroes ---------------------------------------------------------- */

.hero-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
  margin-bottom: 16px;
}

.hero-center {
  padding: 72px var(--gutter) 64px;
  text-align: center;
  max-width: var(--page-max);
  margin: 0 auto;
}
.hero-center__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 5.6vw, 74px);
  line-height: 1.05;
  max-width: 18ch;
  margin: 0 auto;
}
.hero-center__title--wide { max-width: 20ch; }
.hero-center__lede {
  font-size: 17px;
  line-height: 1.7;
  max-width: 56ch;
  margin: 26px auto 34px;
  color: var(--text-muted);
  text-wrap: pretty;
}
.hero-center__lede--last { margin-bottom: 0; }

/* Financial: copy on the left, a framed pull-quote on the right */
.hero-split {
  padding: 72px var(--gutter) 64px;
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.hero-split__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero-split__lede {
  font-size: 17px;
  line-height: 1.7;
  max-width: 52ch;
  color: var(--text-muted);
  margin: 24px 0 32px;
  text-wrap: pretty;
}
.hero-split__card {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  padding: 36px;
}
.hero-split__quote {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 29px);
  line-height: 1.3;
}
.hero-split__quote u { text-decoration: none; border-bottom: 2px solid var(--accent); }
.hero-split__meta {
  margin-top: 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgb(233 237 243 / 0.65);
}

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 22px;
}

/* --- People --------------------------------------------------------------- */

.member__bio {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgb(233 237 243 / 0.72);
  margin-top: 10px;
  text-wrap: pretty;
}
.member__bio--pending { font-style: italic; }

.role--caps {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 5px 0 12px;
}

/* Portrait-left feature card for the founder */
.feature {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-alt);
}
.feature__img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: top;
  align-self: start;
  filter: saturate(0.85) brightness(0.94);
  background: var(--surface);
}
.feature__body {
  padding: 36px 40px 36px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature__name { font-family: var(--font-serif); font-weight: 400; font-size: 30px; }
.feature__body p {
  font-size: 15px;
  line-height: 1.7;
  color: rgb(233 237 243 / 0.75);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.feature__body p:last-child { margin-bottom: 0; }

.person-card {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-alt);
}
.person-card__img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.85) brightness(0.94);
  background: var(--surface);
}
.person-card__body { padding: 26px 28px; }
.person-card__name { font-family: var(--font-serif); font-weight: 400; font-size: 24px; }
.person-card__body p {
  font-size: 14px;
  line-height: 1.65;
  color: rgb(233 237 243 / 0.75);
  margin: 0;
  text-wrap: pretty;
}

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

.signup { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 4px; overflow: hidden; }

.signup__input {
  border: 0;
  padding: 16px 22px;
  font-size: 15px;
  font-family: var(--font-sans);
  background: var(--surface-alt);
  color: var(--text);
  width: 300px;
}
.signup__input::placeholder { color: rgb(233 237 243 / 0.45); }
.signup__input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.signup__btn {
  background: var(--accent);
  color: var(--ink);
  border: 0;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font-sans);
  cursor: pointer;
}
.signup__btn:hover { background: var(--text-bright); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Camp CPAs: arrival banner + preserved client notice ------------------ */

.arrival {
  background: var(--surface);
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  padding: 64px var(--gutter);
  text-align: center;
}
.arrival__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.08;
  max-width: 24ch;
  margin: 0 auto;
}
.arrival__lede {
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
  margin: 24px auto 0;
  color: var(--text-muted);
  text-wrap: pretty;
}

.notice { max-width: 860px; margin: 0 auto; padding: 64px var(--gutter); }

.notice__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.15;
  margin-bottom: 24px;
}

.minicard {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  padding: 24px 28px;
}
.minicard__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  margin-bottom: 8px;
}
.minicard__text { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.notice__box {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  background: var(--surface-alt);
  padding: 36px 40px;
}
.notice__box p {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgb(233 237 243 / 0.8);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.notice__box p:last-child { margin-bottom: 0; }
.notice__box p.notice__intro { font-size: 15px; margin-bottom: 18px; }

.notice__callout {
  background: var(--surface);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
/* The callout's own children set their spacing; drop the inherited paragraph margin. */
.notice__callout p { margin: 0; }
.notice__callout .eyebrow { margin-bottom: 10px; }
.notice__address { font-size: 15px; line-height: 1.8; color: rgb(233 237 243 / 0.85); }
.notice__callout .notice__small {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgb(233 237 243 / 0.65);
  margin-top: 8px;
}

.notice__subhead { font-family: var(--font-serif); font-size: 19px; margin-bottom: 10px; }
.notice__list {
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgb(233 237 243 / 0.8);
  margin-bottom: 18px;
}
.notice__list li::before { content: "— "; }

/* --- Buttons / footer variants ------------------------------------------- */

/* Outline button used on the interior pages (darker than the hero's ghost) */
.btn--outline { border: 1.5px solid rgb(233 237 243 / 0.25); color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

/* Investments footer stacks the disclosure above a links/copyright row */
.site-footer--stacked .footer__inner { display: grid; gap: 14px; }
.site-footer--stacked .footer__legal { max-width: 110ch; line-height: 1.65; }
.site-footer--stacked .footer__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
}
.site-footer--stacked .footer__copy { margin: 0; }

/* ==========================================================================
   Responsive — interior pages
   ========================================================================== */

@media (max-width: 1180px) {
  .cols--5 { grid-template-columns: repeat(3, 1fr); }
  .cols--4 { grid-template-columns: repeat(3, 1fr); }

  .hero-split { grid-template-columns: 1fr; gap: 40px; }

  .feature { grid-template-columns: 1fr; gap: 0; }
  .feature__img { aspect-ratio: 16 / 9; }
  .feature__body { padding: 32px 32px 36px; }
}

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

  .band__split, .band__split--wide { grid-template-columns: 1fr; gap: 40px; }

  .split-rule { grid-template-columns: 1fr; }
  .split-rule > * { padding: 40px var(--gutter); }
  .split-rule > :first-child { border-right: 0; border-bottom: 1.5px solid var(--rule); }

  .grid-bordered { grid-template-columns: 1fr; }
  .grid-bordered > * { border-right: 0; border-bottom: 1.5px solid var(--rule); }
  .grid-bordered > *:last-child { border-bottom: 0; }

  .image-band__img { height: 320px; }
  .image-band__caption { font-size: 17px; bottom: 24px; }
}

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

  .covers { grid-template-columns: 1fr; }

  /* Long labels (e.g. the Campbell Tersolo & Clyman crosslink) overflow a phone
     viewport if held on one line. */
  .link-underline { white-space: normal; }

  .panel__head, .panel__body { padding: 24px 22px; }
  .notice__box { padding: 26px 22px; }
  .hero-split__card { padding: 26px 22px; }

  .signup { display: flex; flex-direction: column; width: 100%; max-width: 340px; }
  .signup__input { width: 100%; }

  .image-band__img { height: 260px; }
}

/* --- Motion / print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Fit Finder
   The qualification quiz at fit-finder.html: a standing explainer on the left,
   the stepped questions and their three outcomes on the right. Ported from the
   artboard "Valley Oak Fit Finder.dc.html"; the artboard's internal lead-score
   panel is deliberately not carried over.
   ========================================================================== */

[hidden] { display: none !important; }

/* Replaces the header CTA — this page *is* the CTA. */
.ff__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); }

.ff {
  border-top: 1.5px solid var(--rule);
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

/* --- Left: the explainer -------------------------------------------------- */

.ff__intro {
  padding: 72px 48px;
  border-right: 1.5px solid var(--rule);
  background: var(--surface-sunken);
}
.ff__intro-inner { position: sticky; top: 56px; }

.ff__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.08;
  max-width: 12ch;
  margin-bottom: 22px;
  text-wrap: balance;
}

.ff__lede {
  font-size: 16px;
  line-height: 1.75;
  color: rgb(233 237 243 / 0.72);
  max-width: 44ch;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.ff__lede--last { margin-bottom: 34px; }

.ff__notes {
  border-top: 1px solid rgb(233 237 243 / 0.16);
  padding-top: 26px;
  display: grid;
  gap: 16px;
  max-width: 40ch;
}
.ff__note {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgb(233 237 243 / 0.66);
}
.ff__note-n { font-family: var(--font-serif); color: var(--accent); }

/* --- Right: the form pane ------------------------------------------------- */

.ff__panel { padding: 56px 48px 80px; }

.ff__progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}
.ff__step-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); }
.ff__counter    { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: rgb(233 237 243 / 0.45); }

.ff__bar {
  height: 3px;
  background: rgb(233 237 243 / 0.14);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 44px;
}
.ff__bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.ff__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.ff__q { margin-bottom: 46px; }
.ff__q-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 6px;
  text-wrap: pretty;
}
.ff__q-sub { font-size: 13.5px; color: rgb(233 237 243 / 0.5); margin-bottom: 20px; }

.ff__opts { display: grid; gap: 10px; }

/* The real control stays in the a11y tree; the label carries the styling. */
.ff__opt {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 16px 18px;
  border: 1.5px solid var(--rule);
  border-radius: 5px;
  background: var(--surface-alt);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.ff__opt:hover { border-color: rgb(143 180 224 / 0.6); }
.ff__opt:has(input:checked) { border-color: var(--accent); background: rgb(143 180 224 / 0.1); }
.ff__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.ff__opt-row { display: flex; align-items: flex-start; gap: 14px; }

.ff__opt-dot {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1.5px solid #5A6B85;
  border-radius: 50%;
}
.ff__opt--multi .ff__opt-dot { border-radius: 3px; }
.ff__opt:has(input:checked) .ff__opt-dot { border-color: var(--accent); background: var(--accent); }

.ff__opt-label { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.ff__opt-desc  { display: block; font-size: 13.5px; line-height: 1.55; color: rgb(233 237 243 / 0.55); margin-top: 3px; }

.ff__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgb(233 237 243 / 0.14);
  padding-top: 26px;
}
.ff__next {
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
}
.ff__next:disabled { background: rgb(143 180 224 / 0.22); color: rgb(233 237 243 / 0.4); cursor: not-allowed; }
.ff__back {
  padding: 15px 22px;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: rgb(233 237 243 / 0.6);
  cursor: pointer;
}
.ff__back:disabled { color: rgb(233 237 243 / 0.22); cursor: default; }
.ff__required { font-size: 13px; color: rgb(233 237 243 / 0.4); margin-left: auto; }

/* --- Outcomes ------------------------------------------------------------- */

.ff__outcome { max-width: 640px; }
.ff__outcome:focus { outline: none; }

.ff__outcome-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
  margin-bottom: 18px;
}
.ff__outcome-body { font-size: 16px; line-height: 1.75; color: rgb(233 237 243 / 0.72); margin-bottom: 12px; }
.ff__outcome-body--last { margin-bottom: 34px; }

.ff__card {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  background: var(--surface-alt);
  padding: 32px;
}

.ff__field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ff__field--wide { margin-bottom: 22px; }

.ff__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgb(233 237 243 / 0.55);
  margin-bottom: 7px;
}
.ff__input,
.ff__textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--ink);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
}
.ff__input::placeholder,
.ff__textarea::placeholder { color: rgb(233 237 243 / 0.34); }
.ff__input:focus,
.ff__textarea:focus { outline: none; border-color: var(--accent); }
.ff__textarea { resize: vertical; line-height: 1.6; }

.ff__submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ff__submit-note { font-size: 13px; color: rgb(233 237 243 / 0.62); }

.ff__restart {
  display: inline-block;
  margin-top: 26px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgb(233 237 243 / 0.24);
  background: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: rgb(233 237 243 / 0.62);
  cursor: pointer;
}
.ff__restart:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Academy outcome */
.ff__academy-title { font-family: var(--font-serif); font-size: 24px; margin-bottom: 10px; }
.ff__academy-body  { font-size: 14.5px; line-height: 1.7; color: rgb(233 237 243 / 0.68); margin-bottom: 22px; }
.ff__btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ff__aside { font-size: 14px; line-height: 1.7; color: rgb(233 237 243 / 0.5); }
.ff__aside--spaced { margin-top: 22px; }

/* Referral outcome */
.ff__video-frame {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
}
.ff__video {
  aspect-ratio: 16 / 9;
  background: var(--surface-well);
  border-bottom: 1.5px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ff__video-play {
  width: 58px;
  height: 58px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  color: var(--accent);
  font-size: 18px;
}
.ff__video-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: rgb(233 237 243 / 0.55); }

.ff__letter { padding: 28px 30px; background: var(--surface-alt); }
.ff__letter-from { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 6px; }
.ff__letter-role { font-size: 12.5px; color: rgb(233 237 243 / 0.55); margin-bottom: 18px; }
.ff__letter-body {
  display: grid;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 17.5px;
  line-height: 1.6;
  color: rgb(247 248 250 / 0.88);
}
.ff__letter-body b { font-family: var(--font-sans); font-size: 15px; letter-spacing: 0.02em; }

.ff__noscript {
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 24px 26px;
  margin-bottom: 36px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

@media (max-width: 900px) {
  .ff { grid-template-columns: 1fr; }
  .ff__intro {
    border-right: 0;
    border-bottom: 1.5px solid var(--rule);
    padding: 48px var(--gutter);
  }
  .ff__intro-inner { position: static; }
  .ff__panel { padding: 48px var(--gutter) 64px; }
}

@media (max-width: 640px) {
  .ff__field-grid { grid-template-columns: 1fr; }
  .ff__card { padding: 24px 20px; }
  .ff__q-title { font-size: 24px; }
  .ff__letter { padding: 24px 20px; }
  .ff__letter-body { font-size: 16.5px; }
  .ff__nav { flex-wrap: wrap; gap: 10px; }
  .ff__required { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Welcome
   The private referral onboarding page at welcome.html, reached from an
   email rather than from the site, so it carries no nav. Ported from the
   artboard "Valley Oak Welcome.dc.html", which uses a fluid gutter of its
   own rather than the stepped --gutter the rest of the site uses.
   ========================================================================== */

:root { --wel-gutter: clamp(20px, 5vw, 56px); }

.text-accent { color: var(--accent); }

/* --- Header --------------------------------------------------------------- */

.wel__header { padding: 24px var(--wel-gutter); flex-wrap: wrap; }

.wel__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Hero ----------------------------------------------------------------- */

.wel__hero {
  padding: 24px var(--wel-gutter) 72px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.wel__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 18ch;
  margin: 0 auto;
}

.wel__lede {
  font-size: 17px;
  line-height: 1.7;
  max-width: 58ch;
  margin: 22px auto 40px;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Diagonal hatch stands in for the video still, so the placeholder never
   reads as a broken image. */
.wel__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-alt) 0 14px,
    var(--surface) 14px 28px
  );
}
.wel__video-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 20px;
  text-align: center;
}
.wel__play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wel__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 22px solid var(--ink);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.wel__video-label {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-faint);
}

/* --- Bands and sections --------------------------------------------------- */

.wel__band { padding: 44px var(--wel-gutter); }
.wel__band--alt {
  background: var(--surface-alt);
  border-top: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
}
.wel__band--deep {
  background: var(--surface-deep);
  color: var(--text-bright);
  padding: 80px var(--wel-gutter);
}

.wel__split {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.wel__band-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 30px);
  line-height: 1.2;
}
.wel__band-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

.wel__section {
  padding: 80px var(--wel-gutter);
  max-width: 1288px;
  margin: 0 auto;
}
.wel__section--rule { border-top: 1.5px solid var(--rule); max-width: none; }
.wel__section--rule > * { max-width: 1288px; margin-inline: auto; }

.wel__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.12;
  margin-bottom: 40px;
}
.wel__heading--narrow { max-width: 22ch; }
.wel__band--deep .wel__heading { margin-bottom: 0; }

/* --- Three steps ---------------------------------------------------------- */

.wel__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.wel__step { padding: 30px 28px; border-right: 1.5px solid var(--rule); }
.wel__step:last-child { border-right: 0; }
.wel__step--emphasis { background: var(--surface); }

.wel__step-who {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--accent);
  margin-bottom: 10px;
}
.wel__step-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 10px;
}
.wel__step-body { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }

/* --- Checklist ------------------------------------------------------------ */

.wel__checklist {
  max-width: 1288px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.wel__checklist-lede {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-on-deep);
  margin: 18px 0 28px;
  text-wrap: pretty;
}
.wel__progress { font-size: 13.5px; color: rgb(247 248 250 / 0.6); margin-top: 14px; }

.wel__items { border-top: 1px solid rgb(247 248 250 / 0.15); }
.wel__item { border-bottom: 1px solid rgb(247 248 250 / 0.15); padding: 22px 0; }

.wel__check {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  cursor: pointer;
}

.wel__box {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.wel__box::after {
  content: "\2713";
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
}
.wel__check:has(input:checked) .wel__box { background: var(--accent); }
.wel__check:has(input:checked) .wel__box::after { opacity: 1; }
.wel__check:has(input:focus-visible) .wel__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.wel__check:has(input:checked) .wel__item-title { opacity: 0.55; }

.wel__item-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.3;
}
.wel__item-desc {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgb(247 248 250 / 0.65);
  margin-top: 4px;
}

/* Aligned with the title column: 32px box + 18px gap. */
.wel__item-link {
  display: inline-block;
  margin: 10px 0 0 50px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* --- Why planning comes first --------------------------------------------- */

.wel__why {
  padding: 80px var(--wel-gutter);
  max-width: 1288px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.wel__pullquote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.2;
}

/* --- Two phases ----------------------------------------------------------- */

.wel__phases { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.wel__phase {
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  padding: 36px 34px;
}
.wel__phase--emphasis { background: var(--surface); }

.wel__phase-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 10px;
}
.wel__phase-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  margin-bottom: 14px;
}
.wel__phase-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 26px;
}

.wel__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.wel__fact { padding: 18px 16px 0 0; }
.wel__fact:first-child { border-right: 1px solid var(--hairline); }
.wel__fact:last-child { padding: 18px 0 0 18px; }

.wel__fact-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(233 237 243 / 0.55);
  margin-bottom: 6px;
}
.wel__fact-value { font-family: var(--font-serif); font-size: 24px; margin-left: 0; }
.wel__fact-value--accent { color: var(--accent); }

/* --- Closing CTA ---------------------------------------------------------- */

.wel__cta {
  border-top: 1.5px solid var(--rule);
  background: var(--surface-alt);
  padding: 80px var(--wel-gutter);
  text-align: center;
}
.wel__cta-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 auto;
}
.wel__cta-lede {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 18px auto 30px;
}

.wel__signoff {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
  text-align: left;
}
.wel__signoff-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(0.85);
  background: var(--surface);
  flex: 0 0 auto;
}
.wel__signoff-text p { font-size: 14.5px; }
.wel__signoff-phone { font-weight: 700; white-space: nowrap; }
.wel__signoff-role { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 2px; }

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

.wel__footer { padding: 36px var(--wel-gutter); }
.wel__footer-legal { max-width: 1288px; margin: 0 auto; }
.wel__footer .footer__copy { margin-top: 12px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .wel__split,
  .wel__why,
  .wel__checklist,
  .wel__phases { grid-template-columns: 1fr; gap: 32px; }

  .wel__why,
  .wel__section,
  .wel__band--deep { padding-top: 56px; padding-bottom: 56px; }

  .wel__steps { grid-template-columns: 1fr; }
  .wel__step { border-right: 0; border-bottom: 1.5px solid var(--rule); }
  .wel__step:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .wel__hero { padding-bottom: 48px; }
  .wel__lede { font-size: 15.5px; }
  .wel__play { width: 58px; height: 58px; }
  .wel__play::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
  .wel__video-label { font-size: 11.5px; }

  .wel__phase { padding: 28px 22px; }
  .wel__phase-name { font-size: 27px; }

  /* Stacked, the vertical rule between the two facts reads as a stray line. */
  .wel__facts { grid-template-columns: 1fr; }
  .wel__fact,
  .wel__fact:last-child { padding: 16px 0 0; }
  .wel__fact:first-child { border-right: 0; }

  .wel__signoff { flex-direction: column; text-align: center; }

  .wel__item-link { margin-left: 0; }
}

/* ==========================================================================
   Legal
   Disclosures and the Privacy Policy at legal.html: a sticky section index
   on the left, one long measured column on the right. Ported from the
   artboard "Valley Oak Legal.dc.html".
   ========================================================================== */

/* Scoped to this page rather than set on html globally, so the smooth jump
   applies to the section index without changing behaviour elsewhere. */
.smooth-scroll { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .smooth-scroll { scroll-behavior: auto; }
}

.legal__header { padding: 24px var(--wel-gutter); }

.legal {
  max-width: 1288px;
  margin: 0 auto;
  padding: 56px var(--wel-gutter) 96px;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

/* --- Section index -------------------------------------------------------- */

/* align-self overrides the container's flex-start: the column has to be full
   height or the sticky child has no travel and scrolls away with the text. */
.legal__toc { flex: 0 0 220px; align-self: stretch; }

.legal__toc-inner {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal__toc-group {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.legal__toc-group--spaced { margin-top: 18px; }

.legal__toc a { font-size: 15px; }

/* --- Body column ---------------------------------------------------------- */

.legal__body {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 78ch;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.legal__disclosures { display: flex; flex-direction: column; gap: 56px; }

.legal__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.05;
}

/* Clears the sticky index and keeps a jumped-to heading off the viewport edge. */
.legal__disclosures,
.legal__section,
.legal__privacy,
.legal__contact { scroll-margin-top: 32px; }

.legal__section { display: flex; flex-direction: column; gap: 16px; }
.legal__section--rule {
  border-top: 1px solid var(--hairline);
  padding-top: 40px;
}

.legal__h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 28px);
  line-height: 1.2;
}

.legal__p {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgb(233 237 243 / 0.78);
  text-wrap: pretty;
}
.legal__p--strong { color: var(--text); font-weight: 600; }

.legal__note {
  font-size: 14px;
  line-height: 1.75;
  font-style: italic;
  color: rgb(233 237 243 / 0.55);
}

/* --- Privacy policy ------------------------------------------------------- */

.legal__privacy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-top: 1.5px solid var(--rule);
  padding-top: 64px;
}

.legal__privacy-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.legal__privacy-head .eyebrow { margin-bottom: 10px; }

.legal__privacy-q {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.6vw, 24px);
  line-height: 1.3;
}

/* FACTS block: Why? / What? / How? */
.legal__facts { border-top: 1px solid var(--hairline); }

.legal__fact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.legal__fact-key {
  flex: 0 0 120px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.legal__fact-val {
  flex: 1 1 320px;
  min-width: 0;
  margin-left: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgb(233 237 243 / 0.78);
}
.legal__fact-val p + ul,
.legal__qa-a p + ul { margin-top: 10px; }
.legal__fact-val ul + p,
.legal__qa-a ul + p { margin-top: 10px; }

.legal__list { list-style: disc; padding-left: 20px; }
.legal__list li { margin-bottom: 2px; }

/* --- Sharing table -------------------------------------------------------- */

.legal__share {
  width: 100%;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  text-align: left;
}

.legal__share thead th {
  background: var(--surface);
  padding: 14px 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  vertical-align: top;
}
.legal__share thead th:first-child { width: 52%; }

.legal__share tbody th,
.legal__share tbody td {
  padding: 16px 18px;
  border-top: 1px solid rgb(233 237 243 / 0.12);
  font-size: 14.5px;
  line-height: 1.6;
  vertical-align: top;
  font-weight: 400;
}
.legal__share tbody th { color: var(--text); }
.legal__share tbody th b { font-weight: 700; }
.legal__share tbody th span { color: var(--text-muted); }
.legal__share tbody td { color: rgb(233 237 243 / 0.75); }

.legal__share-answer {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text);
}

/* --- Question / answer blocks --------------------------------------------- */

.legal__group {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  margin-bottom: -16px;
}

.legal__qa-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.legal__qa-q {
  flex: 0 0 240px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.35;
}
.legal__qa-a {
  flex: 1 1 280px;
  min-width: 0;
  margin-left: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgb(233 237 243 / 0.78);
}

/* --- Contact card --------------------------------------------------------- */

.legal__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  padding: 28px 30px;
  background: var(--surface);
}
.legal__contact-title { font-family: var(--font-serif); font-size: 26px; }
.legal__contact-addr { font-size: 14.5px; color: var(--text-muted); margin-top: 6px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .legal { gap: 36px; padding-top: 40px; }

  /* The index stops being a sidebar and becomes a chip row above the text. */
  .legal__toc { flex: 1 1 100%; }
  .legal__toc-inner {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: baseline;
  }
  .legal__toc-group { width: 100%; margin-bottom: 0; }
  .legal__toc-group--spaced { margin-top: 8px; }
  .legal__toc a { font-size: 14px; }

  .legal__body { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .legal__privacy { padding-top: 44px; }
  .legal__fact-key { flex-basis: 100%; }
  .legal__qa-q { flex-basis: 100%; }

  /* A three-column table cannot hold at phone width, so each row becomes a
     stacked card and the column headers move into per-cell labels. */
  .legal__share { border-radius: 6px; display: block; }
  .legal__share thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .legal__share tbody,
  .legal__share tr { display: block; }
  .legal__share tr + tr { border-top: 1.5px solid var(--rule); }

  .legal__share tbody th,
  .legal__share tbody td { display: block; border-top: 0; padding: 4px 16px; }
  .legal__share tbody th { padding-top: 18px; }
  .legal__share tbody tr > *:last-child { padding-bottom: 18px; }

  .legal__share tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 10px;
  }
  .legal__share-answer { font-size: 17px; }
}