/* ============================================================
   Fullstack Lending — fullstacklending.com
   Brand: ink ground, paper sections, Ascend greens.
   Rules honored: one lime element per composition; never lime
   text on light grounds; moss never for body text.
   ============================================================ */

:root {
  --ink: #0B0C0E;
  --ink-2: #121316;
  --ink-3: #1A1C20;
  --paper: #F4F1EC;
  --paper-2: #ECE8E0;
  --white: #FFFFFF;
  --lime: #D6F55B;
  --moss: #8FA637;
  --olive: #3F4A18;
  --olive-deep: #232B0D;

  --text-on-ink: rgba(244, 241, 236, 0.92);
  --muted-on-ink: rgba(244, 241, 236, 0.62);
  --faint-on-ink: rgba(244, 241, 236, 0.38);
  --text-on-paper: #17181B;
  --muted-on-paper: rgba(23, 24, 27, 0.68);

  --font: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--ink);
  color: var(--text-on-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--olive); color: var(--paper); }

/* ---------- Type ---------- */

.display {
  font-weight: 300;
  font-size: clamp(2.75rem, 7.2vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.display-2 {
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  max-width: 20ch;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1.4rem;
}

/* On paper, lime text is forbidden — eyebrows go olive. */
.eyebrow--olive { color: var(--olive); }

/* ---------- Layout ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 860px; }

.section { padding-block: clamp(5rem, 12vh, 9rem); }

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

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

.section-intro {
  max-width: 56ch;
  margin-top: 1.2rem;
  font-size: 1.08rem;
  color: var(--muted-on-paper);
}

/* Subheading under a section heading (used on the ink FAQ section).
   Mute via color, not opacity — opacity would clash with the .reveal fade. */
.section-sub {
  max-width: 56ch;
  margin-top: 1.2rem;
  font-size: 1.08rem;
  color: var(--muted-on-ink);
}

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

.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85em 1.9em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #E2FB78; }

.btn--ghost {
  background: transparent;
  color: var(--text-on-ink);
  border-color: rgba(244, 241, 236, 0.28);
}
.btn--ghost:hover { border-color: rgba(244, 241, 236, 0.6); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #24262B; }

/* Nav CTA: paper, so the hero's lime button stays the one lime element in view */
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--white); }

.btn--lg { padding: 1.05em 2.4em; font-size: 0.88rem; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
}

.nav.is-scrolled {
  background: rgba(11, 12, 14, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(244, 241, 236, 0.08);
}

.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  text-decoration: none;
}

.nav-logo-mark { height: 32px; width: auto; display: block; }

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Matches the wordmark art: Light, tight tracking */
.nav-logo-name {
  font-size: 1.32rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paper);
}

/* Matches the wordmark art: caps, wide tracking, 72% opacity */
.nav-logo-sub {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.72;
  margin-top: 0.32em;
  /* trailing tracking on the last letter, pulled back so the block aligns left */
  margin-right: -0.5em;
}

.nav-links {
  display: flex;
  gap: 1.9rem;
  margin-inline: auto;
}

.nav-links a {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--muted-on-ink);
  transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--text-on-ink); }

.nav-actions { display: flex; gap: 0.8rem; align-items: center; }

.nav-burger {
  display: none;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  padding: 6.5rem var(--gutter) 3rem;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 1.4rem; }
.mobile-menu a {
  font-size: 1.6rem;
  font-weight: 300;
  text-decoration: none;
  color: var(--text-on-ink);
}
.mobile-menu-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }
.mobile-menu-actions .btn { font-size: 0.8rem; }

@media (max-width: 960px) {
  .nav-links, .nav-actions { display: none; }
  .nav-burger { display: flex; }
  .nav-inner { justify-content: space-between; }
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: clamp(5rem, 12vh, 7.5rem);
}

.ridges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Wireframe house canvas — right of the hero copy, behind the widgets */
.hero-house {
  position: absolute;
  right: 0;
  top: 45%;
  /* --house-parallax is set on scroll (JS) to lag the house ~40% behind */
  transform: translateY(calc(-50% + var(--house-parallax, 0px)));
  width: clamp(420px, 48vw, 780px);
  height: clamp(360px, 88vh, 720px);
  display: block;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

@media (max-width: 1100px) {
  .hero-house {
    right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + var(--house-parallax, 0px)));
    width: min(150%, 640px);
    height: 70vh;
    opacity: 0.3;
  }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(11, 12, 14, 0.55) 0%, rgba(11, 12, 14, 0) 60%),
    linear-gradient(180deg, rgba(11, 12, 14, 0.5) 0%, rgba(11, 12, 14, 0) 35%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.hero-inner .display { max-width: 13ch; }

.hero-sub {
  max-width: 46ch;
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--muted-on-ink);
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  margin-top: 2.4rem;
  flex-wrap: wrap;
}

/* Floating portal widgets */

.hero-widgets {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.widget {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: rgba(18, 19, 22, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 241, 236, 0.1);
  border-radius: 14px;
  padding: 1rem 1.3rem;
  min-width: 210px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: bob 7s ease-in-out infinite;
}

.widget--a { right: 6%; top: 24%; animation-delay: 0s; }
.widget--b { right: 12%; top: 52%; animation-delay: -2.4s; }
.widget--c { right: 4%; top: 74%; animation-delay: -4.8s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.widget-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-on-ink);
}

.widget-big { font-size: 1.15rem; font-weight: 400; color: var(--paper); }
.widget-big em { font-style: normal; color: var(--faint-on-ink); font-size: 0.9rem; }
.widget-foot { font-size: 0.8rem; color: var(--faint-on-ink); }

@media (max-width: 1100px) {
  .hero-widgets { display: none; }
}

/* Hero stat ladder */

.hero-stats {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  padding: 3.5rem var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stat { border-top: 1px solid rgba(244, 241, 236, 0.16); padding-top: 1rem; }

.stat-num {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 300;
  color: var(--paper);
  letter-spacing: -0.02em;
}

.stat-unit {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss); /* label use, not body text */
}

.stat-label { font-size: 0.9rem; color: var(--muted-on-ink); }

@media (max-width: 720px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Program cards ---------- */

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem;
  margin-top: 3.2rem;
}

.card {
  background: var(--white);
  border: 1px solid rgba(23, 24, 27, 0.08);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(23, 24, 27, 0.1);
}

/* Cards carry both .card and .reveal; the .js .reveal transition (opacity +
   transform only) out-specifies .card and drops box-shadow, so the hover
   shadow popped in instantly. Re-declare at higher specificity to keep the
   reveal behavior and fade the shadow over 1s (no reveal-stagger delay). */
.js .card.reveal {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease),
              box-shadow 1s var(--ease);
  transition-delay: var(--d, 0s), var(--d, 0s), 0s;
}

.card h3 { font-size: 1.35rem; font-weight: 400; letter-spacing: -0.01em; }

.card > p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--muted-on-paper);
}

.card ul {
  list-style: none;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(23, 24, 27, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.card li {
  font-size: 0.9rem;
  padding-left: 1.15rem;
  position: relative;
}

.card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 5px;
  background: var(--olive);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.card--cta {
  background: var(--ink);
  color: var(--paper);
  border: none;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
}
.card--cta p { color: var(--muted-on-ink); }
.card--cta .btn { margin-top: 1.4rem; background: var(--lime); color: var(--ink); }
.card--cta .btn:hover { background: #E2FB78; }

.criteria-strip {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(23, 24, 27, 0.14);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted-on-paper);
}

/* Interactive program cards */
.card--program { cursor: pointer; position: relative; }

.card--program::after {
  /* subtle "open" affordance in the corner */
  content: "";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) no-repeat,
    linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 100% 1.5px, 1.5px 100%;
  background-position: bottom, right;
  color: rgba(23, 24, 27, 0.28);
  transform: rotate(-45deg);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}

.card--program:hover::after,
.card--program:focus-visible::after {
  color: var(--olive);
  transform: rotate(-45deg) translate(2px, -2px);
}

.card--program:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

/* ---------- Program drawer ---------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 12, 14, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 201;
  height: 100vh;
  height: 100dvh;
  /* desktop cap 700px (25% wider than before); mobile still uses 92vw */
  width: min(700px, 92vw);
  background: var(--paper);
  border-left: 1px solid rgba(23, 24, 27, 0.1);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.55s var(--ease);
}

.drawer-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(23, 24, 27, 0.2);
  background: rgba(23, 24, 27, 0.03);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.drawer-close:hover { background: rgba(23, 24, 27, 0.08); border-color: rgba(23, 24, 27, 0.45); }

.drawer-scroll {
  flex: 1;
  overflow-y: auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.6rem, 4vw, 3rem) 2rem;
}

.drawer-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-on-paper);
  margin-bottom: 1.4rem;
}

.pd-lead {
  font-size: 1.02rem;
  color: var(--muted-on-paper);
  margin-bottom: 1.6rem;
}

.pd-section { margin-top: 1.9rem; }

.pd-section h4 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(63, 74, 24, 0.28);
}

.pd-section h4 sup { font-size: 0.7em; }

.pd-section ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }

.pd-section li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.95rem;
  color: var(--text-on-paper);
}

.pd-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 6px;
  background: var(--olive);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.pd-footnote {
  margin-top: 2rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(23, 24, 27, 0.5);
}
.pd-footnote sup { color: var(--olive); }

.drawer-foot {
  flex: none;
  padding: 1.3rem clamp(1.6rem, 4vw, 3rem) 1.6rem;
  border-top: 1px solid rgba(23, 24, 27, 0.12);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.drawer-foot .btn { text-align: center; }

.drawer-mail {
  font-size: 0.85rem;
  color: var(--muted-on-paper);
  text-decoration: none;
}
.drawer-mail:hover { color: var(--text-on-paper); }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-backdrop { transition: none; }
}

/* ---------- Sticky steps ---------- */

.steps { background: var(--ink); }

/* Track travel across the 4 pinned panels. Height minus one viewport (the
   sticky pin) is the scroll distance; 4 panels x 25vh + 100vh pin = 200vh. */
.steps-track { height: 200vh; position: relative; }

.steps-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(4.5rem, 9vh, 7rem) var(--gutter) 0;
}

.steps-head {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}

.steps-stage {
  position: relative;
  flex: 1;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.steps-rail {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--faint-on-ink);
}

.steps-rail li {
  position: relative;
  padding-left: 1.6rem;
  transition: color 0.4s ease;
}

.steps-rail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}

.steps-rail li button {
  background: none;
  border: none;
  padding: 0.2rem 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

.steps-rail li:hover { color: var(--muted-on-ink); }
.steps-rail li.is-active { color: var(--lime); }
.steps-rail li.is-active::before { width: 26px; }

.steps-panels { position: relative; flex: 1; min-height: 320px; }

.step-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}

.step-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.step-ghost {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  font-size: clamp(8rem, 22vw, 17rem);
  font-weight: 300;
  line-height: 1;
  color: #3F4A18; /* olive */
  user-select: none;
}

.step-kicker {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.9rem;
}

.step-panel h3 {
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

.step-panel > p {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: 1.05rem;
  color: var(--muted-on-ink);
}

.step-link {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(143, 166, 55, 0.6);
  transition: text-decoration-color 0.25s ease;
}
.step-link:hover { text-decoration-color: var(--moss); }

/* Scroll cue — a white chevron pinned to the bottom-centre of the pinned
   viewport, nudging the reader to keep scrolling through the four steps.
   Clicking it advances to the next step (or on the last step, releases the
   pin and continues to the rest of the page). */
.steps-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  translate: -50% 0;
  display: block;
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--paper);
  opacity: 0.9;
  cursor: pointer;
  /* ease-in-out keeps the bounce pendulum-smooth; the site's --ease curve
     (expo-out) crawls into each keyframe and reads as a pause. */
  animation: steps-cue-bounce 1.8s ease-in-out infinite;
  transition: opacity 0.25s ease;
}

.steps-scroll-cue svg { display: block; }

.steps-scroll-cue:hover { opacity: 1; }

@keyframes steps-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .steps-scroll-cue { animation: none; }
}

/* Steps degrade to a simple stack on small screens */
@media (max-width: 860px) {
  .steps-track { height: auto; }
  .steps-sticky { position: static; height: auto; overflow: visible; padding-bottom: 3rem; }
  .steps-stage { flex-direction: column; align-items: flex-start; gap: 0; }
  .steps-rail { display: none; }
  .steps-panels { min-height: 0; }
  .step-panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding-block: 2.2rem;
    border-bottom: 1px solid rgba(244, 241, 236, 0.1);
  }
  .step-ghost { display: none; }
  .steps-scroll-cue { display: none; }
}

/* ---------- Portal section ---------- */

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

.portal-copy > p { max-width: 50ch; margin-top: 1.2rem; }

.check-list {
  list-style: none;
  margin-block: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.check-list li {
  padding-left: 1.7rem;
  position: relative;
  font-size: 0.98rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 14px;
  height: 9px;
  background: var(--olive);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.portal-mock {
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(23, 24, 27, 0.1);
  box-shadow: 0 40px 90px rgba(23, 24, 27, 0.18);
  overflow: hidden;
  transform: rotate(1.2deg);
  color: var(--text-on-paper);
}

.pm-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(23, 24, 27, 0.08);
}

.pm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-2); }

.pm-url {
  margin-left: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted-on-paper);
  background: var(--paper);
  border-radius: 6px;
  padding: 0.25em 0.9em;
}

.pm-body { display: flex; min-height: 300px; }

.pm-side {
  width: 132px;
  border-right: 1px solid rgba(23, 24, 27, 0.08);
  padding: 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pm-side img { margin-bottom: 0.6rem; }

.pm-item {
  font-size: 0.8rem;
  color: var(--muted-on-paper);
  padding: 0.35em 0.7em;
  border-radius: 8px;
}

.pm-item.is-active { background: var(--paper); color: var(--text-on-paper); font-weight: 500; }

.pm-main { flex: 1; padding: 1.2rem 1.4rem; }

.pm-head { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.pm-head strong { font-weight: 500; font-size: 0.98rem; }

.pm-pill {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--lime); /* the section's one lime element */
  color: var(--ink);
  border-radius: 999px;
  padding: 0.4em 1em;
}

.pm-progress {
  display: flex;
  gap: 5px;
  margin-block: 1.1rem;
}

.pm-seg {
  height: 5px;
  flex: 1;
  border-radius: 3px;
  background: var(--paper-2);
}
.pm-seg.is-done { background: var(--olive); }
.pm-seg.is-live { background: var(--moss); }

.pm-docs { list-style: none; display: flex; flex-direction: column; }

.pm-docs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(23, 24, 27, 0.07);
  font-size: 0.86rem;
}

.pm-docs em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-on-paper);
}

.pm-docs em.is-done { color: var(--olive); font-weight: 500; }

@media (max-width: 960px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-mock { transform: none; }
}

/* ---------- Why pillars ---------- */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.3rem;
  margin-top: 3rem;
}

.pillar {
  background: var(--ink-2);
  border: 1px solid rgba(244, 241, 236, 0.08);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}

.pillar h3 {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(143, 166, 55, 0.35);
}

.pillar p { color: var(--muted-on-ink); font-size: 0.98rem; }

/* ---------- Bios ---------- */

.bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.3rem;
  margin-top: 3rem;
}

.bio {
  background: var(--white);
  border: 1px solid rgba(23, 24, 27, 0.08);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
}

.bio h3 { font-size: 1.5rem; font-weight: 400; }

.bio-role {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0.4rem 0 1.2rem;
}

.bio p + p { margin-top: 0.9rem; }
.bio > p:not(.bio-role) { font-size: 0.97rem; color: var(--muted-on-paper); }

/* ---------- FAQ ---------- */

.faq-list { margin-top: 3rem; }

.faq-item { border-bottom: 1px solid rgba(244, 241, 236, 0.12); }

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  background: none;
  border: none;
  color: var(--text-on-ink);
  font-family: var(--font);
  font-size: 1.08rem;
  font-weight: 400;
  text-align: left;
  padding: 1.4rem 0;
  cursor: pointer;
}

.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 16px;
  height: 1.5px;
  background: var(--moss);
  translate: 0 -50%;
  transition: rotate 0.35s var(--ease);
}
.faq-icon::after { rotate: 90deg; }
.faq-q[aria-expanded="true"] .faq-icon::after { rotate: 0deg; }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner { overflow: hidden; }

.faq-a-inner p {
  padding-bottom: 1.5rem;
  color: var(--muted-on-ink);
  max-width: 60ch;
}

/* ---------- Final CTA ---------- */

.cta-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(7rem, 18vh, 12rem);
  background: var(--ink);
}

.cta-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-inner .display { max-width: 14ch; }

.cta-inner > p { margin-top: 1.4rem; color: var(--muted-on-ink); font-size: 1.1rem; }

.cta-mail { font-size: 0.95rem; }
.cta-mail a { color: var(--paper); }

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

.footer {
  background: var(--ink);
  border-top: 1px solid rgba(244, 241, 236, 0.09);
  padding-block: 4rem 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
}

.footer-brand img { width: 110px; }

.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }

.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.5rem;
}

.footer-col a {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--muted-on-ink);
  transition: color 0.25s ease;
}
.footer-col a:hover { color: var(--text-on-ink); }

.footer-legal {
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(244, 241, 236, 0.09);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-legal p {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--faint-on-ink);
  max-width: 90ch;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Subpages (contact / brokers / 404) ---------- */

.subpage {
  min-height: 100svh;
  padding: clamp(9rem, 20vh, 12rem) 0 6rem;
  position: relative;
  overflow: hidden;
}

.subpage .display-2 { max-width: 16ch; }

.subpage-intro {
  max-width: 52ch;
  margin-top: 1.3rem;
  font-size: 1.08rem;
  color: var(--muted-on-ink);
}

.form {
  margin-top: 3rem;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.form .field--full { grid-column: 1 / -1; }

/* `display: grid` above overrides the UA [hidden] rule, so hide explicitly. */
.form[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-ink);
}

.field input, .field select, .field textarea {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-on-ink);
  background: var(--ink-2);
  border: 1px solid rgba(244, 241, 236, 0.16);
  border-radius: 10px;
  padding: 0.85em 1em;
  transition: border-color 0.25s ease;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--moss);
}

.field textarea { resize: vertical; min-height: 130px; }

.form-actions { grid-column: 1 / -1; margin-top: 0.6rem; }

.form-note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--faint-on-ink);
}

.form-success {
  margin-top: 3rem;
  max-width: 640px;
  background: var(--ink-2);
  border: 1px solid rgba(244, 241, 236, 0.16);
  border-radius: 14px;
  padding: 2rem 2.2rem;
}

.form-success h2 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--text-on-ink);
}

.form-success p {
  max-width: 46ch;
  color: var(--muted-on-ink);
}

.form-success a { color: var(--lime); }

@media (max-width: 640px) {
  .form { grid-template-columns: 1fr; }
}

/* ---------- Legal pages ---------- */

.legal-head {
  background: var(--ink);
  padding: clamp(8.5rem, 18vh, 11rem) 0 3.5rem;
}

.legal-date {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--faint-on-ink);
}

.legal-body-section {
  background: var(--paper);
  color: var(--text-on-paper);
  padding-block: 4rem 6.5rem;
}

.legal-body { max-width: 760px; }

.legal-body h2 {
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(63, 74, 24, 0.28);
}

.legal-body h3 {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 1.9rem 0 0.5rem;
}

.legal-body p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted-on-paper);
}

.legal-body strong { color: var(--text-on-paper); }

.legal-body ul, .legal-body ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

.legal-body li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted-on-paper);
  margin-bottom: 0.35rem;
}

.legal-body a { color: var(--olive); text-decoration: underline; }
.legal-body a:hover { color: var(--text-on-paper); }

.legal-body address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted-on-paper);
  margin-bottom: 1rem;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.88rem;
}

.legal-body th {
  text-align: left;
  padding: 0.7rem 1rem;
  background: rgba(63, 74, 24, 0.08);
  color: var(--text-on-paper);
  font-weight: 500;
  border-bottom: 1px solid rgba(63, 74, 24, 0.3);
}

.legal-body td {
  padding: 0.7rem 1rem;
  color: var(--muted-on-paper);
  border-bottom: 1px solid rgba(63, 74, 24, 0.14);
  vertical-align: top;
}

.legal-body tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .legal-body table { display: block; overflow-x: auto; }
}

/* Footer legal-page links */
.footer-legal-links { display: flex; gap: 1.2rem; }
.footer-legal-links a {
  font-size: 0.82rem;
  color: var(--muted-on-ink);
  text-decoration: none;
}
.footer-legal-links a:hover { color: var(--text-on-ink); }

/* ---------- Reveal & split animations ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}

.js .reveal.is-in { opacity: 1; transform: none; }

/* Word-split headlines: each word wraps in a masked span */
.js [data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Extend the clip box below the baseline so descenders (g, y, p) aren't
     cut off by the tight line-height; negative margin cancels the added
     height so line spacing is unchanged. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.js [data-split] .w > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--wi) * 60ms);
}

.js [data-split].is-in .w > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js [data-split] .w > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .widget { animation: none; }
}