/* ============================================================
   BUY PAGE — builds on site.css + sell.css
   (frames, .s-h, .s-p, buttons, reveals, navy band, contact)
   ============================================================ */

/* ---------- HERO — full-bleed photograph, copy over left (matches Sell) ---------- */
/* The header (site.css .nav, fixed, z 50) overlays the hero as on Sell.
   The copy is in normal flow, pushed to the bottom with flex, and the hero
   reserves the header's height as top padding — so however tall the copy
   wraps, it can never rise under the logo or links. */
.b-hero {
  --b-nav-h: 112px;              /* unscrolled header: 26px pad × 2 + content */
  position: relative; z-index: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(680px, 94vh, 1080px);
  padding: calc(var(--b-nav-h) + 24px) 0 88px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--navy); color: var(--paper);
}
.b-hero-media { position: absolute; inset: 0; z-index: -1; }
.b-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* bias right + low: keeps the roofline, open glass doors and pool in frame */
  object-position: 72% 62%;
}
.b-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,28,48,.40) 0%, rgba(20,28,48,0) 20%),
    linear-gradient(90deg, rgba(15,22,40,.62) 0%, rgba(15,22,40,.38) 38%, rgba(15,22,40,0) 62%),
    linear-gradient(180deg, rgba(20,28,48,0) 55%, rgba(20,28,48,.30) 100%);
}
.b-hero-inner {
  position: relative; width: 100%; box-sizing: border-box;
  max-width: var(--page-max); margin: 0 auto; padding: 0 64px;
}
.b-hero-copy { max-width: 600px; }
.b-hero-folio {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 10px; letter-spacing: .48em; text-transform: uppercase;
  color: var(--paper); opacity: .8;
  margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(15,22,40,.5);
}
.b-hero-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5.2vw, 84px);
  line-height: 1; letter-spacing: -.026em;
  color: var(--paper);
  max-width: 13ch; margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(15,22,40,.6), 0 1px 3px rgba(15,22,40,.3);
}
.b-hero-h i { font-style: italic; }
.b-hero-lede {
  font-family: var(--font-voice); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.6vw, 23px); line-height: 1.45;
  color: var(--paper);
  max-width: 40ch; margin: 32px 0 16px;
  text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(15,22,40,.75);
}
.b-hero .s-p {
  max-width: 50ch; color: rgba(244,242,237,.92);
  text-shadow: 0 1px 14px rgba(15,22,40,.8), 0 1px 2px rgba(15,22,40,.4);
}
.b-hero-cta { margin-top: 36px; display: inline-block; }

/* ---------- PRIORITIES — heading left, copy right, pull question ---------- */
.b-priorities { background: var(--white); padding: 140px 0; }
.b-two {
  max-width: var(--page-max); margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: 5fr 6fr; gap: 96px;
  align-items: start;
}
.b-two .s-h { max-width: 12ch; }
.b-pull {
  font-family: var(--font-voice); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.42;
  color: var(--navy);
  max-width: 34ch;
  margin: 36px 0;
  padding: 32px 0;
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
  text-wrap: pretty;
}
.b-pull p {
  font-family: var(--font-voice); font-style: italic; font-weight: 400;
  font-size: inherit; line-height: inherit; color: var(--navy);
  margin: 0;
}
.b-pull p.b-pull-a {
  font-size: .78em; line-height: 1.45; color: var(--ink);
  margin-top: 14px;
}

/* Buyer Discovery Guide — PDF download.
   Solid navy pill, same geometry + caps as .s-btn-navy so it reads as one
   of the site's buttons, not a new component. White label, hairline
   download glyph, quiet lift to a lighter navy on hover. */
.b-guide-btn {
  --b-guide-lift: #2B3A57;       /* navy, one step lighter — same family */
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 30px;
  padding: 17px 30px;
  min-height: 48px;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 10.5px; letter-spacing: .26em; line-height: 1.35;
  text-transform: uppercase; text-align: left;
  color: var(--white);
  background: var(--navy);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background .25s ease, gap .25s ease;
}
.b-guide-btn:hover { background: var(--b-guide-lift); gap: 15px; }
.b-guide-btn:active { background: var(--navy-deep); }
.b-guide-btn:focus-visible { outline: 1px solid var(--navy); outline-offset: 4px; }

.b-guide-btn-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  opacity: .92;
  transition: transform .25s ease;
}
.b-guide-btn-icon svg { width: 16px; height: 16px; display: block; }
.b-guide-btn:hover .b-guide-btn-icon { transform: translateY(1px); }
.b-guide-btn-label { display: block; }

/* ---------- LOOK CLOSELY — copy left, photograph right ---------- */
.b-look { background: var(--paper); padding: 140px 0; border-top: 1px solid var(--navy-line); }
.b-look-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: 6fr 5fr; gap: 96px;
  align-items: center;
}
/* Portrait supplied at 2:3 — shown at its native proportion, no crop */
.b-look .s-frame {
  aspect-ratio: 683 / 1024;
  width: 100%; max-width: 460px; justify-self: end;
}
.b-look-voice {
  font-family: var(--font-voice); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45;
  color: var(--navy);
  max-width: 40ch; margin: 32px 0;
  padding-left: 0;
  text-wrap: pretty;
}

/* ---------- CLOSING LIFESTYLE IMAGE — 3:2, uncropped, above the CTA ---------- */
.b-contact-media {
  aspect-ratio: 1024 / 683;
  max-width: 1080px; margin: 0 auto 120px;
  width: calc(100% - 128px);
}

/* ---------- GUIDANCE — white, mirrored two-column ---------- */
.b-guide { background: var(--white); padding: 140px 0; }
.b-guide .b-two { grid-template-columns: 6fr 5fr; }
.b-guide .b-two > :first-child { order: 2; }
.b-guide-close {
  font-family: var(--font-voice); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.45; color: var(--navy);
  max-width: 40ch; margin: 32px 0 0;
  padding-top: 28px; border-top: 1px solid var(--navy-line);
}

/* ---------- MAKE IT YOUR OWN — navy band (reuses .s-edit) ---------- */
.b-own .s-edit-p:first-child {
  font-family: var(--font-voice); font-style: italic;
  font-size: 24px; line-height: 1.4; color: var(--paper);
  margin-bottom: 24px;
}
.b-own .s-edit-h { max-width: 8ch; }

/* Hero — brief one-time rise (keyframes from sell.css) */
.b-rise { animation: s-rise .8s cubic-bezier(.2,.6,.2,1) both; }
.b-hero-h.b-rise    { animation-delay: .08s; }
.b-hero-lede.b-rise { animation-delay: .18s; }
.b-hero .s-p.b-rise { animation-delay: .24s; margin: 0; }
.b-hero-cta.b-rise  { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .b-rise { animation: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .b-hero-inner, .b-two, .b-look-inner { padding-left: 40px; padding-right: 40px; gap: 56px; }
  .b-hero { padding-bottom: 64px; }
  .b-contact-media { width: calc(100% - 80px); }
}

@media (max-width: 860px) {
  /* Mobile: photograph stacks above the copy so the house + pool stay
     uncovered; copy sits on navy for legibility. */
  /* Mobile: photograph stacks in flow above the copy. The transparent
     header still overlays the photo's sky band (as on Sell); a deeper top
     scrim keeps the logo and menu icon legible. */
  .b-hero { display: block; min-height: 0; padding: 0; }
  .b-hero-media { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3.4; }
  .b-hero-img { object-position: 68% 60%; }
  .b-hero-scrim {
    background: linear-gradient(180deg, rgba(20,28,48,.58) 0%, rgba(20,28,48,.22) 22%, rgba(20,28,48,0) 36%);
  }
  .b-hero-inner { padding: 48px 24px 72px; }
  .b-hero-folio { font-size: 9px; margin-bottom: 20px; }
  .b-hero-h { font-size: clamp(36px, 10vw, 54px); max-width: none; text-shadow: none; }
  .b-hero-lede { font-size: 20px; margin: 24px 0 14px; text-shadow: none; }
  .b-hero .s-p { text-shadow: none; }
  .b-hero-cta { margin-top: 32px; }

  .b-contact-media { width: calc(100% - 48px); margin-bottom: 64px; }

  .b-priorities, .b-look, .b-guide { padding: 88px 0; }
  .b-two, .b-guide .b-two, .b-look-inner {
    grid-template-columns: 1fr; gap: 32px; padding: 0 24px;
  }
  .b-guide .b-two > :first-child { order: 0; }
  .b-look-media { order: -1; }
  .b-look .s-frame { aspect-ratio: 683 / 1024; max-width: 84%; justify-self: start; }

  .b-pull { font-size: 21px; margin: 28px 0; padding: 24px 0; }
  .b-guide-btn { margin-top: 26px; font-size: 9.5px; letter-spacing: .16em; padding: 16px 22px; gap: 10px; }
  .b-guide-close { font-size: 20px; }
  .b-own .s-edit-p:first-child { font-size: 21px; }
}