/* =============================================================
   CERTUS CREDIT · Debt Advisory
   Layout mirrors the MENCZEL site structure (Blackstone pattern),
   rethemed to the Certus system: navy near mono, Cinzel display,
   Public Sans text, Jost labels. Retheme everything from tokens.
   ============================================================= */

:root {
  /* --- Palette (brand tokens.css) --- */
  --navy:        #0C2340;
  --navy-alt:    #071829;   /* abyss, for footer */
  --ivory:       #F7F5F0;
  --charcoal:    #0C2340;   /* light-section text is Certus navy */
  --steel:       #5E6E7E;   /* slate: labels and microtype */
  --off-white:   #F7F5F0;

  --ivory-70: rgba(247, 245, 240, 0.70);
  --ivory-55: rgba(247, 245, 240, 0.55);
  --ivory-16: rgba(247, 245, 240, 0.16);
  --ivory-08: rgba(247, 245, 240, 0.08);

  --line-light: rgba(12, 35, 64, 0.14);

  /* --- Type ---
     Display: Cinzel (the wordmark face; lowercase renders as small caps).
     Text: Public Sans. Labels: Jost, letterspaced caps. */
  --f-serif: "Cinzel", Georgia, "Times New Roman", serif;
  --f-sans:  "Public Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-label: "Jost", "Futura", "Century Gothic", sans-serif;

  /* --- Layout --- */
  --maxw: 1240px;
  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --header-h: 5.5rem;

  /* --- Fluid type --- */
  --fs-eyebrow: 0.72rem;
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-h2:      clamp(1.8rem, 3.8vw, 2.7rem);
  --fs-hero:    clamp(2.6rem, 7.2vw, 6.2rem);
  --fs-stat:    clamp(3.2rem, 9.5vw, 7rem);
  --fs-statement: clamp(2.2rem, 5.5vw, 4.5rem);
}

/* =============================================================
   Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 500;
  line-height: 1.14;
  margin: 0;
  letter-spacing: 0.03em;
}
p { margin: 0; }

/* =============================================================
   Helpers
   ============================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--light { background: var(--off-white); color: var(--charcoal); }

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-family: var(--f-label);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 1.6rem;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6;
}
.eyebrow--left { justify-content: flex-start; }
.eyebrow--left::before { display: none; }

.h2 { font-size: var(--fs-h2); }
.center { text-align: center; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ivory-70); }
.section--light .lede { color: #3d4c5e; }

/* Legal pages (privacy / terms), for when counsel copy lands */
.legal { max-width: 760px; margin-inline: auto; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 0.6rem; }
.legal h2 { font-size: var(--fs-h3); margin: 2.6rem 0 0.9rem; }
.legal h3 { font-size: 1.15rem; margin: 1.7rem 0 0.5rem; }
.legal p, .legal li { font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; color: #33465c; }
.legal ul { list-style: disc; margin: 0 0 1.2rem 1.3rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { text-decoration: underline; }
.legal .updated { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--steel); margin-bottom: 2.4rem; }
.legal .note { font-size: 0.85rem; color: var(--steel); border-top: 1px solid var(--line-light); margin-top: 2.8rem; padding-top: 1.4rem; }

/* =============================================================
   Links & buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-sans); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.9rem 1.8rem; border: 1px solid var(--ivory);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  cursor: pointer;
}
.btn--solid { background: var(--ivory); color: var(--navy); }
.btn--solid:hover { background: transparent; color: var(--ivory); }
.btn--outline { background: transparent; color: var(--ivory); }
.btn--outline:hover { background: var(--ivory); color: var(--navy); }
.section--light .btn { border-color: var(--charcoal); }
.section--light .btn--solid { background: var(--charcoal); color: var(--off-white); }
.section--light .btn--solid:hover { background: transparent; color: var(--charcoal); }
.section--light .btn--outline { color: var(--charcoal); }
.section--light .btn--outline:hover { background: var(--charcoal); color: var(--off-white); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.link-arrow .circ {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor;
  font-size: 1rem; transition: background-color .3s ease, color .3s ease;
}
.section--light .link-arrow .circ { border-color: var(--charcoal); }
.link-arrow:hover .circ { background: var(--ivory); color: var(--navy); }
.section--light .link-arrow:hover .circ { background: var(--charcoal); color: var(--off-white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* =============================================================
   Header
   ============================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease;
}
.site-header.is-scrolled {
  background: rgba(12, 35, 64, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--ivory-16);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand img { height: 30px; width: auto; }

.nav { display: none; gap: 2.6rem; align-items: center; }
.nav a {
  font-family: var(--f-label);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory-70); transition: color .3s ease;
}
.nav a:hover { color: var(--ivory); }

@media (min-width: 900px) { .nav { display: flex; } .nav-toggle { display: none; } }

/* Nav links, the Contact Us CTA, and the hamburger travel together on the right */
.header-right { display: flex; align-items: center; gap: clamp(0.85rem, 2.6vw, 2.6rem); }

/* Contact Us: the header CTA, straight to /apply on every screen.
   Outlined, not filled, and set in the nav's own face and tracking so the
   header stays one quiet line. The hero keeps the single solid button. */
.nav-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--f-label); font-weight: 500; text-transform: uppercase;
  font-size: clamp(0.64rem, 1.7vw, 0.74rem);
  letter-spacing: clamp(0.1em, 0.5vw, 0.18em);
  padding: clamp(0.5rem, 1.5vw, 0.62rem) clamp(0.8rem, 2.4vw, 1.35rem);
  border: 1px solid var(--ivory-16); background: transparent; color: var(--ivory);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.nav-cta:hover { background: var(--ivory); border-color: var(--ivory); color: var(--navy); }

/* Below 560px the full lockup plus the CTA runs past the screen, so the
   wordmark steps down and the CTA tightens. Both stay visible. */
@media (max-width: 560px) { .brand img { height: 24px; } }

.nav-toggle { background: none; border: 0; cursor: pointer; padding: .5rem; display: inline-flex; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 26px; height: 1.5px; background: var(--ivory); }

.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--navy);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  transform: translateY(-100%); transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open { transform: translateY(0); }
.drawer a {
  font-family: var(--f-serif); font-size: clamp(1.6rem, 7vw, 2.4rem); color: var(--ivory);
  padding: 0.6rem 0; border-bottom: 1px solid var(--ivory-08);
}
.drawer a:hover { color: var(--steel); }

/* =============================================================
   Hero (headline + featured carousel)
   ============================================================= */
.hero { padding-top: var(--header-h); }
.hero__head { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.hero__title {
  font-size: var(--fs-hero); line-height: 1.08; max-width: 16ch; letter-spacing: 0.03em;
}
.hero__title strong { font-weight: 600; }
.hero__title .light { font-weight: 400; }
.hero__sub { margin-top: 1.6rem; max-width: 50ch; font-size: var(--fs-lede); color: var(--ivory-70); }

.hero__feature {
  border-top: 1px solid var(--ivory-16);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.slides { position: relative; }
.slide {
  display: none;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.slide.is-active { display: grid; animation: fade .8s ease; }
@media (min-width: 820px) { .slide { grid-template-columns: 1.2fr 1fr; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.slide__media {
  position: relative; aspect-ratio: 16 / 10; background: #112B4C;
  border: 1px solid var(--ivory-16);
  display: flex; align-items: center; justify-content: center;
}
.slide__mark { width: clamp(54px, 7vw, 86px); height: auto; opacity: 0.42; }
.slide__cap .eyebrow { margin-bottom: 1.1rem; }
.slide__cap h2 { font-size: var(--fs-h3); margin-bottom: 1rem; max-width: 24ch; }
.slide__cap p { color: var(--ivory-70); margin-bottom: 1.6rem; max-width: 44ch; }

.carousel-ctrl { display: flex; gap: 0.8rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.carousel-ctrl button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ivory-16);
  background: transparent; color: var(--ivory); cursor: pointer; font-size: 1.1rem;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.carousel-ctrl button:hover { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.carousel-ctrl .count { margin-left: 0.6rem; font-family: var(--f-label); font-size: 0.85rem; color: var(--ivory-55); letter-spacing: 0.1em; }

/* =============================================================
   About / Firm (light)
   ============================================================= */
.about__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.about__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 820px) { .about__grid { grid-template-columns: 0.7fr 1.3fr; align-items: start; } }
.about__grid h3 { font-size: var(--fs-h3); margin-bottom: 1.2rem; }
.about__body p + p { margin-top: 1.3rem; }
.about__cta { margin-top: 2rem; }

/* Statement block (no fabricated metrics, ever) */
.statement { text-align: center; border-top: 1px solid var(--line-light); margin-top: clamp(3rem,6vw,5rem); padding-top: clamp(3rem,6vw,5rem); }
.statement__big { font-family: var(--f-serif); font-size: var(--fs-stat); line-height: 1.02; letter-spacing: 0.03em; }
.statement__label { font-family: var(--f-label); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--steel); margin-top: 1.4rem; }
.statement__note { font-size: 0.82rem; color: var(--steel); margin-top: 1rem; }

/* =============================================================
   Financing / accordion (dark)
   ============================================================= */
.pw__intro { max-width: 52ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.pw__intro h2 { font-size: var(--fs-h2); margin-bottom: 1.4rem; max-width: 20ch; }
.pw__intro p { color: var(--ivory-70); margin-bottom: 1.8rem; }

.accordion { border-top: 1px solid var(--ivory-16); }
.acc__item { border-bottom: 1px solid var(--ivory-16); }
.acc__trigger {
  width: 100%; background: transparent; border: 0; color: var(--ivory); cursor: pointer;
  text-align: left; font-family: var(--f-serif); font-size: var(--fs-h3); letter-spacing: 0.03em;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.acc__circ {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ivory-16); position: relative; transition: background-color .3s ease;
}
.acc__circ::before, .acc__circ::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--ivory);
  transform: translate(-50%, -50%); transition: opacity .3s ease, transform .3s ease;
}
.acc__circ::before { width: 14px; height: 1.5px; }
.acc__circ::after  { width: 1.5px; height: 14px; }
.acc__item.is-open .acc__circ::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
.acc__item.is-open .acc__circ { background: rgba(247,245,240,0.06); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.acc__panel-inner { padding-bottom: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--ivory-55); max-width: 60ch; font-family: var(--f-sans); }

/* =============================================================
   Big statement band (dark)
   ============================================================= */
.band { padding-block: clamp(5rem, 11vw, 9rem); }
.band h2 { font-size: var(--fs-statement); line-height: 1.08; max-width: 18ch; }
.band h2 strong { font-weight: 600; }
.band p { color: var(--steel); margin-top: 1.8rem; font-size: 0.85rem; letter-spacing: 0.04em; max-width: 60ch; }

/* =============================================================
   Who we work with (light)
   ============================================================= */
.insights__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); flex-wrap: wrap; }
.insights__head h2 { font-size: var(--fs-h2); }
.stories { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .stories { grid-template-columns: repeat(3, 1fr); } }
.story__media { aspect-ratio: 4 / 3; background: #112B4C; margin-bottom: 1.4rem; display: flex; align-items: center; justify-content: center; }
.story:nth-child(2) .story__media { background: #16324F; }
.story:nth-child(3) .story__media { background: #1A3752; }
.story__media img { width: 44px; height: auto; opacity: 0.4; }
.story__cat { font-family: var(--f-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); }
.story h3 { font-size: var(--fs-h3); margin: 0.7rem 0; }
.story__date { font-size: 0.85rem; color: var(--steel); }

/* =============================================================
   Contact (dark)
   ============================================================= */
.news__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 860px) { .news__grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.news__grid h2 { font-size: var(--fs-h2); max-width: 18ch; }
.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; gap: 1.6rem; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-family: var(--f-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); margin-bottom: 0.6rem; }
.field input, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ivory-16);
  color: var(--ivory); font-family: var(--f-sans); font-size: 1rem; padding: 0.7rem 0;
}
.field input::placeholder { color: rgba(247,245,240,0.35); }
.field input:focus, .field select:focus { outline: 0; border-bottom-color: var(--steel); }
.field select option { color: var(--charcoal); }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.8rem; color: var(--ivory-55); }
.consent a { color: var(--ivory); text-decoration: underline; }
.form__msg { font-size: 0.85rem; min-height: 1.2em; }

/* =============================================================
   Footer
   ============================================================= */
.site-footer { background: var(--navy-alt); border-top: 1px solid var(--ivory-16); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__brand img { height: 44px; width: auto; margin-bottom: 1.2rem; }
.footer__brand p { font-family: var(--f-label); color: var(--steel); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; }
.footer__col h4 { font-family: var(--f-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel); margin-bottom: 1.2rem; }
.footer__col li { margin-bottom: 0.7rem; }
.footer__col a { color: var(--ivory-70); font-size: 0.92rem; }
.footer__col a:hover { color: var(--ivory); }
.footer__bottom {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--ivory-08);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.76rem; color: var(--ivory-55);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__bottom a:hover { color: var(--ivory); }

/* =============================================================
   Photography (near mono: grayscale under a navy scrim)
   ============================================================= */
/* Full-viewport photo hero, Spike pattern: grey image under a vertical navy gradient */
.hero--full {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--header-h); overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(0.98) brightness(0.8);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(12,35,64,0.82) 0%, rgba(12,35,64,0.55) 30%,
    rgba(12,35,64,0.55) 55%, rgba(12,35,64,0.92) 100%);
}
.hero__inner { position: relative; padding-block: clamp(4rem, 10vh, 7rem); }
.hero__inner .eyebrow { color: var(--ivory-70); }

/* Equal two-column split with wide gutter (Spike: 544/544, 96px gap) */
.split {
  display: grid; gap: clamp(3rem, 7vw, 6rem); align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split .photo { aspect-ratio: 6 / 5; }
.split .photo img { height: 100%; }
.firm__lanes {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light);
  font-family: var(--f-label); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel);
}
.photo { position: relative; margin: 0; overflow: hidden; background: var(--navy); }
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
}
.photo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(12,35,64,0.32); mix-blend-mode: multiply;
}
.photo--tall { min-height: 340px; }

/* Numbered steps (Spike-pattern process grid) */
.steps {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  margin: clamp(2.8rem, 6vw, 4.5rem) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--ivory-16); padding-top: clamp(2.2rem, 4vw, 3rem);
}
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps__num {
  font-family: var(--f-label); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.22em; color: var(--steel); display: block; margin-bottom: 1rem;
}
.steps h3 { font-size: var(--fs-h3); margin-bottom: 0.8rem; }
.steps p { color: var(--ivory-55); font-size: 0.95rem; max-width: 34ch; }

/* Contact: short, generous, no form */
.contact__inner { max-width: 880px; }
.contact__legal {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--ivory-08);
  font-size: 0.8rem; color: var(--ivory-55); max-width: 56ch;
}

/* Hide hamburger on desktop (base rule below the earlier media query used to win) */
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* Slim footer row */
.footer__slim { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; justify-content: space-between; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; }
.footer__legal a { color: var(--ivory-70); font-size: 0.92rem; }
.footer__legal a:hover { color: var(--ivory); }

/* =============================================================
   Reveal animation
   ============================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .slide.is-active { animation: none; }
}

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

/* =============================================================
   Apply flow (/apply and /apply/discovery)
   Two funnel pages on the Spike pattern, rethemed to Certus:
   navy header lockup, ivory headline plate, then the panel
   (Typeform on one page, the calendar on the other).
   No site nav on these pages on purpose: one path forward.
   ============================================================= */
/* Funnel pages are short. Match the page ground to the footer so a tall
   viewport reads as one continuous footer, not a navy gap under it. */
body.funnel { background: var(--navy-alt); }

.site-header--plain {
  position: static; background: var(--navy);
  border-bottom: 1px solid var(--ivory-08);
}
.site-header--plain .wrap { justify-content: center; }

.lockup { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 2.1rem); min-width: 0; }
.lockup img { height: clamp(22px, 4vw, 28px); width: auto; }
.lockup__rule { flex: 0 0 auto; width: 1px; height: clamp(24px, 5vw, 34px); background: var(--ivory-16); }
.lockup__desc {
  font-family: var(--f-label); font-size: clamp(0.62rem, 2vw, 0.72rem); font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ivory-70); white-space: nowrap;
}
/* Under ~620px the lockup is wider than the screen. Drop the rule and the
   descriptor: the logo already carries "Debt Advisory" on its second line. */
@media (max-width: 620px) {
  .lockup__rule, .lockup__desc { display: none; }
}

/* The headline plate: ivory, centered, short rule above the title */
.plate {
  background: var(--off-white); color: var(--charcoal); text-align: center;
  padding-block: clamp(3.4rem, 8vw, 6.5rem) clamp(2.4rem, 6vw, 4.2rem);
}
.plate__dash {
  display: block; width: 46px; height: 2px; background: var(--charcoal);
  opacity: 0.5; margin: 0 auto clamp(1.8rem, 4vw, 3rem);
}
.plate__title {
  font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.06;
  max-width: 22ch; margin-inline: auto;
}
.plate__sub {
  margin-top: 1.4rem; font-size: var(--fs-lede); line-height: 1.5;
  color: #3d4c5e; max-width: 58ch; margin-inline: auto;
}

/* Typeform panel: navy block inset in the ivory page, Spike proportions */
.tf-panel { background: var(--off-white); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.tf-panel__inner {
  max-width: 1000px; margin-inline: auto; background: var(--navy);
  border-radius: 2px; overflow: hidden;
}
.tf-embed { width: 100%; height: clamp(580px, 78svh, 840px); }
.tf-note {
  max-width: 1000px; margin: 1.6rem auto 0; padding-inline: var(--gutter);
  font-size: 0.8rem; line-height: 1.6; color: var(--steel); text-align: center;
}
.tf-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------
   APPLY PAGE FITS THE VIEWPORT, 2026-08-07.
   Ethan: "i dont want people scrolling. it should just appear as is."
   The form is the only thing on this page, so anything pushing it below the fold
   is friction with no upside. The footer came out of the markup; this makes the
   rest fit exactly.

   FLEX, NOT A MAGIC NUMBER. The first attempt sized the embed as
   calc(100svh - 300px), guessing at the height of the header, plate and note.
   The guess was 70-120px light and every breakpoint still scrolled. A flex
   column measures itself, so it cannot drift when the headline wraps to two
   lines on a narrow phone or the note reflows.

   min-height:0 on the flex children is load-bearing. Flex items default to
   min-height:auto, which refuses to shrink below content size, and the iframe
   then pushes the column past the viewport, which is the exact bug this fixes.

   svh not vh: mobile Safari's vh counts the collapsing URL bar, so vh would put
   the bottom of the form under the browser chrome on first paint.

   Scoped to .funnel--fit, which is only on /apply. The other funnel pages
   (confirmed, discovery, thanks) keep their normal footer and scroll.
   --------------------------------------------------------------------------- */
.tf-panel { padding-bottom: clamp(1rem, 2.5vw, 1.8rem); }

@media (min-height: 640px) {
  .funnel--fit { height: 100svh; display: flex; flex-direction: column; }
  .funnel--fit main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .funnel--fit .plate { flex: 0 0 auto; padding-block: clamp(1.4rem, 3.4vw, 2.3rem) clamp(1rem, 2.2vw, 1.4rem); }
  .funnel--fit .plate__dash { margin-bottom: clamp(0.8rem, 1.8vw, 1.1rem); }
  .funnel--fit .plate__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
  .funnel--fit .plate__sub { margin-top: 0.7rem; font-size: 1rem; max-width: 54ch; }

  .funnel--fit .tf-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .funnel--fit .tf-panel__inner { flex: 1 1 auto; min-height: 0; width: min(100%, 300px); }
  .funnel--fit .tf-embed { height: 100%; min-height: 0; }
  .funnel--fit .tf-note { flex: 0 0 auto; margin-top: 0.8rem; font-size: 0.74rem; }
}

/* ---------------------------------------------------------------------------
   THE PANEL NEEDS AN EXPLICIT WIDTH, 2026-08-10.

   Making .tf-panel a flex column above turned .tf-panel__inner into a flex
   item, and a flex item with `margin-inline: auto` does not stretch: the spec
   only stretches an item whose cross-axis margins are both non-auto. So the
   panel stopped filling its 1000px and fell back to fit-content, which for a
   box whose only child is an iframe means the iframe's intrinsic default,
   300x150. Every viewport rendered the form 300px wide. On a phone that is
   invisible, because 300 of 390 looks like a deliberate gutter. On a 1512px
   desktop it was a phone-sized column stranded in the middle of the page.

   The width is now stated rather than inherited from an iframe default, so
   nothing here moves if Typeform changes its embed. Phones keep exactly the
   300px they render today; from 620px up the panel grows to the 1000px this
   page was designed around, the same cap .cal-card uses on /apply/discovery
   and /apply/confirmed, so the three funnel steps read as one width.

   Both conditions are required. Under 640px tall the .funnel--fit rules are
   off entirely, .tf-panel is a plain block, and .tf-panel__inner already
   stretches on its own; forcing 300px there would break the case that works.
   --------------------------------------------------------------------------- */
@media (min-height: 640px) and (min-width: 620px) {
  .funnel--fit .tf-panel__inner { width: min(calc(100% - 2 * var(--gutter)), 1000px); }
}

/* ---------------------------------------------------------------------------
   PHONES GET THE FULL WIDTH TOO, 2026-08-20.

   The block above kept phones at the 300px the flex bug used to produce, on the
   reasoning that 300 of 390 reads as a deliberate gutter. It does, right up to
   question 6. "...prepared to invest at least $10,000 into the engagement?" is
   108 characters, and at 300px it wraps to five lines. On a 375px viewport the
   embed is 362px tall, so the question alone consumes it: "Yes" renders half
   under the submit bar and "No" is pushed off the bottom entirely. The page is
   locked to 100svh so there is nothing to scroll to. The form looks broken at
   the one question that decides whether the enquiry is worth anything.

   Handing the phone its real width back buys the line that unbreaks it, and the
   1000px cap above still governs everything from 620px up. Ethan 2026-08-20.
   --------------------------------------------------------------------------- */
@media (min-height: 640px) and (max-width: 619px) {
  .funnel--fit .tf-panel__inner { width: calc(100% - 2 * var(--gutter)); }
}

/* The width above fixes every phone from an iPhone 14 up, where the embed gets
   539px and question 6 has room to spare. It is not enough on a 667px phone
   (SE, 8, mini): there the embed is 362px, the question still takes four lines,
   and "No" stays tucked under the submit bar. The sub-headline is two lines and
   ~55px of that, which is exactly the missing row. It is the only selling this
   page does, so it survives everywhere it fits and is dropped only on the
   phones where keeping it makes the last question unanswerable. A form you
   cannot answer sells nothing. Ethan 2026-08-20. */
@media (min-height: 640px) and (max-height: 700px) and (max-width: 619px) {
  .funnel--fit .plate__sub { display: none; }
  .funnel--fit .plate { padding-block: 0.7rem 0.6rem; }
}

/* On a short window the flex fit succeeds but squeezes the embed to ~290px, and
   the contact block is five fields, so the form scrolls hard inside its own
   iframe. That is the same friction moved one layer down. Drop the sub-headline
   and tighten the title to hand the space back to the form: the plate is
   reassurance, the form is the job. Below 640px tall we stop trying and let the
   page scroll normally, because nothing fits there. */
@media (min-height: 640px) and (max-height: 860px) {
  /* The sub-line used to be hidden here to buy the form room. It now carries the
     lender-access line, which is the only selling the page does, so it stays and
     the title and dash give up the space instead. Keep it to one sentence: two
     lines of wrap here and the embed starts squeezing again. */
  .funnel--fit .plate { padding-block: 0.9rem 0.8rem; }
  .funnel--fit .plate__title { font-size: clamp(1.5rem, 3.2vw, 1.95rem); }
  .funnel--fit .plate__sub { margin-top: 0.5rem; font-size: 0.86rem; max-width: 46ch; }
  .funnel--fit .plate__dash { margin-bottom: 0.55rem; width: 36px; }
}

/* Calendar band: stone ground, white card, Spike's "schedule your call" rhythm */
.cal-band {
  background: #EFECE3; color: var(--charcoal); text-align: center;
  padding-block: clamp(2.8rem, 6vw, 4.5rem) clamp(3.5rem, 9vw, 7rem);
}
.cal-band .eyebrow { color: var(--steel); margin-bottom: 1.1rem; }
.cal-band__rule {
  display: block; width: 84px; height: 2px; background: var(--charcoal);
  opacity: 0.45; margin: 0 auto clamp(2rem, 5vw, 3.2rem);
}
.cal-card {
  max-width: 1000px; margin-inline: auto; background: #FFFFFF;
  border: 1px solid var(--line-light); border-radius: 2px; text-align: left;
}
/* Cal's month view needs room; below ~720px it clips the time column. */
.cal-embed { width: 100%; min-height: 720px; overflow: auto; }
.cal-fallback { padding: clamp(2.4rem, 6vw, 4rem); text-align: center; }
.cal-fallback h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
/* The booked slot on /apply/confirmed. Deliberately NOT the Cinzel heading face:
   Cinzel sets the wordmark and document titles, never a data line, and its
   old-style figures make a time read badly. Public Sans with tabular figures,
   same rule as every dollar amount on the site. */
.cal-fallback__slot {
  font-family: var(--f-sans); font-size: var(--fs-h4, 1.35rem); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--navy); margin-bottom: 1.1rem;
}
.cal-fallback p { color: #3d4c5e; max-width: 46ch; margin: 0 auto 1.2rem; }
.cal-fallback__prep {
  font-family: var(--f-label); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel) !important;
  margin-top: 1.8rem !important; margin-bottom: 0 !important;
}
.cal-fallback a.btn { border-color: var(--charcoal); background: var(--charcoal); color: var(--off-white); }
.cal-fallback a.btn:hover { background: transparent; color: var(--charcoal); }
.cal-band__note {
  margin-top: 1.8rem; font-size: 0.8rem; line-height: 1.6; color: var(--steel);
  max-width: 62ch; margin-inline: auto;
}

/* =============================================================
   Public contact details, 2026-11-09.
   Ethan's call: the line, the mailbox and the address of record go public so a
   brand search and a cautious borrower both find a reachable firm. Quiet lines,
   not buttons: every CTA still goes to /apply.
   ============================================================= */
.contact__direct { margin-top: 1.6rem; font-size: 0.92rem; line-height: 1.7; color: var(--ivory-70); }
.contact__direct a { text-decoration: underline; text-underline-offset: 3px; }
.contact__direct a:hover { color: var(--ivory); }

.footer__contact { font-size: 0.9rem; line-height: 1.7; color: var(--ivory-70); }
.footer__contact p + p { margin-top: 0.8rem; }
.footer__contact a:hover { color: var(--ivory); }
.footer__label {
  font-family: var(--f-label); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel); margin-bottom: 0.6rem;
}

/* =============================================================
   Insights (/insights and /insights/<slug>), 2026-11-09.
   Light reading pages under a static navy header that keeps the site nav.
   The article measure mirrors .legal; the index reuses the .stories grid.
   ============================================================= */
body.page { background: var(--off-white); }
/* The static header must still sit above the fixed drawer (z 99) so the
   hamburger stays tappable while the drawer is open, as it does on the home page. */
.site-header--plain.site-header--nav { position: relative; z-index: 100; }
.site-header--plain.site-header--nav .wrap { justify-content: space-between; }
.site-header--plain.site-header--nav .brand img { height: 30px; }
@media (max-width: 560px) { .site-header--plain.site-header--nav .brand img { height: 24px; } }

.article { max-width: 720px; margin-inline: auto; }
.article__kicker {
  font-family: var(--f-label); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--steel); margin-bottom: 1.2rem;
}
.article h1 { font-size: var(--fs-h2); line-height: 1.15; margin-bottom: 1rem; }
.article__meta { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--steel); margin-bottom: 2.4rem; }
.article h2 { font-size: var(--fs-h3); margin: 2.6rem 0 0.9rem; }
.article h3 { font-size: 1.15rem; margin: 1.8rem 0 0.5rem; }
.article p, .article li { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.1rem; color: #33465c; }
.article ul, .article ol { margin: 0 0 1.2rem 1.3rem; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-bottom: 0.5rem; }
.article a { text-decoration: underline; text-underline-offset: 3px; }
.article strong { color: var(--navy); font-weight: 600; }
.article blockquote { margin: 1.6rem 0; padding-left: 1.2rem; border-left: 2px solid var(--line-light); color: #3d4c5e; }
.article__foot {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-light);
  font-size: 0.85rem; line-height: 1.6; color: var(--steel);
}
.article__more { margin-top: 2.2rem; }

.insights__intro { max-width: 56ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.insights__intro h1 { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
.insights__intro p { color: #3d4c5e; font-size: var(--fs-lede); line-height: 1.55; }
.story { display: block; color: inherit; }
.story__excerpt { font-size: 0.95rem; line-height: 1.65; color: #3d4c5e; margin: 0.2rem 0 0.8rem; }
.story:hover h3 { color: var(--steel); }

/* =============================================================
   Selected transactions band, 2026-11-09.
   The deck's tombstones on a stone ground between the ivory lender
   section and the navy contact section. Dollar figures are Public Sans
   with tabular figures, never Cinzel (house rule).
   ============================================================= */
.section--stone { background: #EFECE3; color: var(--charcoal); }
.section--stone .lede { color: #3d4c5e; }
.deals { display: grid; gap: 1.5rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .deals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .deals { grid-template-columns: repeat(3, 1fr); } }
.deal {
  background: var(--off-white); border: 1px solid var(--line-light);
  padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.55rem;
}
.deal__sector {
  font-family: var(--f-label); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel);
}
.deal__amount {
  font-family: var(--f-sans); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--navy); line-height: 1.1;
}
.deal h3 { font-size: 1.15rem; }
.deal__desc { font-size: 0.95rem; line-height: 1.6; color: #33465c; }
.deal__meta { margin-top: auto; padding-top: 0.6rem; font-size: 0.82rem; color: var(--steel); }

/* =============================================================
   First-call quotes, 2026-11-09.
   Verbatim lines from borrower first calls, anonymised to business type
   (Ethan's call). Dark section between the stone transactions band and the
   navy contact section; the quote marks are typographic, not decorative.
   ============================================================= */
.quotes { display: grid; gap: 1.5rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  border: 1px solid var(--ivory-16); padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ivory); }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote cite {
  margin-top: auto; font-style: normal; font-family: var(--f-label); font-size: 0.7rem;
  font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel);
}
.quotes__note { margin-top: 1.8rem; font-size: 0.82rem; color: var(--ivory-55); max-width: 60ch; }
.quote__after { font-size: 0.92rem; line-height: 1.5; color: var(--ivory-70); }
.section--quotes { border-bottom: 1px solid var(--ivory-08); }

/* =============================================================
   Motion and photography pass, 2026-11-09.
   Ethan: the site read as "too AI". References: postoakgroup.co and
   pjtpartners.com. Looping hero video under the scrim, a once-per-session
   logo load-in, a figures band, photo tombstones, a photo closing band,
   profile icons in the footer. Reduced-motion users get the still photo and
   no load-in.
   ============================================================= */
/* Hero video sits over the photo (the photo stays as the fallback) */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.85) contrast(1.02) brightness(0.88);
  opacity: 0; transition: opacity 1.4s ease;
  transform-origin: 50% 40%;
  animation: heroDrift 28s ease-in-out infinite alternate;
}
.hero__video.is-ready { opacity: 1; }
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.12); } }
/* The scrim steps back so the picture is readable; the copy still sits on the darker left */
.hero--full .hero__scrim {
  background: linear-gradient(to right, rgba(12,35,64,0.82) 0%, rgba(12,35,64,0.55) 45%, rgba(12,35,64,0.25) 100%),
              linear-gradient(to bottom, rgba(12,35,64,0.35) 0%, rgba(12,35,64,0.0) 40%, rgba(12,35,64,0.85) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* Logo load-in */
.intro {
  position: fixed; inset: 0; z-index: 300; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  animation: introLift .8s cubic-bezier(.76, 0, .24, 1) 1.6s forwards;
}
.no-intro .intro, .intro.is-done { display: none; }
.intro__lockup { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.intro__mark { width: clamp(64px, 9vw, 96px); height: auto; }
.intro__mark path {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: introDraw .9s cubic-bezier(.4, 0, .2, 1) .15s forwards;
}
.intro__word {
  height: clamp(18px, 2.4vw, 26px); width: auto; opacity: 0; transform: translateY(6px);
  animation: introFade .6s ease-out .85s forwards;
}
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFade { to { opacity: 1; transform: none; } }
@keyframes introLift { to { transform: translateY(-100%); } }

/* (Key figures band removed 2026-11-09 evening, Ethan's call.) */

/* Tombstones get a photo tile (near mono, like every photo on the site) */
.deal { --pad: clamp(1.4rem, 2.5vw, 2rem); padding: var(--pad); }
.deal__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 1.1rem; background: var(--navy); }
.deal__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(0.9); }
.deal__media::after { content: ""; position: absolute; inset: 0; background: rgba(12, 35, 64, 0.32); mix-blend-mode: multiply; }

/* Closing photo band (the contact section) */
.band-photo { position: relative; overflow: hidden; }
.band-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.98) brightness(0.75); }
.band-photo__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 35, 64, 0.92), rgba(12, 35, 64, 0.72)); }
.band-photo .wrap { position: relative; }

/* Footer profile icons */
.footer__icons { display: flex; gap: 0.9rem; }
.footer__icons a {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--ivory-16); border-radius: 50%; color: var(--ivory-70);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.footer__icons a:hover { background: var(--ivory); border-color: var(--ivory); color: var(--navy); }
.footer__icons svg { width: 16px; height: 16px; fill: currentColor; }

/* =============================================================
   Refinement pass, 2026-11-09 (late). Post Oak moves in the Certus kit:
   hero copy low-left and larger, section photography taller and brighter,
   transactions as a sliding row with arrows.
   ============================================================= */
/* Hero: copy sits low-left with sky above, type a step larger */
.hero--full { align-items: flex-end; }
.hero--full .hero__inner { padding-block: 0 clamp(4.5rem, 11vh, 8.5rem); }
.hero--full .hero__title { font-size: clamp(3rem, 8.4vw, 7.2rem); max-width: 14ch; }
.hero--full .hero__sub { max-width: 54ch; }
@media (max-height: 700px) { .hero--full .hero__inner { padding-bottom: 3rem; } .hero--full .hero__title { font-size: clamp(2.4rem, 7vw, 4.2rem); } }

/* Section photography: taller on desktop, brighter, lighter navy wash */
@media (min-width: 900px) { .split .photo { aspect-ratio: auto; align-self: stretch; min-height: 560px; } }
.photo img { filter: grayscale(1) contrast(1.04) brightness(0.98); }
.photo::after { background: rgba(12, 35, 64, 0.22); }

/* Transactions: horizontal sliding row */
.deals-shell { position: relative; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.deals {
  display: flex; gap: 1.5rem; margin: 0; padding: 0 0 0.5rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.deals::-webkit-scrollbar { display: none; }
.deal { flex: 0 0 clamp(270px, 29vw, 380px); scroll-snap-align: start; }
.carousel-ctrl--light { margin-top: 1.6rem; }
.carousel-ctrl--light button { border-color: var(--line-light); color: var(--charcoal); }
.carousel-ctrl--light button:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--off-white); }

/* Contact band: the three steps after the button, 2026-11-09 late */
.contact__steps { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; max-width: 56ch; }
.contact__steps li { display: flex; gap: 0.9rem; font-size: 0.92rem; line-height: 1.6; color: var(--ivory-70); }
.contact__steps span { font-family: var(--f-label); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--steel); padding-top: 0.2rem; }

/* =============================================================
   FAQ, 2026-11-09 late. Native <details> rows styled like the dark accordion,
   on the ivory ground. No JS needed; keyboard and screen readers get it free.
   ============================================================= */
.faq { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line-light); max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--line-light); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0; font-family: var(--f-serif); font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  letter-spacing: 0.02em; color: var(--charcoal);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-light); position: relative; transition: background-color .3s ease, border-color .3s ease; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--charcoal); transform: translate(-50%, -50%); transition: transform .3s ease, opacity .3s ease, background-color .3s ease; }
.faq__plus::before { width: 12px; height: 1.5px; }
.faq__plus::after { width: 1.5px; height: 12px; }
.faq__item[open] .faq__plus { background: var(--charcoal); border-color: var(--charcoal); }
.faq__item[open] .faq__plus::before { background: var(--off-white); }
.faq__item[open] .faq__plus::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq__body { padding: 0 0 1.6rem; max-width: 64ch; }
.faq__body p { font-size: 1rem; line-height: 1.75; color: #33465c; }

/* =============================================================
   Buttons v2, 2026-11-09 late. Ethan: "all the buttons need to be cooler",
   bar = the Invictus concept (mark + caps, mark redraws on hover) and the
   Rockefeller / boutique-bank references Jack shared. The C arc sweeps on
   hover; a hairline draws under the label. Secondary links are quiet caps
   with an underline that extends on hover. The old boxed buttons are gone.
   ============================================================= */
.cta {
  display: inline-flex; align-items: center; gap: 0.95rem; padding: 0.45rem 0;
  font-family: var(--f-label); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ivory); white-space: nowrap;
}
.cta__mark { width: 30px; height: 30px; flex: none; }
.cta__mark path { fill: none; stroke: currentColor; stroke-width: 15; stroke-dasharray: 100; stroke-dashoffset: 0; }
.cta:hover .cta__mark path, .cta:focus-visible .cta__mark path { animation: markSweep .9s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes markSweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.cta span { position: relative; padding-bottom: 0.35rem; }
.cta span::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; opacity: .85; transition: right .55s cubic-bezier(.4, 0, .2, 1); }
.cta:hover span::after, .cta:focus-visible span::after { right: 0; }
.cta:focus-visible { outline: 1px solid var(--steel); outline-offset: 6px; }
.section--light .cta, .section--stone .cta { color: var(--charcoal); }
@media (prefers-reduced-motion: reduce) { .cta:hover .cta__mark path { animation: none; } }

.ulink {
  position: relative; display: inline-block; padding: 0.45rem 0;
  font-family: var(--f-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ivory-70); white-space: nowrap;
}
.ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; opacity: .55; transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.ulink:hover, .ulink:focus-visible { color: var(--ivory); }
.ulink:hover::after, .ulink:focus-visible::after { transform: scaleX(1); opacity: 1; }
.section--light .ulink, .section--stone .ulink { color: #3d4c5e; }
.section--light .ulink:hover, .section--stone .ulink:hover { color: var(--charcoal); }

.btn-row { gap: 1.2rem 2.4rem; align-items: center; }

/* Header CTA joins the system: mark + caps, no box */
.nav-cta { border: 0; padding: 0.4rem 0; gap: 0.7rem; font-size: 0.72rem; letter-spacing: 0.22em; }
.nav-cta .cta__mark { width: 24px; height: 24px; }
.nav-cta:hover { background: transparent; color: var(--ivory); }

/* Insights: photo cards and the editorial article page */
.story__media--photo img { width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: grayscale(1) contrast(1.04) brightness(0.92); transition: transform 1.2s ease; }
.story:hover .story__media--photo img { transform: scale(1.03); }
.article-hero { position: relative; height: clamp(240px, 40vw, 520px); overflow: hidden; background: var(--navy); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04) brightness(0.9); }
.article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,35,64,.2), rgba(12,35,64,.5)); }
.article__lede { font-size: var(--fs-lede) !important; line-height: 1.55 !important; color: #3d4c5e !important; margin-bottom: 2rem !important; }
.article h2 { padding-top: 0.4rem; }
.article__rule { width: 46px; height: 2px; background: var(--charcoal); opacity: .5; margin: 0 0 1.6rem; }