/* FundFL brand layer - October 2026 (C5 retro sunset).
   Loaded after each page's inline <style>, so rules here win at equal
   specificity. Tokens come from the brand package (brand/web/brand.css);
   the legacy variable names used in page CSS (--dark, --aqua, …) are
   pointed at the tokens so existing page layouts pick up the new palette. */

:root {
  /* Sun */
  --ff-sun-amber:  #F2A33A;
  --ff-sun-orange: #F08A3E;
  --ff-sun-coral:  #E8643A;   /* graphics only */
  --ff-fl-coral:   #D2522A;   /* "FL", large coral text */
  --ff-btn-coral:  #C2491F;   /* buttons with white text (AA) */
  --ff-btn-coral-hover: #A83D18;
  --ff-coral-on-dark: #FF8A5B;

  /* Water */
  --ff-teal:       #0F8B8D;
  --ff-teal-deep:  #0B6E70;   /* links, tagline, small teal text */
  --ff-teal-light: #3FC1C0;   /* on dark */
  --ff-teal-soft:  #7FD3D2;   /* links on dark */
  --ff-teal-mist:  #E3F2F1;

  /* Neutrals */
  --ff-charcoal:   #2A2F30;
  --ff-night:      #1F2425;
  --ff-ink:        #161A1B;
  --ff-slate:      #4A5254;
  --ff-muted:      #626A6C;
  --ff-line:       #E6E1D7;
  --ff-field:      #CFC8BA;
  --ff-sand:       #FBF7F0;
  --ff-sand-2:     #F1EBE0;
  --ff-white:      #FFFFFF;

  --ff-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-radius: 14px;
  --ff-radius-lg: 20px;
  --ff-radius-pill: 999px;
  --ff-shadow: 0 1px 0 var(--ff-line), 0 24px 48px -24px rgba(31,36,37,0.25);
  --ff-max: 1240px;
  --ff-gutter: 24px; /* page side margin; header and footer share it with .wrap */
}

/* Inside dark sections the accent variables switch to their on-dark values. */
.hero, .b-hero, .bottom-cta, .final-cta, .lead-section, footer, .stats-strip, .about-section,
.calc-header, .calc-result, .rates-strip, .ff-dark {
  --aqua: var(--ff-teal-light);
  --aqua-lt: var(--ff-teal-soft);
  --aqua-deep: var(--ff-teal-light);
  --champagne: var(--ff-coral-on-dark);
  --coral: var(--ff-coral-on-dark);
  --gold: var(--ff-sun-amber);
}

/* The hidden attribute always wins over layout rules (e.g. the quote form
   is hidden after a successful submit). */
[hidden] { display: none !important; }

/* Light cards inside dark sections (e.g. the quote form) switch back to the
   on-light accent values. */
.qq-form, .qq-thanks, .calc-wrapper:not(.ff-dark) .calc-body {
  --aqua-deep: var(--ff-teal-deep);
}
.qq-form, .qq-thanks { --aqua: var(--ff-teal-deep); --aqua-lt: var(--ff-teal-mist); }

/* ── Base type ─────────────────────────────────────────────────────── */
html { font-variant-numeric: lining-nums; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-font);
  font-weight: 500;
  color: var(--ff-charcoal);
  background: var(--ff-sand);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .section-title, .hero h1 {
  font-family: var(--ff-font);
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
h4, h5, .faq-q { font-family: var(--ff-font); font-weight: 700 !important; letter-spacing: -0.01em; }
h1 em, h2 em, h3 em, h4 em, .section-title em { font-style: normal !important; color: var(--ff-fl-coral); }
.hero h1 em, .b-hero h1 em, .bottom-cta h2 em, .final-cta h2 em, .final-cta .section-title em,
.ff-dark h2 em { color: var(--ff-coral-on-dark); }
a { color: var(--ff-teal-deep); }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--ff-teal); outline-offset: 2px; }

.hero h1, .b-hero h1 { font-size: clamp(2rem, 3.6vw, 2.75rem) !important; line-height: 1.1 !important; }
.section-title { font-size: clamp(1.85rem, 3.6vw, 2.85rem) !important; line-height: 1.1 !important; }
.article h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.2; color: var(--ff-charcoal); }
.article h3 { font-size: 1.2rem; color: var(--ff-charcoal); }
.bottom-cta h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem) !important; line-height: 1.12 !important; }
.article p, .article li { font-weight: 500; }

.section-eyebrow, .hero-eyebrow, .hero-badge, .scenario-tag, .area-card-tag, .related-card-tag, .ff-eyebrow {
  font-family: var(--ff-font);
  font-weight: 600;
  letter-spacing: 0.2em;
}
.section-eyebrow, .ff-eyebrow { color: var(--ff-teal-deep); }
.section-eyebrow::before, .hero-eyebrow::before, .hero-eyebrow::after { background: var(--ff-teal) !important; opacity: 1 !important; }

/* ── Icons ─────────────────────────────────────────────────────────── */
.ff-ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; display: inline-block; }
.ff-stars { display: inline-flex; gap: 2px; color: var(--ff-sun-amber); }
.ff-stars .ff-ico { width: 16px; height: 16px; }

/* ── Header ────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px calc(max(0px, (100% - var(--ff-max)) / 2) + var(--ff-gutter)) !important;
  min-height: 72px;
  background: var(--ff-white) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--ff-line) !important;
  box-shadow: none;
}
nav .logo { position: relative; display: inline-flex; align-items: center; min-height: 44px; flex: none; text-decoration: none; }
nav .logo img { height: 64px; width: auto; display: block; }
/* Tagline as live text: the one inside the logo artwork is too small to read at header size.
   Positioned under the wordmark, which starts at x=279 and the tagline baseline area at y≈164 of the 240-unit artwork. */
nav .logo-tag {
  position: absolute; left: calc(64px * 279 / 240); top: calc(64px * 164 / 240);
  font-family: var(--ff-font); font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap;
  color: var(--ff-teal-deep);
}
nav .nav-links {
  display: flex; align-items: center; gap: 4px 24px;
  list-style: none; margin: 0; padding: 0;
}
nav .nav-links a {
  font-family: var(--ff-font);
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ff-charcoal) !important;
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
nav .nav-links a:hover, nav .nav-links a.nav-active { color: var(--ff-teal-deep) !important; }
nav .nav-links a.nav-active { box-shadow: inset 0 -3px 0 var(--ff-teal); }
nav .nav-phone {
  gap: 8px; padding: 0 8px !important;
  background: transparent !important; border: 0 !important; border-radius: 0;
  font-weight: 700 !important;
}
nav .nav-phone-icon { display: inline-flex; }
nav .nav-links .nav-apply, nav .nav-apply {
  background: var(--ff-btn-coral) !important; color: var(--ff-white) !important;
  padding: 0 22px !important; min-height: 46px !important;
  border-radius: var(--ff-radius-pill) !important;
  font-weight: 700 !important; letter-spacing: 0 !important;
}
nav .nav-links .nav-apply:hover, nav .nav-apply:hover { background: var(--ff-btn-coral-hover) !important; color: var(--ff-white) !important; }
nav .nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
}
nav .nav-hamburger span { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--ff-charcoal) !important; transition: transform .3s, opacity .3s; }
nav .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav .nav-hamburger.open span:nth-child(2) { opacity: 0; }
nav .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
nav .nav-links li:has(a[href="/faq/"]) { display: list-item; }

@media (max-width: 1000px) {
  nav { min-height: 64px; }
  nav .logo img { height: 50px; }
  nav .logo-tag { left: calc(50px * 279 / 240); top: calc(50px * 164 / 240); font-size: 8.5px; letter-spacing: 0.12em; }
  nav .nav-hamburger { display: flex; }
  nav .nav-links {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 16px 20px !important;
    background: var(--ff-white) !important; backdrop-filter: none !important;
    border-bottom: 1px solid var(--ff-line) !important;
    box-shadow: 0 24px 32px -24px rgba(31,36,37,0.3);
  }
  nav .nav-links.open { display: flex; }
  nav .nav-links li { display: block !important; border-bottom: 1px solid var(--ff-line) !important; }
  nav .nav-links li:last-child { border-bottom: 0 !important; }
  nav .nav-links a { display: flex !important; min-height: 48px; padding: 0 4px !important; font-size: 16px !important; }
  nav .nav-links .nav-phone, nav .nav-links .nav-apply { justify-content: center; width: 100%; margin-top: 10px; }
  nav .nav-links .nav-phone { box-shadow: inset 0 0 0 2px var(--ff-charcoal); border-radius: var(--ff-radius-pill); }
  nav .nav-phone-text { display: inline !important; }
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-primary, .cta-btn-primary, .bn-btn.primary, .qq-submit, .qq-thanks-cta.primary, .ff-btn,
.calc-cta a, a.calc-cta {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px !important;
  border: 0 !important; border-radius: var(--ff-radius-pill) !important;
  background: var(--ff-btn-coral) !important; color: var(--ff-white) !important;
  font-family: var(--ff-font) !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: none; cursor: pointer; box-shadow: none;
}
.btn-primary:hover, .cta-btn-primary:hover, .bn-btn.primary:hover, .qq-submit:hover:not(:disabled),
.qq-thanks-cta.primary:hover, .ff-btn:hover, .calc-cta a:hover, a.calc-cta:hover {
  background: var(--ff-btn-coral-hover) !important; color: var(--ff-white) !important;
}
.btn-secondary, .btn-ghost, .cta-btn-ghost, .bn-btn.secondary, .qq-thanks-cta.secondary, .ff-btn--ghost {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px !important;
  border: 0 !important; border-radius: var(--ff-radius-pill) !important;
  background: transparent !important; color: var(--ff-charcoal) !important;
  box-shadow: inset 0 0 0 2px var(--ff-charcoal) !important;
  font-family: var(--ff-font) !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none;
}
.btn-secondary:hover, .btn-ghost:hover, .cta-btn-ghost:hover, .bn-btn.secondary:hover,
.qq-thanks-cta.secondary:hover, .ff-btn--ghost:hover { background: rgba(42,47,48,0.06) !important; }
/* Outline buttons on dark backgrounds */
.hero :is(.btn-secondary, .btn-ghost, .cta-btn-ghost),
.bottom-cta :is(.btn-secondary, .btn-ghost, .cta-btn-ghost),
.final-cta :is(.btn-secondary, .btn-ghost, .cta-btn-ghost),
.ff-dark :is(.btn-secondary, .btn-ghost, .ff-btn--ghost) {
  color: var(--ff-white) !important; box-shadow: inset 0 0 0 2px var(--ff-white) !important;
}
.hero :is(.btn-secondary, .btn-ghost, .cta-btn-ghost):hover,
.bottom-cta :is(.btn-secondary, .btn-ghost, .cta-btn-ghost):hover,
.final-cta :is(.btn-secondary, .btn-ghost, .cta-btn-ghost):hover { background: rgba(255,255,255,0.08) !important; }
.qq-submit:disabled { opacity: .65; cursor: progress; }

/* ── Sections ──────────────────────────────────────────────────────── */
.hero { background-color: var(--ff-night); }
.hero::after { content: none; }
.hero-sub, .hero p { color: rgba(251,247,240,0.82) !important; }
.hero-pills a { min-height: 36px; display: inline-flex; align-items: center; font-weight: 600; }
.bottom-cta, .final-cta { background: var(--ff-night) !important; }
.bottom-cta p, .final-cta p, .final-cta .section-sub { color: #C9D0D1 !important; }
.bottom-cta::after, .ff-waterlines-bottom::after {
  content: ''; display: block; height: 28px; margin: 40px auto 0; max-width: 520px;
  background:
    linear-gradient(var(--ff-teal-light), var(--ff-teal-light)) 50% 0 / 92% 4px no-repeat,
    linear-gradient(var(--ff-teal-light), var(--ff-teal-light)) 50% 12px / 66% 4px no-repeat,
    linear-gradient(var(--ff-teal-light), var(--ff-teal-light)) 50% 24px / 36% 4px no-repeat;
  border-radius: 2px;
}
.breadcrumb {
  background: var(--ff-white) !important; color: var(--ff-slate) !important;
  border-bottom: 1px solid var(--ff-line) !important;
  font-size: 13px !important; letter-spacing: 0 !important;
}
.breadcrumb a, .breadcrumb-list a { color: var(--ff-teal-deep) !important; font-weight: 600; }
.breadcrumb-current { color: var(--ff-slate) !important; }

/* Water-line motif (three tapering lines) */
.ff-waterlines { display: grid; justify-items: center; gap: 8px; }
.ff-waterlines i { display: block; height: 5px; border-radius: 3px; background: var(--ff-teal); }
.ff-waterlines i:nth-child(1) { width: min(90%, 1100px); }
.ff-waterlines i:nth-child(2) { width: min(66%, 800px); }
.ff-waterlines i:nth-child(3) { width: min(36%, 440px); }

/* ── Cards ─────────────────────────────────────────────────────────── */
.scenario, .area-card, .related-card, .lp-card, .number-card, .fund-card, .chooser-card,
.tool-card, .guide-card, .program-card, .bn-card, .result-item, .stat, .loan-card, .city-card {
  border-radius: var(--ff-radius-lg) !important;
  border-color: var(--ff-line) !important;
}
.scenario, .area-card, .related-card, .lp-card, .number-card, .fund-card, .tool-card,
.guide-card, .program-card, .bn-card, .loan-card, .city-card { background-color: var(--ff-white); }
:is(.area-card, .related-card, .lp-card, .fund-card, .chooser-card, .tool-card, .guide-card, .program-card, .loan-card, .city-card):hover {
  border-color: var(--ff-teal) !important;
  box-shadow: 0 18px 36px -24px rgba(31,36,37,0.35);
}
.callout { border-radius: 0 var(--ff-radius) var(--ff-radius) 0 !important; border-left-color: var(--ff-teal) !important; background: var(--ff-white); }
.tax-banner { border-radius: var(--ff-radius) !important; }
.qualify-check, .broker-icon, .tool-card-icon, .svc-icon, .builders-icon, .chooser-icon, .bn-icon, .trust-icon {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.qualify-check { color: var(--ff-teal-deep) !important; }
.tool-card-icon, .svc-icon, .builders-icon { color: var(--ff-teal-deep); }
.tool-card-icon .ff-ico, .svc-icon .ff-ico, .builders-icon .ff-ico { width: 32px; height: 32px; }
.data-table th { font-family: var(--ff-font); font-weight: 700; }
.faq-toggle { font-family: var(--ff-font); }

/* Forms */
.qq-form, .calc-wrapper, .calc-frame { border-radius: var(--ff-radius-lg) !important; }
input, select, textarea, button { font-family: var(--ff-font); }
.qq-field input, .qq-field select {
  min-height: 46px; border-radius: 10px !important; border: 1px solid var(--ff-field) !important;
  font-family: var(--ff-font) !important; font-weight: 500; color: var(--ff-charcoal);
}
.form-group input, .form-group select, .calc-row input, .calc-row select {
  min-height: 46px; border-radius: 10px !important; font-family: var(--ff-font) !important; font-weight: 500;
}
.qq-field input:focus, .qq-field select:focus, .form-group input:focus, .form-group select:focus {
  border-color: var(--ff-teal) !important; outline: 3px solid rgba(15,139,141,0.25); outline-offset: 0;
}

/* ── Sticky mobile bar ─────────────────────────────────────────────── */
.sticky-bar { background: var(--ff-white) !important; border-top: 1px solid var(--ff-line) !important; box-shadow: 0 -12px 24px -16px rgba(31,36,37,0.3); }
.sticky-bar .sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; border-radius: var(--ff-radius-pill) !important;
  font-family: var(--ff-font); font-weight: 700 !important; font-size: 14px !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.sticky-bar .sb-btn.primary { background: var(--ff-btn-coral) !important; color: var(--ff-white) !important; border: 0 !important; }
.sticky-bar .sb-btn.outline { background: transparent !important; color: var(--ff-charcoal) !important; border: 2px solid var(--ff-charcoal) !important; }

/* Local-guide and area link rows on city pages */
.cg-links a { display: inline-flex; align-items: center; min-height: 44px; }
.area-strip { line-height: 2.2; }
.area-strip a { display: inline-block; padding: 12px 2px; margin: -12px 0; font-weight: 600; }

/* Small text inside the dark calculator panels */
.calc-tag, .calc-wrapper .hint { color: rgba(251,247,240,0.72) !important; }
/* Links inside disclosure text are underlined so they don't rely on color alone */
.qq-consent a { text-decoration: underline !important; text-underline-offset: 2px; }

/* ── Line breaks ───────────────────────────────────────────────────── */
/* Headings break into even lines (no single word left on its own line);
   body text avoids a one-word last line. Browsers without support ignore it. */
h1, h2, h3, h4, .section-title, .faq-q, .qq-label, .hero-eyebrow, .section-eyebrow { text-wrap: balance; }
p, li, .faq-a, .lede, .section-sub, .hero-sub { text-wrap: pretty; }

/* ── Footer ────────────────────────────────────────────────────────── */
/* One block on every page: logo + legal links, licensing in two columns,
   disclosures full width, then Equal Housing and copyright. Spacing runs
   on a single 24px step so every gap and divider matches. */
footer {
  --ff-foot-gap: 24px;
  --ff-foot-line: #2E3537;
  background: var(--ff-ink) !important; color: #C9D0D1 !important;
  border-top: 0 !important;
  padding: 40px calc(max(0px, (100% - var(--ff-max)) / 2) + var(--ff-gutter)) 32px !important;
  font-family: var(--ff-font); font-size: 13px !important; line-height: 1.6;
}
footer p { margin: 0; }

/* Logo row and licensing row share one grid: left column for the logo and
   Nick, right column for the legal links and C2, so their left edges line up. */
footer .ff-foot-head, footer .ff-lic-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 48px; align-items: center;
}
footer .ff-foot-head { padding-bottom: var(--ff-foot-gap); border-bottom: 1px solid var(--ff-foot-line); }
/* Tagline as live text, since the one in the artwork is too small to read */
footer .footer-logo { position: relative; display: inline-block; padding-right: 64px; margin: 0 !important; }
footer .footer-logo img { height: 48px; width: auto; display: block; }
footer .footer-logo-tag {
  position: absolute; left: calc(48px * 279 / 240); top: calc(48px * 164 / 240);
  font-family: var(--ff-font); font-weight: 600; font-size: 8px; line-height: 1.2;
  letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap;
  color: var(--ff-teal-soft);
}
footer .ff-foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
footer .ff-foot-links a {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 !important;
  color: #C9D0D1 !important; font-size: 13px; text-decoration: none;
}
footer .ff-foot-links a:hover { color: var(--ff-white) !important; text-decoration: underline; }

footer .ff-foot-body { display: flex; flex-direction: column; gap: var(--ff-foot-gap); padding-top: var(--ff-foot-gap); }
footer .ff-foot-body a { display: inline; margin: 0 !important; padding: 0 !important; min-height: 0 !important; color: var(--ff-teal-soft) !important; }
footer .ff-foot-body a:hover { color: var(--ff-white) !important; }

footer .ff-lic-row { align-items: start; row-gap: var(--ff-foot-gap); }
footer .ff-lic { color: #C9D0D1; }
footer .ff-lic strong { color: var(--ff-white); font-weight: 700; }
footer .ff-lic a { text-decoration: none; }
footer .ff-lic a:hover { text-decoration: underline; }

footer .ff-disc p { font-size: 12px; line-height: 1.6; color: #9AA3A5; }
footer .ff-disc strong { color: #C9D0D1; font-weight: 600; }
footer .ff-disc a { text-decoration: underline; text-underline-offset: 2px; }

footer .ff-foot-end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-top: var(--ff-foot-gap); border-top: 1px solid var(--ff-foot-line);
  font-size: 12px; color: #9AA3A5;
}
footer .ff-eho { display: inline-flex; align-items: center; gap: 8px; color: #C9D0D1; }
footer .ff-eho-icon { position: relative; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; }
footer .ff-eho-icon::after { content: ""; position: absolute; inset: 3px; border-bottom: 1.5px solid currentColor; }

@media (max-width: 640px) {
  footer { --ff-foot-gap: 20px; padding-top: 32px !important; padding-bottom: 24px !important; }
  footer .ff-foot-head, footer .ff-lic-row { grid-template-columns: 1fr; }
  footer .ff-foot-head { row-gap: 8px; }
}
@media (max-width: 420px) { :root { --ff-gutter: 16px; } }

/* The logo artwork has empty space left of the palm mark (53 of 240 units
   tall). Pull the logo left by that amount so the mark itself sits on the
   page margin, in line with the text below it. */
nav .logo { margin-left: calc(64px * -53 / 240); }
footer .footer-logo { margin-left: calc(48px * -53 / 240) !important; }
@media (max-width: 1000px) { nav .logo { margin-left: calc(50px * -53 / 240); } }

/* Sticky "Get my quote": hidden while the form is visible; pulse on arrival */
.sticky-bar .sb-btn.primary.sb-hidden { display: none !important; }
#quick-quote-form { scroll-margin-top: 100px; }
@keyframes qqPulse { 0% { box-shadow: 0 0 0 0 rgba(181,80,48,.55); } 100% { box-shadow: 0 0 0 14px rgba(181,80,48,0); } }
.qq-pulse { animation: qqPulse .9s ease-out 2; }