/* ==========================================================================
   Adriana Murray MLO — Site Styles
   Design tokens: navy / beige / white + warm brass accent
   Type: Arial, everywhere — titles and body. System font, no loading needed.
   ========================================================================== */

:root {
  /* Core palette (client-mandated: navy / beige / white) */
  --navy-950: #0b1b2e;
  --navy-900: #12263f;
  --navy-700: #1f3f63;
  --navy-soft: #33587f;
  --beige-100: #f8f3ea;
  --beige-300: #ece0cb;
  --beige-500: #d9c7a3;
  --white: #ffffff;

  /* Warm accent, used for lively details (icons, underlines, blobs) */
  --brass: #b08d57;
  --brass-soft: #d8c19a;

  --text: #1b2430;
  --text-muted: #5c6b79;
  --border: #ddd3c0;

  /* Back-compat aliases used throughout existing markup */
  --navy: var(--navy-900);
  --navy-dark: var(--navy-950);
  --beige: var(--beige-300);
  --beige-light: var(--beige-100);

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 28px rgba(11, 27, 46, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 27, 46, 0.16);
  --max-width: 1120px;
  --header-h: 136px;
  --header-h-scrolled: 104px;

  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 19px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.18;
  margin: 0 0 0.5em;
}

h1, h2 {
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.3rem; font-family: var(--font-body); font-weight: 800; }

p { margin: 0 0 1em; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

section {
  padding: 64px 0;
}

.section-beige {
  background-color: var(--beige-light);
  background-image: radial-gradient(rgba(176, 141, 87, 0.16) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
}

.section-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 36px;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.08rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--brass);
  margin-bottom: 12px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--brass);
}

/* ==========================================================================
   Motion system — progressive enhancement
   Base state = fully visible (no-JS / no-motion safe). The .js html class
   (set synchronously by motion.js) opts elements into a hidden pre-reveal
   state; prefers-reduced-motion always wins and disables transforms.
   ========================================================================== */

.reveal {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}
.js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.split-word {
  display: inline-block;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js .split-word {
  opacity: 0;
  transform: translateY(0.4em);
}
.js .split-word.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .split-word,
  .js .reveal.in-view,
  .js .split-word.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .draw-path { transition: none !important; }
  .hero-art, .parallax { transform: none !important; }
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--brass), var(--navy-900));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.08s linear;
}

/* SVG stroke draw-in (hero house line-art) */
.draw-path {
  transition: stroke-dashoffset 1.1s var(--ease-out);
}

/* Subtle parallax hook */
.parallax {
  will-change: transform;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  text-align: center;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(11, 27, 46, 0.2);
}
.btn-primary:hover { background: var(--navy-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 27, 46, 0.22); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0) scale(0.98); }

.btn-block { display: block; width: 100%; }

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Language switch — lives inside the sticky header, next to the CTA.
   Docked in the header (not floating over content) so it can never cover
   page text on any page, at any viewport width. The playful "¿Hablas
   Español? ¡Yo también!" line lives in the title/aria-label tooltip.
   ========================================================================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: normal;
  text-align: left;
  background: var(--brass);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lang-switch .lang-switch-full { display: block; }
.lang-switch:hover {
  background: var(--navy-dark);
  transform: translateY(-1px);
}
.lang-switch svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.lang-switch .lang-switch-short { display: none; }

@media (max-width: 1100px) {
  .lang-switch { padding: 8px 10px; font-size: 0.82rem; gap: 4px; max-width: none; border-radius: 999px; }
  .lang-switch svg { width: 15px; height: 15px; }
  .lang-switch .lang-switch-full { display: none; }
  .lang-switch .lang-switch-short { display: inline; }
}
@media (min-width: 1101px) and (max-width: 1480px) {
  html[lang="es"] .lang-switch { padding: 8px 10px; font-size: 0.82rem; gap: 4px; max-width: none; border-radius: 999px; }
  html[lang="es"] .lang-switch svg { width: 15px; height: 15px; }
  html[lang="es"] .lang-switch .lang-switch-full { display: none; }
  html[lang="es"] .lang-switch .lang-switch-short { display: inline; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: height var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 4px 20px rgba(11, 27, 46, 0.06);
}

.header-inner {
  width: 100%;
  padding: 0 clamp(20px, 4vw, 64px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: height var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled .header-inner { height: var(--header-h-scrolled); }

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.logo-mark {
  height: 88px;
  width: auto;
  transition: height var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled .logo-mark { height: 66px; }
.site-header.is-scrolled .logo-text { padding: 0; }
.logo-text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  padding: 0 0 1px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-dark);
  font-size: 1.35rem;
  line-height: 24px;
  text-transform: uppercase;
}
.logo-text small {
  text-transform: none;
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--brass);
  font-size: 0.82rem;
  line-height: 16px;
  letter-spacing: 0.03em;
}
.logo-text small.nmls {
  margin-top: 2px;
  line-height: 14px;
  font-weight: 700;
  color: var(--brass);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li { flex-shrink: 0; }

.nav-links a {
  position: relative;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  padding: 6px 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--navy);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.header-cta { flex-shrink: 0; }
.header-cta .btn {
  padding: 15px 30px;
  font-size: 1.05rem;
  box-shadow: 0 6px 20px rgba(11, 27, 46, 0.28), 0 0 0 2px var(--brass-soft);
}
.header-cta .btn:hover {
  box-shadow: 0 10px 26px rgba(11, 27, 46, 0.32), 0 0 0 2px var(--brass);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy-dark);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1340px) {
  .nav-toggle { display: flex; }
  .main-nav { position: relative; }
  .nav-links {
    position: absolute;
    top: calc(var(--header-h) - 4px);
    right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    min-width: 220px;
    display: none;
    border: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 12px 14px; border-radius: 8px; }
  .nav-links a::after { display: none; }
  .nav-links a.active, .nav-links a:hover { background: var(--beige-light); }
}

@media (max-width: 960px) {
  .header-inner { gap: 10px; padding: 0 20px; height: 92px; }
  .site-header.is-scrolled .header-inner { height: 76px; }
  .logo-mark, .site-header.is-scrolled .logo-mark { height: 58px; }
  .logo-text { font-size: 1.1rem; }
  .cta-extra { display: none; }
  .header-cta .btn { padding: 10px 18px; font-size: 0.92rem; }
}
@media (max-width: 960px) {
  html[lang="es"] .logo-text small { display: none; }
  html[lang="es"] .logo-text { justify-content: center; padding: 0; }
}
@media (max-width: 600px) {
  .header-inner { gap: 8px; padding: 0 14px; }
  .logo-mark, .site-header.is-scrolled .logo-mark { height: 42px; }
  .header-cta .btn { padding: 9px 14px; }
  .logo-text small { display: none; }
  .logo-text { font-size: 0.95rem; justify-content: center; padding: 0; }
}
@media (max-width: 480px) {
  .header-inner { gap: 6px; padding: 0 12px; height: 76px; }
  .site-header.is-scrolled .header-inner { height: 64px; }
  .logo-link { gap: 8px; }
  .logo-text small { display: none; }
  .logo-text { font-size: 0.8rem; line-height: 17px; width: 76px; justify-content: center; padding: 0; }
  .logo-mark, .site-header.is-scrolled .logo-mark { height: 38px; }
  .nav-toggle { width: 34px; }
  .lang-switch { padding: 7px 8px; font-size: 0.7rem; }
  .header-cta .btn { padding: 9px 12px; font-size: 0.8rem; box-shadow: none; }
  .cta-extra { display: none; }
}
@media (max-width: 350px) {
  .logo-text { display: none; }
}

/* Hero */
.hero {
  position: relative;
  background: radial-gradient(120% 140% at 15% 0%, var(--beige-100) 0%, var(--white) 55%);
  padding: 72px 0 52px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -12%;
  width: 46%;
  height: 75%;
  background: radial-gradient(circle, var(--beige-500) 0%, transparent 72%);
  opacity: 0.45;
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.hero > .container {
  position: relative;
  z-index: 1;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero-eyebrow {
  color: var(--brass);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.hero h1 { max-width: 1040px; }
.hero p.lead {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 520px;
}
.hero-art { width: 100%; }

.hero-glow {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 60%;
  height: 70%;
  background: radial-gradient(circle, var(--brass-soft) 0%, transparent 70%);
  opacity: 0.35;
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 280px; margin: 0 auto; }
}

/* Full-bleed photo hero — homepage only. Real photography, text laid over
   a navy scrim so it stays readable against any part of the image. */
.hero--photo {
  --scrim: linear-gradient(180deg, rgba(11, 19, 33, 0.72) 0%, rgba(11, 19, 33, 0.45) 45%, rgba(11, 19, 33, 0.8) 100%);
  min-height: 500px;
  height: 78vh;
  max-height: 620px;
  display: flex;
  align-items: center;
  padding: 72px 0;
}
.hero--index { background: var(--scrim), url("../assets/hero-family.jpg") center 30% / cover no-repeat; height: 80vh; max-height: 700px; }
.hero--loans {
  background:
    linear-gradient(90deg, var(--navy-dark) 0%, var(--navy-dark) 40%, rgba(11, 19, 33, 0.6) 58%, rgba(11, 19, 33, 0) 78%),
    url("../assets/hero-loans.jpg") right center / auto 100% no-repeat,
    var(--navy-dark);
}
.hero.hero--loans .hero-inner { text-align: left; width: 100%; }
.hero.hero--loans .hero-eyebrow { justify-content: flex-start; }
.hero.hero--loans h1 { max-width: 640px; font-size: clamp(1.8rem, 3.3vw, 2.7rem); }
.hero.hero--loans p.lead { max-width: 480px; margin-left: 0; margin-right: 0; }
@media (max-width: 860px) {
  .hero--loans { background: var(--scrim), url("../assets/hero-loans.jpg") center 60% / cover no-repeat; }
  .hero.hero--loans .hero-inner { text-align: center; }
  .hero.hero--loans .hero-eyebrow { justify-content: center; }
  .hero.hero--loans p.lead { margin-left: auto; margin-right: auto; }
}
.hero--faq { background: var(--scrim), url("../assets/hero-faq.jpg") center 32% / cover no-repeat; }
.hero--photo::before { content: none; }
.hero--photo .hero-inner {
  display: block;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.hero--photo .hero-eyebrow { color: var(--brass-soft); justify-content: center; }
.hero--photo h1,
.hero--photo p.lead {
  color: var(--white);
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5);
}
.hero--photo h1 { max-width: 100%; }
.hero--photo p.lead {
  color: #e7ecf1;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.hero--photo .cta-row { justify-content: center; }
.hero--photo .btn-outline {
  border-color: var(--white);
  color: var(--white);
}
.hero--photo .btn-outline:hover {
  background: var(--white);
  color: var(--navy-dark);
}

@media (max-width: 640px) {
  .hero--photo { height: auto; min-height: 560px; padding: 120px 0 64px; }
}

/* Roofline section divider — recurring brand callback.
   Placed as the first child of a section, pulled up over the seam so its
   peak appears to crest the boundary like a roofline on the horizon. */
.roofline {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: -30px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Trust / feature cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--beige-500);
  border-radius: var(--radius);
  padding: 32px;
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-top-color: var(--brass);
  border-color: var(--beige-500);
}
.card .icon-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--beige-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover .icon-badge { background: var(--brass-soft); transform: scale(1.06) rotate(-3deg); }
.card .icon {
  width: 30px;
  height: 30px;
  color: var(--navy);
  transition: color var(--dur-base) var(--ease-out);
}
.card:hover .icon { color: var(--navy-dark); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-muted); margin: 0; }

/* ==========================================================================
   Paths — the site's one deliberate, asymmetric signature moment.
   Two contrasting halves instead of another neutral card row: it makes the
   "hand-holding vs. full speed" positioning visible, not just stated.
   ========================================================================== */
.paths-section { padding: 0 0 5px; background: var(--white); }
.paths-intro {
  padding: 20px 0 0;
  text-align: center;
}
.paths-intro .eyebrow { justify-content: center; font-size: 1rem; }
.paths-intro h2 {
  max-width: 1120px;
  margin: 0 auto;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.22;
}

.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  border-bottom: 5px solid var(--brass);
}
@media (max-width: 860px) {
  .paths-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  br.force-break { display: none; }
}

.path {
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (max-width: 860px) {
  .path { padding: 30px 28px; }
}

.path-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.path-icon svg { width: 28px; height: 28px; }

.path-label {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin-bottom: 8px;
}

.path p {
  font-size: 1.08rem;
  max-width: 420px;
  margin: 0 auto;
}

.path-first {
  background: var(--beige-light);
  color: var(--text);
}
.path-first .path-icon { background: var(--white); color: var(--navy); }
.path-first .path-label { color: var(--navy-dark); }
.path-first p { color: var(--text-muted); }

.path-repeat {
  background: var(--navy-dark);
  color: var(--white);
}
.path-repeat .path-icon { background: rgba(255, 255, 255, 0.1); color: var(--brass-soft); }
.path-repeat .path-label { color: var(--white); }
.path-repeat p { color: #c7d0da; }

/* Two-column intro */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* Portrait — Adriana's photo, framed to feel native to the design.
   Always visible: tall elements can fall through the scroll-reveal
   IntersectionObserver threshold, so this opts out of that system. */
.portrait-wrap {
  position: relative;
  max-width: 300px;
}
.js .portrait-wrap.reveal,
.js .portrait-wrap.reveal.in-view {
  opacity: 1;
  transform: none;
}
.portrait-wrap::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  background: var(--beige-300);
  border-radius: var(--radius);
  z-index: 0;
}
.portrait-wrap img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.portrait-wrap--lg {
  max-width: 440px;
}
.portrait-wrap--lg::before {
  inset: 20px -20px -20px 20px;
}

@media (max-width: 860px) {
  .portrait-wrap { max-width: 260px; margin: 0 auto; }
  .portrait-wrap--lg { max-width: 340px; }
}

/* Loan program list */
.program-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 860px) {
  .program-list { grid-template-columns: 1fr; }
}
.program-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--beige-500);
  border-radius: var(--radius);
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-left-color var(--dur-fast) var(--ease-out);
}
.program-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
  border-left-color: var(--brass);
}
@media (max-width: 700px) {
  .program-card:hover { transform: none; }
}
.program-card h3 { color: var(--navy); margin-bottom: 10px; font-size: 1.35rem; }
.program-card .benefits-for {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--brass);
  background: var(--beige-light);
  padding: 6px 12px;
  border-radius: 12px;
}
.program-card p { margin: 0; color: var(--text); font-size: 1.05rem; }

.disclaimer-box {
  background: var(--beige-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 36px;
}

/* FAQ accordion — CSS-only smooth open/close via grid-template-rows */
.faq-group { margin-bottom: 32px; }
.faq-group h2 { margin-bottom: 20px; }
details.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  padding: 4px 22px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
details.faq-item:hover { border-color: var(--beige-500); }
details.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 18px 0;
  color: var(--navy-dark);
  list-style: none;
  position: relative;
  padding-right: 34px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 1.5rem;
  color: var(--brass);
  transition: transform var(--dur-fast) var(--ease-out);
}
details.faq-item[open] summary::after {
  transform: rotate(135deg);
}
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-in-out);
}
details.faq-item[open] .faq-content {
  grid-template-rows: 1fr;
}
.faq-content > p {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 20px;
  color: var(--text-muted);
  font-size: 1.02rem;
  margin: 0;
}

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
}
.form-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 5px solid var(--brass);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}
.form-panel h2 { margin-bottom: 18px; }
.form-panel .form-note {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 26px;
}

/* Quick contact — direct call/WhatsApp actions, no form required */
.quick-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quick-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.quick-contact-item:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.quick-contact-item .icon-badge {
  width: 52px;
  height: 52px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.quick-contact-item .icon-badge .icon { width: 24px; height: 24px; }
.quick-contact-item strong {
  display: block;
  font-size: 1.05rem;
  color: var(--navy-dark);
}
.quick-contact-item small {
  display: block;
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 2px;
}
.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--navy-dark);
}
.field input,
.field select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.02rem;
  font-family: inherit;
  background: var(--beige-light);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(31, 63, 99, 0.15);
}
.form-success {
  display: none;
  background: var(--beige-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 12px;
  color: var(--navy-dark);
  font-weight: 700;
}
.form-success.visible { display: block; animation: fade-rise 0.5s var(--ease-out); }

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer */
.site-footer {
  background: var(--navy-dark);
  color: var(--beige-light);
  padding: 44px 0 30px;
  margin-top: 40px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
}
.footer-brand svg { width: 28px; height: 28px; }
.footer-brand .logo-mark { height: 44px; width: auto; }
.logo-mark--invert { filter: brightness(0) invert(1); }
.footer-legal {
  font-size: 1rem;
  color: #d7dee6;
  line-height: 1.75;
  margin: 0;
}
.footer-note {
  font-size: 0.9rem;
  color: #93a4b6;
  margin: 0;
}

/* Utility */
.center { text-align: center; }
.mt-lg { margin-top: 40px; }

.form-privacy { margin: 14px 0 0; font-size: 0.85rem; color: var(--slate-600, #5b6676); text-align: center; line-height: 1.5; }

.hero:not(.hero--photo) + section { padding-top: 24px; }
.split--about { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
.split--about .portrait-wrap--lg { max-width: 400px; justify-self: end; }
@media (max-width: 860px) {
  .split--about { grid-template-columns: 1fr; }
  .split--about .portrait-wrap--lg { justify-self: center; }
}

/* Footer: partner logo on the right, EHO line */
.footer-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-main { display: flex; flex-direction: column; gap: 16px; flex: 1 1 420px; min-width: 0; }
.footer-main p { margin: 0; }
.footer-partner { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; margin-left: auto; }
.footer-partner img { height: 160px; max-width: 100%; width: auto; object-fit: contain; background: var(--white); padding: 10px 16px; border-radius: 10px; }
.footer-partner-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; color: var(--white); text-align: right; }
.footer-eho { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; }
.eho-mark { height: 64px; width: auto; flex-shrink: 0; background: var(--white); padding: 4px 6px; border-radius: 6px; }
@media (max-width: 700px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-partner { justify-content: flex-start; margin-left: 0; }
}

.form-error { display: none; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius); background: #fbeaea; color: #8a2a2a; font-weight: 600; }
.form-error.visible { display: block; }

/* ==========================================================================
   Social-media landing page (landing-page.html) — short, single goal:
   schedule a call. Not linked from the main navigation.
   ========================================================================== */
.lp-hero {
  background:
    linear-gradient(105deg, rgba(11, 19, 33, 0.9) 0%, rgba(11, 19, 33, 0.72) 55%, rgba(11, 19, 33, 0.55) 100%),
    url("../assets/hero-family.jpg") center 30% / cover no-repeat;
  padding: 56px 0 64px;
  color: var(--white);
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.lp-hero-copy .hero-eyebrow { color: var(--brass-soft); }
.lp-hero-copy h1 {
  color: var(--white);
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  max-width: 640px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5);
}
.lp-hero-copy p.lead {
  color: #e7ecf1;
  max-width: 560px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.lp-card { scroll-margin-top: calc(var(--header-h-scrolled) + 16px); }
.lp-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.lp-success { text-align: center; }
.lp-success strong { display: block; font-size: 1.4rem; color: var(--navy-dark); margin-bottom: 4px; }
.lp-success p { margin: 0 0 16px; color: var(--text); }
form.is-sent .field,
form.is-sent button[type="submit"],
form.is-sent .form-privacy { display: none; }
.lp-meet { grid-template-columns: 300px 1fr; gap: 56px; }
@media (max-width: 860px) {
  .lp-hero { padding: 36px 0 44px; background-position: 65% 30%; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-meet { grid-template-columns: 1fr; gap: 28px; }
  .lp-meet .portrait-wrap { margin: 0 auto; }
}
.logo-link + .lang-switch { margin-left: auto; }
.lp-card.is-sent .form-note { display: none; }