/* ===========================================================
   YS CAPITAL GROUP × PILOT — marketing site (editorial reskin)
   Warm ivory paper · ink text · gold premium accent · teal precise accent
   Fraunces (display serif) / Hanken Grotesk (body) · tabular figures ·
   fine hairline rules · editorial grid · generous whitespace.
   NOTE: variable NAMES are preserved (injected JS reads --teal/--ink-2/
   --line/--ivory/etc.); only their VALUES map to the new palette.
   =========================================================== */

/* ---------- tokens: DARK base (rarely shown — site is light-first) ---------- */
:root{
    --on-accent:  #0C1418;
    --ink:        #141B22;   /* page surface */
    --ink-1:      #1B242D;   /* card */
    --ink-2:      #232F3A;   /* panel */
    --ink-3:      #2B3945;   /* deepest fill */
    --line:       rgba(244,240,231,.15);
    --line-2:     rgba(244,240,231,.075);

    --teal:       #5FA9B0;
    --teal-br:    #8FCBD1;
    --teal-dp:    #3C6B71;
    --teal-glow:  rgba(95,169,176,.20);

    --gold:       #C9A86A;
    --ivory:      #F4F0E7;   /* text */
    --ivory-soft: #E4DFD3;
    --muted:      #AAB4B8;
    --muted-2:    #7E8A8E;

    --good:#7FB08A; --warn:#C9A86A; --bad:#C98A6A;

    --maxw: 1240px;
    --r: 4px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --font-d: "Fraunces", Georgia, "Times New Roman", serif;
    --font-b: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ---------- tokens: LIGHT theme (the live marketing palette) ---------- */
:root[data-theme="light"]{
    --on-accent:  #FFFFFF;
    --ink:        #F4F0E7;   /* warm ivory paper */
    --ink-1:      #FBF9F3;   /* card */
    --ink-2:      #EDE6D7;   /* deeper paper / panel */
    --ink-3:      #E4DCCB;   /* deepest fill */
    --line:       rgba(20,27,34,.16);
    --line-2:     rgba(20,27,34,.08);

    --teal:       #2F7F86;   /* precise accent */
    --teal-br:    #256469;   /* deeper — reads as text/link on paper */
    --teal-dp:    #1F5A60;
    --teal-glow:  rgba(47,127,134,.12);

    --gold:       #AE8746;   /* premium accent */
    --ivory:      #141B22;   /* ink text */
    --ivory-soft: #1D2830;
    --muted:      #4B585C;   /* ink-soft */
    --muted-2:    #6E7A7E;

    --good:#2E7A5E; --warn:#B07A1E; --bad:#B4522A;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:hidden; }
body{
    margin:0;
    font-family:var(--font-b);
    background:var(--ink);
    color:var(--ivory);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--font-d); font-weight:500; line-height:1.05; letter-spacing:-.01em; }
p{ margin:0; }
::selection{ background:var(--teal); color:#fff; }
.num,.mono-fig{ font-variant-numeric:tabular-nums; }
.hidden{ display:none !important; }

/* decorative atmosphere from the prior theme is intentionally removed */
.grain,.bg-field,.orb,.hero-grid-lines,.hero-fade{ display:none !important; }

main,.footer{ position:relative; z-index:1; }

/* ---------- buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font-family:var(--font-b); font-weight:600; font-size:.95rem; letter-spacing:.01em;
    padding:13px 22px; border-radius:var(--r); border:1px solid transparent; cursor:pointer;
    transition:background .2s, color .2s, border-color .2s, transform .15s var(--ease);
    white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:16px 28px; font-size:1rem; }
.btn-solid{ background:var(--teal); color:#fff; }
.btn-solid:hover{ background:var(--teal-dp); }
.btn-gold{ background:var(--gold); color:#fff; font-weight:600; }
.btn-gold:hover{ background:#96702f; }
.btn-line{ background:transparent; color:var(--ivory); border-color:var(--line); }
.btn-line:hover{ border-color:var(--ivory); }
.btn-ghost{ background:transparent; color:var(--ivory); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ivory); }
.btn-gold .btn-spark{ display:inline-block; margin-right:.1rem; font-size:.9em; }

/* shared bits */
.eyebrow{
    font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
    font-weight:600; margin-bottom:1rem;
}
.section-title{
    font-family:var(--font-d); font-weight:500; letter-spacing:-.01em; line-height:1.06;
    font-size:clamp(1.9rem,3.6vw,3rem); max-width:20ch;
}
.section-head{ max-width:var(--maxw); margin:0 auto 3.4rem; }
.section-head .section-title{ margin-inline:0; }
.section-sub{ color:var(--muted); max-width:56ch; margin-top:1rem; font-size:1.05rem; }
.nmls-link{ color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color .2s; }
.nmls-link:hover{ color:var(--gold); }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(244,240,231,.86); backdrop-filter:blur(8px) saturate(120%);
    border-bottom:1px solid transparent;
    transition:background .3s, border-color .3s;
}
.nav.scrolled{
    background:rgba(244,240,231,.94);
    border-bottom-color:var(--line-2);
}
:root:not([data-theme="light"]) .nav{ background:rgba(20,27,34,.82); }
:root:not([data-theme="light"]) .nav.scrolled{ background:rgba(20,27,34,.92); border-bottom-color:var(--line); }
.nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:.9rem 1.5rem;
    display:flex; align-items:center; gap:1.2rem; flex-wrap:nowrap;
}
/* flex:none so the logo NEVER collapses to 0 width in the nowrap flex row
   (owner-reported "tiny / messed up" top-left logo, 2026-07-14 — it was being
   shrunk out of existence). Bumped to 54px for real presence. */
.nav-brand{ flex:none; display:inline-flex; align-items:center; }
.nav-brand img{ height:54px; width:auto; max-width:none; flex:none; display:block; transition:opacity .2s; }
.nav-brand:hover img{ opacity:.82; }
/* Theme-aware logo pair: show the variant that reads on the active theme.
   Default (no data-theme / light) shows the dark-ink logo; dark shows teal.
   Selectors match .nav-brand img's specificity so the display toggle wins. */
.nav-brand img.logo-on-dark{ display:none; }
:root:not([data-theme="light"]) .nav-brand img.logo-on-light{ display:none; }
:root:not([data-theme="light"]) .nav-brand img.logo-on-dark{ display:block; }
/* Compliance marks (Equal Housing Lender / NMLS) are single-color line art. Force
   them to read on whatever the footer is: BLACK on the light (default) theme,
   WHITE on dark. brightness(0) collapses the art to a solid silhouette regardless
   of the source file's own color, so a light-colored asset can't wash out on the
   light footer (owner-directed 2026-07-14). */
:root[data-theme="light"] .compliance-mark{ filter:brightness(0) opacity(.72); }
:root:not([data-theme="light"]) .compliance-mark{ filter:brightness(0) invert(1) opacity(.9); }
.nav-links{ display:flex; align-items:center; gap:1.5rem; flex-wrap:nowrap; }
.nav-links a{ font-size:.92rem; color:var(--ivory-soft); font-weight:500; white-space:nowrap; transition:color .2s; }
.nav-links a:hover{ color:var(--gold); }
.nav-actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.nav-actions .btn-ghost{ padding-left:.9rem; padding-right:.9rem; }
/* PILOT Client Login — a distinct, branded login pill on every marketing screen
   (owner-directed 2026-07-14): a gold-outlined pill carrying the PILOT gold
   navigation-chevron mark + "Client Login", filling gold on hover. Uses
   color:inherit so it reads on the light AND dark nav, and hard-coded PILOT gold
   so it's identical across style.css / suite.css / inline styles. */
.pilot-login{ display:inline-flex; align-items:center; gap:9px; padding:8px 17px;
  border-radius:100px; background:transparent; color:inherit; border:1.5px solid #AE8746;
  font-weight:600; font-size:.88rem; letter-spacing:.01em; text-decoration:none;
  white-space:nowrap; transition:background .2s, color .2s; }
.pilot-login:hover, .pilot-login:focus-visible{ background:#AE8746; color:#fff; }
.pilot-login .plm{ width:13px; height:13px; background:#AE8746; flex:none;
  clip-path:polygon(50% 0%,100% 100%,50% 74%,0% 100%); transition:background .2s; }
.pilot-login:hover .plm, .pilot-login:focus-visible .plm{ background:#fff; }
/* In the mobile drawer it goes full-width for tap comfort. The border is
   restated so the drawer's generic `.nav-mobile a` bottom-border rule can't
   out-rank it and paint a non-gold arc under the pill. */
.nav-mobile .pilot-login{ justify-content:center; width:100%; padding:12px 17px; margin-top:.4rem; border:1.5px solid #AE8746; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; margin-left:auto; }
.nav-toggle span{ width:24px; height:2px; background:var(--ivory); transition:.3s; }
.nav-mobile{ display:none; }

@media (max-width:1200px){
    .nav-links, .nav-actions{ display:none; }
    .nav-toggle{ display:flex; }
    .nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
    .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
    .nav-mobile{
        display:flex; flex-direction:column; gap:.2rem; padding:0 1.5rem;
        max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s;
        background:var(--ink); border-bottom:1px solid var(--line-2);
    }
    .nav.open .nav-mobile{
        max-height:calc(100vh - 64px); overflow-y:auto; -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain; padding:.8rem 1.5rem 1.4rem;
    }
    .nav-mobile a{ padding:.75rem 0; color:var(--ivory-soft); border-bottom:1px solid var(--line-2); font-size:.98rem; }
    .nav-mobile .btn{ margin-top:.8rem; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; padding:11rem 1.5rem 4rem; }
.hero-inner{ position:relative; max-width:920px; margin:0 auto; text-align:center; }
.hero-rating{
    display:inline-flex; align-items:center; gap:.5rem; line-height:1; margin:0 0 1.5rem;
    padding:.4rem .8rem; border:1px solid var(--line); border-radius:100px;
    background:var(--ink-1); text-decoration:none; transition:border-color .2s;
}
.hero-rating:hover{ border-color:var(--gold); }
.hr-stars{ color:var(--gold); font-size:.82rem; letter-spacing:1.5px; }
.hr-score{ color:var(--ivory); font-weight:700; font-size:.9rem; }
.hr-on{ color:var(--ivory-soft); font-weight:600; font-size:.82rem; }
.hr-dot{ width:3px; height:3px; border-radius:50%; background:var(--muted-2); flex:0 0 auto; }
.hr-verified{ color:var(--muted); font-size:.82rem; }
.hr-arrow{ color:var(--teal-br); font-size:.9rem; transition:transform .2s; }
.hero-rating:hover .hr-arrow{ transform:translateX(3px); }
@media (max-width:480px){ .hero-rating{ flex-wrap:wrap; } .hr-on{ display:none; } }

.hero-eyebrow{
    display:inline-block; font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold); margin-bottom:1.5rem; font-weight:600;
}
.hero-title{
    font-family:var(--font-d); font-weight:500; line-height:1.03;
    font-size:clamp(2.7rem,6.4vw,5.2rem); letter-spacing:-.015em; margin:0 auto; max-width:16ch;
}
.hero-title span{ display:block; }
.hero-title em{ font-style:italic; color:var(--teal); }
.hero-sub{
    max-width:60ch; margin:1.7rem auto 0; color:var(--muted);
    font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.65;
}
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2.3rem; }
.hero-trust{
    display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap;
    margin:1.4rem 0 .2rem; font-size:.82rem; font-weight:600; color:var(--muted);
}
.hero-trust i{ width:4px; height:4px; border-radius:50%; background:var(--gold); }

.hero-stats{
    display:grid; grid-template-columns:repeat(4,1fr);
    max-width:800px; margin:4rem auto 0;
    border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.stat{
    padding:1.7rem 1.1rem; text-align:center;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center;
}
.stat-tag{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); margin-bottom:.6rem; }
.stat-num{
    display:block; font-family:var(--font-d); font-size:2rem; font-weight:500; color:var(--ivory);
    line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.stat-text{ color:var(--teal); }
.stat-label{ display:block; font-size:.78rem; color:var(--muted); margin-top:.6rem; line-height:1.45; }
.hero-stats-note{ max-width:800px; margin:1rem auto 0; text-align:left; font-size:.72rem; color:var(--muted-2); line-height:1.55; }

/* ===========================================================
   OFFER MARQUEE
   =========================================================== */
.offer-bar{
    border-block:1px solid var(--line); background:var(--ink-2); overflow:hidden;
    padding:.85rem 0; position:relative; z-index:2;
}
.offer-track{ display:flex; gap:2.6rem; white-space:nowrap; will-change:transform; }
.offer-pill{ display:inline-flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--muted); flex:0 0 auto; }
.offer-pill strong{ color:var(--ivory); font-weight:600; }
.offer-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto; }

/* ===========================================================
   SECTIONS
   =========================================================== */
section{ padding:6rem 1.5rem; }

/* ---- brand / value ---- */
.brand-inner{
    max-width:var(--maxw); margin:0 auto; display:grid;
    grid-template-columns:1fr 1.05fr; gap:4rem; align-items:start;
}
.brand-lede{ color:var(--muted); font-size:1.1rem; margin-top:1.4rem; max-width:46ch; }
.brand-right{ display:grid; gap:0; border-top:1px solid var(--line); }
.value-card{
    border-bottom:1px solid var(--line); padding:1.8rem 0 1.7rem;
    position:relative; transition:none; background:transparent;
}
.value-idx{ font-family:var(--font-d); color:var(--gold); font-size:.95rem; font-weight:600; letter-spacing:.06em; }
.value-card h3{ font-family:var(--font-d); font-weight:500; font-size:1.4rem; margin:.35rem 0 .5rem; }
.value-card p{ color:var(--muted); margin:0; font-size:1rem; }

/* ===========================================================
   PROGRAMS — editorial bordered grid
   =========================================================== */
.prog-grid{
    max-width:var(--maxw); margin:0 auto;
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.prog-card{
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:2rem 1.8rem; background:transparent; position:relative;
    transition:background .2s;
}
.prog-card:hover{ background:var(--ink-1); }
.prog-card.feature{ background:var(--ink-1); }
.prog-card.feature::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); }
.prog-chip{
    display:inline-block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--teal-br); font-weight:700; margin-bottom:1rem;
}
.prog-card h3{ font-family:var(--font-d); font-weight:500; font-size:1.5rem; margin-bottom:.55rem; }
.prog-card p{ color:var(--muted); font-size:.95rem; margin:0 0 1rem; line-height:1.55; }
.prog-note{ font-size:.8rem; color:var(--muted-2); display:block; padding-top:.9rem; border-top:1px solid var(--line-2); font-weight:600; letter-spacing:.02em; }

/* ===========================================================
   HIGHLIGHTS
   =========================================================== */
.hl-grid{
    max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.hl-card{
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:2rem 1.7rem; background:transparent; transition:background .2s;
}
.hl-card:hover{ background:var(--ink-1); }
.hl-big{ font-family:var(--font-d); font-weight:500; font-size:3rem; line-height:1; color:var(--ivory); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.hl-big small{ font-size:1.1rem; color:var(--gold); font-weight:500; }
.hl-sub{ font-size:.78rem; color:var(--gold); letter-spacing:.06em; text-transform:uppercase; margin-top:.5rem; font-weight:600; }
.hl-card h4{ font-family:var(--font-d); font-weight:500; font-size:1.25rem; margin:1.4rem 0 .5rem; }
.hl-card p{ color:var(--muted); font-size:.92rem; margin:0 0 1rem; line-height:1.55; }
.hl-fine{ font-size:.75rem; color:var(--muted-2); display:block; border-top:1px solid var(--line-2); padding-top:.8rem; line-height:1.5; }

.prepay{
    max-width:var(--maxw); margin:2.2rem auto 0; display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
    border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--r);
    background:var(--ink-1); padding:2rem 2.2rem;
}
.prepay-badge{
    font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
    background:var(--gold); padding:.35rem .8rem; border-radius:100px; font-weight:700; flex:0 0 auto;
}
.prepay-body{ flex:1 1 320px; }
.prepay-body h3{ font-family:var(--font-d); font-weight:500; font-size:1.45rem; }
.prepay-body p{ color:var(--muted); margin:.4rem 0 0; }
.prepay-body strong{ color:var(--teal-br); font-weight:600; }

/* ===========================================================
   CALCULATOR (kept for JS hooks #rent/#piti/#dscrValue/#calcVerdict/#calcFill)
   =========================================================== */
.calc-inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.calc-disclaim{ font-size:.82rem; color:var(--muted-2); margin-top:1.5rem; max-width:50ch; }
.calc-panel{ border:1px solid var(--line); border-radius:var(--r); padding:2.2rem; background:var(--ink-1); }
.calc-field{ margin-bottom:1.4rem; }
.calc-field label{ display:block; font-size:.88rem; color:var(--ivory-soft); margin-bottom:.55rem; font-weight:500; }
.calc-field label em{ color:var(--muted-2); font-style:normal; font-weight:400; font-size:.8rem; }
.calc-input{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); background:var(--ink); padding:0 1rem; transition:border-color .2s; }
.calc-input:focus-within{ border-color:var(--teal); }
.calc-input span{ color:var(--muted-2); font-size:1.1rem; }
.calc-input input{ flex:1; background:none; border:0; outline:none; color:var(--ivory); font-family:var(--font-b); font-size:1.25rem; font-weight:500; padding:.9rem .6rem; }
.calc-input input::-webkit-outer-spin-button,.calc-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.calc-readout{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:1.5rem; margin-top:.5rem; flex-wrap:wrap; }
.calc-ratio span{ font-family:var(--font-d); font-size:3rem; font-weight:500; color:var(--teal); font-variant-numeric:tabular-nums; }
.calc-ratio small{ font-size:1rem; color:var(--muted); margin-left:.3rem; }
.calc-verdict{ font-size:.92rem; font-weight:600; color:var(--teal-br); text-align:right; }
.calc-meter{ height:8px; border-radius:100px; background:var(--ink-3); overflow:hidden; margin:1.3rem 0 1.8rem; }
.calc-meter-fill{ height:100%; width:50%; border-radius:100px; background:var(--teal); transition:width .5s var(--ease); }
.calc-cta{ width:100%; }

/* ===========================================================
   PROCESS
   =========================================================== */
.proc-row{ max-width:1180px; margin:0 auto; display:flex; align-items:stretch; gap:0; justify-content:center; border-top:1px solid var(--line); }
.proc-step{ flex:1; text-align:left; padding:2rem 1.4rem 1rem; border-right:1px solid var(--line-2); }
.proc-step:last-child{ border-right:0; }
.proc-num{
    font-family:var(--font-d); font-size:2.4rem; font-weight:500; color:var(--gold); line-height:1;
    margin-bottom:1.1rem;
}
.proc-step h3{ font-family:var(--font-d); font-weight:500; font-size:1.2rem; margin-bottom:.5rem; }
.proc-step p{ color:var(--muted); font-size:.9rem; margin:0; line-height:1.5; }
.proc-step a{ color:var(--teal-br); text-decoration:underline; text-underline-offset:2px; }
.proc-line{ display:none; }

/* ===========================================================
   FAQ
   =========================================================== */
.faq{ padding:1rem 1.5rem 0; }
.faq-grid{ max-width:880px; margin:0 auto; display:grid; gap:0; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); background:transparent; }
.faq-item summary{ list-style:none; cursor:pointer; padding:1.25rem .2rem; font-family:var(--font-d); font-weight:500; font-size:1.1rem; color:var(--ivory); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--gold); }
.faq-ic{ position:relative; flex:0 0 18px; width:18px; height:18px; }
.faq-ic::before,.faq-ic::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--gold); border-radius:2px; }
.faq-ic::before{ width:14px; height:2px; }
.faq-ic::after{ width:2px; height:14px; transition:transform .2s, opacity .2s; }
.faq-item[open] .faq-ic::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ padding:0 .2rem 1.4rem; max-width:70ch; }
.faq-a p{ color:var(--muted); font-size:.98rem; line-height:1.65; margin:0; }
.faq-a a{ color:var(--teal-br); text-decoration:underline; text-underline-offset:2px; }
.faq-a strong{ color:var(--ivory); font-weight:600; }
.faq-cta{ max-width:880px; margin:2rem auto 0; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.faq-cta span{ color:var(--muted); font-size:1rem; margin-right:.2rem; }
@media (max-width:760px){ .faq-item summary{ font-size:1rem; } }

/* ===========================================================
   TEAM
   =========================================================== */
.team-badge{ display:inline-flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin-top:1.4rem; padding:.55rem 0; }
.tb-item{ font-size:.85rem; color:var(--muted); font-weight:500; }
.tb-item strong{ color:var(--teal-br); font-weight:700; }
.tb-dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); }
.team-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.team-subhead{ max-width:var(--maxw); margin:3.5rem auto 1.5rem; font-family:var(--font-d); font-weight:500; font-size:1.5rem; color:var(--gold); }
.member{
    border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.4rem; text-align:center;
    background:var(--ink-1); transition:border-color .2s;
}
.member:hover{ border-color:var(--gold); }
.member img{
    width:68px; height:68px; border-radius:50%; object-fit:cover; margin:0 auto 1rem;
    border:1px solid var(--line); background:var(--ink-2);
    filter:grayscale(1); transition:filter .3s;
}
.member:hover img{ filter:grayscale(0); }
.member h3{ font-family:var(--font-d); font-weight:500; font-size:1.18rem; }
.member .role{ display:block; color:var(--teal); font-size:.8rem; font-weight:600; margin:.25rem 0 .7rem; letter-spacing:.02em; }
.member p{ color:var(--muted-2); font-size:.82rem; margin:.1rem 0; font-variant-numeric:tabular-nums; }
.member a{ display:inline-block; color:var(--muted); font-size:.82rem; margin-top:.5rem; word-break:break-word; transition:color .2s; }
.member a:hover{ color:var(--gold); }
.member-clickable{ cursor:pointer; }
.member-open{ color:inherit; }
.member-open:hover{ color:var(--gold); text-decoration:underline; }

/* ===========================================================
   REVIEWS
   =========================================================== */
.reviews{ overflow:hidden; }
.reviews-badge{ display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-top:1rem; font-size:.92rem; color:var(--muted); }
.reviews-badge .rb-stars{ color:var(--gold); letter-spacing:.14em; font-size:1rem; }
.reviews-badge .rb-text strong{ color:var(--ivory); font-weight:700; }
.reviews-badge .rb-link{ color:var(--teal-br); font-weight:700; margin-left:.2rem; }
.reviews-badge .rb-link:hover{ text-decoration:underline; }
.review-viewport{ margin-top:2.6rem; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.review-track{ display:flex; align-items:stretch; gap:1.1rem; width:max-content; animation:reviewScroll 70s linear infinite; }
.review-viewport:hover .review-track{ animation-play-state:paused; }
@keyframes reviewScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.review{
    flex:0 0 348px; min-height:196px; border:1px solid var(--line); border-radius:var(--r); padding:1.7rem;
    background:var(--ink-1); margin:0; display:flex; flex-direction:column;
}
.review .rv-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.review .stars{ color:var(--gold); letter-spacing:.12em; }
.review .rv-g{ width:17px; height:17px; flex:none; }
.review blockquote{ margin:0 0 1.15rem; font-family:var(--font-d); font-style:italic; font-weight:400; font-size:1.05rem; color:var(--ivory); line-height:1.5; flex:1; }
.review figcaption{ display:flex; align-items:center; gap:.7rem; }
.review .rv-avatar{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-b); font-weight:700; font-size:.85rem; color:#fff; background:var(--teal); }
.review .rv-meta{ display:flex; flex-direction:column; line-height:1.3; }
.review .rv-name{ color:var(--ivory); font-size:.92rem; font-weight:700; }
.review .rv-src{ color:var(--muted-2); font-size:.74rem; font-weight:500; }
@media (prefers-reduced-motion:reduce){
    .review-track{ animation:none; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:.5rem; }
    .review{ scroll-snap-align:start; }
}

/* ===========================================================
   CONTACT
   =========================================================== */
.reviews .section-head, .contact .section-head{ text-align:center; }
.reviews .section-head .section-title, .contact .section-head .section-title{ margin-inline:auto; }
.reviews .section-head .section-sub, .contact .section-head .section-sub{ margin-inline:auto; }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; max-width:940px; margin:0 auto; }
.contact-card{
    display:flex; align-items:center; gap:1rem; padding:1.35rem 1.4rem;
    border:1px solid var(--line); border-radius:var(--r); background:var(--ink-1);
    text-decoration:none; transition:border-color .2s;
}
.contact-card:hover{ border-color:var(--gold); }
.cc-ico{ flex:none; width:48px; height:48px; border-radius:var(--r); display:grid; place-items:center; background:var(--ink-2); border:1px solid var(--line); color:var(--teal); }
.cc-ico svg{ width:24px; height:24px; }
.cc-wa{ color:#1FA855; }
.contact-card.is-wa:hover{ border-color:#1FA855; }
.cc-body{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.cc-title{ color:var(--ivory); font-weight:700; font-size:1.02rem; }
.cc-sub{ color:var(--muted); font-size:.83rem; overflow:hidden; text-overflow:ellipsis; }
.cc-go{ flex:none; color:var(--teal-br); font-size:1.2rem; transition:transform .2s; }
.contact-card:hover .cc-go{ transform:translateX(4px); }
.sms-consent{ max-width:760px; margin:2rem auto 0; text-align:center; font-size:.76rem; line-height:1.6; color:var(--muted-2); }
.sms-consent strong{ color:var(--muted); font-weight:700; }
.sms-consent a{ color:var(--teal-br); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; max-width:440px; } }

/* ===========================================================
   CTA BAND
   =========================================================== */
.cta-band{ padding:6.5rem 1.5rem; }
.cta-band-inner{
    max-width:900px; margin:0 auto; text-align:center;
    border:1px solid var(--line); border-radius:var(--r); padding:3.5rem 2.5rem; background:var(--ink-2);
}
.cta-kicker{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:1.1rem; }
.cta-band-inner h2{ font-family:var(--font-d); font-weight:500; font-size:clamp(1.8rem,3.5vw,2.7rem); line-height:1.12; max-width:20ch; margin:0 auto; }
.cta-band-inner p{ color:var(--muted); max-width:52ch; margin:1.1rem auto 2rem; }
.cta-band-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ===========================================================
   FOOTER  (kept on paper so the theme.js dark-teal logo reads)
   =========================================================== */
.footer{ border-top:1px solid var(--line); background:var(--ink-2); padding:4.5rem 1.5rem 2.5rem; }
.footer-top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-logo{ height:46px; width:auto; margin-bottom:1rem; }
.footer-tag{ font-family:var(--font-d); font-style:italic; color:var(--gold); margin:0 0 1.2rem; }
.footer-contact p{ color:var(--muted); font-size:.88rem; margin:.3rem 0; }
.footer-contact a{ color:var(--muted); }
.footer-contact a:hover{ color:var(--gold); }
.footer-nav h5, .footer-compliance h5{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; font-weight:700; font-family:var(--font-b); }
.footer-nav{ display:flex; flex-direction:column; gap:.6rem; }
.footer-nav a{ color:var(--muted); font-size:.9rem; transition:color .2s; }
.footer-nav a:hover{ color:var(--ivory); }
.compliance-logos{ display:flex; gap:1.4rem; align-items:flex-start; }
.compliance-mark{ height:70px; width:auto; }
.disclosures{ max-width:var(--maxw); margin:3.5rem auto 0; padding-top:2.2rem; border-top:1px solid var(--line); }
.disclosures h4{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.3rem; }
.disc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.disc-grid p{ color:var(--muted-2); font-size:.8rem; line-height:1.6; margin:0; }
.disc-grid strong{ color:var(--muted); }
.disc-grid a{ color:var(--teal-br); }
.copyright{ color:var(--muted-2); font-size:.76rem; margin-top:2rem; line-height:1.6; }

/* ---- floating actions (contact + apply) ---- */
.float-actions{
    position:fixed; right:1.2rem; bottom:1.2rem; z-index:40;
    transform:translateY(140px); opacity:0; pointer-events:none;
    transition:transform .5s var(--ease), opacity .4s;
}
.float-actions.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.float-btns{ display:flex; align-items:center; gap:.6rem; }
.float-apply{
    background:var(--teal); color:#fff; font-weight:700; font-size:.92rem;
    padding:.85rem 1.5rem; border-radius:100px; box-shadow:0 10px 26px -12px rgba(20,27,34,.5);
    transition:background .2s, transform .2s;
}
.float-apply:hover{ background:var(--teal-dp); transform:translateY(-2px); }
.float-contact{
    display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
    background:var(--ink-1); color:var(--ivory); border:1px solid var(--line);
    font-family:var(--font-b); font-weight:700; font-size:.92rem; padding:.8rem 1.25rem; border-radius:100px;
    box-shadow:0 10px 26px -14px rgba(20,27,34,.4); transition:border-color .2s, color .2s, transform .2s;
}
.float-contact:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.float-contact .fc-ico{ display:inline-flex; }
.float-contact .fc-ico svg{ width:18px; height:18px; }
.contact-pop{
    position:absolute; right:0; bottom:100%; margin-bottom:.8rem; width:274px;
    background:var(--ink-1); border:1px solid var(--line); border-radius:var(--r); padding:.65rem;
    box-shadow:0 24px 54px -22px rgba(20,27,34,.4);
    transform:translateY(10px) scale(.96); transform-origin:bottom right; opacity:0; pointer-events:none;
    transition:transform .24s var(--ease), opacity .24s;
}
.contact-pop.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.cpop-head{ display:flex; align-items:center; justify-content:space-between; padding:.35rem .55rem .55rem; }
.cpop-head span{ font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cpop-x{ background:none; border:0; color:var(--muted); font-size:1.35rem; line-height:1; cursor:pointer; padding:0 .15rem; transition:color .2s; }
.cpop-x:hover{ color:var(--ivory); }
.cpop-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem; border-radius:var(--r); text-decoration:none; transition:background .2s; }
.cpop-item:hover{ background:var(--ink-2); }
.cpop-ico{ flex:none; width:40px; height:40px; border-radius:var(--r); display:grid; place-items:center; background:var(--ink-2); border:1px solid var(--line); color:var(--teal); }
.cpop-ico svg{ width:21px; height:21px; }
.cpop-item.is-wa .cpop-ico{ color:#1FA855; }
.cpop-body{ display:flex; flex-direction:column; line-height:1.3; }
.cpop-t{ color:var(--ivory); font-weight:700; font-size:.95rem; }
.cpop-s{ color:var(--muted); font-size:.8rem; }

/* ===========================================================
   REVEAL ANIMATIONS
   =========================================================== */
.reveal, .reveal-up{ opacity:0; }
.reveal{ transform:translateY(16px); animation:fadeUp .8s var(--ease) forwards; animation-delay:var(--d,0s); }
.reveal-up{ transform:translateY(28px); transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s); }
.reveal-up.in{ opacity:1; transform:none; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
    .reveal,.reveal-up{ opacity:1!important; transform:none!important; animation:none!important; }
    html{ scroll-behavior:auto; }
}

/* ---- keyboard focus ring ---- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--teal); outline-offset:3px; border-radius:var(--r);
}

/* ===========================================================
   THEME TOGGLE (injected by theme.js)
   =========================================================== */
.ys-theme-toggle{ display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:1px solid var(--line); color:var(--ivory); border-radius:var(--r); padding:.45rem .8rem; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; line-height:1; transition:border-color .2s,color .2s; }
.ys-theme-toggle:hover{ border-color:var(--gold); color:var(--gold); }
.ys-theme-toggle svg{ display:block; flex:none; }
.ys-theme-lbl{ font-size:.8rem; }
.ys-theme-floating{ position:fixed; top:1rem; right:1rem; z-index:1000; background:var(--ink-1); box-shadow:0 8px 24px rgba(20,27,34,.18); }
@media (max-width:600px){ .ys-theme-lbl{ display:none; } .ys-theme-toggle{ padding:.45rem .55rem; } }

/* ===========================================================
   LOAN-OFFICER BRANDING BAR (brand.js, ?lo=)  — anchored after .topbar
   =========================================================== */
.lo-bar{ background:var(--ink-2); border-bottom:1px solid var(--line); }
.lo-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:.75rem; padding:.55rem 1.5rem; flex-wrap:wrap; }
.lo-ava{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; }
.lo-meta{ display:flex; flex-direction:column; line-height:1.2; margin-right:auto; }
.lo-name{ font-weight:700; color:var(--ivory); font-size:.9rem; }
.lo-role{ color:var(--muted); font-size:.74rem; }
.lo-contact{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.lo-contact a{ color:var(--teal-br); font-size:.82rem; font-weight:600; white-space:nowrap; }
.lo-contact a:hover{ text-decoration:underline; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1024px){
    .prog-grid{ grid-template-columns:repeat(2,1fr); }
    .hl-grid{ grid-template-columns:repeat(2,1fr); }
    .team-grid{ grid-template-columns:repeat(3,1fr); }
    .brand-inner, .calc-inner{ grid-template-columns:1fr; gap:2.5rem; }
    .footer-top{ grid-template-columns:1fr 1fr; }
    .proc-row{ flex-wrap:wrap; }
    .proc-step{ flex:1 1 40%; border-bottom:1px solid var(--line-2); }
}
@media (max-width:768px){
    .hero{ padding:8.5rem 1.2rem 3.5rem; }
    .hero-stats{ grid-template-columns:repeat(2,1fr); }
    section{ padding:4rem 1.2rem; }
    .prog-grid, .hl-grid, .team-grid{ grid-template-columns:1fr 1fr; }
    .proc-step{ flex:1 1 100%; border-right:0; }
    .disc-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr; }
}
@media (max-width:480px){
    .prog-grid, .team-grid, .hl-grid{ grid-template-columns:1fr; }
    .hero-stats{ grid-template-columns:1fr 1fr; }
    .float-actions{ right:1rem; bottom:1rem; }
    .contact-pop{ width:min(274px, calc(100vw - 2rem)); }
}