/* ==========================================================================
   America's Capital SBA — an SBA 7(a) subsidiary of VFI Corporate Finance
   ---------------------------------------------------------------------------
   TYPE follows the VFI house system, measured off vfi.net: a serif carries
   display (they use Collier at w600-700, line-height 1.0, normal tracking),
   a light humanist sans carries everything else (they run body at w300, and
   nav links at w400 in Title Case — not bold caps). A serif holds weight
   gracefully because it has stroke contrast; a geometric sans at 800 does
   not, which is why the previous pass read as blunt.

   Here: Source Serif 4 (600) for display, Montserrat — the ACSBA logo's own
   face — at 300/400/500 for body, labels and UI, so the mark's family stays
   present in the small type.

   CONSISTENCY is structural: every band opens with the same head component
   (eyebrow / h2 / lede) at the same sizes on the same left edge. Variety
   comes from the ground and the content pattern beneath, never from
   re-inventing the heading.

   LINES only frame a group or separate peers, never decorate.

   NO `ch` FOR LAYOUT. The ch unit resolves against whatever font is active,
   so a max-width in ch reflows when the webfont swaps in — and on a band
   still offscreen the browser defers that until it scrolls into view. That
   changed the page height mid-scroll and left anchor links landing in the
   wrong place. Measures are in rem, set to the measured Montserrat widths.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Palette — sampled from the logo SVGs + Style Tile V09 */
  --ink:       #0C162E;   /* logo wordmark navy — the dominant dark field */
  --ink-lift:  #0F1B36;   /* one step up, for the figures strip */
  --ink-deep:  #060D1C;   /* footer */
  --gold:      #AB936C;
  --gold-btn:  #8A6F49;   /* filled buttons — deep enough to carry white at AA */
  --gold-lt:   #C9B191;
  --gold-txt:  #7C6240;   /* gold that clears AA as small text on light */
  --bone:      #F6F4F0;
  --paper:     #FFFFFF;

  --text:      #14203A;
  --text-2:    #5A6478;
  --on-dark:   rgba(255, 255, 255, .78);
  --on-dark-2: rgba(255, 255, 255, .60);
  --hair:      rgba(255, 255, 255, .13);
  --rule:      rgba(12, 22, 46, .14);

  --font-display: "Commissioner", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Scale — display in the serif, everything else in the sans */
  --h1: clamp(2.5rem, 5.4vw, 4.5rem);
  --h2: clamp(1.95rem, 3.4vw, 2.95rem);
  --h3: clamp(1.3rem, 1.8vw, 1.6rem);
  --lede: clamp(1.08rem, 1.3vw, 1.22rem);

  --nav-h: 84px;
  --nav-stuck: 70px;
  --pad: clamp(1.5rem, 5.5vw, 5.5rem);
  --maxw: 1300px;
  --colgap: clamp(1.75rem, 3.2vw, 3.25rem);
  --band-y: clamp(4.5rem, 9vw, 8.5rem);
  --t: 200ms cubic-bezier(.33, 0, .2, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

.skip {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 999;
  translate: 0 -110%;
  padding: .8rem 1.35rem;
  background: var(--gold-btn);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: translate var(--t);
}
.skip:focus { translate: 0 0; }

/* --- 3. Type ------------------------------------------------------------- */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.022em;
}
.h1 { font-size: var(--h1); line-height: 1.05; }
.h2 { font-size: var(--h2); line-height: 1.08; }
.h3 { font-size: var(--h3); line-height: 1.2; letter-spacing: -.014em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-txt);
}
.on-dark .eyebrow { color: var(--gold-lt); }
/* "SBA 7(a)" must keep its lowercase a inside an uppercased label */
.tt-none { text-transform: none; }

.lede {
  max-width: 44.6rem;   /* was 54ch — see note on ch below */
  font-size: var(--lede);
  font-weight: 300;
  line-height: 1.62;
  color: var(--text-2);
}
.on-dark { color: #fff; }
.on-dark .lede { color: var(--on-dark); }

.sm { font-size: .9375rem; line-height: 1.66; color: var(--text-2); }
.on-dark .sm { color: var(--on-dark); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --- 4. Structure -------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band {
  padding-block: var(--band-y);
  scroll-margin-top: calc(var(--nav-stuck) - 1px);
}

/* The head is identical in every band — that is where consistency lives. */
.head { max-width: 42.2rem; margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem); }
.head .eyebrow { display: block; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.head .h2 { margin-bottom: clamp(1rem, 2vw, 1.4rem); }

/* --- 5. Buttons — Title Case and modest, as on vfi.net ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.6rem;
  border: 1px solid var(--gold-btn);
  background: var(--gold-btn);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
/* The nav bar is always over a dark ground, so its CTA takes the dark-ground
   hover — filling with ink there would all but disappear. */
.on-dark .btn:hover,
.nav .btn:hover { background: transparent; border-color: var(--gold-lt); color: var(--gold-lt); }

/* Ghost buttons fill gold on hover, matching the solid ones */
.btn--line { background: transparent; border-color: var(--rule); color: var(--text); }
.on-dark .btn--line { border-color: rgba(201, 177, 145, .5); color: #fff; }
.btn--line:hover,
.on-dark .btn--line:hover {
  background: var(--gold-btn);
  border-color: var(--gold-btn);
  color: #fff;
}

.btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- 6. Nav -------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), height var(--t);
}
.nav.is-stuck {
  height: 70px;
  background: rgba(12, 22, 46, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--hair);
}

.nav__in { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); }
.nav__logo { display: block; flex: 0 0 auto; margin-right: auto; padding-block: .6rem; }
.nav__logo img { height: clamp(34px, 3.6vw, 46px); width: auto; }

.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.1vw, 1.9rem); }
.nav__link {
  padding-block: .6rem;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, .82);
  transition: color var(--t);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--gold-lt); }

.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: .6rem;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: color var(--t);
}
.nav__tel:hover { color: var(--gold-lt); }
.nav__tel svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--gold-lt); }

.nav__cta { min-height: 42px; padding: 0 1.2rem; font-size: .8125rem; }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span { display: block; position: relative; width: 20px; height: 1.5px; background: #fff; }
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: #fff;
  transition: translate var(--t), rotate var(--t);
}
.burger span::before { translate: 0 -6px; }
.burger span::after  { translate: 0 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { translate: 0 0; rotate: 45deg; }
.burger[aria-expanded="true"] span::after  { translate: 0 0; rotate: -45deg; }

.panel {
  position: fixed;
  inset: var(--nav-h) 0 auto;
  z-index: 99;
  padding: 1.5rem var(--pad) 2.5rem;
  background: rgba(12, 22, 46, .98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
}
.panel[data-open="true"] { display: block; }
.panel a { text-decoration: none; }
.panel__nav { display: grid; gap: .25rem; }
.panel__nav a {
  padding-block: .8rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.panel__foot { margin-top: 2rem; display: grid; gap: 1.25rem; justify-items: start; }
.panel__tel { font-size: 1.35rem; font-weight: 500; color: var(--gold-lt); }

/* --- 7. Hero — full-bleed image, dark scrim, centred content ------------ */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 88vh, 860px);
  padding-block: calc(var(--nav-h) + 3rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  text-align: center;
  overflow: hidden;
}
/* Shared photographic ground. The scrim is what keeps text at AA over a
   photograph, so it travels with the component rather than the section. */
.media-bg { position: absolute; inset: 0; z-index: -2; }
.media-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Frame the hero so its subjects sit left of the centred headline rather
   than behind it; the quiet shelving carries the type. */
.hero .media-bg img { object-position: 66% 45%; }
.media-bg::after { content: ""; position: absolute; inset: 0; }

.hero .media-bg::after {
  background:
    linear-gradient(180deg, rgba(6, 13, 28, .74) 0%, rgba(6, 13, 28, .60) 45%, rgba(6, 13, 28, .88) 100%),
    radial-gradient(90% 70% at 50% 45%, rgba(12, 22, 46, .28), rgba(6, 13, 28, .8));
}

/* About carries more small text, so its scrim is heavier — the photograph
   reads as a warm ground rather than a picture. */
.b-about .media-bg img { object-position: 50% 42%; }
.b-about .media-bg::after {
  background:
    linear-gradient(100deg, rgba(6, 13, 28, .93) 0%, rgba(8, 16, 34, .88) 40%, rgba(12, 22, 46, .82) 100%);
}

.hero__in { position: relative; display: grid; justify-items: center; }
.hero__eyebrow {
  display: inline-block;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: .55rem 1.25rem;
  background: rgba(255, 255, 255, .13);
  font-size: clamp(.7rem, .95vw, .8rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
}
.hero .h1 { max-width: 67.6rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem); }
.hero .lede {
  max-width: 44.6rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  color: rgba(255, 255, 255, .84);
}
.hero .btns { justify-content: center; }

/* --- 8. Figures strip --------------------------------------------------- */
.figures { background: var(--ink-lift); }
.figures__in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  text-align: center;
}
.figure__v {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.026em;
  color: #fff;
}
.figure__k {
  margin-top: .7rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

/* --- 9. Fundamentals --------------------------------------------------- */
.b-fund { position: relative; isolation: isolate; overflow: hidden; background: var(--bone); }

/* The band is a two-column composition: the specification on the left, the
   mark in its own column on the right. Giving each its own territory is what
   stops the framing rules and the mark's line work crossing each other — the
   rules now stop short of the mark rather than running through it, so the
   mark can be drawn at full strength instead of hidden. */
.b-fund__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
}
.b-fund__body { grid-column: 1 / 10; }

.b-fund__mark { grid-column: 10 / 13; position: relative; }
.b-fund__mark img {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 calc(-50% + var(--py, 0px));
  will-change: translate;
  width: clamp(400px, 55vw, 960px);
  max-width: none;          /* must beat the global img rule to bleed right */
  height: auto;
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

/* The terms, framed: these two lines say "this is the specification", which
   is why no row inside needs a rule of its own. */
.terms {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.terms > .eyebrow { display: block; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

.cols {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  column-gap: var(--colgap);
  row-gap: clamp(2.25rem, 4vw, 3rem);
}
.cols dt, .cols .h3 { margin-bottom: .5rem; }
.cols__t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.008em; color: var(--text); }
.on-dark .cols__t { color: #fff; }


/* Set at the lede's size — it closes the section rather than shouting over it */
.closer {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 44.6rem;
  font-size: var(--lede);
  font-weight: 400;
  line-height: 1.62;
  color: var(--text);
}

/* --- 10. Capital — full-bleed split, the page's second image moment ---- */
/* The media bleeds to the viewport edge, but the copy sits on the SAME
   12-column grid as every other band — so its left edge lands on a real grid
   line and its right edge matches the page gutter, instead of floating off
   the image's percentage width. */
.split { position: relative; background: var(--ink); }
.split__media { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.split__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
}
.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 13, 28, .3), rgba(12, 22, 46, .62));
}
.split__body { grid-column: 6 / 13; padding-block: var(--band-y); }
.split__body .head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* --- 11. Team ---------------------------------------------------------- */
.b-team { background: var(--paper); }

/* A hairline between peers, centred in the gap — not bracketing each one. */
.person + .person { border-top: 1px solid var(--rule); }
.person {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: var(--colgap);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.person:first-child { padding-top: 0; }
.person:last-child { padding-bottom: 0; }

.person__pic { margin: 0; align-self: start; }
.person__pic img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.95);
}
.person__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.024em;
}
.person__role {
  margin-top: .8rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-txt);
}
.person__contact { margin-top: 1.6rem; display: grid; gap: .55rem; justify-items: start; }
.person__contact a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  word-break: break-word;
  color: var(--text);
  transition: color var(--t);
}
.person__contact a:hover { color: var(--gold-txt); }
.person__contact svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--gold); }

.person__bio { max-width: 36rem; }
.person__bio p + p { margin-top: 1rem; }

/* --- 12. About — the closing argument, so it gets a dark field and real
   scale: heading block left, the four commitments as a 2-up at h3 size. --- */
.b-about { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.b-about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  row-gap: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}
.b-about__lead { grid-column: 1 / 6; }
.b-about__lead .head { margin-bottom: 0; }
.b-about__list { grid-column: 6 / 13; }

/* Four peers, so each takes a hairline above it. The rules line up across
   each row into two strong horizontals — that is what stops the group
   floating, and it gives the right column a structure of its own rather
   than four text blocks adrift in the field. */
.commits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--colgap);
  row-gap: clamp(2rem, 3.6vw, 2.75rem);
}
.commits > div {
  padding-top: clamp(1.15rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.commit__t { margin-bottom: .7rem; }

/* --- 12b. Contact — the page's ask, on a light field so the form reads -- */
.b-contact { background: var(--bone); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(3rem, 6vw, 4rem);
  align-items: start;
}
.contact__aside .head { margin-bottom: clamp(2.25rem, 4.5vw, 3rem); }
.contact__direct { display: grid; gap: 1.75rem; }
.contact__direct .eyebrow { display: block; margin-bottom: .5rem; }
.contact__tel, .contact__mail {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.1;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--t);
}
.contact__tel,
.contact__mail { font-size: clamp(1.25rem, 2.1vw, 1.7rem); }
.contact__mail { word-break: break-word; }
.contact__tel:hover, .contact__mail:hover { color: var(--gold-txt); }

/* Form — underlined fields, no boxes; the rule is the input's affordance */
.form { display: grid; gap: clamp(1.6rem, 3vw, 2.1rem); }
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.1rem);
}
.field { display: grid; gap: .55rem; }
.field > span {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field input,
.field textarea {
  width: 100%;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid rgba(12, 22, 46, .26);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--t);
}
.field input:hover, .field textarea:hover { border-bottom-color: rgba(12, 22, 46, .45); }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--gold); }
.field textarea { min-height: 104px; resize: vertical; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-bottom-color: #A32017; }
.field__err { font-size: .8125rem; color: #A32017; }
.field__err:empty { display: none; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__note { font-size: .8125rem; color: var(--text-2); }
.form__ok {
  padding: 1rem 1.25rem;
  background: rgba(171, 147, 108, .16);
  font-size: .9375rem;
  color: var(--text);
}
.form__ok:empty { display: none; }

/* --- 12c. Formidable form -----------------------------------------------
   The WordPress build swaps the hand-built form for [formidable id=1].
   Formidable's own stylesheet still loads (its frm_half/frm6/frm_full grid
   and its error/success states depend on it) — these rules restyle the
   visual layer on top so the plugin's fields match the rest of the page.
   Scoped to .b-contact so nothing here touches other forms on the site. */
.b-contact .frm_forms.with_frm_style,
.b-contact .with_frm_style .frm_form_fields,
.b-contact .with_frm_style .frm_fields_container { max-width: none; }

.b-contact .frm_forms.with_frm_style fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Formidable already lays this container out as a 12-column grid and gives
   its fields spans (frm_half/frm6 = span 6, frm_full = span 12). Redefining
   the container fights that and spawns implicit tracks, so only the gaps are
   overridden — matched to .form__row elsewhere on the page. */
.b-contact .with_frm_style .frm_fields_container {
  column-gap: clamp(1.6rem, 3vw, 2.1rem);
  row-gap: clamp(1.6rem, 3vw, 2.1rem);
  align-items: start;
}
.b-contact .with_frm_style .frm_form_field { margin: 0; padding: 0; }
.b-contact .with_frm_style .frm_verify { display: none; }

/* Labels read as the small tracked caps used everywhere else */
.b-contact .with_frm_style .frm_primary_label {
  display: block;
  margin: 0 0 .55rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.b-contact .with_frm_style .frm_required { color: var(--gold-txt); }
.b-contact .with_frm_style .frm_description {
  margin-top: .45rem;
  font-size: .8125rem;
  color: var(--text-2);
}

/* Underlined fields — the rule is the input's affordance, as in the rest
   of the page. Formidable's own input rules are specific, so these are too. */
.b-contact .frm_forms.with_frm_style input[type="text"],
.b-contact .frm_forms.with_frm_style input[type="email"],
.b-contact .frm_forms.with_frm_style input[type="tel"],
.b-contact .frm_forms.with_frm_style input[type="url"],
.b-contact .frm_forms.with_frm_style input[type="number"],
.b-contact .frm_forms.with_frm_style select,
.b-contact .frm_forms.with_frm_style textarea {
  width: 100%;
  max-width: none;
  height: auto;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid rgba(12, 22, 46, .26);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  transition: border-color var(--t);
}
.b-contact .frm_forms.with_frm_style textarea { min-height: 104px; resize: vertical; }
.b-contact .frm_forms.with_frm_style input:hover,
.b-contact .frm_forms.with_frm_style textarea:hover { border-bottom-color: rgba(12, 22, 46, .45); }
.b-contact .frm_forms.with_frm_style input:focus,
.b-contact .frm_forms.with_frm_style textarea:focus,
.b-contact .frm_forms.with_frm_style select:focus {
  outline: 0;
  border-bottom-color: var(--gold);
  box-shadow: none;
}

/* Submit adopts .btn exactly */
.b-contact .with_frm_style .frm_submit { margin: 0; }
.b-contact .frm_forms.with_frm_style .frm_button_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 50px;
  margin: 0;
  padding: 0 1.6rem;
  border: 1px solid var(--gold-btn);
  border-radius: 0;
  background: var(--gold-btn);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: #fff;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.b-contact .frm_forms.with_frm_style .frm_button_submit:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Validation + confirmation, matched to the page's own states */
.b-contact .frm_forms.with_frm_style .frm_error,
.b-contact .frm_forms.with_frm_style .frm_error_style {
  margin-top: .45rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: .8125rem;
  color: #A32017;
}
/* Formidable sets its own error red on inputs with a stronger rule than a
   plain override can beat, so this state is forced for consistency. */
.b-contact .frm_forms.with_frm_style .frm_blank_field input,
.b-contact .frm_forms.with_frm_style .frm_blank_field textarea {
  border-color: transparent transparent #A32017 !important;
  background-color: transparent !important;   /* plugin fills these white */
}
.b-contact .with_frm_style .frm_message,
.b-contact .frm_forms.with_frm_style .frm_success_style {
  padding: 1rem 1.25rem;
  border: 0;
  background: rgba(171, 147, 108, .16);
  font-size: .9375rem;
  color: var(--text);
}

@media (max-width: 680px) {
  /* one field per row on phones, whatever span Formidable assigned */
  .b-contact .with_frm_style .frm_form_field { grid-column: 1 / -1; }
  /* Formidable hides a sub-field's label with visibility, which still
     reserves its height — right when it sits beside its sibling, but once
     stacked it is just a gap twice the size of the others. */
  .b-contact .with_frm_style .frm_hidden_container .frm_primary_label { display: none; }
}

/* --- 13. Footer -------------------------------------------------------- */
.foot { background: var(--ink-deep); color: #fff; }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  row-gap: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}
.foot__brand { grid-column: 1 / 7; }
.foot__contact { grid-column: 9 / 13; }

.foot__logo { width: clamp(215px, 23vw, 280px); height: auto; margin-bottom: 2rem; }
.foot__addr { font-style: normal; font-size: .9375rem; line-height: 1.8; color: var(--on-dark); }
.foot__sub {
  max-width: 18.4rem;
  margin-top: 1.5rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--on-dark-2);
}

.foot__h {
  margin-bottom: 1.5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.foot__list { display: grid; gap: .85rem; justify-items: start; }
.foot__list a {
  font-size: .9375rem;
  text-decoration: none;
  word-break: break-word;
  color: var(--on-dark);
  transition: color var(--t);
}
.foot__list a:hover { color: var(--gold-lt); }
.foot__list .big {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.1vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -.026em;
  color: #fff;
}

.foot__bar {
  border-top: 1px solid var(--hair);
  padding-block: 1.6rem 1.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--on-dark-2);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.foot__bar a { text-decoration: none; transition: color var(--t); }
.foot__bar a:hover { color: var(--gold-lt); }

/* --- 14. Responsive ---------------------------------------------------- */
@media (max-width: 1180px) {
  .split__media { width: 34%; }
  .person { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); }
  .person__bio { grid-column: 1 / -1; max-width: 42rem; margin-top: 1.75rem; }
  .b-about__lead { grid-column: 1 / 6; }
  .b-about__list { grid-column: 6 / 13; }
}

@media (max-width: 940px) {
  :root { --nav-h: 70px; --nav-stuck: 64px; }
  .nav.is-stuck { height: 64px; }
  .nav__links, .nav__cta { display: none; }
  .burger { display: inline-flex; }
  .nav__logo img { height: 34px; }
  .nav__tel { padding: .75rem; }
  .nav__tel span { display: none; }
  .nav__tel svg { width: 20px; height: 20px; }

  .split__media {
    position: relative;
    width: 100%;
    height: clamp(260px, 46vw, 380px);
  }
  .split__media img { object-position: 50% 22%; }
  .b-fund__grid, .split__grid, .b-about__grid { grid-template-columns: 1fr; }
  .split__body, .b-fund__body, .b-about__lead, .b-about__list { grid-column: 1; }
  .cols { --n: 2 !important; }
  .b-fund__mark {
    grid-column: 1;
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .b-fund__mark img { left: auto; right: -24%; width: 76vw; opacity: .17; }
  .figures__in { gap: 2rem 1.5rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .foot__brand { grid-column: 1 / 8; }
  .foot__contact { grid-column: 8 / 13; }
}

/* Small phones — the lockup alone eats more than half the bar */
@media (max-width: 400px) {
  .nav__logo img { height: 26px; }
  .nav__in { gap: .5rem; }
}

@media (max-width: 680px) {
  /* A narrow viewport crops the hero to a vertical strip — re-centre it on
     the subjects so the photograph still reads as two owners at work. */
  .hero .media-bg img { object-position: 36% 42%; }
  .b-fund__mark { display: none; }
  .cols { --n: 1 !important; }
  .figures__in {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    text-align: center;
  }
  .figure__v { font-size: 1.65rem; }
  .figure__k { margin-top: .4rem; }
  .person { grid-template-columns: 1fr; }
  .person__pic { width: min(62%, 220px); }
  .person__bio { margin-top: 1.35rem; }
  .btns .btn { flex: 1 1 100%; }
  .commits, .form__row, .foot__grid { grid-template-columns: 1fr; }
  .foot__brand, .foot__contact { grid-column: 1; }
}

/* --- 14b. Motion --------------------------------------------------------
   Gated behind .js so nothing is ever hidden without script — that is what
   broke screenshots and print last time. Short distance, one quick easing,
   capped stagger: motion should be felt, not watched. */
.js [data-anim] {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity .68s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms),
    translate .68s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms);
}
.js [data-anim="fade"] { translate: none; }
.js [data-anim].is-in { opacity: 1; translate: 0 0; }

/* --- 14c. WordPress admin bar ------------------------------------------
   Only present for logged-in users. WP's own stylesheet offsets <html>, but
   it knows nothing about this page's fixed nav, so move that down too. */
body.admin-bar .nav { top: 32px; }
body.admin-bar .panel { top: calc(var(--nav-h) + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
  body.admin-bar .panel { top: calc(var(--nav-h) + 46px); }
}

/* --- 15. Preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
  .js [data-anim] { opacity: 1; translate: none; }
  .b-fund__mark img { translate: 0 -50%; }
}

@media print {
  .nav, .panel, .hero__media { display: none !important; }
  .hero, .foot, .split, .figures, .on-dark {
    background: #fff !important;
    color: #000 !important;
  }
  .hero { min-height: 0; text-align: left; }
}