/* ============================================================
   Riva Lending — styles
   Brand: navy #201C56 · teal #2A938A (from logo)
   ============================================================ */

:root {
  --navy: #201C56;
  --navy-soft: #2C2768;
  --teal: #2A938A;
  --teal-dark: #1E756D;      /* interactive teal, AA on white */
  --teal-ink: #0B2E2A;       /* dark ink for text on teal */
  --tint: #E7F2F0;           /* soft teal wash */
  --paper: #FBFBF9;
  --ink: #201C56;            /* headings */
  --body: #4A4869;           /* body text */
  --line: #E4E3EE;
  --white: #FFFFFF;
  --alert: #B4453C;          /* invalid form field */

  --font-head: "Poppins", "Avenir Next", system-ui, sans-serif;
  --font-logo: "Montserrat", "Poppins", "Avenir Next", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 10px 34px rgba(32, 28, 86, 0.10);
  --shadow-soft: 0 4px 18px rgba(32, 28, 86, 0.07);

  --header-h: 74px;
}

/* ---------- Reset-lite ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.container { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 44px; height: 10px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 10'%3E%3Cpath d='M1 5 C 6.5 0.5 9.5 0.5 15 5 S 23.5 9.5 29 5 S 37.5 0.5 43 5' fill='none' stroke='%232A938A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 34em; }
.section-sub { max-width: 44em; font-size: 1.05rem; }

/* Company name called out inside body copy — echoes the wordmark */
.brand {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05em;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
}

.chip {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.08em;
  padding: 0.28em 0.9em;
  border-radius: 999px;
  background: var(--tint); color: var(--teal-ink);
  border: 1px solid rgba(42, 147, 138, 0.35);
}

.squiggle { position: relative; white-space: nowrap; }
.squiggle::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.18em; height: 0.32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 17 2 27 2 42 8 S 67 14 82 8 S 105 2 118 8' fill='none' stroke='%232A938A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* Drops the underline clear of a descender — the default sits high enough to
   cross the tail of a g, j, p, or y. */
.squiggle--low::after { bottom: -0.32em; }

/* The underline hangs to roughly baseline + 0.53em, because it has to clear a
   descender. At the 1.15 display line-height the next line's x-height starts
   at baseline + 0.60em — about 4px of clearance at full size, and the stroke's
   round caps eat that — so on a heading that wraps *above* the squiggled word
   the mark grazes the letters below. 1.34 clears an x-height by ~0.26em and an
   ascender by ~0.09em. Only headings carrying a squiggle pay the extra leading. */
h1:has(.squiggle),
h2:has(.squiggle) { line-height: 1.34; }

.fineprint { font-size: 0.82rem; color: #6E6C8A; max-width: 62em; margin-top: 2.2rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.78em 1.7em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--navy); color: var(--white); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--navy-soft); box-shadow: var(--shadow); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--teal { background: var(--teal); color: var(--white); }
.btn--teal:hover { background: #35A79D; color: var(--white); }
.btn--block { width: 100%; }
.btn--nav { padding: 0.6em 1.4em; font-size: 0.92rem; }

.text-link {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-dark);
  display: inline-block;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Logo ---------- */
/* ---------- Wordmark ----------
   Two-line lockup taken from the master artwork (instagram.jpg):
   "Riva" in Bold over "Lending" in SemiBold at 0.855x, flush left,
   baselines 0.70em apart, tightly tracked. On both i's the tittle is
   replaced by the brand dot - a square the width of the i stem with
   the bottom-left corner rounded off, echoing the wave mark.
*/
.logo {
  --logo-track: -0.09em;        /* tight tracking of the lockup */
  --logo-dot: 0.15em;           /* dot side = i stem width, at Bold */
  --logo-i-adv: 0.305em;        /* advance width of Montserrat Bold i */

  display: inline-block;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 0.8;             /* puts the two baselines 0.70em apart */
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 0.14em;       /* room for the g descender */
}
.logo:hover { text-decoration: none; }

.logo__line { display: block; letter-spacing: var(--logo-track); }
.logo__line--sub {
  font-size: 0.855em;           /* "Lending" is set smaller than "Riva" */
  font-weight: 600;
  --logo-dot: 0.12em;
  --logo-i-adv: 0.29em;
}

/* The dot sits on the baseline, then lifts until its top meets the cap
   line. Anchoring to the baseline rather than to the line box keeps it
   correct at any font-size or line-height. The margins slide it back
   over the preceding dotless i without adding to the advance - the
   trailing term cancels the extra letter-spacing the span introduces. */
.logo__dot {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  bottom: calc(0.7em - var(--logo-dot));
  width: var(--logo-dot);
  height: var(--logo-dot);
  margin-left: calc((var(--logo-i-adv) + var(--logo-dot)) / -2 - var(--logo-track));
  margin-right: calc((var(--logo-i-adv) - var(--logo-dot)) / 2);
  background: var(--teal);
  border-radius: 0 0 0 60%;
}
.logo--footer { color: var(--white); margin: 0 0 0.55rem; font-size: 1.55rem; }

/* Header variant: the artwork stacks the two words, but the nav bar sets
   them on one line. Keeps the weights, tracking and dot treatment and drops
   only the size step, which reads as a mistake once the words sit side by
   side. The i-stem vars stay valid - they are in em of each word's own size. */
.logo--inline {
  line-height: 1;
  padding-bottom: 0;
  white-space: nowrap;
}
.logo--inline .logo__line { display: inline; }
.logo--inline .logo__line--sub { font-size: 1em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav ul { display: flex; gap: 1.5rem; }

/* Typography shared by every nav link, top level and dropdown panel alike. */
.site-nav ul a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--navy);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav ul a:hover { color: var(--teal-dark); text-decoration: none; }

/* One box model for every top-level item. An inline <a> and the dropdown's
   inline-flex <button> resolve their baselines differently, which is what
   dropped "Borrow" below the rest of the row. Making both the same kind of
   box - same display, padding, border and leading - removes the difference. */
.site-nav > ul > li > a,
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--navy);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.4em 0.1em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav > ul > li > a:hover,
.site-nav__toggle:hover { color: var(--teal-dark); text-decoration: none; }
.site-nav > ul > li > a.is-active,
.site-nav__toggle.is-active { color: var(--teal-dark); border-bottom-color: var(--teal); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 0.6rem; margin-right: -0.6rem;
}
.nav-toggle__bar {
  display: block; width: 24px; height: 2.5px; border-radius: 2px;
  background: var(--navy); margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Waves ---------- */
.wave { --wave-fill: var(--teal); --wave-line: var(--navy); background: var(--white); }
.wave svg { display: block; width: 100%; height: clamp(44px, 7vw, 96px); }
.wave__fill { fill: var(--wave-fill); }
.wave__line { fill: none; stroke: var(--wave-line); stroke-width: 5.5; stroke-linecap: round; }
.wave--flip svg { transform: scaleY(-1); }
.wave--tint { --wave-fill: var(--tint); }
.wave--navy { --wave-fill: var(--navy); --wave-line: var(--teal); }
/* A wave fades its own background into --wave-fill, so the background must
   match whatever sits on the far side of it. */
.wave--bg-paper { background: var(--paper); }
.wave--bg-tint  { background: var(--tint); }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section--tight { padding-top: 1rem; }
.section--tint { background: var(--tint); }
.section--contact { background: var(--paper); }
.section-head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 6.5vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero__media { position: relative; }
.hero__media::before {
  content: "";
  position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  background: var(--tint);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.hero__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.hero__badge {
  position: absolute; left: 1.1rem; bottom: 1.1rem;
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 0.55rem 0.95rem;
  box-shadow: var(--shadow-soft);
  font-size: 0.88rem;
  color: var(--navy);
}
.hero__badge strong { font-family: var(--font-head); }
.hero__badge-stars { color: var(--teal); letter-spacing: 0.08em; font-size: 0.8rem; }

/* ---------- Stats ---------- */
.stats { background: var(--teal); padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(1.6rem, 3vw, 2.6rem); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stats__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stats__label {
  display: block;
  margin-top: 0.25rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--teal-ink);
}

/* ---------- Tabs (Borrow) ---------- */
.tabs__list {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem;
  gap: 0.25rem;
  margin-bottom: 2.2rem;
}
.tabs__tab {
  border: 0;
  background: transparent;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--navy);
  padding: 0.6em 1.5em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tabs__tab[aria-selected="true"] {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.tabs__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.2em 0.7em;
  margin-left: 0.5em;
  border-radius: 999px;
  background: var(--tint);
  color: var(--teal-ink);
}
.tabs__tab[aria-selected="true"] .tabs__tag { background: var(--teal); color: var(--white); }

.tabs__panel { animation: panelIn 0.35s ease; }
.tabs__panel[hidden] { display: none; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.tabs__panel-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.tabs__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 5 / 4;
  object-fit: cover;
  width: 100%;
}

.checklist { margin: 1.2rem 0 1.6rem; display: grid; gap: 0.55rem; }
.checklist li { padding-left: 1.9rem; position: relative; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.28em;
  width: 1.15em; height: 1.15em;
  border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231E756D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 62%;
}
.checklist--sm { font-size: 0.95rem; }

/* ---------- Invest cards ---------- */
.invest-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  align-items: stretch;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--teal-dark);
  display: grid; place-items: center;
  margin-bottom: 1.2rem;
}
.card__icon svg { width: 26px; height: 26px; }
.card .text-link { margin-top: auto; }
.card .checklist { margin-bottom: 1.6rem; }

.card--fund {
  padding: 0;
  background: var(--navy);
  border-color: var(--navy);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85);
}
.card--fund__media img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  width: 100%;
}
.card--fund__body { padding: 2rem 2.2rem 2.2rem; display: flex; flex-direction: column; flex: 1; }
.card--fund h3 { color: var(--white); }
.card--fund .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Fund ---------- */
.fund__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.fund__engines { display: grid; gap: 1.1rem; margin: 1.6rem 0; }
.fund__engine {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-soft);
}
.fund__engine h4 { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; }
.fund__engine p { margin: 0; font-size: 0.97rem; }
.fund__engine-dot {
  width: 0.72em; height: 0.72em; flex: none;
  border-radius: 35% 35% 55% 35%;
  background: var(--teal);
}
.fund__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fund__chips li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.83rem;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid rgba(42, 147, 138, 0.5);
  border-radius: 999px;
  padding: 0.38em 1em;
}

.acc {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  margin-bottom: 0.9rem;
  overflow: hidden;
}
.acc__heading { margin: 0; }
.acc__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  padding: 1.1rem 1.4rem;
  text-align: left;
}
.acc__icon {
  position: relative;
  width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 50%;
  background: var(--tint);
  transition: transform 0.25s ease;
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 0.72rem; height: 2.2px;
  background: var(--teal-dark);
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.25s ease; }
.acc__trigger[aria-expanded="true"] .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__panel { padding: 0 1.4rem 1.2rem; }
.acc__panel p { margin: 0; font-size: 0.98rem; }
.acc__panel[hidden] { display: none; }
.fund__cta { margin-top: 1.4rem; }

/* ---------- Timeline (About) ---------- */
.timeline { max-width: 880px; }
.timeline__track {
  display: grid;
  grid-template-columns: repeat(var(--tl-steps, 3), 1fr);
  gap: 1rem;
  position: relative;
  margin-bottom: 1.8rem;
}
.timeline__track::before {
  content: "";
  position: absolute;
  top: 11px; left: 12%; right: 12%;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 27 1 45 1 70 6 S 120 11 145 6 S 195 1 220 6 S 273 11 298 6' fill='none' stroke='%232A938A' stroke-width='2.6' stroke-linecap='round' stroke-dasharray='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.55;
}
.timeline__node {
  position: relative;
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0 0.5rem;
  color: var(--body);
}
.timeline__dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--teal);
  margin-bottom: 0.55rem;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.timeline__node:hover .timeline__dot { transform: scale(1.15); }
.timeline__node[aria-selected="true"] .timeline__dot { background: var(--teal); border-color: var(--navy); transform: scale(1.15); }
.timeline--4 { --tl-steps: 4; }
.timeline--4 .timeline__track::before { left: 9%; right: 9%; }
.timeline__year {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}
.timeline__title { font-size: 0.88rem; }
.timeline__node[aria-selected="true"] .timeline__title { color: var(--teal-dark); font-weight: 600; }
.timeline__panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  min-height: 7.2em;
}
.timeline__panel p { margin: 0; animation: panelIn 0.3s ease; }

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.8rem;
  align-items: stretch;
}
.contact__info {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
}
.contact__info::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 40 18 73 18 113 38 C 153 58 187 58 227 38 C 267 18 300 18 340 38 C 365 50 383 54 400 50 L 400 70 L 0 70 Z' fill='%232A938A' opacity='0.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.contact__info h3 { color: var(--white); margin-bottom: 1.4rem; }
.contact__row {
  display: flex; align-items: flex-start; gap: 0.85rem;
  margin-bottom: 1.05rem;
}
.contact__row a { color: var(--white); font-weight: 500; }
.contact__icon { width: 21px; height: 21px; flex: none; margin-top: 0.15em; color: #7FD1C9; }

.contact__form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-soft);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form__field { margin-bottom: 1.1rem; }
.form__field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0.7em 0.95em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form__field textarea { resize: vertical; }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(42, 147, 138, 0.18);
}
.form__note { font-size: 0.85rem; color: #6E6C8A; margin: 0.9rem 0 0; text-align: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: 1.5rem 0 2.2rem;
  font-size: 0.95rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.85); }
.site-footer a:hover { color: var(--white); }
.site-footer h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__grid ul li { margin-bottom: 0.55rem; }
.site-footer__blurb { max-width: 26em; }
.site-footer__legal { padding-top: 1.6rem; }
.site-footer__legal p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); max-width: 72em; }

/* ---------- Allocation bars (fund portfolio composition) ---------- */
.alloc,
.info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
}
.info-card h3 { margin-bottom: 0.9rem; }
.info-card .checklist { margin: 0; }
.fund__stack { display: grid; gap: 1.4rem; align-content: start; }
.alloc h3 { margin-bottom: 0.35rem; }
.alloc__intro { font-size: 0.95rem; margin-bottom: 1.5rem; }
.alloc__list { display: grid; gap: 1.15rem; }
.alloc__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.45rem;
}
.alloc__label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.92rem; color: var(--navy);
}
.alloc__value {
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.92rem; color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}
.alloc__track {
  height: 10px; border-radius: 999px;
  background: var(--tint); overflow: hidden;
}
.alloc__bar {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.alloc__row:nth-child(2) .alloc__bar { transition-delay: 0.08s; }
.alloc__row:nth-child(3) .alloc__bar { transition-delay: 0.16s; }
.alloc__row:nth-child(4) .alloc__bar { transition-delay: 0.24s; }
.alloc__note { font-size: 0.82rem; color: #6E6C8A; margin: 1.5rem 0 0; }

/* ---------- Term sheet ---------- */
.terms__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 5vw, 4rem);
  margin: 0;
}
.terms__grid--single { grid-template-columns: 1fr; }
.terms__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.terms__label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.92rem; color: var(--navy); margin: 0;
}
.terms__value {
  margin: 0; font-size: 0.95rem; color: var(--body);
  text-align: right; font-variant-numeric: tabular-nums;
}
.terms__value strong {
  font-family: var(--font-head); font-weight: 600; color: var(--teal-dark);
}

/* "Fund at a glance" card — homepage teaser */
.fund__glance {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-soft);
}
.fund__glance h3 { margin-bottom: 0.35rem; }
.fund__glance .btn { margin-top: 1.5rem; }
.fund__glance > p { font-size: 0.95rem; margin-bottom: 1.3rem; }
.fund__glance .terms__row:last-child { border-bottom: 0; }

/* Checkbox field (accreditation attestation) */
/* "What happens next" list inside the navy contact panel */
.contact__intro { margin-bottom: 1.4rem; }
.contact__next { margin: 1.5rem 0 1.6rem; }
.contact__next h4 {
  color: var(--white); font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 0.85rem;
}
.contact__next ol {
  display: grid; gap: 0.75rem; counter-reset: cn;
  margin: 0; padding: 0; list-style: none;   /* the base reset covers ul, not ol */
}
.contact__next li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.92rem; line-height: 1.5; }
.contact__next li::before {
  counter-increment: cn;
  content: counter(cn);
  flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem;
  display: grid; place-items: center;
}

.form__check { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.2rem; }
.form__check input {
  width: 1.1rem; height: 1.1rem; flex: none;
  margin: 0.25rem 0 0; accent-color: var(--teal);
}
.form__check label {
  font-family: var(--font-body); font-weight: 400; font-size: 0.9rem;
  color: var(--body); margin: 0; line-height: 1.5;
}

/* ---------- Process steps ---------- */
.steps__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem;
  margin: 0; padding: 0; list-style: none;   /* the base reset covers ul, not ol */
}
.steps__item {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.steps__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.steps__item::after {
  content: ""; position: absolute;
  top: calc(1.6rem + 20px); left: 100%; width: 1.4rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 5px, transparent 5px 10px);
  opacity: 0.55;
}
.steps__item:last-child::after { display: none; }
.steps__num {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 1rem;
}
.steps__title {
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--ink); margin: 0 0 0.4rem;
}
.steps__body { margin: 0; font-size: 0.94rem; }

/* ---------- Subpage hero + reveal stagger ---------- */
.hero--sub { padding-top: clamp(2.2rem, 4.5vw, 3.6rem); }
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .alloc__bar { transition: none; }
  .steps__item:hover { transform: none; }
  .reveal--d1, .reveal--d2, .reveal--d3 { transition-delay: 0s; }
}


/* ============================================================
   About page
   ============================================================ */

/* ---------- About hero (centered editorial) ---------- */
.hero--about { padding: clamp(2.4rem, 5vw, 3.8rem) 0 0; text-align: center; }
.hero--about .eyebrow { justify-content: center; }
.hero--about h1 { max-width: 15em; margin-inline: auto; }
.hero--about .lead { max-width: 40em; margin-inline: auto; }
.hero--about .hero__ctas { justify-content: center; }

/* Wide image band closing the hero, with a locator plate */
.about-band { position: relative; margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.about-band__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.about-band__frame img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.about-band__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32, 28, 86, 0) 40%, rgba(32, 28, 86, 0.74) 100%);
}
.about-band__plate {
  position: absolute; z-index: 1;
  left: clamp(1.1rem, 3vw, 2.2rem); bottom: clamp(1rem, 2.5vw, 1.7rem);
  text-align: left; color: var(--white);
}
.about-band__where { display: block; font-family: var(--font-head); font-weight: 600; font-size: clamp(1rem, 2vw, 1.3rem); }
.about-band__coords {
  display: block; margin-top: 0.15rem;
  font-size: 0.8rem; letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}

/* ---------- Credentials strip ---------- */
/* Credentials band. The same component as the homepage .stats band: a teal
   field bracketed by the wave motif, navy numerals, centred. Kept in step
   with .stats deliberately - the two should read as one pattern. */
.creds { background: var(--teal); padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(1.6rem, 3vw, 2.6rem); }
.creds__grid {
  display: grid;
  /* minmax(0,...) so a long label cannot force a track wider than the
     container - these labels run longer than the homepage stats band. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
  list-style: none; margin: 0; padding: 0;
}
.creds__num {
  display: block;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.creds__label {
  display: block;
  margin-top: 0.25rem;
  font-weight: 600; font-size: 0.92rem;
  color: var(--teal-ink);
}

/* ---------- Creed (sticky manifesto + ruled principles) ---------- */
.creed__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.2rem, 5vw, 4rem); align-items: start; }
.creed__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
.creed__quote {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.38; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 1rem;
}
.creed__note { margin: 0 0 1.5rem; font-size: 0.95rem; }
.creed__media img { display: block; width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-soft); }
.creed__list { list-style: none; margin: 0; padding: 0; }
.creed__row { display: grid; grid-template-columns: auto 1fr; gap: 0 1.2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.creed__row:first-child { border-top: 0; padding-top: 0; }
.creed__idx {
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.1em;
  color: var(--teal-dark); padding-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.creed__title { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin: 0 0 0.35rem; }
.creed__body { margin: 0; font-size: 0.97rem; }

/* ---------- Serve lattice (shared hairlines, no elevation) ---------- */
.serve__grid { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.serve__item { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.1rem); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.serve__item .text-link { margin-top: auto; }
.serve__item:nth-child(-n + 2) { border-top: 0; }
.serve__item:nth-child(odd) { border-left: 0; }
.serve__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--tint); color: var(--teal-dark); display: grid; place-items: center; margin-bottom: 0.9rem; }
.serve__icon svg { width: 22px; height: 22px; }
.serve__title { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin: 0 0 0.4rem; }
.serve__body { margin: 0 0 0.9rem; font-size: 0.96rem; }

/* ---------- Locale (where we lend) ---------- */
.locale__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
.locale__markets { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.locale__markets li { font-size: 0.85rem; padding: 0.35em 0.95em; border-radius: 999px; background: var(--white); border: 1px solid rgba(42, 147, 138, 0.35); color: var(--teal-ink); }
.locale__media img { display: block; width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-soft); }
.locale__panel { background: var(--navy); color: rgba(255, 255, 255, 0.88); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem); margin-top: 1.2rem; }
.locale__panel h3 { color: var(--white); font-size: 1.15rem; margin: 0 0 1.1rem; }
.locale__row { display: flex; align-items: flex-start; gap: 0.85rem; margin: 0 0 0.9rem; font-size: 0.95rem; }
.locale__row:last-child { margin-bottom: 0; }
.locale__row svg { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; color: #7FD1C9; }
.locale__row a { color: var(--white); }

/* ---------- Homepage about teaser (full story lives on about.html) ---------- */
.about-teaser { max-width: 44em; }
.about-teaser p { margin: 0 0 1.5rem; }

/* ---------- Closing CTA band ---------- */
.cta-band { background: var(--navy); color: rgba(255, 255, 255, 0.85); padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.cta-band .eyebrow { justify-content: center; color: #7FD1C9; }
.cta-band h2 { color: var(--white); max-width: 17em; margin-inline: auto; }
.cta-band__sub { max-width: 38em; margin: 0 auto 1.9rem; }
.cta-band__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.cta-band .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.cta-band .btn--ghost:hover { background: var(--white); color: var(--navy); }
.cta-band__direct { margin: 1.6rem 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.78); }
.cta-band__direct a { color: var(--white); }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tabs__panel, .timeline__panel p { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1023px) {
  .creed__grid, .locale__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .creed__aside { position: static; }
  .creed__media img { aspect-ratio: 21 / 9; }
  .hero__grid, .tabs__panel-grid, .fund__grid { gap: 2.2rem; }
  .steps__grid { grid-template-columns: repeat(2, 1fr); }
  .steps__item::after { display: none; }
}

@media (max-width: 860px) {
  .about-band__frame img { aspect-ratio: 16 / 9; }

  .creds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }

  .serve__grid { grid-template-columns: 1fr; }
  .serve__item { border-left: 0; border-top: 1px solid var(--line); }
  .serve__item:first-child { border-top: 0; }
  :root { --header-h: 64px; }

  .logo { font-size: 1.3rem; }

  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 0.6rem 1.25rem 1.25rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav > ul > li > a {
    display: block;
    padding: 0.85em 0.25em;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav > ul > li > a.is-active { border-bottom-color: var(--line); }
  .btn--nav { margin-top: 1rem; text-align: center; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { margin-right: 1.4rem; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }

  .tabs__list { display: flex; width: 100%; }
  .tabs__tab { flex: 1; padding: 0.6em 0.5em; }
  .tabs__panel-grid { grid-template-columns: 1fr; }
  .tabs__media { order: -1; }
  .tabs__media img { aspect-ratio: 16 / 10; }

  .invest-cards { grid-template-columns: 1fr; }
  .fund__grid { grid-template-columns: 1fr; }

  .contact__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; gap: 0; }

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

  .site-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 480px) {
  .about-band__frame img { aspect-ratio: 4 / 3; }

  .creds__grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }

  .creed__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .locale__panel { padding: 1.5rem; }
  .cta-band__actions .btn { width: 100%; }
  body { font-size: 1rem; }
  .container { width: min(1120px, 100% - 2rem); }
  .card, .contact__info, .contact__form { padding: 1.5rem; }
  .card--fund__body { padding: 1.5rem; }
  .hero__ctas .btn { width: 100%; text-align: center; }
  .tabs__tag { display: none; }
  .timeline__track::before { display: none; }
  .timeline__track { grid-template-columns: 1fr; gap: 0.4rem; }
  .timeline__node { flex-direction: row; align-items: center; gap: 0.6rem; }
  .timeline__dot { margin-bottom: 0; width: 16px; height: 16px; }

  .steps__grid { grid-template-columns: 1fr; }
  .terms__row { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .terms__value { text-align: left; }
}


/* ============================================================
   Contact page
   ============================================================ */

/* The page opens on the contact block rather than a hero, so it needs
   less lead-in than a standard section. */
.contact-page { padding-top: clamp(2.6rem, 5vw, 4rem); }

.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center h1,
.section-head--center h2 { max-width: 16em; margin-inline: auto; }
.section-head--center .section-sub { margin-inline: auto; }

/* ---------- Larger contact component ----------
   Same layout and parts as the homepage block, given more room: the two
   panels carry a fuller form and a fuller info column on this page. */
.contact__grid--lg { grid-template-columns: 0.88fr 1.12fr; gap: 2rem; }
.contact__grid--lg .contact__info,
.contact__grid--lg .contact__form { padding: clamp(1.8rem, 3.2vw, 2.8rem); }
.contact__grid--lg .contact__info h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.contact__grid--lg .contact__info .btn { margin-top: 0.2rem; }
.contact__grid--lg .contact__info::after { height: 82px; }

/* ---------- Form additions ---------- */
.form__title { font-size: 1.3rem; margin-bottom: 0.35rem; }
.form__intro { font-size: 0.95rem; margin-bottom: 1.6rem; }
.form__opt { font-family: var(--font-body); font-weight: 400; color: #6E6C8A; }

/* Conditional blocks — shown by the "I'm interested in" select */
.form__group { animation: panelIn 0.3s ease; }
.form__group[hidden] { display: none; }
.form__group-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 0.85rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.form__group-label::before {
  content: "";
  display: block;
  width: 34px; height: 8px;
  margin-bottom: 0.55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 10'%3E%3Cpath d='M1 5 C 6.5 0.5 9.5 0.5 15 5 S 23.5 9.5 29 5 S 37.5 0.5 43 5' fill='none' stroke='%232A938A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.form__field input.is-invalid,
.form__field select.is-invalid,
.form__field textarea.is-invalid {
  border-color: var(--alert);
  box-shadow: 0 0 0 3px rgba(180, 69, 60, 0.15);
}
.form__status { font-size: 0.88rem; color: var(--alert); margin: 0.9rem 0 0; text-align: center; }
.form__status:empty { display: none; }

/* ---------- Service area board ---------- */
.area__board {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.area__lede {
  position: relative;
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  padding-bottom: clamp(4.6rem, 7vw, 5.8rem);
}
.area__lede::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 40 18 73 18 113 38 C 153 58 187 58 227 38 C 267 18 300 18 340 38 C 365 50 383 54 400 50 L 400 70 L 0 70 Z' fill='%232A938A' opacity='0.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.area__lede h3 { margin-bottom: 0.7rem; }
.area__lede p { font-size: 0.97rem; }
.area__ask { font-size: 0.95rem; margin-bottom: 1.4rem; }
.area__lede .btn { position: relative; z-index: 1; }
.area__locator {
  position: relative; z-index: 1;
  margin: 1.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.area__locator strong {
  display: block;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  color: var(--ink);
}
.area__hours {
  display: block; margin-top: 0.2rem;
  letter-spacing: 0.09em; color: #6E6C8A;
  font-variant-numeric: tabular-nums;
}

.area__tiers { list-style: none; padding: clamp(1.7rem, 3vw, 2.4rem); margin: 0; }
.area__tier { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.area__tier:first-child { padding-top: 0; border-top: 0; }
.area__tier:last-child { padding-bottom: 0; }
.area__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 0.3rem;
}
.area__title {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.12rem; color: var(--ink); margin: 0 0 0.75rem;
}
.area__markets { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.area__markets li {
  font-size: 0.83rem;
  padding: 0.34em 0.9em;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid rgba(42, 147, 138, 0.3);
  color: var(--teal-ink);
}
.area__body { margin: 0.85rem 0 0; font-size: 0.94rem; }
.area__tier:last-child .area__body { margin-top: 0; }

/* ---------- Borrow / Invest paths ---------- */
.paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.path {
  display: flex; flex-direction: column;
  padding: clamp(1.7rem, 3.2vw, 2.4rem);
  border-left: 1px solid var(--line);
}
.path:first-child { border-left: 0; }
.path__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--teal-dark);
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.path__icon svg { width: 24px; height: 24px; }
.path__label {
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-dark); margin: 0 0 0.35rem;
}
.path h3 { margin-bottom: 0.5rem; }
.path__body { margin: 0 0 1.3rem; font-size: 0.97rem; }
.path__facts {
  display: grid; gap: 0.65rem;
  margin: 0 0 1.7rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.path__facts li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.93rem; }
.path__facts li::before {
  content: "";
  flex: none; width: 0.7em; height: 0.7em; margin-top: 0.5em;
  border-radius: 35% 35% 55% 35%;
  background: var(--teal);
}
.path__actions {
  margin-top: auto;
  display: flex; align-items: center; gap: 0.6rem 1.3rem; flex-wrap: wrap;
}

@media (max-width: 1023px) {
  .area__board { grid-template-columns: 1fr; }
  .area__lede { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .contact__grid--lg { grid-template-columns: 1fr; }
  .paths__grid { grid-template-columns: 1fr; }
  .path { border-left: 0; border-top: 1px solid var(--line); }
  .path:first-child { border-top: 0; }
}

@media (max-width: 480px) {
  .contact__grid--lg .contact__info,
  .contact__grid--lg .contact__form { padding: 1.5rem; }
  .path__actions .btn { width: 100%; text-align: center; }
  .area__lede .btn { width: 100%; text-align: center; }
}


/* ============================================================
   Fix & flip page
   ============================================================ */

/* ---------- Nav: Borrow dropdown ----------
   The parent is a button, not a link, so the panel is a real disclosure.
   "All loan programs" carries Borrow's old destination. */
.site-nav__item { position: relative; }
.site-nav__caret {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

/* Two classes, so this beats `.site-nav ul` (0,1,1) and can set display. */
.site-nav .site-nav__sub {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 15rem;
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.45rem;
  z-index: 60;
}
.site-nav__item:hover .site-nav__sub,
.site-nav__item:focus-within .site-nav__sub,
.site-nav__toggle[aria-expanded="true"] + .site-nav__sub { display: flex; }
/* Bridges the gap so the pointer survives the trip from toggle to panel. */
.site-nav .site-nav__sub::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -0.85rem; height: 0.85rem;
}
.site-nav ul .site-nav__sub a {
  display: block;
  padding: 0.6em 0.8em;
  border-bottom: 0;
  border-radius: 10px;
  font-size: 0.93rem;
  white-space: nowrap;
}
.site-nav ul .site-nav__sub a:hover { background: var(--tint); color: var(--teal-dark); }
.site-nav ul .site-nav__sub a.is-active {
  background: var(--tint); color: var(--teal-dark); border-bottom-color: transparent;
}

/* ---------- Hero additions ---------- */
.hero__note { margin: 1rem 0 0; font-size: 0.86rem; color: #6E6C8A; }

/* ---------- Deal snapshot (hero ledger card) ----------
   Pinned inside the photo rather than hung below it: .hero has
   overflow:hidden, so anything past the bottom edge gets sheared. */
/* Tucked into the photo's bottom-left corner rather than laid across it:
   a good part of the card now sits in the gutter and below the image, so
   the house stays readable behind it. */
.deal-snapshot {
  /* Right overhang is capped at ~1.2rem: between 1024 and 1160 the container
     only has a 20px page margin, and .hero clips with overflow:hidden. The
     drop does the rest of the work - there is ~66px of hero below the photo. */
  position: absolute; right: -1.2rem; bottom: -4rem;
  width: min(13.5rem, 48%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.85rem 0.95rem 0.8rem;
}
.deal-snapshot__label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-dark); margin: 0 0 0.55rem;
}
.deal-snapshot__rows { margin: 0; }
.deal-snapshot__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
}
.deal-snapshot__row dt { margin: 0; font-size: 0.76rem; color: var(--body); }
.deal-snapshot__row dd {
  margin: 0; font-family: var(--font-head); font-weight: 600;
  font-size: 0.78rem; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.deal-snapshot__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 0.6rem;
}
.deal-snapshot__total-label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.78rem; color: var(--navy);
}
.deal-snapshot__total-num {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.12rem; color: var(--teal-dark); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.deal-snapshot__foot {
  margin: 0.5rem 0 0; font-size: 0.66rem; color: #6E6C8A;
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.deal-snapshot__pill {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.6rem; letter-spacing: 0.02em;
  padding: 0.16em 0.5em; border-radius: 999px;
  background: var(--tint); color: var(--teal-ink);
  border: 1px solid rgba(42, 147, 138, 0.35);
  font-variant-numeric: tabular-nums;
}

/* Wide viewports leave real page margin outside the 1120px container, so the
   card can hang further clear of the photo there. */
@media (min-width: 1240px) { .deal-snapshot { right: -3.5rem; } }
@media (min-width: 1400px) { .deal-snapshot { right: -5rem; } }

/* Below 1160 the media column is too narrow for the snapshot to overlay
   without swamping the photo, so it drops beneath the image instead.
   Must sit after the base rule above - media queries add no specificity. */
@media (max-width: 1160px) {
  .deal-snapshot { position: static; width: auto; margin-top: 1.4rem; }
}

/* ---------- Deal sizer ----------
   Every figure that changes while dragging is set in --font-body. Poppins
   as served by Google Fonts carries no `tnum` feature, so tabular-nums is
   silently a no-op there and the digits jitter; Inter has real tabular
   figures. Inter 700 is not loaded, so 600 is the ceiling. */
.sizer__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  align-items: start;
}
.sizer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.sizer__presets {
  display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.sizer__presets-label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--teal-dark);
}
.sizer__presets-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sizer__preset {
  font-family: var(--font-head); font-weight: 600; font-size: 0.84rem;
  padding: 0.4em 1em; border-radius: 999px;
  background: var(--white); color: var(--navy);
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sizer__preset:hover { border-color: var(--teal); color: var(--teal-dark); }
.sizer__preset.is-active { background: var(--tint); border-color: var(--teal); color: var(--teal-ink); }

.sizer__controls { display: grid; gap: 1.3rem; }
.sizer__field-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.55rem;
}
.sizer__field-head label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--navy);
}
/* min-width reserves the widest figure, so changing digits never reflow. */
.sizer__field-val {
  display: inline-block; min-width: 8ch; text-align: right;
  font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}

/* --fill is written inline in the HTML and updated by JS, so the filled
   portion of the track is still correct with JS disabled. */
.sizer__range {
  -webkit-appearance: none;
  appearance: none;
  display: block; width: 100%; height: 10px; margin: 0; padding: 0; border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-dark) var(--fill, 50%), var(--line) var(--fill, 50%));
  cursor: pointer;
}
.sizer__range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: transparent; }
.sizer__range::-moz-range-track { height: 10px; border-radius: 999px; background: transparent; }
/* box-sizing is required here: the universal reset matches *, *::before and
   *::after, none of which reach a shadow pseudo-element. Without it the
   3px border makes the thumb 28px and the centring is off. */
.sizer__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 22px; height: 22px; margin-top: -6px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--navy);
  box-shadow: var(--shadow-soft);
}
.sizer__range::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px; height: 22px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--navy);
  box-shadow: var(--shadow-soft);
}

.sizer__out { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.sizer__out-label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--teal-dark); margin: 0 0 0.3rem;
}
.sizer__out-num {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  letter-spacing: -0.025em;
  color: var(--navy); line-height: 1.05; margin: 0 0 1rem;
  font-variant-numeric: tabular-nums;
}
.sizer__bar { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sizer__bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sizer__bar-legend {
  display: flex; align-items: center; gap: 0.45rem 1.4rem; flex-wrap: wrap;
  margin: 0.85rem 0 1.35rem; font-size: 0.86rem; color: var(--body);
}
.sizer__legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.sizer__legend-item strong {
  font-family: var(--font-body); font-weight: 600; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.sizer__key { width: 0.7em; height: 0.7em; flex: none; border-radius: 35% 35% 55% 35%; }
.sizer__key--riva { background: var(--teal); }
.sizer__key--you { background: var(--line); }

.sizer__rows { margin: 0 0 1.25rem; }
.sizer__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.62rem 0; border-bottom: 1px solid var(--line);
}
.sizer__row dt { margin: 0; font-size: 0.9rem; color: var(--body); }
.sizer__row dd {
  margin: 0; min-width: 9ch; text-align: right;
  font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* min-height reserves the three-line worst case. Without it, crossing the
   ARV cap pushes everything below down a line — a CLS hit caused by user
   interaction, which shows up in field data and never in a lab run. */
.sizer__status {
  display: flex; align-items: flex-start; gap: 0.65rem;
  margin: 0; padding: 0.8rem 0.95rem; min-height: 5.4rem;
  border-radius: 12px;
  font-size: 0.89rem; line-height: 1.5;
}
.sizer__status-icon {
  flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem;
  border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 64%;
}
.sizer__status.is-ok { background: var(--tint); color: var(--teal-ink); }
.sizer__status.is-ok .sizer__status-icon {
  background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.sizer__status.is-capped { background: rgba(180, 69, 60, 0.09); color: #7A2F29; }
.sizer__status.is-capped .sizer__status-icon {
  background-color: var(--alert);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.sizer__sheet {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 3vw, 1.7rem);
  position: sticky; top: calc(var(--header-h) + 2rem);
}
/* Denser rhythm than the shared .terms__row default so the sheet finishes
   level with the sizer beside it. Scoped - fund/index/rental-loans reuse
   .terms__row at its roomier default. */
.sizer__sheet .terms__row { padding: 0.55rem 0; }
.sizer__sheet h3 { margin-bottom: 0.3rem; }
.sizer__sheet-intro { font-size: 0.95rem; margin-bottom: 0.8rem; }
.sizer__sheet .terms__row:last-of-type { border-bottom: 0; }
.sizer__sheet .btn { margin-top: 0.9rem; }
.sizer__sheet-note { margin: 0.6rem 0 0; font-size: 0.82rem; color: #6E6C8A; }

/* ---------- Draw cycle rail ----------
   Deliberately unlike .steps__grid: no numbered navy circles, no dotted
   linear connector, and a return arrow that closes the loop. */
.drawrail {
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  color: rgba(255, 255, 255, 0.85);
  position: relative; overflow: hidden;
}
.drawrail::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 40 18 73 18 113 38 C 153 58 187 58 227 38 C 267 18 300 18 340 38 C 365 50 383 54 400 50 L 400 70 L 0 70 Z' fill='%232A938A' opacity='0.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.drawrail__head { max-width: 36em; margin-bottom: 1.8rem; position: relative; z-index: 1; }
.drawrail__eyebrow {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7FD1C9; margin: 0 0 0.5rem;
}
.drawrail__title { color: var(--white); margin-bottom: 0.5rem; }
.drawrail__intro { margin: 0; font-size: 0.96rem; }
/* The base reset covers ul, not ol. */
.drawrail__nodes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem;
  margin: 0; padding: 0; list-style: none;
  position: relative; z-index: 1;
}
.drawrail__node {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.2rem 1.1rem;
  display: flex; flex-direction: column;
}
.drawrail__node::after {
  content: ""; position: absolute;
  top: 50%; left: 100%; width: 1.2rem; height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #7FD1C9 0 5px, transparent 5px 10px);
  opacity: 0.6;
}
.drawrail__node:last-child::after { display: none; }
.drawrail__dot {
  width: 38px; height: 38px; flex: none;
  border-radius: 35% 35% 55% 35%;
  background: var(--teal); color: var(--white);
  display: grid; place-items: center;
  margin-bottom: 0.9rem;
}
.drawrail__node:nth-child(2) .drawrail__dot { border-radius: 55% 35% 35% 35%; }
.drawrail__node:nth-child(3) .drawrail__dot { border-radius: 35% 55% 35% 35%; }
.drawrail__dot svg { width: 19px; height: 19px; }
.drawrail__node-title {
  font-family: var(--font-head); font-weight: 600; font-size: 0.97rem;
  color: var(--white); margin-bottom: 0.3rem;
}
.drawrail__node-body { font-size: 0.88rem; line-height: 1.5; }
.drawrail__loop {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.6rem 0 0; position: relative; z-index: 1;
  font-family: var(--font-head); font-weight: 600; font-size: 0.94rem;
  color: var(--white);
}
.drawrail__loop-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #7FD1C9;
  display: grid; place-items: center;
}
.drawrail__loop-icon svg { width: 18px; height: 18px; }

/* Vendor pseudo-elements must never share a selector list: one unknown
   pseudo invalidates the whole rule in both engines. */
@media (prefers-reduced-motion: reduce) {
  .sizer__bar-fill, .sizer__preset, .site-nav__caret { transition: none; }
}

@media (max-width: 1023px) {
  .sizer__grid { grid-template-columns: 1fr; }
  .sizer__sheet { position: static; }
  .drawrail__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.2rem; }
  .drawrail__node:nth-child(2)::after { display: none; }
}

@media (max-width: 860px) {
  /* In the mobile drawer the panel is always open, as an indented list. */
  .site-nav__toggle {
    display: flex; width: 100%; justify-content: space-between;
    padding: 0.85em 0.25em; font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav__toggle.is-active { border-bottom-color: var(--line); }
  .site-nav__caret { display: none; }
  .site-nav .site-nav__sub {
    position: static; transform: none; display: flex;
    min-width: 0; padding: 0 0 0 1rem;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .site-nav .site-nav__sub::before { display: none; }
  .site-nav ul .site-nav__sub a {
    border-radius: 0; padding: 0.75em 0.25em;
    border-bottom: 1px solid var(--line);
    font-size: 0.98rem;
  }
  .site-nav ul .site-nav__sub a.is-active { background: none; }
}

@media (max-width: 480px) {
  .sizer, .sizer__sheet { padding: 1.5rem; }
  .sizer__field-val { min-width: 0; }
  .sizer__status { min-height: 7rem; }
  .sizer__sheet .btn { display: block; width: 100%; text-align: center; }
  .drawrail__nodes { grid-template-columns: 1fr; }
  .drawrail__node::after { display: none; }
}


/* ============================================================
   Rental / DSCR page
   ============================================================ */

/* ---------- Cash-flow card (hero ledger) ----------
   The rental answer to .deal-snapshot, pinned the same way — .hero has
   overflow:hidden, so anything hung past the photo's bottom edge gets
   sheared. It differs in where it lands: a flip deal resolves to a dollar
   figure, a rental deal resolves to a ratio, so this one closes on a
   meter rather than a total row. */
.cashflow-card {
  position: absolute; left: -1.6rem; bottom: 1.2rem;
  width: min(19.5rem, 84%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem 1.05rem;
}
.cashflow-card__label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--teal-dark); margin: 0 0 0.7rem;
}
.cashflow-card__rows { margin: 0; }
.cashflow-card__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--line);
}
.cashflow-card__row dt { margin: 0; font-size: 0.84rem; color: var(--body); }
.cashflow-card__row dd {
  margin: 0; font-family: var(--font-head); font-weight: 600;
  font-size: 0.86rem; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
/* Closes the ledger. The heavier rule is the divide-here cue that makes
   the ratio below read as a result rather than one more row. */
.cashflow-card__row--last { border-bottom: 2px solid var(--navy); }
.cashflow-card__result {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 0.8rem;
}
.cashflow-card__result-label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--navy);
}
.cashflow-card__result-num {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.32rem; color: var(--teal-dark); line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Meter scale runs 0.75x (our floor) to 1.75x, so the fill is
   (dscr - 0.75) / 1.00. Static illustration — the width is written
   inline in the HTML and no JS touches this card. */
.cashflow-card__meter {
  height: 8px; margin-top: 0.7rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.cashflow-card__meter-fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal));
}
.cashflow-card__foot {
  margin: 0.7rem 0 0; font-size: 0.78rem; color: #6E6C8A;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.cashflow-card__pill {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.04em;
  padding: 0.22em 0.7em; border-radius: 999px;
  background: var(--tint); color: var(--teal-ink);
  border: 1px solid rgba(42, 147, 138, 0.35);
  font-variant-numeric: tabular-nums;
}

/* ---------- Scenario matrix ----------
   Deliberately the inverse of .tabs: the rail runs down the left instead
   of sitting as a pill row on top, so this page and fix-and-flip never
   read as the same layout. The tab semantics are identical, which is the
   point — wireTabs() drives it unchanged, so the page costs two lines of
   JS rather than a component's worth. */
.matrix__grid {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
  align-items: start;
}
/* The rail is far shorter than the panel beside it, so the column sticks
   as you read down the terms — the same trick .sizer__sheet uses on the
   fix-and-flip page — and an aside fills the space it would leave behind. */
.matrix__side {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  display: grid; gap: 1rem; align-content: start;
}
.matrix__aside {
  background: var(--tint);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
}
.matrix__aside-title {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.98rem; color: var(--ink); margin: 0 0 0.4rem;
}
.matrix__aside-body {
  margin: 0 0 0.9rem; font-size: 0.89rem; line-height: 1.55; color: var(--teal-ink);
}
.matrix__rail {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
}
.matrix__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; text-align: left;
  border: 0; background: transparent;
  font-family: var(--font-head); font-weight: 600; font-size: 0.96rem;
  color: var(--navy);
  padding: 0.8em 1em;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.matrix__btn:hover { background: var(--tint); }
.matrix__btn[aria-selected="true"] {
  background: var(--navy); color: var(--white);
  box-shadow: var(--shadow-soft);
}
.matrix__btn-tag {
  flex: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.02em;
  padding: 0.2em 0.6em; border-radius: 999px;
  background: var(--tint); color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.matrix__btn[aria-selected="true"] .matrix__btn-tag { background: var(--teal); color: var(--white); }

/* All five panels share one grid cell, so the container is always as tall
   as the tallest one and switching scenarios shifts nothing below it.
   A min-height would do the same job but needs a hand-tuned magic number
   at every breakpoint, and it silently rots the moment the copy changes.
   Inactive panels keep their box but are visibility:hidden, which also
   takes them out of the tab order and the accessibility tree — so the
   [hidden] attribute wireTabs sets still means "not perceivable". */
.matrix__panels { display: grid; }
.matrix__panel { grid-area: 1 / 1; animation: panelIn 0.35s ease; }
/* display must be restated: the UA sheet's [hidden]{display:none} would
   otherwise pull the panel out of the grid and collapse the row again. */
.matrix__panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.matrix__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.matrix__title { margin-bottom: 0.45rem; }
.matrix__lede { margin: 0 0 1.3rem; font-size: 0.98rem; max-width: 46em; }
/* The card supplies the closing edge, so the final row rule is noise. */
.matrix__card .terms__row:last-of-type { border-bottom: 0; }
.matrix__best { margin: 1.3rem 0 1.5rem; }
.matrix__best-label {
  display: block; margin-bottom: 0.6rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--teal-dark);
}
.matrix__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.matrix__actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }

/* ---------- DSCR explainer ---------- */
/* The board and ladder together run far taller than a 4:3 photo, so the
   column stretches and the image fills it rather than floating in the
   middle of a tall empty cell. */
.dscr__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: stretch;
}
.dscr__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  object-fit: cover;
  width: 100%; height: 100%;
  min-height: 20rem;
}
.dscr-board {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
/* The equation is typography, not an image: it stays sharp at any zoom,
   reflows on its own, and costs nothing to load. */
.dscr-board__eq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}
.dscr-board__term {
  background: var(--tint);
  border-radius: 12px;
  padding: 0.85rem 0.7rem;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
}
.dscr-board__term--out { background: var(--navy); }
.dscr-board__term-label {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-dark);
}
.dscr-board__term--out .dscr-board__term-label { color: #7FD1C9; }
/* Poppins ships without tnum, so figures on this page are set in Inter —
   and Inter 700 is not loaded, which caps these at 600. */
.dscr-board__term-num {
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.05rem; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.dscr-board__term--out .dscr-board__term-num { color: var(--white); }
.dscr-board__op {
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.2rem; color: var(--teal-dark);
}
.dscr-board__note { margin: 1.1rem 0 0; font-size: 0.86rem; color: #6E6C8A; }

.dscr-ladder { display: grid; gap: 0.7rem; margin-top: 1.3rem; }
.dscr-ladder__rung {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem; align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.dscr-ladder__mark {
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.84rem; white-space: nowrap;
  padding: 0.3em 0.75em; border-radius: 999px;
  background: var(--tint); color: var(--teal-ink);
  border: 1px solid rgba(42, 147, 138, 0.35);
  font-variant-numeric: tabular-nums;
}
.dscr-ladder__rung--best .dscr-ladder__mark {
  background: var(--teal); color: var(--white); border-color: var(--teal);
}
.dscr-ladder__body { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.dscr-ladder__body strong {
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
}

/* ---------- Docs split ----------
   Same navy family as .drawrail, different argument: a rail shows a
   sequence, this shows a contrast. The column carrying the message is
   the one listing what we never ask for. */
.docs-split {
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  color: rgba(255, 255, 255, 0.85);
  position: relative; overflow: hidden;
}
.docs-split::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 40 18 73 18 113 38 C 153 58 187 58 227 38 C 267 18 300 18 340 38 C 365 50 383 54 400 50 L 400 70 L 0 70 Z' fill='%232A938A' opacity='0.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.docs-split__head { max-width: 40em; margin-bottom: 1.8rem; position: relative; z-index: 1; }
.docs-split__eyebrow {
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7FD1C9; margin: 0 0 0.5rem;
}
.docs-split__title { color: var(--white); margin-bottom: 0.5rem; }
.docs-split__intro { margin: 0; font-size: 0.96rem; }
.docs-split__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem;
  position: relative; z-index: 1;
}
.docs-split__col {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.3rem 1.25rem;
}
.docs-split__col-title {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-head); font-weight: 600; font-size: 0.99rem;
  color: var(--white); margin: 0 0 1rem;
}
.docs-split__icon {
  flex: none; width: 34px; height: 34px;
  border-radius: 35% 35% 55% 35%;
  background: var(--teal); color: var(--white);
  display: grid; place-items: center;
}
.docs-split__col--never .docs-split__icon {
  border-radius: 55% 35% 35% 35%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #7FD1C9;
}
.docs-split__icon svg { width: 17px; height: 17px; }
/* The base reset covers ul, not the markers — these are replaced. */
.docs-split__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.6rem;
  font-size: 0.9rem; line-height: 1.5;
}
.docs-split__list li { position: relative; padding-left: 1.7rem; }
.docs-split__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.3em;
  width: 1.1em; height: 1.1em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1) no-repeat center / 60%;
}
.docs-split__col--need .docs-split__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%237FD1C9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.docs-split__col--never .docs-split__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%237FD1C9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.docs-split__foot {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.6rem 0 0; position: relative; z-index: 1;
  font-family: var(--font-head); font-weight: 600; font-size: 0.94rem;
  color: var(--white);
}
.docs-split__foot-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #7FD1C9;
  display: grid; place-items: center;
}
.docs-split__foot-icon svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .matrix__btn, .cashflow-card__meter-fill { transition: none; }
  .matrix__panel { animation: none; }
}

@media (max-width: 1023px) {
  .matrix__grid { grid-template-columns: 1fr; }
  /* The rail becomes a scrolling pill row. Items keep their intrinsic
     width so long scenario names are never truncated mid-word. */
  .matrix__rail {
    flex-direction: row; gap: 0.3rem;
    overflow-x: auto; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  /* width:auto matters: the vertical rail sets width:100%, which in a row
     would make every pill full-bleed and hide the other four offscreen. */
  .matrix__btn { flex: 0 0 auto; width: auto; padding: 0.7em 1em; }
  /* display:contents dissolves the sticky column so the rail, the panel and
     the aside become siblings in the single-column grid and can be ordered
     independently — the selector stays next to what it controls, and the
     aside drops below the terms instead of separating them. */
  .matrix__side { display: contents; }
  .matrix__rail { order: 1; }
  .matrix__panels { order: 2; }
  .matrix__aside { order: 3; }

  .dscr__grid { grid-template-columns: 1fr; }
  .dscr__media { order: -1; }
  /* Stacked, the column no longer supplies a height to fill, so the image
     goes back to an intrinsic ratio — a banner crop rather than a square. */
  .dscr__media img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 860px) {
  .cashflow-card { position: static; width: auto; margin-top: 1.4rem; }
  .docs-split__cols { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .matrix__card { padding: 1.5rem; }
  .matrix__actions .btn { display: block; width: 100%; text-align: center; }
  /* Stacked, the operators read as their own line between the terms. */
  .dscr-board__eq { grid-template-columns: 1fr; }
  .dscr-board__op { padding: 0.15rem 0; }
  .dscr-ladder__rung { grid-template-columns: 1fr; gap: 0.5rem; }
  .dscr-ladder__mark { justify-self: start; }
}