/*
    CSS TABLE OF CONTENTS (search for these labels to jump around)
    ------------------------------------------------------------
    :root                     Design tokens (colors, fonts, shadows)
    Global / base              Resets, buttons, animations, a11y helpers
    HEADER                      Nav bar, hamburger, mobile menu
    HERO                        Above-the-fold intro + lead-capture field
    SECTION HEADERS             Shared eyebrow/heading/paragraph pattern
    SITUATIONS                  "Which of these sounds like you" cards
    PROCESS                     3-step "how it works"
    FLEXIBILITY PHILOSOPHY      Move-quickly vs. stay-longer explainer
    COMPARISON / DECISION GUIDE Priority list + best-fit cards + detail table
    BENEFITS                    What-to-expect grid
    TEAM / TRUST                Founder/team photo + copy
    TESTIMONIAL PLACEHOLDERS    Unverified-quote placeholders
    FAQ                         Accordion
    FINAL CTA                   Closing banner above the form
    CONTACT / FORM SECTION      6-step lead form, progress bar, success state
    STICKY MOBILE CTA           Bottom bar shown only on small screens
    FOOTER
    MOBILE OPTIMIZATION PASS    Small-screen overrides, grouped at the end
    ------------------------------------------------------------
  */
  :root{
    /* Palette derived from the House Partner logo: brand blue #1F87E8 and
       charcoal #1A1A1A. The logo carries no third colour, so the previous
       previous gold accent is retired — a light tint of the same blue now handles
       every emphasis role, keeping the page to one accent family.
       --blue-cta is a slightly deepened blue used only behind white button
       text: the pure logo blue sits at 3.7:1 against white, below the 4.5:1
       WCAG AA threshold, while #1670C4 clears it at 5.1:1 and is visually
       indistinguishable at button scale. */
    --navy:#141C26;
    --navy-2:#1E2C3D;
    --blue:#1F87E8;
    --blue-cta:#1670C4;
    --blue-light:#EAF3FD;
    --charcoal:#1A1A1A;
    --charcoal-soft:#5B6270;
    --paper:#F8F9FB;
    --white:#FFFFFF;
    --line:#E3E7EE;
    --success:#2E8B57;
    --accent:#7FC0F5;
    --accent-deep:#0F5FAE;
    --shadow-sm: 0 2px 10px rgba(20,28,38,0.06);
    --shadow-md: 0 10px 30px rgba(20,28,38,0.10);
    --shadow-lg: 0 20px 60px rgba(20,28,38,0.16);
    --radius: 14px;
    /* System font stacks only — no external font requests. */
    --serif: Iowan Old Style, 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--charcoal);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  h1,h2,h3,h4{font-family:var(--serif);margin:0;color:var(--navy);font-weight:600;}
  p{margin:0;}
  section[id]{scroll-margin-top:80px;}
  /* CTAs now target the form card directly, so it needs the same
     offset or the fixed header covers its first question. */
  #leadFormCard{scroll-margin-top:88px;}
  .container{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent-deep);
  }
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--blue);display:inline-block;}
  .eyebrow.on-dark{color:var(--accent);}
  .eyebrow.on-dark::before{background:var(--accent);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;
    border:1px solid transparent;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--blue-cta);color:#fff;box-shadow:0 8px 20px rgba(22,112,196,0.30);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,112,196,0.38);}
  .btn:active{transform:translateY(0) scale(0.97) !important;transition-duration:.1s;}
  .btn-secondary{background:var(--navy);color:#fff;}
  .btn-secondary:hover{transform:translateY(-2px);background:var(--navy-2);}
  .btn-ghost{background:transparent;color:var(--navy);border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px);}
  .btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35);}
  .btn-on-dark:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);}
  .btn-sm{padding:11px 20px;font-size:13.5px;}
  .btn-block{width:100%;}
  .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none !important;}
  .btn-spinner{
    display:none;width:15px;height:15px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;
    animation:spin .7s linear infinite;
  }
  .btn-ghost .btn-spinner{border-color:rgba(20,28,38,0.25);border-top-color:var(--navy);}
  .btn.is-loading .btn-label{visibility:hidden;position:absolute;}
  .btn.is-loading{position:relative;color:transparent !important;}
  .btn.is-loading .btn-spinner{display:inline-block;position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .js-reveal .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
  .js-reveal .reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease;}
  .reveal-stagger.in > *{opacity:1;transform:translateY(0);}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.04s;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.1s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.22s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.28s;}
  .reveal-stagger.in > *:nth-child(6){transition-delay:.34s;}
  .reveal-stagger.in > *:nth-child(7){transition-delay:.4s;}
  .reveal-stagger.in > *:nth-child(8){transition-delay:.46s;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal,.reveal-stagger > *{transition:none !important;opacity:1 !important;transform:none !important;}
  }
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}

  .skip-link{
    position:absolute;left:12px;top:-60px;z-index:2000;
    background:var(--navy);color:#fff;padding:12px 18px;border-radius:8px;
    font-size:14px;font-weight:600;transition:top .2s ease;
  }
  .skip-link:focus{top:12px;}

  /* ---------- HEADER ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .3s ease;
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 24px;max-width:1120px;margin:0 auto;
  }
  /* Brand logo. Two embedded variants: the full-colour mark for the light
     header, and a version with the blue recoloured to white for the navy
     footer (the original artwork's blue would sit almost invisibly there).
     Both are base64 data URIs so the file stays self-contained offline. */
  .logo{display:flex;align-items:center;flex-shrink:0;}
  .logo-img{height:43px;width:auto;display:block;}
  .logo-img-footer{height:44px;width:auto;display:block;margin-bottom:2px;}
  .nav-links{display:flex;align-items:center;gap:28px;}
  .nav-links a{
    font-size:14px;font-weight:500;color:var(--charcoal-soft);position:relative;padding:4px 0;
    transition:color .2s ease;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);
    transition:width .25s ease;
  }
  .nav-links a:hover{color:var(--navy);}
  .nav-links a:hover::after{width:100%;}
  .nav-right{display:flex;align-items:center;gap:18px;}
  .phone-placeholder{
    font-size:13.5px;font-weight:600;color:var(--charcoal-soft);
    display:flex;align-items:center;gap:6px;
  }
  .phone-placeholder svg{width:15px;height:15px;color:var(--charcoal-soft);}

  .hamburger{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:36px;height:36px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;
  }
  .hamburger span{
    width:20px;height:2px;background:var(--navy);border-radius:2px;
    transition:transform .3s ease, opacity .3s ease;
  }
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-menu{
    max-height:0;overflow:hidden;background:#fff;border-bottom:1px solid var(--line);
    transition:max-height .35s ease;
  }
  .mobile-menu.open{max-height:400px;}
  .mobile-menu-inner{padding:8px 24px 20px;display:flex;flex-direction:column;}
  .mobile-menu a{
    padding:14px 4px;font-size:15px;font-weight:500;color:var(--navy);border-bottom:1px solid var(--line);
  }
  .mobile-menu .btn{margin-top:16px;}

  @media (max-width:860px){
    .nav-links{display:none;}
    .hamburger{display:flex;}
  }
  @media (max-width:560px){
    .phone-placeholder{display:none;}
    .nav-inner{padding:12px 16px;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:124px 0 64px;
    position:relative;
    background:
      radial-gradient(circle at 88% 6%, rgba(31,135,232,0.20), transparent 42%),
      radial-gradient(circle at 8% 95%, rgba(31,135,232,0.14), transparent 40%),
      linear-gradient(160deg, #1A2634 0%, #141C26 55%, #0D131B 100%);
    overflow:hidden;
  }
  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity:.5;
  }
  .hero-grid{display:grid;grid-template-columns:1.25fr 0.75fr;gap:48px;align-items:center;position:relative;z-index:1;}
  .hero-copy{display:flex;flex-direction:column;}
  .hero h1{color:#fff;font-size:clamp(30px,4.2vw,48px);line-height:1.16;letter-spacing:-0.01em;margin:0 0 18px;font-weight:500;}
  .hero-reassure{
    display:block;font-size:0.62em;font-weight:400;color:rgba(255,255,255,0.68);
    margin-top:10px;letter-spacing:0;
  }
  .hero-sub{font-size:18px;color:rgba(255,255,255,0.78);max-width:480px;margin-bottom:34px;line-height:1.6;}

  /* The honesty clause is emphasized inside the body copy because it sits
     at the end of the paragraph — the point where scanning eyes drop off —
     and it's the single most differentiating thing on the page. The
     stay-or-move contrast doesn't need emphasis: it's protected by being
     the opening words. */
  /* Gold + bold marks the two ideas that differentiate House Partner —
     the stay-or-move flexibility at the open and the honesty promise at
     the close. Everything between them is connective tissue and stays in
     the lighter body color so the emphasis keeps its weight. */
  .hero-sub em{font-style:normal;font-weight:700;color:var(--accent);}

  .hero-cta-box{margin-bottom:26px;}
  .hero-cta-stack{display:flex;flex-direction:column;max-width:420px;}
  .btn-hero-primary{
    padding:18px 28px;font-size:16.5px;font-weight:700;
    box-shadow:0 12px 28px rgba(22,112,196,0.34);
  }
  .btn-hero-primary:hover{box-shadow:0 16px 34px rgba(22,112,196,0.42);}
  .hero-secondary-path{
    display:flex;align-items:baseline;flex-wrap:wrap;
    gap:8px;margin-top:16px;
  }
  .hero-secondary-prompt{font-size:13.5px;color:rgba(255,255,255,0.55);}
  .hero-secondary-link{
    background:none;border:none;padding:2px 0;cursor:pointer;
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--accent);
    border-bottom:1px solid transparent;transition:border-color .2s ease, gap .2s ease;
  }
  .hero-secondary-link:hover{border-color:var(--accent);gap:8px;}
  .hero-secondary-link svg{width:14px;height:14px;flex-shrink:0;}
  .hero-secondary-link .btn-spinner{
    width:13px;height:13px;border-color:rgba(127,192,245,0.3);border-top-color:var(--accent);
  }
  .hero-secondary-link.is-loading{position:relative;color:transparent !important;}
  .hero-secondary-link.is-loading .btn-label,
  .hero-secondary-link.is-loading svg{visibility:hidden;}
  .hero-secondary-link.is-loading .btn-spinner{
    display:inline-block;visibility:visible;position:absolute;left:50%;top:50%;margin:-6.5px 0 0 -6.5px;
  }

  .reassurance-list{display:flex;flex-direction:column;gap:11px;}
  .reassurance-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:rgba(255,255,255,0.68);}
  .reassurance-item svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px;}

  .hero-visual{position:relative;}
  .photo-frame{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:1/1;}
  /* Square frame matches the photo's tightest crop that keeps all three
     people in shot. A subtle warm ring lifts it off the navy hero. */
  .hero-photo{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-visual .photo-frame{border:1px solid rgba(31,135,232,0.30);}
  .photo-placeholder{
    width:100%;height:100%;
    background:repeating-linear-gradient(135deg, #EEF1F6, #EEF1F6 12px, #E6EAF2 12px, #E6EAF2 24px);
    border:1px dashed #B9C3D6;
    display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;
  }
  .photo-placeholder .ph-label{
    color:var(--charcoal-soft);font-size:13px;font-weight:600;line-height:1.5;
    display:flex;flex-direction:column;align-items:center;gap:12px;max-width:220px;
  }
  .photo-placeholder svg{width:38px;height:38px;color:#9AA7BE;}

  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{max-width:420px;margin:28px auto 0;}
  }
  @media (max-width:600px){
    .hero{padding:100px 0 44px;}
  }

  /* ---------- SECTION HEADERS ---------- */
  .sec{padding:72px 0;}
  .sec-alt{background:#fff;}
  .sec-head{max-width:640px;margin-bottom:44px;}
  .compare-head{margin-bottom:22px;}
  .sec-head h2{font-size:clamp(25px,3.2vw,34px);margin-top:12px;line-height:1.22;}
  .sec-head p{color:var(--charcoal-soft);font-size:16px;margin-top:14px;}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  @media (max-width:600px){.sec{padding:52px 0;}.sec-head{margin-bottom:32px;}}

  /* ---------- CHALLENGE STRIP ---------- */
  .challenge-strip{
    background:var(--white);border-bottom:1px solid var(--line);
    padding:26px 0;
  }
  .challenge-strip .container{
    display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;justify-content:center;
  }
  .challenge-strip-line{
    font-size:15px;font-weight:600;color:var(--navy);
  }
  .challenge-items{
    display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;
    list-style:none;margin:0;padding:0;
  }
  .challenge-items li{
    display:flex;align-items:center;gap:9px;
    font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--navy);
  }
  .challenge-items svg{width:19px;height:19px;color:var(--blue);flex-shrink:0;}
  @media (max-width:760px){
    .challenge-strip{padding:20px 0;}
    .challenge-strip .container{gap:14px;}
    .challenge-strip-line{font-size:14px;text-align:center;width:100%;}
    .challenge-items{gap:12px 20px;}
    .challenge-items li{font-size:11.5px;letter-spacing:.04em;gap:7px;}
    .challenge-items svg{width:16px;height:16px;}
  }

  /* ---------- SITUATIONS (personal, editorial cards) ---------- */
  .feel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .feel-card{
    background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);
    border-radius:12px;padding:32px 30px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .feel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-left-color:var(--navy);}
  /* Tinted icon tiles matching this section's accent left border. Slightly
     stronger tint than the tiles used elsewhere so the situation cards stay
     visually distinct from the process and comparison sections. */
  .feel-card-icon{
    width:44px;height:44px;border-radius:12px;
    background:rgba(31,135,232,0.14);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
    transition:background .3s ease, transform .3s ease;
  }
  .feel-card-icon svg{width:22px;height:22px;color:var(--blue);}
  .feel-card:hover .feel-card-icon{background:rgba(31,135,232,0.26);transform:scale(1.05);}
  .feel-card h3{font-size:19px;line-height:1.3;margin-bottom:12px;}
  .feel-card p{font-size:14.5px;color:var(--charcoal-soft);line-height:1.65;margin-bottom:16px;}
  .feel-link{
    background:none;border:none;padding:0;cursor:pointer;font-family:var(--sans);
    font-size:13.5px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:5px;
    border-bottom:1px solid transparent;transition:border-color .2s ease, gap .2s ease;
  }
  .feel-link:hover{border-color:var(--blue);gap:8px;}
  @media (max-width:760px){.feel-grid{grid-template-columns:1fr;}.feel-card{padding:28px 24px;}}

  /* ---------- PROCESS (3 steps) ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .step{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;}
  .step:hover .step-num{background:var(--blue);}
  .step-num{transition:background .3s ease;}
  .step-num{
    width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:16px;
    margin-bottom:16px;
  }
  .step h3{font-size:17px;margin-bottom:8px;}
  .step p{font-size:14px;color:var(--charcoal-soft);}
  .path-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
  .path-chip{
    display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy-2);
    background:var(--blue-light);border-radius:999px;padding:7px 12px;
  }
  .path-chip svg{width:13px;height:13px;color:var(--blue);}
  @media (max-width:900px){.steps{grid-template-columns:1fr;}}

  /* ---------- COMPARISON / DECISION GUIDE ---------- */

  /* Honesty callout */

  /* Priority guide (Section One) */
  .priority-guide-head{margin-bottom:24px;}
  .priority-guide-head h3{font-size:21px;margin-bottom:6px;}
  .priority-guide-head p{font-size:14.5px;color:var(--charcoal-soft);}
  .priority-guide{
    border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin-bottom:56px;
  }
  .priority-row{
    display:grid;
    grid-template-columns:1fr 190px 1.25fr;
    align-items:center;
    gap:24px;
    padding:18px 26px;
    border-bottom:1px solid var(--line);
    transition:background .2s ease;
  }
  .priority-row:last-child{border-bottom:none;}
  .priority-row:nth-child(even){background:var(--paper);}
  @media (hover:hover){ .priority-row:hover{background:var(--blue-light);} }
  .priority-label{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600;color:var(--navy);min-width:0;}
  .priority-icon{
    width:36px;height:36px;border-radius:10px;background:var(--blue-light);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .priority-row:nth-child(even) .priority-icon{background:#fff;}
  .priority-icon svg{width:18px;height:18px;color:var(--blue);}
  /* the verdict column is a fixed centre track so every pill lines up */
  .priority-fit{display:contents;}
  .fit-pill{
    grid-column:2;justify-self:center;
    display:flex;align-items:center;justify-content:center;
    font-size:12.5px;font-weight:700;letter-spacing:.02em;
    padding:9px 16px;border-radius:999px;white-space:nowrap;
    width:100%;max-width:190px;min-height:42px;box-sizing:border-box;
  }
  /* House Partner verdict shows the logo on white, keeping a dark outline */
  .fit-pill.fit-hp{
    /* Defined once here rather than repeating the base64 payload in
       every table row — that duplication added ~75KB to the file. */
    background:#fff url("../images/logo.png") center/auto 20px no-repeat;
    padding:8px 14px;
  }
  .fit-pill.fit-listing{background:#fff;color:var(--charcoal);}
  .fit-pill.fit-depends{background:#fff;color:var(--charcoal-soft);border:1.5px dashed #B9C3D6;}
  .fit-note{grid-column:3;font-size:13.5px;color:var(--charcoal-soft);margin:0;}

  /* Mobile: the old layout stacked label -> pill -> note, so five criteria
     ran ~950px and buried the CTA below a lot of scrolling. This grid puts
     the criterion and the verdict pill on one line (the scannable part),
     with the explanation spanning underneath — roughly half the height,
     with no information removed.
     .priority-fit becomes display:contents so its two children join the
     parent grid directly. */
  @media (max-width:760px){
    .priority-row{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:5px 10px;
      padding:13px 15px;
    }
    .priority-fit{display:contents;}
    .priority-label{
      grid-column:1;font-size:13.5px;gap:10px;flex:none;
    }
    .priority-icon{width:30px;height:30px;border-radius:9px;}
    .priority-icon svg{width:15px;height:15px;}
    .fit-pill{
      grid-column:2;justify-self:end;
      font-size:10.5px;padding:5px 10px;letter-spacing:.03em;
      width:auto;max-width:none;min-height:0;
    }
    .fit-pill.fit-hp{padding:5px 9px;}
    .fit-pill.fit-hp{background-size:auto 14px;}
    .fit-note{
      grid-column:1 / -1;font-size:12.5px;line-height:1.5;flex:none;
    }
  }

  /* very narrow phones: keep the criterion and pill on one line */
  @media (max-width:400px){
    .priority-row{padding:12px 13px;}
    .priority-label{font-size:12.8px;gap:8px;}
    .priority-icon{width:26px;height:26px;border-radius:8px;}
    .priority-icon svg{width:14px;height:14px;}
    .fit-pill{font-size:10px;padding:4px 9px;}
    .fit-pill.fit-hp{background-size:auto 13px;}
    .fit-note{font-size:12px;}
  }

  /* Best-fit icon cards (Section Two) */

  /* Progressive disclosure: detailed table for those who want it */

  @media (prefers-reduced-motion: reduce){
  }
  .compare-note{font-size:12.5px;color:var(--charcoal-soft);margin-top:16px;font-style:italic;}
  .inline-cta{
    display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
    margin-top:36px;padding-top:32px;border-top:1px solid var(--line);text-align:center;
  }
  .inline-cta p{font-size:15px;font-weight:600;color:var(--navy);}
  @media (max-width:560px){
    .inline-cta{flex-direction:column;gap:14px;}
    .inline-cta .btn{width:100%;}
  }

  /* Mobile: convert table rows to stacked cards */
  @media (max-width:760px){
  }

  /* ---------- BENEFITS ---------- */

  /* ---------- OUR PROMISE ---------- */
  /* Deliberately the only full-bleed dark section in the page body. It's a
     pause in the scroll — one claim, oversized, nothing else competing.
     The visual break is doing as much work as the words. */
  .promise-sec{background:linear-gradient(160deg,#1A2634 0%, #101820 100%);}
  .promise-card{max-width:820px;margin:0 auto;text-align:center;}
  .promise-statement{
    font-family:var(--serif);font-weight:500;color:#fff;
    font-size:clamp(24px,3.4vw,38px);line-height:1.28;letter-spacing:-0.01em;
    margin:16px 0 20px;
  }
  .promise-statement em{font-style:normal;color:var(--accent);}
  .promise-support{
    font-size:16px;line-height:1.7;color:rgba(255,255,255,0.7);
    max-width:600px;margin:0 auto;
  }
  @media (max-width:600px){
    .promise-support{font-size:14.5px;}
  }

  /* ---------- FLEXIBILITY STRIP (folded into How It Works) ---------- */
  .flex-strip{
    margin-top:44px;padding-top:36px;border-top:1px solid var(--line);
  }
  .flex-strip-intro{
    font-size:15px;color:var(--charcoal-soft);max-width:620px;margin-bottom:22px;
  }
  .flex-strip-note{
    font-size:13px;color:var(--charcoal-soft);font-style:italic;margin-top:18px;
  }
  .flex-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .flex-option{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .flex-option:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
  .flex-option-icon{width:36px;height:36px;border-radius:10px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
  .flex-option-icon svg{width:18px;height:18px;color:var(--blue);}
  .flex-option h3{font-size:15px;margin-bottom:5px;}
  .flex-option p{font-size:13.5px;color:var(--charcoal-soft);line-height:1.5;}
  @media (max-width:760px){.flex-options{grid-template-columns:1fr;}}

  /* ---------- FOUNDER STORY ---------- */
  .story-placeholder{
    font-size:14.5px;line-height:1.7;color:var(--charcoal-soft);margin-bottom:16px;
    padding-left:14px;border-left:2px dashed #C6CEDD;
  }
  .story-placeholder strong{color:var(--navy);font-weight:700;}
  .team-signoff{margin-top:20px;font-size:14px;color:var(--charcoal-soft);}

  /* ---------- TEAM / TRUST ---------- */
  .team-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:center;}
  .team-photo .photo-placeholder{aspect-ratio:1/1;border-radius:18px;}
  .team-copy p{color:var(--charcoal-soft);font-size:15px;margin-bottom:14px;}
  .placeholder-text{
    display:inline-block;background:var(--blue-light);color:var(--navy-2);font-weight:600;font-size:13.5px;
    padding:10px 14px;border-radius:10px;border:1px dashed #A9C0F2;
  }
  .placeholder-inline{
    font-style:italic;border-bottom:1px dashed currentColor;padding-bottom:1px;
  }
  @media (max-width:900px){.team-grid{grid-template-columns:1fr;}.team-photo{max-width:340px;margin:0 auto;}}

  /* ---------- TESTIMONIAL PLACEHOLDERS ---------- */
  .testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .t-card{
    background:#fff;border:1px dashed #C6CEDD;border-radius:var(--radius);padding:26px 22px;
    display:flex;flex-direction:column;gap:14px;align-items:flex-start;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .t-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:var(--shadow-sm);}
  .t-card svg{width:24px;height:24px;color:#B9C3D6;}
  .t-card p{font-size:14px;color:var(--charcoal-soft);font-style:italic;}
  @media (max-width:900px){.testimonial-grid{grid-template-columns:1fr;}}

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:740px;margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q-heading{margin:0;font-weight:inherit;font-size:inherit;font-family:inherit;}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;
    cursor:pointer;background:none;border:none;width:100%;text-align:left;
    font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--navy);
  }
  .faq-q .plus{width:20px;height:20px;flex-shrink:0;position:relative;}
  .faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--navy);border-radius:2px;transition:transform .3s ease;}
  .faq-q .plus::before{width:13px;height:2px;top:9px;left:3.5px;}
  .faq-q .plus::after{width:2px;height:13px;top:3.5px;left:9px;}
  .faq-item.open .faq-q .plus::after{transform:rotate(90deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease, padding .35s ease;font-size:14px;color:var(--charcoal-soft);padding:0 4px;}
  .faq-item.open .faq-a{max-height:420px;padding:0 4px 20px;}

  /* ---------- FINAL CTA ---------- */

  /* ---------- CONTACT / FORM SECTION ---------- */
  .form-card{
    max-width:620px;margin:0 auto;background:#fff;border-radius:20px;border:1px solid var(--line);
    box-shadow:var(--shadow-md);padding:38px 34px;
  }
  .form-progress{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:28px;flex-wrap:nowrap;}
  .expect-list{
    display:flex;flex-direction:column;gap:10px;margin-bottom:26px;padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }
  .expect-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--charcoal-soft);}
  .expect-item svg{width:17px;height:17px;color:var(--blue);flex-shrink:0;}
  @media (max-width:560px){.expect-item{font-size:13px;}}
  .fp-step{display:flex;align-items:center;gap:8px;}
  .fp-dot{
    width:26px;height:26px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--charcoal-soft);
    transition:background .3s ease, border-color .3s ease, color .3s ease;flex-shrink:0;
  }
  .fp-dot.active{background:var(--blue);border-color:var(--blue);color:#fff;}
  .fp-dot.done{background:var(--success);border-color:var(--success);color:#fff;}
  .fp-line{width:16px;height:2px;background:var(--line);border-radius:2px;flex-shrink:0;}
  .fp-label{font-size:11px;color:var(--charcoal-soft);text-align:center;margin-top:4px;display:none;}
  .progress-track{
    height:4px;background:var(--line);border-radius:999px;overflow:hidden;
    margin:16px 0 28px;
  }
  .progress-fill{
    height:100%;width:16.6%;border-radius:999px;
    background:linear-gradient(90deg, var(--blue), var(--blue));
    transition:width .5s cubic-bezier(.4,0,.2,1);
  }
  @media (prefers-reduced-motion: reduce){.progress-fill{transition:none;}}
  .step-kicker{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px;}
  .step-heading{font-size:21px;margin-bottom:20px;line-height:1.3;}
  .step-heading + .step-subtext{margin-top:-14px;}
  .step-subtext{font-size:14px;color:var(--charcoal-soft);margin-bottom:22px;line-height:1.6;}
  @media (max-width:400px){
    .fp-dot{width:22px;height:22px;font-size:10.5px;}
    .fp-line{width:10px;}
  }

  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field.full{grid-column:1/-1;}
  .field label{font-size:13px;font-weight:600;color:var(--navy);}
  .field input,.field select,.field textarea{
    border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--sans);
    font-size:14.5px;color:var(--charcoal);background:var(--paper);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);}
  .field textarea{resize:vertical;min-height:84px;}
  .field-error{font-size:12px;color:#C0392B;display:none;}
  .field.invalid input, .field.invalid select{border-color:#C0392B;}
  .field.invalid .field-error{display:block;}
  @keyframes fieldShake{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(2px);}
    30%,50%,70%{transform:translateX(-4px);}
    40%,60%{transform:translateX(4px);}
  }
  .field.shake{animation:fieldShake .4s ease;}
  @media (prefers-reduced-motion: reduce){.field.shake{animation:none;}}

  .intent-options{display:flex;flex-direction:column;gap:10px;}
  .intent-option{
    display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    cursor:pointer;transition:border-color .2s ease, background .2s ease;
  }
  .intent-option:hover{border-color:var(--blue);}
  .intent-option input{margin:0;accent-color:var(--blue);width:16px;height:16px;flex-shrink:0;}
  .intent-option span{font-size:14px;color:var(--charcoal);}
  .intent-option.selected{border-color:var(--blue);background:var(--blue-light);}

  /* Premium situation cards (Step 1 of the lead form) — same underlying
     radio-group behavior as .intent-option, laid out as a richer grid
     with an icon, title, and one-line description per option. */
  .situation-cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  }
  .situation-card{
    flex-direction:column;align-items:flex-start;position:relative;
    padding:20px 18px;gap:0;text-align:left;
  }
  .situation-card input{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .situation-card-icon{
    width:38px;height:38px;border-radius:10px;background:var(--blue-light);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
    transition:background .2s ease;
  }
  .situation-card-icon svg{width:19px;height:19px;color:var(--blue);}
  .situation-card-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:5px;}
  .situation-card-desc{font-size:13px;color:var(--charcoal-soft);line-height:1.5;font-weight:400;}
  .situation-check{
    position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;
    background:var(--blue);display:flex;align-items:center;justify-content:center;
    opacity:0;transform:scale(0.6);transition:opacity .2s ease, transform .2s ease;
  }
  .situation-check svg{width:12px;height:12px;color:#fff;}
  .situation-card.selected .situation-check{opacity:1;transform:scale(1);}
  .situation-card.selected .situation-card-icon{background:var(--blue);}
  .situation-card.selected .situation-card-icon svg{color:#fff;}
  @media (max-width:900px){.situation-cards{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.situation-cards{grid-template-columns:1fr;}}

  .form-actions{display:flex;gap:12px;margin-top:8px;}
  .form-actions .btn-ghost{flex:0 0 auto;}
  .form-actions .btn-primary{flex:1;}
  .form-note{font-size:12.5px;color:var(--charcoal-soft);margin-top:14px;text-align:center;}
  .form-note svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px;color:var(--success);}
  .prototype-note{font-size:11.5px;color:#9AA3B5;text-align:center;margin-top:10px;}

  .form-step{display:none;}
  .form-step.active{display:block;}

  .form-success{display:none;text-align:center;padding:20px 6px;opacity:0;transform:translateY(10px) scale(.98);}
  .form-success.show{
    display:block;
    animation:successIn .55s cubic-bezier(.2,.8,.3,1) forwards;
  }
  @keyframes successIn{
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  .form-success svg{width:48px;height:48px;color:var(--success);margin:0 auto 16px;}
  .form-success.show svg circle,
  .form-success.show svg path:first-child{
    stroke-dasharray:64;stroke-dashoffset:64;
    animation:drawCircle .6s ease forwards;
  }
  .form-success.show svg polyline{
    stroke-dasharray:20;stroke-dashoffset:20;
    animation:drawCheck .35s ease forwards .5s;
  }
  @keyframes drawCircle{to{stroke-dashoffset:0;}}
  @keyframes drawCheck{to{stroke-dashoffset:0;}}
  @media (prefers-reduced-motion: reduce){
    .form-success{opacity:1;transform:none;}
    .form-success.show{animation:none;}
    .form-success.show svg circle, .form-success.show svg path:first-child, .form-success.show svg polyline{
      animation:none;stroke-dashoffset:0;
    }
  }
  .form-success h3{margin-bottom:8px;font-size:19px;}
  .form-success p{color:var(--charcoal-soft);font-size:14px;}
  .success-ref{
    margin-top:14px;font-size:12.5px;color:var(--charcoal-soft);font-family:var(--sans);
    background:var(--paper);border:1px solid var(--line);border-radius:8px;
    padding:8px 14px;display:inline-block;letter-spacing:.02em;
  }

  @media (max-width:560px){
    .form-row{grid-template-columns:1fr;}
    .form-card{padding:26px 20px;}
    .fp-label{display:none;}
  }

  /* ---------- STICKY MOBILE CTA (single button) ---------- */
  .mobile-cta-bar{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:998;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,28,38,0.12);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .3s ease;
  }
  .mobile-cta-bar.show{transform:translateY(0);}
  .mobile-cta-bar a{display:block;text-align:center;}
  @media (max-width:980px){.mobile-cta-bar{display:block;}}
  /* keep page content from ever being hidden behind the bar */
  body{padding-bottom:0;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy);color:rgba(255,255,255,0.6);padding:48px 0 26px;}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,0.1);}
  .footer-brand p{margin-top:14px;font-size:13.5px;line-height:1.7;max-width:300px;color:rgba(255,255,255,0.5);}
  .footer-col h4{color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
  .footer-col li{margin-bottom:11px;}
  .footer-col a, .footer-col span{font-size:14px;color:rgba(255,255,255,0.6);}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{padding-top:20px;font-size:12.5px;color:rgba(255,255,255,0.4);}
  .footer-legal{max-width:760px;font-size:11.5px;line-height:1.7;color:rgba(255,255,255,0.35);margin-top:14px;}
  @media (max-width:700px){.footer-grid{grid-template-columns:1fr;}}
  /* =====================================================================
     MOBILE OPTIMIZATION PASS
     Everything below is scoped to small screens and overrides earlier
     rules by cascade order — it exists to make the site feel like a
     native mobile experience rather than a shrunk desktop layout.
     ===================================================================== */
  @media (max-width:768px){

    /* Prevent iOS Safari from auto-zooming into any text field on focus:
       inputs under 16px trigger it. This is the single biggest thing
       that makes a form feel "web" instead of "native". */
    .field input, .field select, .field textarea{
      font-size:16px;
    }

    /* Tap targets: buttons, nav, and form controls all meet a
       comfortable ~48px minimum touch height. */
    .btn{padding:15px 24px;min-height:48px;}
    .btn-sm{padding:13px 18px;min-height:44px;}
    .hamburger{width:44px;height:44px;}
    /* Keep the full "housepartner" wordmark on mobile — the name is the
       brand, so the mark alone isn't enough. The lockup is scaled down to
       fit alongside the CTA and hamburger within a 375px header. */
    .logo-img{display:block;height:36px;}
    .logo-img-footer{height:34px;}
    .nav-right{gap:12px;}
    .faq-q{padding:18px 2px;min-height:52px;}
    .mobile-menu a{padding:16px 4px;min-height:48px;display:flex;align-items:center;}

    .intent-option{padding:14px 16px;min-height:52px;}
    .situation-card{padding:18px 16px;min-height:0;}
    .intent-option input{width:19px;height:19px;}
    .intent-options{gap:12px;}

    /* Section rhythm: tighter, more intentional spacing rather than
       desktop whitespace scaled down. */
    .sec{padding:48px 0;}
    .sec-head{margin-bottom:28px;}
    .sec-head p{font-size:15px;}
    .container{padding:0 20px;}

    /* Typography: slightly tighter line-length and sizes so headings
       don't feel like desktop text wrapped awkwardly. */
    .hero h1{line-height:1.2;}
    .hero-sub{font-size:16px;}
    .step-heading{font-size:19px;}
    .priority-guide-head h3{font-size:19px;}

    /* Hero primary CTA is already full-width (.btn-block) and the
       secondary path is a text link, so no stacking override is
       needed here anymore. */

    /* Form steps: the primary action stays large and reachable at the
       thumb-friendly bottom of the card; Back becomes a lighter,
       secondary tap rather than competing for space beside it. */
    .form-actions{flex-direction:column-reverse;gap:10px;}
    .form-actions .btn-primary{width:100%;}
    .form-actions .btn-ghost{width:100%;background:none;border-color:transparent;color:var(--charcoal-soft);}
    .form-actions .btn-ghost:hover{border-color:var(--line);}
    .form-card{padding:24px 18px;}
    .step-kicker{font-size:11px;}

    /* Comparison cards (mobile stacked view): slightly larger type
       for one-handed reading. */

    /* Cards: consistent, slightly tighter padding so nothing feels
       like it's floating in excess whitespace. */
    .feel-card{padding:26px 22px;}
    .step{padding:24px 20px;}
    .t-card{padding:22px 20px;}

    /* Sticky CTA bar: guarantee it never sits on top of the last
       section's content, accounting for iPhone home-indicator space. */
    .mobile-cta-bar a{min-height:48px;}
  }

  @media (max-width:980px){
    body.has-sticky-bar{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  }

  /* The enlarged lockup runs 176px wide on mobile, so the header CTA now
     runs out of room at ~460px rather than 400px. Dropping it is still the
     least costly trade: the hero CTA sits immediately below, and the sticky
     bottom bar carries the CTA through the rest of the page. */
  @media (max-width:460px){
    .nav-right .btn-primary{display:none;}
  }

  @media (max-width:400px){
    .logo-img{height:34px;}
    .hero h1{font-size:27px;}
  }