/* Homepage: one page, Buy or Sell chosen in the hero. Loaded after styles.css. */

.bs-hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.bs-hero-media { position: absolute; inset: 0; z-index: -1; }
.bs-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.bs-hero-photo--sell { opacity: 0; }
.bs-hero[data-mode="sell"] .bs-hero-photo--sell { opacity: 1; }
.bs-hero[data-mode="sell"] .bs-hero-photo--buy { opacity: 0; }
.bs-hero-veil { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(0 27 55 / .78) 0%, rgb(0 27 55 / .62) 45%, rgb(0 27 55 / .88) 100%); }

.bs-hero-inner { max-width: 820px; margin: 0 auto; padding: 3.25rem 1.5rem 3.5rem; text-align: center; }
.bs-eyebrow { margin: 0 0 .8rem; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.bs-hero h1 { margin: 0 auto .7rem; max-width: 20ch; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.015em; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 20 45 / .45); }
.bs-lede { margin: 0 auto 1.6rem; max-width: 38rem; font-size: 1.08rem; line-height: 1.55; font-weight: 300; color: #fff; }

.bs-card { text-align: left; background: rgb(0 27 55 / .95); border: 1px solid rgb(189 144 66 / .3);
  border-radius: 20px; box-shadow: 0 22px 56px rgb(0 10 28 / .45); overflow: hidden; scroll-margin-top: 90px; }

.bs-tabs { display: grid; grid-template-columns: 1fr 1fr; background: rgb(255 255 255 / .06); border-bottom: 1px solid rgb(189 144 66 / .3); }
.bs-tab { appearance: none; border: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 68px; padding: .9rem 1rem; background: transparent; color: rgb(255 255 255 / .75);
  font: 600 1.15rem/1.2 var(--font-body); letter-spacing: .01em; position: relative;
  transition: background .2s ease, color .2s ease; }
.bs-tab:hover { color: #fff; background: rgb(255 255 255 / .06); }
.bs-tab[aria-selected="true"] { background: var(--cream); color: var(--navy); }
.bs-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold); }
.bs-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.bs-tab__icon { display: inline-flex; }

.bs-panel { padding: 1.35rem 1.6rem 1.4rem; }
.bs-panel-intro { margin-bottom: 1rem; }
.bs-panel-intro h2 { margin: 0 0 .25rem; font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; color: #fff; }
.bs-panel-intro p { margin: 0; font-size: .95rem; color: rgb(255 255 255 / .88); }

.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.bs-card .field { margin-bottom: .9rem; }
.bs-card label { color: rgb(255 255 255 / .92); font-size: .74rem; margin-bottom: .3rem; }
.bs-card input, .bs-card select { width: 100%; min-height: 48px; padding: 0 .85rem; font: 400 16px/1.2 var(--font-body);
  color: var(--navy); background: #f5f7fa; border: 1px solid transparent; border-radius: 10px; box-sizing: border-box; }
.bs-card select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23002349' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.2rem; }
.bs-card input:focus, .bs-card select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(189 144 66 / .3); }
.bs-card .bs-submit { margin-top: .3rem; min-height: 54px; background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; font-size: 1rem; }
.bs-card .bs-submit:hover, .bs-card .bs-submit:focus-visible { background: #a87c33; border-color: #a87c33; }
.bs-card .form-footnote { margin: .7rem 0 0; font-size: .76rem; line-height: 1.45; color: rgb(255 255 255 / .7); text-align: center; }
.bs-card .form-error { margin: 0 0 .7rem; padding: .6rem .8rem; border-radius: 8px; background: var(--error-bg); color: var(--error-text); font-size: .9rem; }
.bs-success { color: #fff; padding: .4rem 0; }
.bs-success h2 { font-family: var(--font-display); font-weight: 500; color: #fff; margin: 0 0 .5rem; }
.bs-success p { color: rgb(255 255 255 / .9); }

/* Buy / Sell sections */
.bs-path { padding: 4.5rem 1.5rem; scroll-margin-top: 70px; }
.bs-path--buy { background: var(--cream-soft); }
.bs-path--sell { background: var(--cream); }
.bs-path-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.bs-path--sell .bs-path-media { order: 2; }
.bs-path-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow); display: block; }
.bs-path-copy h2 { margin: 0 0 1.2rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; color: var(--navy); }
.bs-bullets { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.bs-bullets li { position: relative; padding: 0 0 0 1.9rem; margin: 0 0 1rem; line-height: 1.55; color: var(--text-gray); }
.bs-bullets li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/10px no-repeat; }
.bs-bullets strong { color: var(--navy); font-weight: 600; }
.bs-invite-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* Sticky Call / Text pills: the only place the phone appears. Desktop gets them too. */
@media (min-width: 821px) {
  .call-bar { display: flex; gap: 8px; position: fixed; right: 18px; bottom: 18px; z-index: 9999; }
  .call-bar a { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 76px; padding: 0 18px;
    border-radius: 22px; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
  .call-bar__call { background: #0b1f3f; color: #fff; }
  .call-bar__text { background: #fff; color: #0b1f3f; border: 1px solid #0b1f3f; }
}
.call-bar.is-hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }
.call-bar { transition: opacity .2s ease, transform .2s ease; }
@media (max-width: 820px) {
  .call-bar { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 9999; }
  .call-bar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 24px;
    font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  .call-bar__call { background: #0b1f3f; color: #fff; }
  .call-bar__text { background: #fff; color: #0b1f3f; border: 1px solid #0b1f3f; }
  body.has-call-bar { padding-bottom: 76px; }
}

@media (max-width: 900px) {
  .bs-path-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .bs-path--sell .bs-path-media { order: 0; }
  .bs-path { padding: 3rem 1.25rem; }
}

@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .site-header { background: var(--cream); }
  .header-inner { padding: .5rem 1rem .1rem; min-height: 0; gap: 0; }
  .brand { min-height: 40px; }
  .brand-logo { width: 140px; transform: none; }
  .header-cta { display: none; }
  .site-nav { order: 3; width: 100%; margin: 0; gap: 0; justify-content: space-between; border-top: 1px solid var(--line); }
  .site-nav a { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 42px; font-size: .74rem; padding: 0 .2rem; }
  .site-nav .nav-extra { display: none; }

  .bs-hero-inner { padding: 1.4rem 1rem 1.6rem; }
  .bs-eyebrow { font-size: .62rem; letter-spacing: .16em; margin-bottom: .5rem; }
  .bs-hero h1 { font-size: 1.85rem; line-height: 1.12; margin-bottom: .5rem; }
  .bs-lede { font-size: .95rem; margin-bottom: 1rem; }
  .bs-card { border-radius: 16px; scroll-margin-top: 100px; }
  .bs-tab { min-height: 58px; font-size: 1.05rem; gap: .45rem; padding: .7rem .5rem; }
  .bs-panel { padding: .95rem 1rem 1.1rem; }
  .bs-panel-intro { margin-bottom: .7rem; }
  .bs-panel-intro h2 { font-size: 1.35rem; }
  .bs-panel-intro p { font-size: .88rem; }
  .bs-grid { grid-template-columns: 1fr; }
  .bs-card .field { margin-bottom: .6rem; }
  .bs-card input, .bs-card select { min-height: 46px; }
  .bs-card .form-footnote { font-size: .7rem; }
}
@media (max-width: 380px) {
  .bs-hero h1 { font-size: 1.65rem; }
  .site-nav a { font-size: .68rem; letter-spacing: .03em; }
}
@media (max-width: 640px) {
  .bs-panel-intro p { display: none; }
  .bs-panel-intro { margin-bottom: .55rem; }
  .bs-card label { margin-bottom: .2rem; font-size: .7rem; }
  .bs-card .field { margin-bottom: .5rem; }
  .bs-card .bs-submit { min-height: 52px; }
}
[hidden]{display:none !important}
.bs-grid .field--full { grid-column: 1 / -1; }


/* Hybrid: live buy/sell hero photo picture element */
picture.bs-hero-photo{position:absolute;inset:0;display:block;margin:0;padding:0;transition:opacity .5s ease}
picture.bs-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 42%}
.bs-hero[data-mode="sell"] picture.bs-hero-photo--sell{opacity:1}
.bs-hero[data-mode="buy"] picture.bs-hero-photo--sell{opacity:0}
.bs-hero-photo--buy{object-position:center center}
.bs-card label{display:block}
.bs-card .req{color:var(--gold)}
.bs-card [hidden],.bs-hero [hidden],.bs-panel[hidden]{display:none!important}
span[data-show][hidden]{display:none!important}
/* Keep form above the fold on mobile */
@media(max-width:640px){
  .bs-hero-inner{padding:1.05rem 0.85rem 1.15rem}
  .bs-hero h1{font-size:1.55rem;margin-bottom:0.35rem}
  .bs-lede{font-size:0.92rem;margin-bottom:0.85rem;line-height:1.4}
  .bs-tab{min-height:54px;font-size:1rem;padding:0.65rem 0.7rem}
  .bs-panel{padding:1rem 1.05rem 1.05rem}
  .bs-panel-intro{margin-bottom:0.7rem}
  .bs-panel-intro h2{font-size:1.35rem}
  .bs-card .field{margin-bottom:0.45rem}
  .bs-card input,.bs-card select{min-height:44px}
  .bs-card .bs-submit{min-height:48px;margin-top:0.15rem}
  .bs-card .form-footnote{margin-top:0.45rem;font-size:0.7rem}
}
@media(max-width:390px){
  .bs-hero-inner{padding:0.85rem 0.7rem 1rem}
  .bs-hero h1{font-size:1.42rem}
  .bs-lede{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0.65rem}
}


/* Live markroserealty.com .btn styles (from styles.css) so bs-submit matches production */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.95rem 1.85rem;
  transition:
    transform 0.35s var(--ease-out),
    background 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--navy);
  color: var(--cream);
  box-shadow: var(--shadow-button);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover), inset 0 0 0 1px var(--gold);
  outline: none;
}
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.65; cursor: wait; transform: none; }
/* Gold CTA override from home.css — keep after .btn-primary */
.bs-card .bs-submit {
  margin-top: .3rem;
  min-height: 54px;
  background: var(--gold);
  border: none;
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-button);
}
.bs-card .bs-submit:hover,
.bs-card .bs-submit:focus-visible {
  background: #a87c33;
  border-color: #a87c33;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover), inset 0 0 0 1px rgba(255,255,255,.25);
  outline: none;
}
.form-consent {
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  color: rgb(255 255 255 / .55) !important;
  margin-top: 0.55rem !important;
}
.form-consent a {
  color: rgb(255 255 255 / .72);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent a:hover,
.form-consent a:focus-visible {
  color: var(--gold);
}
/* Every linked city photo tile opens the city page itself. */
a.city{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:filter .2s ease}
a.city:hover,a.city:focus-visible{filter:brightness(1.07)}
a.city:focus-visible{outline:3px solid #b6a176;outline-offset:-3px}
a.city .city-copy .city-copy-arrow{pointer-events:none}
.city .city-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;margin-top:1px;padding:12px 23px;border:1px solid #b6a176;border-radius:8px;background:#7a5f2e;color:#fff;box-shadow:0 4px 14px rgba(45,37,18,.24),inset 0 1px 0 rgba(255,255,255,.08);font-family:'Open Sans','Segoe UI',system-ui,sans-serif;font-weight:600;font-size:16px;line-height:normal;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-shadow:none}
a.city:hover .city-cta,a.city:focus-visible .city-cta{background:#856c36;border-color:#b6a176;box-shadow:0 7px 17px rgba(45,37,18,.28),inset 0 1px 0 rgba(255,255,255,.1);transform:translateY(-1px)}
a.city .city-description{pointer-events:none}
/* Homepage journey cards: concise Sellers-first content. */
.paths-editorial .path-copy .path-main-title{color:#fff;font-family:Georgia,'Times New Roman',serif;font-weight:400;text-transform:none}
/* Remove the misplaced hero rule. The PSB separator belongs to the partner tile. */
#hero{border-bottom:0}

/* PSB "BACK - gold rule": bottom of the portrait partner tile, directly above journeys. */
#partner{border-bottom:5px solid #c49752}
#partner .hero-portrait{bottom:0}

/* Approved direct journey-to-city junction. */
.paths-editorial{margin-bottom:0!important;padding-bottom:0!important}.paths-editorial .path-grid{margin-bottom:0!important}.neighborhoods{padding:0!important;margin:0!important;border-top:0!important}.neighborhoods .neighborhood-grid{margin:0!important}.neighborhoods .neighborhood-intro{display:none!important}

/* Journey photographs: layer the picture explicitly above the navy fallback.
   Keep the approved full-bleed tile frame and overlay; do not hide .photo. */
.home-bs .paths-editorial .path-card .photo{z-index:0;pointer-events:none}
.home-bs .paths-editorial .path-card .photo img{opacity:1;visibility:visible;display:block;min-width:100%;min-height:100%}
/* First-access hero: only email and optional phone on the first buyer screen. */
.bs-grid--first-access{gap:0 1rem}
.bs-card #home-buy-form .field-hint{display:block;margin:.3rem 0 .45rem;color:rgb(255 255 255 / .7);font-size:.7rem;line-height:1.45}

/* Mobile homepage hero taller (~70svh) so next section peeks */
@media (max-width: 640px) {
  #hero.bs-hero {
    min-height: 70svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
  #hero.bs-hero .bs-hero-inner {
    width: 100%;
    padding-top: 1.35rem;
    padding-bottom: 1.75rem;
  }
  #hero.bs-hero .bs-hero-photo,
  #hero.bs-hero picture.bs-hero-photo img {
    object-fit: cover;
  }
  #hero.bs-hero .bs-hero-photo--buy {
    object-position: center 42%;
  }
}
@media (max-width: 390px) {
  #hero.bs-hero .bs-hero-inner {
    padding-top: 1.15rem;
    padding-bottom: 1.45rem;
  }
}
/* 2026-11-06 hero parity: keep the homepage hero the same height on the Buy and Sell tabs.
   Both panels (and both h1/lede variants) share one grid cell; the inactive one keeps its space
   but is invisible and non-interactive, so the hero always sizes to the taller (Sell) content. */
#hero .bs-card{display:grid;grid-template-columns:minmax(0,1fr)}
#hero .bs-card>.bs-tabs{grid-row:1;grid-column:1}
#hero .bs-card>.bs-panel{grid-row:2;grid-column:1;align-self:start}
#hero .bs-card>.bs-panel[hidden]{display:block!important;visibility:hidden;pointer-events:none}
#hero h1,#hero .bs-lede{display:grid}
#hero h1>span[data-show],#hero .bs-lede>span[data-show]{grid-row:1;grid-column:1;align-self:center}
#hero h1>span[data-show][hidden],#hero .bs-lede>span[data-show][hidden]{display:block!important;visibility:hidden}