/* ===== Tokens / base ===== */
*{box-sizing:border-box}
:root{ --blue:#245ea2; --red:#e11d2a; --text:#1b1f23; --card:#f6f7f9; --shadow:0 10px 30px rgba(0,0,0,.06);  --header-gap-mult:1; }
html,body{margin:0}
body{
  font-family:"Gotham",Arial,sans-serif; color:var(--text);
  line-height:1.6; background:#fff; padding-top:140px; /* space for logo + replay button */
}
.container{width:min(1100px,92%);margin:0 auto}
.card{background:var(--card);border:1px solid #e6e8ee;border-radius:.9rem;padding:1rem;box-shadow:var(--shadow)}
.btn-primary{background:var(--blue);color:#fff;border:0;border-radius:.6rem;padding:.8rem 1.2rem;cursor:pointer;font-weight:700}
.btn-ghost{background:transparent;border:1px solid #cfd6e3;color:#1b3c6b;border-radius:.6rem;padding:.5rem .9rem;font-weight:700}
a{color:var(--blue);text-decoration:none}
h1,h2{margin:0 0 .6rem}

/* ===== Header / Dock Nav ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,.95);border-bottom:1px solid #e6e8ee;
  backdrop-filter:saturate(180%) blur(10px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;width:min(1200px,92%);margin:0 auto}
.brand{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.main-logo{height:128px;width:auto;max-width:420px;object-fit:contain;display:block; transition:height .25s ease;
}
.replay-btn{
  position:absolute; right:0; bottom:-10px;
  background:#2A6BB7; color:#fff; border:none;
  padding:.28rem .55rem; border-radius:.5rem; font-weight:400; cursor:pointer; line-height:1;
  transform:scale(.8); /* 50% smaller than previous */
}

/* Two-line menu items */
.nav.dock-nav{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap}
.nav.dock-nav a{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:700; color:#245ea2; line-height:1.05; padding:.15rem .25rem; transition:transform .08s linear;
}
.nav.dock-nav a span{display:block}
.nav .btn-contact{color:var(--red)}

/* Dock magnify (cursor‑based; up to 1.5x at center) */
@media (hover:hover){
  .dock-nav{--dockMax:1.5; --dockMin:1.0;}
  .dock-nav a{transform:scale(var(--dockMin))}
}

/* ===== Intro video modal ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:2000}
.modal.show{display:flex}
.modal-inner{background:#000;border-radius:.8rem;position:relative;width:min(960px,92%);padding:1rem;overflow:hidden}
.modal video{width:100%;height:auto;display:block;border-radius:.6rem}
.modal-close{position:absolute;top:8px;right:8px;background:#111;border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:10}
.modal-controls{display:flex;gap:.6rem;margin-top:.6rem;justify-content:flex-end}
.modal.video-shrinking .modal-inner{transition:transform .5s ease, opacity .5s ease}

/* ===== Hero video background ===== */
.hero{position:relative;min-height: 100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(1.18) contrast(1.06)}
.hero-shade{position:absolute;inset:0;background:
  radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.35) 100%);
  z-index:-1}
.hero h1,.hero p{color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.45)}
.hero h1{font-size:clamp(32px,5vw,54px)}
.hero p{opacity:.92}

/* ===== Sections / Parallax ===== */
.section{min-height:auto;display:flex;align-items:center;justify-content:center;text-align:center;padding:2.2rem 0}
.parallax-section{transform:scale(.95);transition:transform .9s ease, opacity .9s ease;opacity:.92}
.parallax-section.inview{transform:scale(1);opacity:1}

/* ===== Tools grid (Home Search | Eval) ===== */
.tools-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.2rem; align-items:stretch }
.tools-grid > *{ min-width:0; }
.tool h2{margin-bottom:.5rem}

/* ===== Reverse‑raindrops showcase ===== */
.rain-section{
  position:relative; padding:0; min-height:160vh; background:#fff; overflow:visible;
  border-top:1px solid #f0f2f6; border-bottom:1px solid #f0f2f6;
}
.rain-viewport{
  position:relative; height:260vh; max-width:1200px; margin:0 auto;
}
.rain-item{
  position:absolute; bottom:-28vh;
  width:clamp(160px, 22vw, 320px);
  aspect-ratio:4/3; object-fit:cover; border-radius:.8rem;
  opacity:0; transform:translateY(24vh) scale(.95);
  transition:opacity .6s ease, transform .6s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.rain-item.show{ opacity:1 }

/* ===== Forms / video wraps ===== */
.form{display:grid;grid-template-columns:1fr;gap:.6rem;max-width:520px;margin:0 auto}
.form input,.form textarea,.form select{width:100%;padding:.8rem 1rem;border:1px solid #dfe3ea;border-radius:.6rem;font:inherit}
/* Ensure dropdown text matches other fields (cosmetic only) */
.form select{color:#000;}
.form select option{color:#000;}
.form select option:disabled{color:#000;}
.video-wrap iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:.6rem}
.video-wrap.half{max-width:560px;margin:0 auto}


#market-updates .video-wrap.card{
  padding:0;
}
#wall-of-fame .flow{
  padding:0;
}
/* ===== Wall of Fame: cover flow (no scrollbars, cursor proximity up to 1.5x) ===== */
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}
.flow{
  display:flex; gap:18px; overflow:visible; /* no visible scrollbars */
  justify-content:center; align-items:center; padding:10px; flex-wrap:nowrap;
}
.flow iframe{
  flex:0 0 320px; height:180px; border:0; border-radius:.6rem;
  transition:transform .08s linear, box-shadow .2s ease;
  transform:scale(1);
}

/* ===== About 3‑column ===== */
.about3{
  display:grid;grid-template-columns:1.1fr .8fr 1.1fr;gap:1rem;align-items:stretch;text-align:left
}
.about3 .card{height:100%}
.about3-text .scrollbox{ max-height:340px; overflow:auto; padding-right:.5rem; }
.about3-photo img{ width:100%; height:100%; max-height:340px; object-fit:cover; border-radius:.6rem; }

/* ===== Footer (black) ===== */
.footer{
  background:#000; color:#fff; text-align:center; padding:2.2rem 0;
}
.footer-inner{width:min(1100px,92%);margin:0 auto}
.footer-row{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center}
.footer-left,.footer-right{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.ft-logo{max-height:60px;width:auto;object-fit:contain;display:block}
.hbtfe-wrap{background:#000;border-radius:.4rem;padding:.3rem .6rem}
.ft-logo.hbtfe{max-height:120px}
.footer-info{color:#bcd2ea}
.footer-info a{color:#bcd2ea;text-decoration:underline}
.signup-btn{margin-top:.6rem;background:#245ea2;color:#fff;border:0;border-radius:.6rem;padding:.6rem 1rem;font-weight:700}
.footer-disclaimer{width:min(1100px,92%);margin:1rem auto 0;color:#c6cbd3;font-size:.9rem;line-height:1.5;text-align:center}


/* ===== Responsive caps: never larger than desktop ===== */
.grid{grid-template-columns:repeat(auto-fit,minmax(240px,320px)) !important;justify-content:center !important;}
/* ===== Responsive ===== */
@media (max-width:900px){
  body{padding-top:126px}
  .main-logo{height:96px}
  .about3{grid-template-columns:1fr}

  .about3-photo{max-width:320px;margin:0 auto}
  .about3-photo img{max-height:300px}
  .footer-row{grid-template-columns:1fr}
  .ft-logo.hbtfe{max-height:84px}
}


/* --- Dynamic header height handling --- */
:root{ --header-h: 120px; --header-gap-mult: 1; } /* fallback */
html{ scroll-padding-top: calc(var(--header-h) * var(--header-gap-mult)); }
#headerSpacer{ height: calc(var(--header-h) * var(--header-gap-mult)); }


/* Ensure large logo at top across pages */
body.at-top .main-logo{ height:128px; }


/* HBTF: maintain strong hero presence on desktop; soften on mobile */
@media (max-width: 768px){
  /* Mobile-only: replace hero video with static poster image */
  #hero{
    background-image: url('hero-poster.webp');
    background-image: image-set(
      url('hero-poster.webp') type('image/webp'),
      url('hero-poster.webp') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  #heroVideo{ display:none !important; }
}


/* HBTF hero enforced */
.hero{ min-height: 100vh !important; }

@media (max-width: 768px){
  .hero{ min-height: 80vh !important; }
}


/* ===== Dollar trail effect for Free Home Evaluation ===== */
#home-search-eval{ position: relative; }
.trail-dollar{
  position:absolute;
  left:0; top:0;
  transform: translate(-50%, -50%);
  pointer-events:none;
  color:#16a34a; /* green-600 */
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  animation: hbtf-dollar-float .9s ease-out forwards;
  will-change: transform, opacity;
  font-weight: 700;
}
@keyframes hbtf-dollar-float{
  0%   { opacity:.95; transform: translate(-50%,-50%) scale(1); }
  60%  { opacity:.6;  transform: translate(-50%,-70%) scale(.92); }
  100% { opacity:0;   transform: translate(-50%,-100%) scale(.85); }
}


/* HBTF: confine $ trail to the Free Home Evaluation form boundary */
#evalForm{ position: relative; overflow: hidden; }

/* ===== Parallax Background (MAIN PAGE ONLY) ===== */
#parallax-bg-wrap{ position:relative; }

/* Background-only parallax "stage" (lives behind content; never affects layout) */
#parallax-stage{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
  opacity:0;
  transition:opacity .18s ease;
}
#parallax-stage.is-active{ opacity:1; }

/* Every real section inside the parallax range sits above the stage */
#parallax-bg-wrap > *:not(#parallax-stage){
  position:relative;
  z-index:1;
}


/* Intentional blank space to show parallax between sections */
.parallax-gap{
  height: var(--parallax-gap-h, 40vh);
} /* PART 17: shrink gap */
/* Floating photos (full-bleed rectangles, ~half size) */
#parallax-stage .parallax-photo{
  position:absolute;
  width: clamp(160px, 26vw, 320px);
  height:auto;
  opacity:.92;
  will-change: transform;
  transform: translate3d(0,0,0);
  object-fit: cover;
  display:block;
}

/* slightly softer on small screens */
@media (max-width:900px){
  #parallax-stage .parallax-photo{ opacity:.80; }
}
/* --- HBTF: About Me title-to-first-paragraph spacing (surgical) --- */
#about .about3-text > h2{ margin-bottom: 1rem !important; }
#about .about3-text .scrollbox > p:first-child{ margin-top: 0; }

/* ABOUT MARQUEE START */
.about-marquee{
  position: relative;
  background-image: url('ABOUT-BRYDON-768x512.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.about-marquee__overlay{
  position: relative;
  background: rgba(0, 90, 170, 0.88); /* blue panel */
  padding: clamp(18px, 3vw, 34px) 0;
}

.about-marquee__row{
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

.about-marquee__track{
  display: flex;
  gap: clamp(14px, 2.2vw, 26px);
  width: max-content;
  padding-left: clamp(14px, 3vw, 40px);
  padding-right: clamp(14px, 3vw, 40px);
  animation: aboutMarqueeLeft 42s linear infinite;
}

.about-marquee__track--reverse{
  animation: aboutMarqueeRight 64s linear infinite;
}

.about-card{
  flex: 0 0 auto;
  width: clamp(240px, 30vw, 420px);
  background: rgba(0, 70, 140, 0.96);
  color: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.about-card p{
  margin: 0;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  min-height: calc(1.25em * 2);
}

@keyframes aboutMarqueeLeft{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes aboutMarqueeRight{
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-marquee__track,
  .about-marquee__track--reverse{
    animation: none;
    transform: translateX(0);
  }
}
/* ABOUT MARQUEE END */


/* ===== REX31 ABOUT PARALLAX (CSS-ONLY, SCOPED) =====
   This uses background:#e0e0e0; border:2px solid #bfbfbf; border-radius:14px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}
#about.parallax-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.30);
  pointer-events:none;
}
#about.parallax-section .container{
  position: relative;
  z-index: 1;
}
/* ===== END REX31 ABOUT PARALLAX ===== */






/* Profile photo card styling (match standard grey box) */
.about3-photo.card{
  background:#e0e0e0;
  border:2px solid #bfbfbf;
  border-radius:14px;
  padding:16px;
  box-sizing:border-box;
  height:auto;
}
.about3-photo.card img{
  height:auto;
}

/* Surgical: About Me and Let's Chat box styling */
#about .about3-text.card,
#about .about3-chat.card{
  background:#e0e0e0;
  border:2px solid #bfbfbf;
  border-radius:14px;
  padding:16px;
  box-sizing:border-box;
}


/* ===== about3 opaque paint layer (final) ===== */
/* Prevent parallax bleed by forcing an opaque background on trio cards */
#about .about3-text.card,
#about .about3-chat.card,
#about .about3-photo.card{
  background-color:#e0e0e0 !important;
  background-image:none !important;
}
/* ===== end about3 opaque paint layer ===== */


/* ===== about opacity override: prevent parallax bleed through during section fade ===== */
#about.parallax-section{
  opacity: 1 !important;
  transition: transform .9s ease !important;
}
/* ===== end about opacity override ===== */


/* MENU SIZE + CENTERING (TOP 32px, SCROLLED 16px) */
.site-header:not(.scrolled) .nav.dock-nav a{ font-size:32px; }
.site-header.scrolled .nav.dock-nav a{ font-size:16px; }
.nav.dock-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


/* HBTF WRAPPER SCALE SHRINK */
.site-header.scrolled a#brandAnchor.brand,
.site-header.scrolled .brand{
  transform: scale(0.60);
  transform-origin: left center;
}

/* HBTF HEADER INNER COMPACT */
.site-header.scrolled .header-inner{
  padding-top:0.4rem !important;
  padding-bottom:0.4rem !important;
}
/* ===== HBTF: SCROLLED HEADER TRUE SHRINK (layout + visuals) ===== */
/* Transform scale does NOT reduce layout box height. Use real heights instead. */
.site-header.scrolled a#brandAnchor.brand,
.site-header.scrolled .brand{
  transform: none !important;
}

.site-header.scrolled .main-logo{
  height: 76.8px !important; /* 128px * 0.60 */
  width: auto !important;
}

.site-header.scrolled .header-inner{
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}
/* ===== HBTF: MOBILE DEFAULT COMPACT HEADER (Pic 2 from first paint) ===== */
@media (max-width: 768px){
  /* Force "scrolled" visual sizing even before scroll, without touching desktop */
  .site-header:not(.scrolled) .main-logo{ height:76.8px !important; width:auto !important; }
  .site-header:not(.scrolled) .header-inner{ padding-top:0.4rem !important; padding-bottom:0.4rem !important; }
  .site-header:not(.scrolled) .nav.dock-nav a{ font-size:16px !important; }

  /* Match reduced header height so content doesn't start too low */
  body{ padding-top:110px !important; }
}



/* ===== HBTF: It's Your Move — mobile image swap (desktop untouched) ===== */
/* Replaces 1536px JPEGs (~220-300KB each) with 800px WebP (~50-70KB each) on mobile */
@media (max-width: 768px){
  #home-search-eval .move-box[href="buyers.html"]  { --bg: url('Uploads/advancedsearch2-mobile.webp'); }
  #home-search-eval .move-box[href="sellers.html"] { --bg: url('Uploads/advancedsearch3-mobile.webp'); }
}

/* ===== HBTF: Home Search/Eval full-width container on mobile (scoped) ===== */
@media (max-width: 768px){
  #home-search-eval .container{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box;
  }
}


/* HBTF: Exact profile font adjustments */
#about .about3-photo .profile-meta > strong{
  font-size:32px !important;
  font-weight:700 !important;
}

.profile-phone{
  font-size:28px !important;
}

/* HBTF: Exact 32px gap between email and stats line */
.profile-stats{
  margin-top:32px !important;
}