/* Blind Brook Capital site redesign. Palette and type follow the plan in ../../PLAN.md. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("manrope-latin-variable.woff2") format("woff2");
}

:root {
  --ink: #131313;
  --ink-raised: #1b1a18;
  --gold: #bc983b;
  --gold-deep: #8a6d22;
  --paper: #fcf9f8;
  --stone: #ebe7e7;
  --slate: #4c6173;
  --steel: #90a5ba;
  --on-ink: #fcf9f8;
  --on-ink-muted: #b8b2ab;
  --rule-light: #d9d3d1;
  --rule-dark: #34312d;

  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4.4vw, 4rem);
  --max: 82rem;
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--gold-deep) var(--ink);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* Keep the contact address readable within narrow columns and enlarged text. */
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

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

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

/* Focus ring: ink on the light sections, gold on the dark ones. */

.skip:focus-visible,
.site-header :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.section--ink :focus-visible,
.products__custom :focus-visible,
.closing :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold);
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 30;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.skip:focus {
  top: 0.75rem;
}

/* Buttons: square corners everywhere, one label per intent. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 2rem;
  border: 1px solid transparent;
  /* Gold layer over the resting colour: zero height at rest, rising from the bottom edge. */
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 100% 0 border-box var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-size 0.4s var(--ease-out),
    color 0.25s var(--ease-out),
    scale 0.2s var(--ease-out);
}

@media (hover: hover) {
  .button:hover {
    background-size: 100% 100%;
    color: var(--ink);
  }
}

.button:focus-visible {
  background-size: 100% 100%;
  color: var(--ink);
}

.button:active {
  background-size: 100% 100%;
  color: var(--ink);
  scale: 0.98;
}

.button--small {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
}

.button--ink {
  background-color: var(--ink);
  color: var(--on-ink);
}

/* Header sits over the hero photo. */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  color: var(--on-ink);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  line-height: 1;
}

/* Symbol from the earlier logo. The back shape is gold in place of burgundy. */
.wordmark__symbol {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 2.1875rem;
}

.wordmark__accent {
  stroke: var(--gold);
}

.wordmark__text {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wordmark__name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.wordmark__sub {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.46em;
  color: var(--on-ink-muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1;
}

.nav__links {
  display: flex;
  gap: 2rem;
}

.nav__links a {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  padding-block: 0.5rem;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease-out);
}

.nav__links a:hover,
.nav__links a[aria-current] {
  background-size: 100% 1px;
}

.nav .button {
  margin-left: auto;
}

.menu-toggle {
  display: none;
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid rgb(252 249 248 / 0.45);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--on-ink);
  isolation: isolate;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(19 19 19 / 0.62) 0%, rgb(19 19 19 / 0.12) 26%, rgb(19 19 19 / 0.3) 52%, rgb(19 19 19 / 0.96) 100%),
    linear-gradient(90deg, rgb(19 19 19 / 0.5) 0%, rgb(19 19 19 / 0) 62%);
}

.hero__content {
  padding-block: 7rem clamp(3rem, 7vw, 5.5rem);
}

.hero h1 {
  font-size: clamp(2.25rem, 4.15vw, 4.25rem);
}

.hero h1 span {
  display: block;
}

@media (min-width: 64rem) {
  .hero h1 span {
    white-space: nowrap;
  }
}

.hero h1 .dim {
  color: rgb(252 249 248 / 0.68);
}

.hero__lede {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgb(252 249 248 / 0.9);
}

.hero .button {
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 {
    animation: hero-copy-in 560ms var(--ease-out) both;
  }

  .hero__lede {
    animation: hero-copy-in 560ms var(--ease-out) 70ms both;
  }

  .hero__photo {
    animation: hero-photo-in 1400ms var(--ease-out) both;
  }
}

@keyframes hero-copy-in {
  from {
    opacity: 0.5;
    transform: translateY(0.75rem);
  }
}

@keyframes hero-photo-in {
  from {
    transform: scale(1.025);
  }
}

/* Sections */

.section {
  padding-block: var(--section);
}

.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.section--stone {
  background: var(--stone);
}

.section h2 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
}

/* Business intro: one statement, then the supporting sentences. */

.intro__statement {
  max-width: 24ch;
  font-size: clamp(1.875rem, 4.3vw, 3.625rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.intro__statement em {
  font-style: normal;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 100% 0.14em;
}

.intro__body {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  margin-left: auto;
  max-width: 38rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: #33383d;
}

.intro__body p + p {
  margin-top: 1.1em;
}

.review__head {
  max-width: 19ch;
}

.review__head .dim {
  display: block;
  color: var(--on-ink-muted);
}

.review__note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 44rem;
  font-size: 1rem;
  color: var(--on-ink-muted);
}

.review__note strong {
  font-weight: 650;
  color: var(--on-ink);
}

/* Financing: a short lead, then the five kinds of financing as rows. */

.financing__lead {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 7vw, 7rem);
  align-items: end;
}

.financing__lead p {
  max-width: 34rem;
  color: #33383d;
}

.financing__limit {
  margin-top: 2rem;
  max-width: 44rem;
  font-size: 0.9375rem;
  color: var(--slate);
}

.products {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--ink);
}

.products li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(8rem, 1fr);
  gap: 1rem clamp(1.5rem, 7vw, 7rem);
  align-items: baseline;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--rule-light);
}

.products h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.products p {
  color: #33383d;
}

.products__size {
  justify-self: end;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.products .products__custom {
  margin-top: -1px;
  margin-inline: calc(var(--gutter) * -0.5);
  padding: 2.25rem calc(var(--gutter) * 0.5);
  border-bottom: 0;
  background: var(--ink);
  color: var(--on-ink);
}

.products .products__custom + .products__custom {
  margin-top: 0;
  border-top: 1px solid var(--rule-dark);
}

.products__custom p {
  color: var(--on-ink-muted);
}

.products__custom .products__size {
  color: var(--gold);
}

/* Partner pathways: two wide links, not cards. */

.partners__head {
  max-width: 22ch;
}

.pathways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--ink);
}

.pathway {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2.5rem 2.5rem 1.5rem;
  margin-left: -1.5rem;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out);
}

.pathway + .pathway {
  margin-left: 0;
  padding-left: 2.5rem;
  border-left: 1px solid var(--ink);
}

.pathway h3 {
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
}

.pathway p {
  margin-top: 1rem;
  max-width: 28rem;
  color: #33383d;
}

.pathway__go {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.pathway__arrow {
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease-out);
}

.pathway:focus-visible {
  background: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
  .pathway:hover {
    background: var(--paper);
  }

  .pathway:hover .pathway__arrow {
    transform: translateX(0.3rem);
  }
}

/* Closing prompt */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(5.5rem, 12vw, 11rem);
}

.closing__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(19 19 19 / 0.82) 0%, rgb(19 19 19 / 0.4) 42%, rgb(19 19 19 / 0.65) 70%, rgb(19 19 19 / 0.97) 100%),
    linear-gradient(90deg, rgb(19 19 19 / 0.82) 0%, rgb(19 19 19 / 0.5) 45%, rgb(19 19 19 / 0.1) 100%);
}

.closing h2 {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
}

.closing p {
  margin-top: 1.25rem;
  max-width: 30rem;
  font-size: 1.1875rem;
  color: var(--on-ink);
}

.closing .button {
  margin-top: 2.25rem;
}

/* Footer */

.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: 3.5rem 2.5rem;
  border-top: 1px solid var(--rule-dark);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.site-footer__links a {
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--gold);
}

.site-footer__place {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--on-ink-muted);
}

.disclosure {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-ink-muted);
}

.disclosure p {
  max-width: 62rem;
}

.disclosure p + p {
  margin-top: 0.85em;
}

/* Inner pages that are still placeholders. */

.page-hero {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(9rem, 16vw, 13rem) clamp(3.5rem, 7vw, 6rem);
}

.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  max-width: 16ch;
}

.page-hero p {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1.1875rem;
  color: rgb(252 249 248 / 0.86);
}

.holding {
  max-width: 40rem;
}

.holding h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
}

.holding p {
  margin-top: 1.25rem;
  color: #33383d;
}

.holding .button {
  margin-top: 2rem;
}

/* Tablet and phone */

@media (max-width: 64rem) {

  .financing__lead {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 52rem) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  .nav {
    position: absolute;
    top: 4.5rem;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--ink);
    border-top: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
  }

  .nav[data-open="true"] {
    display: flex;
  }

  .nav__links {
    flex-direction: column;
    gap: 0.25rem;
  }

  .nav__links a {
    padding-block: 0.85rem;
    font-size: 1rem;
  }

  .nav__links a[aria-current] {
    color: var(--gold);
  }

  .nav .button {
    margin-left: 0;
  }

  .hero__photo {
    object-position: 38% 40%;
  }

  .intro__body {
    margin-left: 0;
  }

  .products li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .products__size {
    justify-self: start;
    margin-top: 0.35rem;
  }

  .products .products__custom {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

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

  .pathway,
  .pathway + .pathway {
    margin-left: 0;
    padding: 2rem 0;
    border-left: 0;
  }

  .pathway + .pathway {
    border-top: 1px solid var(--ink);
  }

  .button {
    white-space: normal;
  }
}

/* Fine tuning, October 11, 2026: fixed header, tighter phone rows, section arrivals. */

html {
  scroll-padding-top: 5.5rem;
}

.skip {
  position: fixed;
}

.site-header {
  position: fixed;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-dark);
  transition:
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

.site-header[data-over-hero] {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header:has(.nav[data-open="true"]) {
  background: var(--ink);
  border-bottom-color: var(--rule-dark);
}

.header-sentinel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.menu-toggle:active {
  transform: translateY(1px);
}

.nav__links a:focus-visible {
  background-size: 100% 1px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.closing p {
  max-width: 38rem;
  line-height: 1.5;
}

@media (max-width: 62rem) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    max-height: calc(100svh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--ink);
    border-top: 1px solid var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
  }

  .nav[data-open="true"] {
    display: flex;
  }

  .nav__links {
    flex-direction: column;
    gap: 0.25rem;
  }

  .nav__links a {
    padding-block: 0.85rem;
    font-size: 1rem;
  }

  .nav__links a[aria-current] {
    color: var(--gold);
  }

  .nav .button {
    margin-left: 0;
  }
}

/* Financing rows: name and amount share a line on tablets and phones. */

@media (max-width: 62rem) {
  .products li {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "title amount"
      "description description";
    gap: 0.75rem 1.25rem;
    align-items: baseline;
  }

  .products h3 {
    grid-area: title;
  }

  .products p {
    grid-area: description;
    max-width: 60ch;
  }

  .products__size {
    grid-area: amount;
    justify-self: end;
    margin-top: 0;
    font-size: 0.9375rem;
  }
}

@media (max-width: 52rem) {

  .closing .button {
    width: 100%;
  }
}

/* Headings settle into place once, as each section is reached. */

@media (prefers-reduced-motion: no-preference) {
  .is-arriving {
    animation: section-arrival 520ms var(--ease-out) both;
  }
}

@keyframes section-arrival {
  from {
    opacity: 0.35;
    transform: translateY(0.75rem);
  }
}

.products__upto {
  margin-right: 0.2em;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--slate);
}

.products__custom .products__upto {
  color: var(--on-ink-muted);
}

@media (max-width: 52rem) {
  /* On a phone the text runs the full width, so the cover stays even from left to right. */
  .closing::after {
    background: linear-gradient(180deg, rgb(19 19 19 / 0.88) 0%, rgb(19 19 19 / 0.6) 45%, rgb(19 19 19 / 0.97) 100%);
  }
}

/* Reveals. The hidden state applies only while the script runs (html.js) and the
   visitor has not asked for reduced motion. The script adds .is-in once. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="stagger"]:not(.is-in) > * {
    opacity: 0;
  }

  .js [data-reveal="stagger"].is-in > * {
    animation: reveal 0.9s var(--ease-out) var(--d, 0s) backwards;
  }

  .js [data-reveal="stagger"] > :nth-child(2) { --d: 0.09s; }
  .js [data-reveal="stagger"] > :nth-child(3) { --d: 0.18s; }
  .js [data-reveal="stagger"] > :nth-child(4) { --d: 0.27s; }
  .js [data-reveal="stagger"] > :nth-child(5) { --d: 0.36s; }
  .js [data-reveal="stagger"] > :nth-child(6) { --d: 0.45s; }

  /* The one habit is underlined as the visitor reaches it. */
  .js [data-reveal="underline"] {
    background-size: 0% 0.14em;
    transition: background-size 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
  }

  .js [data-reveal="underline"].is-in {
    background-size: 100% 0.14em;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }
}

@media print {
  .js [data-reveal] > * {
    opacity: 1 !important;
  }
}

/* Photo depth: the closing photo moves a little slower than the page. CSS only.
   Browsers without view timelines keep the still photo. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .closing {
      view-timeline: --closing block;
    }

    .closing__photo {
      inset: -10% 0;
      height: 120%;
      animation: drift-through linear both;
      animation-timeline: --closing;
      animation-range: cover;
    }
  }
}

@keyframes drift-through {
  from {
    translate: 0 -6%;
  }

  to {
    translate: 0 6%;
  }
}

.nav__links a {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Stage 1, October 12, 2026: inner pages. Every page opens with the photo hero. */

.hero--inner {
  min-height: max(30rem, 62svh);
}

.hero--inner h1 {
  max-width: 20ch;
}

.hero--inner .hero__photo {
  object-position: 50% 50%;
}

.arrow {
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease-out);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  min-height: 2.75rem;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.35em;
}

@media (hover: hover) and (pointer: fine) {
  .textlink:hover .arrow,
  .related a:hover .arrow {
    transform: translateX(0.3rem);
  }
}

/* Heading on the left, supporting text on the right. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 7vw, 7rem);
  align-items: start;
}

.split__body {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: #33383d;
}

.split__body p + p {
  margin-top: 1.1em;
}

.section--ink .split__body {
  color: var(--on-ink-muted);
}

.section--ink .split__body strong {
  color: var(--on-ink);
}

/* Financing facts: four short facts under one rule. */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  border-top: 1px solid var(--ink);
}

.facts div {
  padding: 1.5rem 1.5rem 0.25rem 0;
}

.facts div + div {
  padding-left: 1.5rem;
  border-left: 1px solid var(--rule-light);
}

.facts dt {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

.facts dd {
  margin: 0.6rem 0 0;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Where it fits: two lists side by side. */

.fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem clamp(2rem, 7vw, 7rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.fit h3 {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ink);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.ticks li {
  position: relative;
  padding: 0.95rem 0 0.95rem 1.75rem;
  border-bottom: 1px solid var(--rule-light);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.8rem;
  width: 0.75rem;
  height: 1px;
  background: var(--gold-deep);
}

.section--stone .ticks li {
  border-bottom-color: #d3cdcb;
}

.prepare {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule-dark);
}

.prepare .ticks {
  columns: 2;
  column-gap: clamp(2rem, 7vw, 7rem);
}

.prepare .ticks li {
  break-inside: avoid;
  border-bottom-color: var(--rule-dark);
}

.prepare .ticks li::before {
  background: var(--gold);
}

/* Rows: a heading and its text, used for what we review and for questions. */

.rows {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--ink);
}

.rows li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 0.75rem clamp(1.5rem, 7vw, 7rem);
  align-items: baseline;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--rule-light);
}

.rows h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.rows p {
  max-width: 38rem;
  color: #33383d;
}

/* Related pages: plain wide links. */

.related {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--ink);
}

.related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid #d3cdcb;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.products h3 a {
  text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1px;
  transition: background-size 0.35s var(--ease-out);
}

.products h3 a:hover,
.products h3 a:focus-visible {
  background-size: 100% 1px;
}

/* Footer: four groups of links. */

.site-footer__groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 3rem;
}

.site-footer__groups h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: none;
  color: var(--on-ink-muted);
}

.site-footer__groups ul {
  margin-top: 0.75rem;
}

.site-footer__groups a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.site-footer__groups a:hover {
  color: var(--gold);
}

@media (max-width: 64rem) {
  .split,
  .rows li {
    grid-template-columns: 1fr;
  }

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

  .facts div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .facts div:nth-child(n + 3) {
    margin-top: 1.25rem;
    border-top: 1px solid var(--rule-light);
  }

  .site-footer__groups {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 52rem) {
  .hero--inner {
    min-height: max(26.25rem, 60svh);
  }

  .fit,
  .stage dl {
    grid-template-columns: 1fr;
  }

  .prepare .ticks {
    columns: 1;
  }

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

  .facts div,
  .facts div + div {
    padding: 1.1rem 0;
    margin-top: 0;
    border-left: 0;
    border-top: 0;
    border-bottom: 1px solid var(--rule-light);
  }
}

/* Inner heroes carry brighter daytime photos, so the shading on the text side is heavier. */
.hero--inner::after {
  background:
    linear-gradient(180deg, rgb(19 19 19 / 0.72) 0%, rgb(19 19 19 / 0.35) 30%, rgb(19 19 19 / 0.55) 62%, rgb(19 19 19 / 0.96) 100%),
    linear-gradient(90deg, rgb(19 19 19 / 0.74) 0%, rgb(19 19 19 / 0.3) 45%, rgb(19 19 19 / 0) 78%);
}

/* Navigation menus: Financing and Resources open a list of their pages. */

.nav__item {
  position: relative;
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  z-index: 5;
  min-width: 18.5rem;
  padding: 0.6rem 0;
  background: var(--ink);
  border: 1px solid var(--rule-dark);
  border-top: 1px solid var(--gold);
  opacity: 0;
  visibility: hidden;
  translate: 0 0.25rem;
  transition:
    opacity 0.2s var(--ease-out),
    translate 0.2s var(--ease-out),
    visibility 0.2s;
}

.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.nav__links .nav__sub a {
  display: block;
  padding: 0.6rem 1.25rem;
  background: none;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-ink);
}

.nav__links .nav__sub a:hover,
.nav__links .nav__sub a:focus-visible,
.nav__links .nav__sub a[aria-current] {
  color: var(--gold);
}

/* The financing list must remain reachable in short windows and at zoom. */
@media (min-width: 62.01rem) {
  .nav__sub {
    max-height: calc(100svh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 62rem) {
  .nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 0.5rem 1rem;
    border: 0;
    border-left: 1px solid var(--rule-dark);
    opacity: 1;
    visibility: visible;
    translate: none;
  }

  .nav__links .nav__sub a {
    padding: 0.55rem 0;
    color: var(--on-ink-muted);
  }
}

/* Financing rows: the whole row opens the page for that kind of financing. */

.products li {
  position: relative;
}

.products h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.products__size {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.products__size .arrow {
  color: var(--gold-deep);
}

.products__custom .products__size .arrow {
  color: var(--gold);
}

@media (hover: hover) and (pointer: fine) {
  .products li:hover h3 a {
    background-size: 100% 1px;
  }

  .products li:hover .arrow {
    transform: translateX(0.3rem);
  }
}

/* Design upgrade, October 12, 2026. From the Codex specification saved in Local Artifacts. */

/* The review steps: large gold numerals over one fine rule each. */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5.5rem);
  counter-reset: step;
}

.steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.75rem;
  min-width: 0;
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--rule-dark);
  counter-increment: step;
}

/* The short gold tick on each rule, carried over from the first design. */
.steps > li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  color: var(--gold);
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.steps p {
  max-width: 34ch;
  font-size: 1rem;
  color: var(--on-ink-muted);
}

@media (min-width: 52.01rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps > li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    row-gap: 1rem;
    padding-bottom: 3rem;
  }

  .steps > li::before {
    grid-row: auto;
    margin-bottom: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(3.5rem, 5.4vw, 5rem);
  }
}

@media (min-width: 64.01rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .steps > li {
    padding-bottom: 0;
  }

  @supports (grid-template-rows: subgrid) {
    .steps > li {
      grid-template-rows: subgrid;
      grid-row: span 3;
    }

    .steps h3 {
      align-self: end;
    }
  }
}

/* A fine survey grid on selected dark sections, fading toward the edges. */

.survey-grid {
  position: relative;
  isolation: isolate;
}

.survey-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(252 249 248 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(252 249 248 / 0.045) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* Process page: a dark timeline, each step with its three labelled parts. */

.stages {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule-dark);
}

.stages::before {
  content: "";
  position: absolute;
  left: 2.25rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-dark);
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule-dark);
}

.stage__num {
  grid-row: span 2;
  align-self: start;
  position: relative;
  padding-block: 0.5rem;
  background: var(--ink);
  color: var(--gold);
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.stage h3 {
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.stage__intro p {
  margin-top: 0.9rem;
  max-width: 54ch;
  font-size: 1.125rem;
  color: var(--on-ink-muted);
}

.stage__parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  margin: 0;
}

.stage__parts > div {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-dark);
}

.stage__parts > div:last-child {
  border-top-color: var(--gold);
}

.stage dt {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.stage__parts > div:last-child dt {
  color: var(--gold);
}

.stage dd {
  margin: 0.7rem 0 0;
  color: var(--on-ink);
}

@media (max-width: 52rem) {
  .stages::before {
    left: 1.25rem;
  }

  .stage {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1.25rem 1rem;
  }

  .stage__num {
    font-size: 1.875rem;
  }

  .stage__parts {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* What the lender does, on a light section. */

.section:not(.section--ink) .prepare {
  border-top-color: var(--ink);
}

.section:not(.section--ink) .prepare .ticks li {
  border-bottom-color: #d3cdcb;
}

.section:not(.section--ink) .prepare .ticks li::before {
  background: var(--gold-deep);
}

/* Questions: the heading holds a narrow column and the answers stay open beside it. */

.questions > .wrap {
  display: grid;
  gap: 2rem clamp(2rem, 6vw, 6rem);
}

.questions .rows {
  margin-top: 0;
}

.questions .rows li {
  display: block;
  padding-block: 1.9rem;
}

.questions .rows li:first-child {
  padding-top: 1.6rem;
}

.questions .rows p {
  margin-top: 0.85rem;
  max-width: 62ch;
}

@media (min-width: 64.01rem) {
  .questions > .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }

  .questions h2 {
    position: sticky;
    top: 7rem;
  }
}

/* Financing facts sit inside a hairline frame. */

.facts {
  border: 1px solid var(--rule-light);
  border-top: 1px solid var(--ink);
}

.facts div,
.facts div + div {
  padding: 1.6rem 1.5rem 1.75rem;
}

/* Inner heroes: more of the photo, a gold corner mark over the copy, and a focal point for each photo. */

.hero--inner {
  min-height: max(34rem, 72svh);
}

.hero--inner .hero__photo {
  object-position: var(--hero-position, 50% 42%);
}

.corner-mark {
  position: relative;
  padding-top: 1.75rem;
}

.corner-mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  pointer-events: none;
}

@media (max-width: 52rem) {
  .hero--inner {
    min-height: max(30rem, 70svh);
  }

  .facts div,
  .facts div + div {
    padding: 1.1rem 1.25rem;
  }
}

/* Forms. Every form on this preview is a demonstration and sends nothing. */

.form {
  display: grid;
  gap: 0.5rem;
  max-width: 38rem;
}

.form label {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

.form__fields {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.form__fields legend {
  padding: 1.5rem 0 0.75rem;
  font-weight: 700;
}

.form__fields[hidden] { display: none; }

.form label:first-child {
  margin-top: 0;
}

.form input,
.form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #b9b2af;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.form textarea {
  resize: vertical;
}

.form input:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

.form .button {
  justify-self: start;
  margin-top: 1.75rem;
}

.form__note {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: 0.9375rem;
  color: var(--slate);
}

.form__status {
  min-height: 1.6em;
  margin-top: 0.75rem;
  font-weight: 600;
}

/* Two-row header, October 12, 2026. The slim row holds the firm links and Connect.
   The main row holds financing, resources, and the four audiences. */

html {
  scroll-padding-top: 8rem;
}

.nav__firm {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav__firm a:not(.button) {
  padding-block: 0.5rem;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: rgb(252 249 248 / 0.9);
  transition:
    background-size 0.35s var(--ease-out),
    color 0.2s var(--ease-out);
}

.nav__firm a:not(.button):hover,
.nav__firm a:not(.button):focus-visible,
.nav__firm a[aria-current] {
  background-size: 100% 1px;
  color: var(--on-ink);
}

@media (min-width: 62.01rem) {
  .site-header__bar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 2.5rem;
    row-gap: 0;
    min-height: 0;
  }

  .nav {
    display: contents;
  }

  .wordmark {
    grid-column: 1;
    grid-row: 1;
  }

  .nav__firm {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    min-height: 4rem;
  }

  .nav__firm .button {
    margin-left: 0.5rem;
  }

  .nav__links {
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    gap: clamp(1.5rem, 2.6vw, 2.5rem);
    min-height: 3rem;
    border-top: 1px solid rgb(252 249 248 / 0.16);
  }

  .site-header:not([data-over-hero]) .nav__links {
    border-top-color: var(--rule-dark);
  }

  .questions h2 {
    top: 9rem;
  }
}

@media (max-width: 62rem) {
  .nav__firm {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule-dark);
  }

  .nav__firm a:not(.button) {
    padding-block: 0.85rem;
    font-size: 1rem;
    color: var(--on-ink);
  }

  .nav__firm a[aria-current] {
    color: var(--gold);
  }

  .nav__firm .button {
    margin-top: 1rem;
  }
}

.nav__firm .button {
  gap: 0.45rem;
}

/* Audience pages, October 12, 2026. One framework for investors, Realtors, financial advisors,
   and strategic partners, from Dave's Realtor funnel wireframe. */

/* Hero: the copy on the left, the video introduction on the right. */

.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

/* Audience copy occupies more of the photo, including its brighter middle. */
.hero--split::after {
  background:
    linear-gradient(180deg, rgb(19 19 19 / 0.86) 0%, rgb(19 19 19 / 0.82) 65%, rgb(19 19 19 / 0.94) 100%),
    linear-gradient(90deg, rgb(19 19 19 / 0.3), rgb(19 19 19 / 0));
}

.hero__eyebrow {
  margin-bottom: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero--split h1 {
  max-width: 17ch;
  font-size: clamp(2.125rem, 3.7vw, 3.75rem);
}

.hero--split .hero__lede + .hero__lede {
  margin-top: 0.9rem;
  color: rgb(252 249 248 / 0.72);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
}

.hero__actions .button,
.hero__actions .textlink {
  margin-top: 0;
}

.vsl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 2rem;
  border: 1px solid rgb(252 249 248 / 0.28);
  background: rgb(19 19 19 / 0.74);
  text-align: center;
}

/* The second frame, offset behind the first, from the wireframe. */
.vsl::after {
  content: "";
  position: absolute;
  inset: 0.75rem -0.75rem -0.75rem 0.75rem;
  z-index: -1;
  border: 1px solid rgb(188 152 59 / 0.55);
}

.vsl__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.vsl__play {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
}

.vsl__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  translate: -50% -50%;
  border-block: 0.5rem solid transparent;
  border-left: 0.8rem solid var(--gold);
}

.vsl__line {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.vsl figcaption {
  font-size: 0.875rem;
  color: var(--on-ink-muted);
}

/* The offer: a sample review on the left, the request form on the right. */

.offer {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.offer h2 {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
}

.offer .ticks {
  margin-top: 1.5rem;
  border-top: 1px solid var(--ink);
}

.sample {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--stone);
  border: 1px solid var(--rule-light);
}

.sample__sheet {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
  border-top: 3px solid var(--gold);
  box-shadow: 0.6rem 0.6rem 0 rgb(19 19 19 / 0.08);
}

.sample__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.sample__title {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.sample ol {
  margin-top: 1.75rem;
  border-top: 1px solid var(--rule-light);
}

.sample li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule-light);
  font-size: 0.9375rem;
}

.sample li span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}

.sample li p {
  color: #33383d;
}

.sample figcaption {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.request {
  border: 1px solid var(--ink);
  background: var(--paper);
  scroll-margin-top: 9rem;
}

.request__head {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink);
  color: var(--on-ink);
}

.request__head p {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.request__head h2 {
  margin-top: 0.6rem;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
}

.request .form {
  max-width: none;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.request__intro {
  margin-bottom: 0.5rem;
  color: #33383d;
}

.request .form .button {
  justify-self: stretch;
}

.request__note {
  font-size: 0.8125rem;
  color: var(--slate);
}

.form select {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #b9b2af;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.form select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Three steps in place of four. */

@media (min-width: 64.01rem) {
  .steps--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 64rem) {
  .hero__split,
  .offer {
    grid-template-columns: 1fr;
  }

  .vsl {
    max-width: 34rem;
    margin-right: 0.75rem;
  }
}

/* The two-row header is taller, so hero copy starts lower on desktop. */
@media (min-width: 62.01rem) {
  .hero__content {
    padding-top: 10rem;
  }
}

/* Approved investor introduction: native controls, no autoplay. */
.vsl--ready { aspect-ratio: auto; padding: 0; gap: 0; min-width: 0; }
.vsl--ready video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.vsl--ready figcaption { padding: 1rem; }
.vsl__alternatives { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; margin-top: 0.5rem; }
.vsl__alternatives a { display: inline-flex; align-items: center; min-height: 2.75rem; }


.form .form__opt-in {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.form .form__opt-in input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  padding: 0;
  accent-color: var(--ink);
}

/* Rental coverage: geographic overview with a complete text alternative. */
.coverage-intro { max-width: 52rem; margin-top: 1.6rem; color: var(--on-ink-muted); }
.coverage-figure { margin: 2.5rem 0; }
.rental-map { display: block; width: 100%; height: auto; }
.rental-map path { stroke: var(--ink); stroke-width: .85; stroke-linejoin: round; }
.rental-map defs path { stroke: var(--gold); stroke-width: 2; }
.rental-map__unmarked { fill: #272727; }
.rental-map__included { fill: var(--gold); }
.rental-map__restricted { fill: url(#restricted-hatch); }
.rental-map .rental-map__leader { stroke: var(--on-ink); fill: none; stroke-width: 1.5; }
.rental-map__dc { fill: var(--paper); stroke: var(--ink); }
.rental-map__label { fill: var(--paper); font-size: 16px; font-weight: 700; }
.coverage-legend { display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--rule-dark); padding-top: 1.5rem; font-size: .9rem; }
.coverage-legend span { display: flex; align-items: center; gap: .7rem; }
.coverage-key { display: inline-block; width: 1rem; height: 1rem; background: var(--gold); flex-shrink: 0; }
.coverage-key--restricted { background: repeating-linear-gradient(135deg, #29251c 0 4px, var(--gold) 4px 6px); border: 1px solid var(--gold); }
.coverage-note { max-width: 60rem; color: var(--on-ink-muted); font-size: .95rem; }
.coverage-states { columns: 3; column-gap: 3rem; margin-top: 2.5rem; }
.coverage-states li { break-inside: avoid; padding: .7rem 0; border-bottom: 1px solid var(--rule-light); }
.coverage-restrictions { margin: 0; }
.coverage-restrictions > div { padding: 1.5rem 0; border-top: 1px solid #c7bfbb; }
.coverage-restrictions dt { font-weight: 700; font-size: 1.25rem; }
.coverage-restrictions dd { margin: .65rem 0 0; }
@media (max-width: 600px) {
  .coverage-states { columns: 2; column-gap: 1.25rem; font-size: .95rem; }
  .coverage-figure { margin: 1.5rem 0; }
  .coverage-legend { font-size: .8rem; }
}

/* Keep the audience action in view on compact phone screens. */
@media (max-width: 360px) and (max-height: 650px) {
  .hero--split .hero__content { padding-top: 4.5rem; }
  .hero--split .hero__eyebrow { margin-bottom: .75rem; }
  .hero--split h1 { font-size: 2rem; }
  .hero--split .hero__lede { font-size: 1rem; margin-top: 1rem; }
  .hero--split .hero__lede + .hero__lede { margin-top: .75rem; }
  .hero--split .hero__actions { margin-top: 1rem; }
}

/* Separate guide and policy topics while keeping each heading with its text. */
.split__body > h3 { margin-top: 1.75rem; }
.split__body > h3:first-child { margin-top: 0; }
.split__body > h3 + p { margin-top: .65rem; }

/* Provider-hosted consent and confirmation flow, contained in the newsletter section. */
.newsletter-embed { min-width: 0; }
.newsletter-embed__frame { display: block; width: 100%; max-width: 100%; height: 760px; border: 0; }
@media (max-width: 480px) {
  .newsletter-embed { margin-inline: calc(var(--gutter) * -1); }
  .newsletter-embed__frame { height: 880px; }
  .newsletter-embed > p { padding-inline: var(--gutter); }
}