/* ============================================================
   SELL PAGE — builds on site.css (nav, footer, buttons, tokens)
   ============================================================ */

/* ---------- HERO ---------- */
/* Header (site.css .nav, fixed, z 50) overlays the hero. Copy sits in
   normal flow at the bottom; the hero reserves the header's full height
   as top padding, so on wide/short windows the copy grows the hero
   rather than rising under the logo and links. */
.s-hero {
  --s-nav-h: 112px;
  position: relative; z-index: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(640px, 94vh, 1080px);
  padding: calc(var(--s-nav-h) + 24px) 0 88px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
}
.s-hero-img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 45% 72%;
  --z: 1;
  transform: scale(var(--z)); transform-origin: 45% 72%;
}
.s-hero-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    /* top — keeps the white nav legible over bright sky */
    linear-gradient(180deg, rgba(20,28,48,.42) 0%, rgba(20,28,48,0) 22%),
    /* bottom — deep navy under the copy */
    linear-gradient(180deg, rgba(20,28,48,0) 30%, rgba(20,28,48,.55) 58%, rgba(20,28,48,.88) 100%),
    /* left — anchors the text column */
    linear-gradient(90deg, rgba(15,22,40,.55) 0%, rgba(15,22,40,.25) 45%, rgba(15,22,40,0) 75%);
}
.s-hero-copy {
  position: relative; width: 100%; box-sizing: border-box;
  max-width: var(--page-max);
  margin: 0 auto; padding: 0 64px;
}
.s-hero-folio {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 10px; letter-spacing: .48em; text-transform: uppercase;
  color: var(--paper); opacity: .78;
  margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(15,22,40,.5);
}
.s-hero-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 1; letter-spacing: -.026em;
  color: var(--paper);
  max-width: 17ch; margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(15,22,40,.7), 0 1px 3px rgba(15,22,40,.35);
}
.s-hero-h i { font-style: italic; }
.s-hero-body {
  font-family: var(--font-ui);
  font-size: 17px; line-height: 1.75;
  color: var(--paper);
  max-width: 54ch; margin: 32px 0 40px;
  text-shadow: 0 1px 14px rgba(15,22,40,.8), 0 1px 2px rgba(15,22,40,.4);
}

/* Solid paper pill for dark grounds */
.s-btn-paper {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 28px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--navy); background: var(--paper);
  border-radius: var(--radius-pill);
  transition: background .25s ease, gap .25s ease;
}
.s-btn-paper:hover { background: var(--white); gap: 20px; }
.s-btn-paper:active { background: var(--mist); }

/* Shared button hover refinements (arrow nudges, never shrinks) */
.s-btn-navy {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 28px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--paper); background: var(--navy);
  border-radius: var(--radius-pill);
  transition: background .25s ease, gap .25s ease;
}
.s-btn-navy:hover { gap: 20px; opacity: .92; }
.s-btn-navy:active { background: var(--navy-deep); }

.s-btn-paper:focus-visible,
.s-btn-navy:focus-visible,
.s-edit .btn-accent:focus-visible {
  outline: 1px solid currentColor; outline-offset: 3px;
}

/* ---------- SHARED SECTION TYPE ---------- */
.s-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.02; letter-spacing: -.022em;
  color: var(--navy);
  margin: 0; max-width: 13ch;
  text-wrap: balance;
}
.s-h i { font-style: italic; }
.s-rule { height: 1px; width: 96px; background: var(--navy-line); margin: 36px 0 32px; }
.s-p {
  font-family: var(--font-ui);
  font-size: 16.5px; line-height: 1.8;
  color: var(--ink);
  max-width: 48ch; margin: 0 0 22px;
  text-wrap: pretty;
}
.s-p:last-child { margin-bottom: 0; }

/* Image frames — hairline, square, stone ground + striped fallback */
.s-frame {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--navy-line);
  background:
    repeating-linear-gradient(135deg, var(--stone-soft) 0 1px, transparent 1px 12px),
    var(--mist);
}
.s-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  color: transparent; /* hide alt text while a photo is missing */
}
.s-frame-slug {
  position: absolute; left: 20px; bottom: 18px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); opacity: .6;
}

/* ---------- SELLER DISCOVERY GUIDE — invitation inside Section 2 ---------- */
.s-guide {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--navy-line);
  max-width: 48ch;
}
.s-guide-lead {
  font-family: var(--font-voice); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 1.7vw, 24px); line-height: 1.3;
  color: var(--navy);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.s-guide-p {
  font-family: var(--font-ui);
  font-size: 16.5px; line-height: 1.8;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

/* Solid navy pill — same geometry, caps and hover as the Buyer guide button
   on the Buy page, so the two guides read as one collection. */
.s-guide-btn {
  --s-guide-lift: #2B3A57;       /* navy, one step lighter — same family */
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 24px;
  padding: 17px 30px;
  min-height: 48px;
  /* Size to the label, not the 48ch copy measure — otherwise the pill is
     constrained and the label breaks onto two ragged lines mid-laptop. */
  width: fit-content;
  max-width: none;
  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;
}
.s-guide-btn:hover { background: var(--s-guide-lift); gap: 15px; }
.s-guide-btn:active { background: var(--navy-deep); }
.s-guide-btn:focus-visible { outline: 1px solid var(--navy); outline-offset: 4px; }

.s-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;
}
.s-guide-btn-icon svg { width: 16px; height: 16px; display: block; }
.s-guide-btn:hover .s-guide-btn-icon { transform: translateY(1px); }
.s-guide-btn-label { display: block; text-wrap: balance; }

/* Mid-laptop band: the copy column narrows to ~296px, less than the
   full-size label needs, so the label would break into a ragged pill.
   Here the type scales gently with the viewport — tracking and padding
   tightened — keeping one clean line from 861px upward. */
@media (max-width: 1240px) {
  .s-guide-btn {
    font-size: clamp(9.2px, 0.52vw + 5.1px, 10.5px);
    letter-spacing: .09em;
    padding: 16px 20px;
    gap: 10px;
  }
}

/* ---------- SECTION 2 — BEFORE THE LISTING ---------- */
.s-strategy { background: var(--white); padding: 140px 0; }
.s-strategy-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: 5fr 7fr; gap: 96px;
  align-items: center;
}
.s-strategy .s-frame { aspect-ratio: 4 / 5; }
.s-strategy .s-frame img { object-position: 50% 50%; }
/* Slightly tighter measure here so the guide invitation fits the section
   without stretching it: the copy still sits level with the photograph. */
.s-strategy-copy .s-p { margin-bottom: 18px; }

/* ---------- SECTION 3 — PRESENTED WITH PURPOSE ---------- */
.s-present {
  background: var(--paper); padding: 140px 0;
  border-top: 1px solid var(--navy-line);
}
.s-present-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: 5fr 7fr; gap: 96px;
  align-items: end;
}
.s-present-media { max-width: 400px; }
.s-present .s-frame { aspect-ratio: 4 / 5; }
.s-present .s-frame img { object-position: 52% 50%; }
.s-present-copy { padding-bottom: 8px; }

/* ---------- SECTION 4 — THE PROPERTY EDIT (navy band) ---------- */
.s-edit { background: var(--navy); color: var(--paper); padding: 128px 0; }
.s-edit-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 96px;
  align-items: end;
}
.s-edit-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 7vw, 116px);
  line-height: .96; letter-spacing: -.028em;
  color: var(--paper); margin: 0;
}
.s-edit-h i { font-style: italic; }
.s-edit-p {
  font-family: var(--font-ui);
  font-size: 16.5px; line-height: 1.8;
  color: rgba(244,242,237,.88);
  max-width: 46ch; margin: 0 0 40px;
}
.s-edit .btn-accent { transition: gap .25s ease, opacity .25s ease; }
.s-edit .btn-accent:hover { gap: 20px; }
.s-edit-copy .s-edit-p { margin-bottom: 18px; }
.s-edit-p-close {
  font-family: var(--font-voice); font-style: italic;
  font-size: clamp(20px, 1.7vw, 23px); line-height: 1.4;
  color: var(--paper);
  max-width: 40ch;
  margin: 6px 0 36px;
  text-wrap: pretty;
}

/* ---------- FINAL CONTACT ---------- */
.s-contact { background: var(--white); padding: 140px 0; }
.s-contact-inner {
  max-width: 880px; margin: 0 auto; padding: 0 64px;
  text-align: center;
}
.s-contact .s-h { max-width: none; margin: 0 auto; }
.s-contact-p {
  font-family: var(--font-voice); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45;
  color: var(--navy);
  max-width: 40ch; margin: 28px auto 44px;
  text-wrap: pretty;
}

/* ============================================================
   MOTION — brief, one-time, editorial
   ============================================================ */
@keyframes s-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.s-hero-folio,
.s-hero-h,
.s-hero-body,
.s-hero-cta { animation: s-rise .8s cubic-bezier(.2,.6,.2,1) both; }
.s-hero-h    { animation-delay: .08s; }
.s-hero-body { animation-delay: .2s; }
.s-hero-cta  { animation-delay: .3s; display: inline-block; }

/* Slow settle on the hero photograph */
@keyframes s-settle { from { transform: scale(calc(var(--z) + .04)); } to { transform: scale(var(--z)); } }
.s-hero-img { animation: s-settle 1.8s cubic-bezier(.2,.6,.2,1) both; }

/* Scroll reveals — only armed when JS is present */
.js-reveal .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }
.js-reveal .reveal-img { opacity: 0; transition: opacity 1s ease; }
.js-reveal .reveal-img img { transform: scale(1.035); transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
.js-reveal .reveal-img.in { opacity: 1; }
.js-reveal .reveal-img.in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .s-hero-folio, .s-hero-h, .s-hero-body, .s-hero-cta, .s-hero-img { animation: none; }
  .js-reveal .reveal, .js-reveal .reveal-img,
  .js-reveal .reveal-img img { opacity: 1; transform: none; transition: none; }
  .s-btn-paper, .s-btn-navy, .s-edit .btn-accent { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .s-hero-copy,
  .s-strategy-inner,
  .s-present-inner,
  .s-edit-inner { padding-left: 40px; padding-right: 40px; }
  .s-strategy-inner, .s-present-inner, .s-edit-inner { gap: 56px; }
}

@media (max-width: 860px) {
  .s-hero { --s-nav-h: 72px; min-height: clamp(600px, 88vh, 900px); padding-bottom: 56px; }
  .s-hero-img { object-position: 44% 50%; transform-origin: 44% 50%; }
  .s-hero-copy { padding: 0 24px; }
  .s-hero-folio { margin-bottom: 20px; font-size: 9px; }
  .s-hero-h { font-size: clamp(34px, 9.4vw, 52px); }
  .s-hero-body { font-size: 15.5px; margin: 20px 0 28px; }

  .s-strategy, .s-present, .s-contact { padding: 88px 0; }
  .s-edit { padding: 88px 0; }

  .s-strategy-inner,
  .s-present-inner,
  .s-edit-inner {
    grid-template-columns: 1fr; gap: 40px;
    padding: 0 24px;
  }
  /* Image leads on mobile for Section 2; copy leads for Section 3 */
  .s-strategy-media { order: -1; }
  .s-strategy .s-frame { aspect-ratio: 4 / 5; }
  .s-present-media { max-width: 72%; order: 2; }
  .s-present-inner { align-items: start; }

  .s-h { font-size: 38px; max-width: none; }
  .s-rule { margin: 26px 0 22px; }
  .s-p, .s-edit-p { font-size: 15.5px; }
  .s-edit-h { font-size: 56px; }

  .s-guide { margin-top: 28px; padding-top: 24px; }
  .s-guide-lead { font-size: 21px; }
  .s-guide-p { font-size: 15.5px; }
  .s-guide-btn { margin-top: 22px; font-size: 9.5px; letter-spacing: .16em; padding: 16px 22px; gap: 10px; width: auto; max-width: 100%; }
  .s-edit-p-close { font-size: 20px; }

  .s-contact-inner { padding: 0 24px; }
  .s-contact-p { font-size: 20px; margin: 22px auto 36px; }
}