/* =============================================================
 * mono.css — GALINDO GROUP KINSHIP LAYER (Luis, 10/1/2026)
 * Loaded LAST on every page, after tokens.css, _shared.css and the
 * page-level <style> blocks, so it wins cascade ties.
 *
 * Brief: "make it feel like galindogrouprealestate.com; a lot less
 * red, maybe none; it feels really dark — go predominantly light."
 *
 *  1. Light pages. White + #F7F7F7 alternating sections, black
 *     type, #454545 body copy. Dark only as accents: hero photo,
 *     the calculator card, the neighborhood band, the closing CTA
 *     band and the footer.
 *  2. Gold (#B68F3F) is the single accent; it fills the legacy
 *     --red slot so every old red highlight becomes gold.
 *  3. Type: Special Gothic Expanded One display caps (Galindo's
 *     face), two-tone black + gold headings, tracked-out eyebrows.
 *     Big numbers use Special Gothic 700 (regular width) so they fit.
 *  4. Square corners, hairline borders, gold-gradient CTA blocks
 *     with a fine light border (Galindo's "LET'S GO" treatment).
 *  5. Header: white bar with black logo; on the home page it sits
 *     transparent over the skyline and turns white on scroll.
 * ============================================================= */

/* ── TYPE ─────────────────────────────────────────────────── */
h1, h2, h3, .t-poster, .t-monumental, .t-display, .t-h1, .t-h2, .t-h3,
.hero-headline, .diff-card h3, .product-card h3, .process-step h3,
.res-card h3, .tcard h3, .nh-loan-card h3, .nhx-body h3, .team-card .name,
.fmeta .name, .test-card .who, .footer-brand .wordmark {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  line-height: 0.98 !important;
}
/* page titles */
h1 { font-size: clamp(34px, 4.4vw, 72px) !important; }
.hero-headline { font-size: clamp(36px, 4.9vw, 80px) !important; line-height: 0.96 !important; }
.ahero-c h1, .chead h1, .arail h1, .phero h1, .dhero-copy h1, .nh-hero h1, .ww-hero h1 { font-size: clamp(32px, 4.2vw, 68px) !important; }
/* section headings */
h2 { font-size: clamp(28px, 3.3vw, 56px) !important; }
.sub h2, .nh-cta h2, .ww-cta h2, .nh-loans h2, .team-cta p { font-size: clamp(24px, 2.6vw, 42px) !important; }
/* card / step headings */
h3, .team-card .name, .fmeta .name, .diff-card h3 { font-size: clamp(18px, 1.5vw, 23px) !important; line-height: 1.08 !important; }
.product-card h3, .res-card h3, .tcard h3, .nh-loan-card h3, .nhx-body h3, .process-step h3, .how-step h3 { font-size: 19px !important; line-height: 1.1 !important; }
.test-card .who { font-size: 13px !important; letter-spacing: 0.06em !important; }
.pillar h3 { font-size: 22px !important; }

/* Big numbers: the expanded face is too wide for figures. Regular-width
   Special Gothic, bold, tight. */
.num, .big, .val, .trust-item .num, .calc-output .num, .cresult .num, .icalc .out .num,
.nh-stats .v, .process-step .num, .pillar .num, .how-step .num, .diff-card .num,
.product-card .num, .stat .v, .ww-stats .v, .key-figs .v, .refi-cards .big, .tkrow .rate,
.fprose .dropcap::first-letter, .fdravatar .initials, .cresult .bdi .bdv, .hoods-track a, .hoods-track span {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.diff-card .num, .product-card .num { font-family: var(--font-sans) !important; font-weight: 600 !important; letter-spacing: 0.22em !important; font-size: 11px !important; color: var(--gold) !important; }
.cresult .num { font-size: clamp(56px, 7vw, 120px) !important; line-height: 0.95 !important; }
.calc-output .num { font-size: clamp(48px, 5vw, 76px) !important; }
.process-step .num { font-size: 56px !important; color: var(--gold) !important; }
.pillar .num { font-size: 44px !important; }

/* body copy: Galindo's 16/28 grey */
p { color: inherit; }
.hero-sub, .intro, .lede, .dek, .positioning, .tagline, .diff-card p, .product-card p, .process-step p,
.res-card .dek, .pillar p, .nh-grid p, .nh-loan-card p, .nhx-body p, .calc-left p, .cta-band p,
.endcta p, .sub-form p, .arail .lede { letter-spacing: 0.02em; }

/* eyebrows */
.t-eyebrow { color: var(--gold) !important; letter-spacing: 0.26em !important; font-weight: 600 !important; font-size: 11px !important; }
.eyebrow-row::before { background: var(--gold) !important; height: 1px !important; width: 36px !important; }
.t-micro, .field-label, .footer-col h4, .fmeta h4, .sb-block h4 { letter-spacing: 0.22em !important; }

/* ── SURFACES: light, square, hairline ───────────────────── */
.diff-card, .product-card, .test-card, .res-card, .card, .tcard, .nh-loan-card, .nhx-card,
.process-grid, .rcard, .lp, .fdrcard, .how-step, .elig, .rates-tbl, .ctable, .ltable,
.pcta-card, .mission-card, .signup-card, .icalc, .photo, .fillimg, .nh-photo, .fdravatar, .input,
.nav-mobile-panel, .pill, .nh-more .links a, .team-card, .team-card .actions .mini-btn, .tcard .mb {
  border-radius: 0 !important;
}
.diff-card, .product-card, .test-card, .res-card, .card, .tcard, .nh-loan-card, .nhx-card,
.process-grid, .rcard, .lp, .team-card {
  background: #FFFFFF !important;
  border: 1px solid #E6E6E6 !important;
  box-shadow: none !important;
}
.diff-card:hover, .product-card:hover, .test-card:hover, .res-card:hover, .card:hover, .tcard:hover,
.nh-loan-card:hover, .nhx-card:hover, .rcard:hover, .lp:hover, .team-card:hover {
  border-color: #D2D2D2 !important;
  box-shadow: 0 22px 44px -18px rgba(10,10,10,0.16) !important;
}
.process-grid { background: #FFFFFF !important; }
.process-step:hover { background: var(--bg-warm) !important; }
.test-card::before { background: var(--gold) !important; height: 2px !important; width: 40px !important; }
.pcta-card, .mission-card, .signup-card, .calc-callout .calc-card, .icalc, .pillar, .elig, .how-step {
  background: var(--bg-warm) !important;
  border: 1px solid #E6E6E6 !important;
}
.how-step { border-top: 2px solid var(--gold) !important; }
.pillar { border-top: 2px solid var(--gold) !important; }
.icalc::before { border-color: var(--gold) !important; }
.rates-tbl th, .ctable th, .ltable th { background: var(--bg-warm) !important; color: var(--fg-1) !important; }
.photo { background: linear-gradient(160deg, #E9E9E9 0%, #D7D7D7 100%) !important; }

/* buttons */
.btn {
  border-radius: 0 !important;
  padding: 17px 30px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn:hover { background: var(--ink) !important; color: #FFFFFF !important; }
.btn-red, .nav-mobile-cta, .sub-form button, .rp.sel, .ltable .status, .pip.active .dot {
  background: linear-gradient(180deg, #CDA552 0%, #B08838 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #E3C77C !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
.btn-red:hover { background: linear-gradient(180deg, #B99242 0%, #9A7733 100%) !important; color: #FFFFFF !important; border-color: #D4B46A !important; }
.btn-dark { background: var(--ink) !important; color: #FFFFFF !important; border-color: var(--ink) !important; }
.btn-dark:hover { background: var(--gold) !important; border-color: var(--gold) !important; }
.btn-ghost-light {
  border: 1px solid rgba(255,255,255,0.75) !important;
  color: #FFFFFF !important;
  background: rgba(0,0,0,0.18) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: #FFFFFF !important; color: var(--ink) !important; border-color: #FFFFFF !important; }
.arrow-link, .btn-link {
  font-weight: 600 !important; letter-spacing: 0.18em !important; font-size: 11px !important;
  border-bottom: 1px solid var(--gold) !important; color: var(--fg-1) !important;
}
.arrow-link:hover, .btn-link:hover { color: var(--gold) !important; }
.team-card .actions .mini-btn, .tcard .mb { border: 1px solid var(--hairline-dark-strong) !important; background: transparent !important; color: var(--fg-1) !important; letter-spacing: 0.14em !important; }
.team-card .actions .mini-btn:hover, .tcard .mb:hover { background: var(--ink) !important; color: #FFFFFF !important; border-color: var(--ink) !important; }
.tcard:hover { box-shadow: 0 22px 44px -18px rgba(10,10,10,0.16) !important; }
.pill { background: var(--gold-pale) !important; color: var(--ink) !important; letter-spacing: 0.18em !important; }
.pill.outlined { background: transparent !important; border: 1px solid var(--ink) !important; }
.input { background: #FFFFFF !important; border: 1px solid var(--hairline-dark-strong) !important; color: var(--fg-1) !important; }
.input:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px var(--red-soft) !important; }
.input::placeholder { color: var(--fg-4) !important; }
.scroll-progress { background: var(--gold) !important; }
.hairline-red { background: var(--gold) !important; height: 1px !important; }
.nh-more .links a { border: 1px solid var(--hairline-dark-strong) !important; color: var(--fg-1) !important; letter-spacing: 0.08em; }
.nh-more .links a:hover { background: var(--ink) !important; color: #FFFFFF !important; border-color: var(--ink) !important; }

/* ── HEADER: white bar, black logo; transparent over the home hero ── */
header.nav {
  position: sticky !important;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(10,10,10,0.08) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
header.nav .nav-inner { height: 84px; padding: 0 var(--gutter); gap: 30px; }
header.nav .nav-brand { flex-shrink: 0; }
header.nav .nav-brand img {
  height: 38px !important;
  /* the lockup file is white; the bar is white, so flip it to black */
  filter: invert(1) brightness(0.08);
  transition: filter var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}
header.nav .nav-links { gap: 26px; flex-wrap: nowrap; }
header.nav .nav-links > a {
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--fg-1); white-space: nowrap; padding: 30px 0;
  transition: color var(--dur-fast);
}
header.nav .nav-links > a::after { background: var(--gold); height: 1px; bottom: 26px; }
header.nav .nav-cta {
  flex-shrink: 0;
  background: transparent !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--fg-1) !important;
  border-radius: 0 !important;
  padding: 12px 22px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
  transform: none !important;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
header.nav .nav-cta:hover { background: var(--fg-1) !important; color: #FFFFFF !important; }
header.nav .nav-mobile-toggle span { background: var(--fg-1); }
header.nav.is-scrolled {
  background: rgba(255,255,255,0.96) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 10px 30px -18px rgba(10,10,10,0.18) !important;
}
header.nav.is-scrolled .nav-inner { padding-top: 0; padding-bottom: 0; }
header.nav.is-scrolled .nav-brand img { height: 34px !important; }
@media (max-width: 1240px) {
  header.nav .nav-links { gap: 18px; }
  header.nav .nav-links > a { font-size: 10.5px; letter-spacing: 0.12em; }
}
/* Home: float transparent over the skyline until the page scrolls */
body[data-nav="home"] header.nav {
  position: fixed !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
}
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-brand img { filter: none; }
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-links > a { color: #FFFFFF; }
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-cta { color: #FFFFFF !important; border-color: rgba(255,255,255,0.75) !important; }
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-cta:hover { background: #FFFFFF !important; color: var(--ink) !important; }
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-mobile-toggle span { background: #FFFFFF; }
body[data-nav="home"] header.nav.is-scrolled {
  background: rgba(255,255,255,0.96) !important;
  border-bottom-color: rgba(10,10,10,0.08) !important;
}
/* mobile panel: white */
@media (max-width: 1024px) {
  .nav-mobile-panel {
    background: #FFFFFF !important;
    border-top: 1px solid rgba(10,10,10,0.08) !important;
    max-height: calc(100vh - 84px);
  }
  .nav-mobile-panel nav a {
    color: var(--fg-1) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: 0.16em !important; text-transform: uppercase !important;
    border-bottom: 1px solid rgba(10,10,10,0.08) !important;
  }
  .nav-mobile-panel nav a.active { color: var(--gold) !important; }
  .nav-mobile-cta { border-radius: 0 !important; letter-spacing: 0.18em !important; }
  /* the toggle is white over the hero; the open panel is white, so make it black again */
  body[data-nav="home"] header.nav:not(.is-scrolled) .nav-mobile-toggle.is-open span { background: var(--fg-1); }
  body[data-nav="home"] header.nav:not(.is-scrolled):has(.nav-mobile-toggle.is-open) { background: #FFFFFF !important; }
  body[data-nav="home"] header.nav:not(.is-scrolled):has(.nav-mobile-toggle.is-open) .nav-brand img { filter: invert(1) brightness(0.08); }
  body[data-nav="home"] header.nav:not(.is-scrolled):has(.nav-mobile-toggle.is-open) .nav-cta { color: var(--fg-1) !important; border-color: var(--fg-1) !important; }
}
@media (max-width: 760px) {
  header.nav .nav-inner { height: 68px; padding: 0 20px; }
  header.nav .nav-brand img { height: 32px !important; }
}

/* ── HOME HERO ────────────────────────────────────────────── */
.hero { min-height: 92vh !important; }
.hero-bg { filter: brightness(0.9) saturate(0.9) !important; }
.hero-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.78) 100%) !important;
}
.hero-content { max-width: 1100px !important; padding: 150px 0 clamp(32px, 4vw, 56px) !important; }
.hero-eyebrow .t-eyebrow { color: #E3C77C !important; }
.hero-headline, .hero-headline .l2 { color: #FFFFFF !important; text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
.hero-headline .block { color: var(--gold-light) !important; }
.hero-sub { color: rgba(255,255,255,0.9) !important; font-size: 17px !important; max-width: 560px !important; letter-spacing: 0.02em; }
.hero-actions { margin-bottom: 40px; }
/* Galindo-style quick-nav blocks along the bottom of the hero */
.hero-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  width: 100%;
}
.hero-quick a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 26px;
  background: linear-gradient(180deg, rgba(205,165,82,0.86) 0%, rgba(166,128,52,0.86) 100%);
  border: 1px solid rgba(255,255,255,0.65);
  outline: 1px solid rgba(255,255,255,0.22); outline-offset: -7px;
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--dur-fast), transform var(--dur-fast), outline-color var(--dur-fast);
}
.hero-quick a:hover { background: linear-gradient(180deg, #CDA552 0%, #A68034 100%); transform: translateY(-2px); outline-color: rgba(255,255,255,0.5); }
.hero-quick .k { font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.92; }
.hero-quick .v { font-family: var(--font-display); font-size: clamp(16px, 1.3vw, 21px); text-transform: uppercase; line-height: 1; }
@media (max-width: 1024px) { .hero-quick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .hero-quick { grid-template-columns: 1fr; gap: 10px; }
  .hero-quick a { padding: 18px 20px; }
  .hero { min-height: 100svh !important; }
  .hero-content { padding-top: 120px !important; }
}
/* mascot: smaller, tucked right, under the quick-nav so it never covers copy */
.hero .homie-home { height: min(34vh, 300px) !important; bottom: auto !important; top: 110px !important; right: 3vw !important; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)) !important; }
@media (max-width: 1080px) { .hero .homie-home { height: 180px !important; top: 90px !important; right: 2vw !important; } }
@media (max-width: 640px)  { .hero .homie-home { height: 120px !important; top: 84px !important; right: -4px !important; opacity: 0.9; } }

/* trust strip */
.trust { background: #FFFFFF !important; padding: 34px 0 !important; border-top: none !important; border-bottom: 1px solid var(--hairline-dark) !important; }
.trust-item { border-left: 1px solid var(--hairline-dark) !important; }
.trust-item:first-child { border-left: none !important; }
.trust-item .num { font-size: 26px !important; }
.trust-item.brand .num { color: var(--gold) !important; }

/* neighborhood band: the one dark ribbon on the page */
.hoods { background: #0A0A0A !important; border-top: none !important; border-bottom: none !important; padding: 22px 0 !important; }
.hoods-track a, .hoods-track span { font-size: 15px !important; letter-spacing: 0.18em !important; font-weight: 600 !important; color: rgba(255,255,255,0.6) !important; text-transform: uppercase; padding: 0 22px !important; }
.hoods-track a::after, .hoods-track span::after { color: var(--gold) !important; margin-left: 22px !important; }
.hoods-track a:hover { color: #FFFFFF !important; }

/* home sections: airy rhythm, white / grey alternation */
.difference { background: #FFFFFF !important; }
.products { background: var(--bg-warm) !important; }
.calc-section { background: #FFFFFF !important; }
.process { background: var(--bg-warm) !important; }
.testimonials { background: #FFFFFF !important; }
.resources-teaser { background: var(--bg-warm) !important; }
.diff-head, .products-head, .process-head, .testimonials-head, .resources-head { margin-bottom: 56px !important; }
.diff-card { min-height: 0 !important; padding: 36px 32px !important; }
.diff-card .arrow-link { border-color: var(--gold) !important; }
.testimonials-head .rating .stars, .test-card .stars { color: var(--gold) !important; }

/* calculator card: black accent, gold frame */
.calc-card {
  background: #0A0A0A !important; color: #FFFFFF !important;
  border-radius: 0 !important; padding: 48px 44px !important;
}
.calc-card::before { border: 1px solid var(--gold) !important; border-radius: 0 !important; top: 12px !important; left: 12px !important; right: -12px !important; bottom: -12px !important; }
.calc-output { border-bottom: 1px solid rgba(255,255,255,0.14) !important; }
.calc-output .label { color: var(--gold-light) !important; }
.calc-output .num { color: #FFFFFF !important; }
.calc-output .num .small { color: rgba(255,255,255,0.5) !important; }
.calc-output .sub, .slider-row .name { color: rgba(255,255,255,0.58) !important; }
.slider-row .val { color: #FFFFFF !important; }
.slider-track { background: rgba(255,255,255,0.22) !important; }
.slider-thumb { border-color: #0A0A0A !important; background: var(--gold-light) !important; box-shadow: 0 0 0 1px var(--gold-light) !important; }

/* closing CTA band: black with gold */
.cta-band { background: #0A0A0A !important; border-top: none !important; padding: 120px 0 !important; }
.cta-band h2 { color: #FFFFFF !important; }
.cta-band h2 .accent { color: var(--gold-light) !important; }
.cta-band p { color: rgba(255,255,255,0.72) !important; }
.cta-band .t-eyebrow { color: var(--gold-light) !important; }
.cta-band .btn-red { border-color: rgba(255,255,255,0.5) !important; }
.cta-band::before, .cta-band::after { background: rgba(182,143,63,0.08) !important; }

/* ── INTERIOR: dark CTA bands + photo heroes keep white type ── */
.dcta, .acta, .nh-cta, .ww-cta, .ccta.dark {
  background: #0A0A0A !important; color: #FFFFFF !important;
  border-top: none !important; border-bottom: none !important;
}
.dcta h2, .acta h2, .nh-cta h2, .ww-cta h2 { color: #FFFFFF !important; }
.dcta h2 .accent, .acta h2 .accent, .nh-cta h2 .accent, .ww-cta h2 .accent { color: var(--gold-light) !important; }
.dcta p, .acta p, .nh-cta p, .ww-cta p { color: rgba(255,255,255,0.74) !important; }
.dcta .t-eyebrow, .acta .t-eyebrow, .nh-cta .t-eyebrow, .ww-cta .t-eyebrow { color: var(--gold-light) !important; }
.dcta .btn:not(.btn-red):not(.btn-ghost-light), .acta .btn:not(.btn-red):not(.btn-ghost-light),
.nh-cta .btn:not(.btn-red):not(.btn-ghost-light), .ww-cta .btn:not(.btn-red):not(.btn-ghost-light) {
  background: #FFFFFF !important; color: var(--ink) !important; border-color: #FFFFFF !important;
}
.dcta .btn:not(.btn-red):hover, .acta .btn:not(.btn-red):hover, .nh-cta .btn:not(.btn-red):hover, .ww-cta .btn:not(.btn-red):hover {
  background: var(--gold) !important; border-color: var(--gold) !important; color: #FFFFFF !important;
}

/* photo heroes (about, hoods, work-with-us, resources featured, contact image column) */
.ahero-c, .nh-hero, .ww-hero, .fc, .cimg-c { color: #FFFFFF !important; }
.ahero-c h1, .nh-hero h1, .ww-hero h1, .fc h1, .fc h2, .fc h3, .cimg-c h1, .cimg-c h2,
.nh-hero .tagline, .ww-hero .tagline, .ww-hero .lede, .ww-hero p, .nh-hero p,
.nh-stats .v, .ww-stats .v, .ww-hero .v, .fc .dek, .fc .meta, .fc .byline,
.cimg-c .channel .value, .cimg-c .channel a, .cimg-c .hours .d, .cimg-c .hours .h, .cimg-c .hours .t, .cimg-c p {
  color: #FFFFFF !important;
}
.nh-hero .tagline, .ww-hero .lede, .ww-hero p, .nh-hero p, .fc .dek, .cimg-c .channel .meta, .cimg-c .hours .d, .cimg-c p { color: rgba(255,255,255,0.84) !important; }
.nh-stats .k, .ww-stats .k, .ww-hero .k, .fc .meta, .fc .byline { color: rgba(255,255,255,0.7) !important; }
.ahero-c h1 .accent, .nh-hero h1 .accent, .ww-hero h1 .accent, .fc .accent { color: var(--gold-light) !important; }
.ahero-c .t-eyebrow, .nh-hero .t-eyebrow, .ww-hero .t-eyebrow, .fc .t-eyebrow, .cimg-c .t-eyebrow { color: #E3C77C !important; }
.nh-stats { border-top-color: rgba(255,255,255,0.28) !important; }
.channel { border-top-color: rgba(255,255,255,0.25) !important; }
.hours { border-top-color: rgba(255,255,255,0.2) !important; }
.cimg-c .channel .meta { color: rgba(255,255,255,0.7) !important; }
.mapthumb { background: linear-gradient(140deg, rgba(255,255,255,0.08) 0%, rgba(182,143,63,0.18) 100%), #111 !important; }
.nh-hero, .ww-hero { padding-top: 96px !important; min-height: 60vh !important; }
.nh-hero .scrim, .ww-hero .scrim { background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.82) 100%) !important; }
.ahero { height: 640px !important; }
.ahero .ov { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%) !important; }

/* light interior panels that were black */
.csidebar, .meaning { background: var(--bg-warm) !important; }
.meaning { border-bottom: 1px solid var(--hairline-dark) !important; }
.csidebar { border-left: 1px solid var(--hairline-dark); }
.cwork { border-right: none !important; }
.chead { border-bottom: 1px solid var(--hairline-dark) !important; }
.ctabs { border-bottom: 1px solid var(--hairline-dark) !important; }
.ctab.active { background: linear-gradient(to bottom, transparent, rgba(182,143,63,0.08)) !important; }
.tkhead .live::before { box-shadow: 0 0 0 3px rgba(182,143,63,0.22) !important; }
.tkrow .delta.down { color: #2E7D4F !important; }
.tkrow .delta.up { color: #B4452B !important; }
.mapthumb .pin { box-shadow: 0 0 0 6px rgba(182,143,63,0.25), 0 0 0 12px rgba(182,143,63,0.10) !important; }
.photo.dusk { background: linear-gradient(160deg, #DADADA 0%, #C9C9C9 100%) !important; }
.eqbar { border-top: 1px solid var(--hairline-dark); }
.fdravatar { border-radius: 0 !important; }
.tcard:hover { box-shadow: 0 22px 44px -18px rgba(10,10,10,0.16) !important; }

/* calculator page compaction (kept from 8/27) */
.chead { padding: 56px 0 32px !important; }
.chead .desc { font-size: 15px !important; max-width: 440px !important; }
.ctab { padding: 16px 20px !important; }
.ctab .lbl { font-size: 15px !important; letter-spacing: 0.08em; }
.cwork { padding: 40px 48px !important; }
.csidebar { padding: 40px 32px !important; }
.cresult .label { margin-bottom: 10px !important; }
.cresult .scenario { margin-top: 10px !important; }
.cresult .bd { margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid var(--hairline-dark) !important; }
.cresult .bdi { border-right: 1px solid var(--hairline-dark) !important; }
.cresult .bdi .bdv { font-size: 21px !important; }
.cinputs { margin-top: 34px; }
@media (min-width: 1081px) {
  .cwork { display: grid !important; grid-template-columns: 1fr 0.95fr; gap: 48px; align-items: start; }
  .cresult { position: sticky; top: 104px; }
  .cresult .num { font-size: clamp(40px, 3.8vw, 60px) !important; }
  .cinputs { grid-template-columns: 1fr !important; margin-top: 0 !important; gap: 24px 0 !important; }
  .cresult .bd { grid-template-columns: 1fr 1fr !important; gap: 16px 0 !important; }
  .cresult .bdi:nth-child(even) { border-right: none !important; }
  .camort-curve { max-height: 96px; }
}
.tkrow { padding: 12px 0 !important; border-bottom: 1px solid var(--hairline-dark) !important; }
.tkrow .rate { font-size: 19px !important; }
.meaning { padding: 56px 0 !important; }
.ccta { padding: 72px 0 !important; }
.camort { border-top: 1px solid var(--hairline-dark) !important; }
.camort-bar { background: #E6E6E6 !important; }
.camort-bar .seg-p { background: var(--ink) !important; color: #FFFFFF !important; }
.camort-bar .seg-i { background: var(--gold) !important; }
.camort-k .k-p { background: var(--ink) !important; }
.camort-k .k-i { background: var(--gold) !important; }

/* ── FOOTER: black, gold labels, white lockup ─────────────── */
.footer { background: #0A0A0A !important; padding: 96px 0 32px !important; }
.footer-top { border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.footer-col h4 { color: var(--gold-light) !important; font-size: 10.5px !important; }
.footer-col a { letter-spacing: 0.02em; }
.footer-brand .tagline { color: rgba(255,255,255,0.62) !important; letter-spacing: 0.02em; }
.footer-eqhouse { color: rgba(255,255,255,0.78) !important; }
.footer-meta-links a:hover { color: var(--gold-light) !important; }

/* ── SOCIAL RAIL (left edge, Galindo pattern) ───────────── */
.social-rail {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 55;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.social-rail a {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(10,10,10,0.3);
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all var(--dur-fast) var(--ease-out);
}
.social-rail a svg { width: 15px; height: 15px; fill: var(--ink); }
.social-rail a:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.social-rail a:hover svg { fill: #FFFFFF; }
.social-rail .rail-label {
  margin-top: 8px;
  writing-mode: vertical-rl;
  font-size: 9px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--fg-3);
}
.social-rail .rail-label::before {
  content: ""; display: block; width: 1px; height: 28px;
  background: rgba(10,10,10,0.3); margin: 0 auto 10px;
}
body[data-nav="home"] .social-rail .rail-label { color: rgba(255,255,255,0.75); }
body[data-nav="home"] .social-rail .rail-label::before { background: rgba(255,255,255,0.5); }
@media (max-width: 1180px) { .social-rail { display: none; } }

/* focus rings */
a:focus-visible, button:focus-visible, .si:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold) !important; outline-offset: 3px; border-radius: 0 !important;
}

/* Homie on the community page */
.phero .homie-hero { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18)); }

/* late additions: over-photo text on contact + work-with-us */
.ww-hero .sub, .cimg-c .map-block .addr, .cimg-c .channel .value, .cimg-c .hours .d .name { color: #FFFFFF !important; }
.ww-hero .sub { color: rgba(255,255,255,0.86) !important; }
.channel .value { font-family: var(--font-display) !important; font-size: 26px !important; letter-spacing: 0 !important; }
.channel .value.email { font-size: 17px !important; font-family: var(--font-sans) !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: none !important; }

/* QA pass 1 (10/1) */
.hero .homie-home { position: absolute !important; z-index: 2; pointer-events: none; }
@media (min-width: 1181px) { :root { --gutter: 96px; } }   /* clear the social rail */
@media (max-width: 560px) {
  .hero-eyebrow .t-eyebrow { white-space: nowrap; letter-spacing: 0.2em !important; font-size: 10px !important; }
  .eyebrow-row::before { width: 24px !important; }
}

/* QA pass 2 (10/1): phone fixes */
@media (max-width: 1024px) {
  .ctabs { flex-wrap: wrap; }
  .ctab { flex: 1 1 33%; min-width: 0; padding: 14px 10px !important; }
  .ctab .lbl, .ctab .nm { white-space: normal; font-size: 12px !important; letter-spacing: 0.06em; }
}
@media (max-width: 560px) {
  .ctab { flex: 1 1 100%; text-align: left; }
  .hours { grid-template-columns: 1fr !important; }
  .hours .d { flex-wrap: wrap; gap: 4px 12px; }
}
/* phone: mascot sits under the header, headline starts below it */
@media (max-width: 640px) {
  .hero .homie-home { top: 74px !important; height: 112px !important; right: 6px !important; }
  .hero-content { padding-top: 198px !important; }
}

/* ── HOMIE, full body (10/1): stands on the quick-nav blocks, bottom-right ── */
.hero-content { max-width: none !important; }           /* content spans the container; goat sits at the far right */
.hero-headline, .hero-sub { max-width: 760px; }
.hero-stage { position: relative; }
.hero .homie-home {
  position: absolute !important;
  right: 0 !important; left: auto !important;
  bottom: 100% !important; top: auto !important;        /* feet on the top edge of the gold blocks */
  height: clamp(300px, 29vw, 440px) !important; width: auto !important;
  margin-bottom: -6px;                                   /* overlap the border by a hair so he reads grounded */
  z-index: 3; pointer-events: none;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)) !important;
  animation: none !important;
}
@media (max-width: 1360px) { .hero .homie-home { height: clamp(260px, 25vw, 360px) !important; } .hero-headline { max-width: 640px; } }
@media (max-width: 1024px) {
  .hero .homie-home { height: 230px !important; }
}
@media (max-width: 640px) {
  /* phone: small, top-right under the header, copy starts below him */
  .hero .homie-home { position: absolute !important; top: 78px !important; bottom: auto !important; right: 8px !important; height: 150px !important; margin: 0; }
  .hero-stage { position: static; }
  .hero-content { padding-top: 236px !important; }
}
@media (max-width: 1360px) { .trust-item.brand .num { font-size: 18px !important; white-space: nowrap; } .trust-item .num { font-size: 22px !important; } }

/* ── BIG CENTERED LOGO + CENTERED MENU on the home hero (Luis 10/1) ───────── */
/* header over the hero: links centered, no small logo, Apply pinned right */
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-inner { position: relative; justify-content: center; }
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-brand { position: absolute; left: var(--gutter); opacity: 0; pointer-events: none; }
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-links { margin: 0; }
body[data-nav="home"] header.nav:not(.is-scrolled) .nav-cta { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%) !important; margin: 0; }
body[data-nav="home"] header.nav .nav-brand { transition: opacity var(--dur-base) var(--ease-out); }
/* once scrolled the normal bar returns: small logo left, links right (default rules) */

/* hero: centered stack under the big logo */
.hero-logo { display: block; width: max-content; margin: 0 auto 26px; }
.hero-logo img { height: clamp(150px, 17vw, 250px) !important; width: auto; filter: drop-shadow(0 12px 40px rgba(0,0,0,0.5)); }
.hero-content { padding-top: 112px !important; text-align: center; }
.hero-eyebrow { display: flex !important; justify-content: center; }
.hero-headline, .hero-sub { margin-left: auto !important; margin-right: auto !important; }
.hero-headline { max-width: 820px !important; }
.hero-sub { max-width: 620px !important; }
.hero-actions { justify-content: center; }
.hero .homie-home { height: clamp(280px, 27vw, 400px) !important; }
@media (max-width: 1360px) { .hero .homie-home { height: clamp(240px, 24vw, 330px) !important; } .hero-headline { max-width: 680px !important; } }
@media (max-width: 1024px) {
  /* hamburger header: no links to center; keep Apply + burger on the right */
  body[data-nav="home"] header.nav:not(.is-scrolled) .nav-inner { justify-content: flex-end; }
  body[data-nav="home"] header.nav:not(.is-scrolled) .nav-cta { position: static; transform: none !important; margin-left: auto; }
  .hero-logo img { height: clamp(120px, 20vw, 180px) !important; }
}
@media (max-width: 640px) {
  .hero-content { padding-top: 96px !important; }
  .hero-logo { margin-bottom: 22px; }
  .hero-logo img { height: 104px !important; }   /* ~192px wide: clears the goat at the right edge */
  .hero .homie-home { top: 90px !important; right: 2px !important; height: 136px !important; }
  .hero-headline { text-align: left; }
  .hero-eyebrow { justify-content: flex-start; }
  .hero-sub { text-align: left; }
}
/* fit: two-line headline, slightly smaller logo, tighter stack so the quick-nav stays near the fold */
.hero-logo img { height: clamp(140px, 15.5vw, 224px) !important; }
.hero-logo { margin-bottom: 18px; }
.hero-content { padding-top: 104px !important; }
.hero-headline { max-width: 1040px !important; margin-bottom: 16px !important; }
.hero-sub { font-size: 16px !important; margin-bottom: 24px !important; }
.hero-actions { margin-bottom: 34px; }
@media (max-width: 1360px) { .hero-headline { max-width: 900px !important; } }
/* centered-menu breathing room at mid widths; phone logo sized to clear the goat */
@media (max-width: 1360px) {
  body[data-nav="home"] header.nav:not(.is-scrolled) .nav-links { gap: 16px; }
  body[data-nav="home"] header.nav:not(.is-scrolled) .nav-links > a { font-size: 10.5px; letter-spacing: 0.1em; }
  body[data-nav="home"] header.nav:not(.is-scrolled) .nav-cta { right: 32px; padding: 11px 16px; }
}
@media (max-width: 640px) {
  .hero .hero-logo img { height: 96px !important; }
  .hero .hero-logo { margin-bottom: 20px; }
}
/* headline sized so the two centered lines clear the goat on the right at 1280-1440 */
.hero-headline { font-size: clamp(36px, 4.4vw, 62px) !important; }

/* top-anchored hero (Luis 10/1: no gap between the menu and the big logo at any viewport height) */
.hero { align-items: flex-start !important; min-height: 0 !important; }
.hero-content { padding-top: 116px !important; padding-bottom: 48px !important; }   /* 84px header + 32px */
@media (max-width: 760px) { .hero-content { padding-top: 96px !important; padding-bottom: 40px !important; } }  /* 68px header + 28px */

/* Luis 10/1: only the logo is centered; copy goes back to the left column to balance the goat on the right */
.hero-content { text-align: left !important; }
.hero-eyebrow { justify-content: flex-start !important; }
.hero-headline, .hero-sub { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.hero-headline { max-width: 820px !important; font-size: clamp(36px, 4.6vw, 66px) !important; }
.hero-sub { max-width: 600px !important; }
.hero-actions { justify-content: flex-start !important; }
.hero-logo { margin-bottom: 26px; }
@media (max-width: 1360px) { .hero-headline { max-width: 700px !important; } }
/* let "VEGAS HOME LOANS," sit on one line again (two-line headline), goat still clears it */
.hero-headline { max-width: 920px !important; }
@media (max-width: 1360px) { .hero-headline { max-width: 820px !important; } }

/* ── FIRST-LOAD ENTRANCE (Luis 10/1, after Galindo's AOS fade-ups) ───────────
 * Galindo: AOS "fade-up", 900ms, ease, delays 0/200/900/1200, once. Ours is the
 * same idea compressed into ~1.6s, CSS only (no JS gate): logo fades in, eyebrow +
 * headline rise, sub + buttons, the four gold blocks one by one (120ms apart),
 * the goat pops in last. Fill-mode "both" keeps the start state until each
 * element's turn; reduced-motion users get everything immediately. */
@keyframes gl-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes gl-rise      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes gl-logo      { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes gl-pop       { 0% { opacity: 0; transform: translateY(18px) scale(0.92); } 70% { opacity: 1; transform: translateY(-4px) scale(1.02); } 100% { opacity: 1; transform: none; } }

.hero-logo       { animation: gl-logo 700ms cubic-bezier(.25,.1,.25,1) 60ms both; }
.hero-eyebrow    { animation: gl-rise 600ms cubic-bezier(.22,1,.36,1) 320ms both; }
.hero-headline   { animation: gl-rise 700ms cubic-bezier(.22,1,.36,1) 400ms both; }
.hero-sub        { animation: gl-rise 650ms cubic-bezier(.22,1,.36,1) 560ms both; }
.hero-actions    { animation: gl-rise 650ms cubic-bezier(.22,1,.36,1) 660ms both; }
.hero-quick a:nth-child(1) { animation: gl-rise 700ms cubic-bezier(.22,1,.36,1) 780ms both; }
.hero-quick a:nth-child(2) { animation: gl-rise 700ms cubic-bezier(.22,1,.36,1) 900ms both; }
.hero-quick a:nth-child(3) { animation: gl-rise 700ms cubic-bezier(.22,1,.36,1) 1020ms both; }
.hero-quick a:nth-child(4) { animation: gl-rise 700ms cubic-bezier(.22,1,.36,1) 1140ms both; }
.hero .homie-home { animation: gl-pop 520ms cubic-bezier(.34,1.56,.64,1) 1180ms both !important; }
/* the hover lift on the gold blocks must not fight the entrance transform */
.hero-quick a { animation-fill-mode: both; }
.hero-quick a:hover { transform: translateY(-2px); }
/* _premium.js used to stagger the headline word by word; the block now rises as one */
.hero-headline .hw { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-eyebrow, .hero-headline, .hero-sub, .hero-actions, .hero-quick a, .hero .homie-home { animation: none !important; opacity: 1 !important; transform: none !important; }
}