/* miamipropertybuyers.com: the dusk theme on top of scrollcraft.css. Tokens first,
   then the page's own classes. Nothing here restyles a [data-sc-*] device. */

@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --sc-canvas: #15211E;        /* pine, the dusk ground */
  --sc-surface: #1B2A27;
  --sc-ink: #F3EEE6;           /* bone */
  --sc-ink-soft: #9DB3AC;      /* light sage, 7.5:1 on pine */
  --sc-accent: #17BA6B;        /* the brand emerald, 6.5:1 on pine */
  --sc-accent-ink: #15211E;
  --sc-font-display: "Montserrat", system-ui, sans-serif;
  --sc-font-text: "Montserrat", system-ui, sans-serif;
  --sc-shadow-color: 170 25% 4%;
  --sc-leading-body: 1.66;
  --sc-track-normal: 0.002em;  /* light on dark: a touch more tracking and leading */
  --mpb-bone: #F3EEE6; --mpb-pine: #15211E; --mpb-sage: #9DB3AC; --mpb-emerald: #17BA6B; --mpb-teal: #1E4F52;
}

html { background: var(--sc-canvas); }
body { font-weight: 400; }
[hidden] { display: none !important; }
html.js .nojs-only { display: none !important; }
html.no-js .js-only { display: none !important; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--sc-4); }
a { color: var(--sc-accent); }
.soft { color: var(--sc-ink-soft); }
.small { font-size: var(--sc-t-sm); }
.measure { max-width: var(--sc-measure); }
.sign { display: block; margin-top: var(--sc-5); font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: var(--sc-t-lg); color: var(--sc-ink); }
.blank { display: inline-block; border: 1px dashed var(--sc-ink-soft); border-radius: var(--sc-r-sm); padding: 0 .4em; color: var(--sc-ink-soft); font-size: .9em; white-space: nowrap; }
.skip { position: absolute; left: var(--sc-gutter); top: -4rem; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .5rem .9rem; border-radius: var(--sc-r-sm); z-index: 100; }
.skip:focus { top: var(--sc-4); }

/* ------------------------------------------------------------------ bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
       padding: var(--sc-4) var(--sc-gutter) var(--sc-4) calc(var(--sc-gutter) * 0.45); pointer-events: none; }
/* a soft fade behind the bar, so copy scrolling under it never touches the mark */
.bar::before { content: ""; position: absolute; inset: 0 0 -2.6rem 0; z-index: -1; pointer-events: none;
               background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent); }
.bar > * { pointer-events: auto; }
.bar .mark { display: inline-block; padding: .55rem .95rem; border-radius: var(--sc-r-pill); background: color-mix(in oklab, var(--sc-canvas) 62%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bar .mark img { height: 32px; width: auto; display: block; }
@media (max-width: 860px) { .bar .mark img { height: 26px; } .bar { padding-left: var(--sc-gutter); } }
.bar .cta { font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); text-decoration: none; border: 1px solid color-mix(in oklab, var(--sc-ink) 32%, transparent);
            padding: .55rem .95rem; border-radius: var(--sc-r-pill); background: color-mix(in oklab, var(--sc-canvas) 55%, transparent); backdrop-filter: blur(6px); }
.bar .cta:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
@media (max-width: 560px) { .bar .cta { display: none; } .bar .mark img { height: 22px; } }

/* ----------------------------------------------------------------- hero */
.hero-copy h1 { font-weight: 600; font-size: var(--sc-t-3xl); max-width: 19ch; }
.hero-copy .launch { margin-top: var(--sc-5); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-4); align-items: flex-end; max-width: 38rem; }
.hero-copy .launch .addr { flex: 1 1 16rem; }
.hero-copy .under { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 700px) { .hero-copy h1 { font-size: var(--sc-t-2xl); } }

/* ---------------------------------------------------------------- forms */
.lead-form { max-width: 40rem; }
.row { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-4); align-items: flex-end; }
.field { display: block; }
.field .lab { display: block; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: .2rem; }
.line { width: 100%; border: 0; border-bottom: 1.5px solid color-mix(in oklab, var(--sc-ink) 55%, transparent); background: transparent; padding: .55rem 0; font-size: var(--sc-t-base); border-radius: 0; color: var(--sc-ink); }
.line:focus { outline: none; border-bottom-color: var(--sc-accent); box-shadow: 0 1.5px 0 var(--sc-accent); }
.line::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.addr .line { font-size: var(--sc-t-lg); }
textarea.line { resize: vertical; min-height: 3.4rem; line-height: 1.5; }
select.line { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23F3EEE6' stroke-width='1.6'/></svg>") no-repeat right .2rem center; padding-right: 1.4rem; }
select.line option { color: #15211E; }
.btn { font: inherit; font-weight: 600; background: var(--mpb-emerald); color: var(--mpb-pine); border: 0; border-radius: var(--sc-r-sm); padding: .85rem 1.3rem; cursor: pointer; white-space: nowrap;
       transition: transform 140ms var(--sc-ease-out), filter 140ms var(--sc-ease-out); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.fill { min-height: 3.4em; margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55; max-width: 40rem; }
.fill b { color: var(--sc-ink); font-weight: 600; }
.fill .yn { display: inline-flex; gap: var(--sc-4); margin-left: .5rem; }
.fill .yn button { font: inherit; font-size: var(--sc-t-sm); font-weight: 600; background: none; border: 0; padding: .2rem 0; color: var(--sc-accent); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.step2 { margin-top: var(--sc-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-6); }
.step2 .wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .step2 { grid-template-columns: minmax(0, 1fr); } }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.consent input { margin: .2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--sc-accent); }
.consent a { color: var(--sc-ink-soft); }
.legal { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- sections */
.sec h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-5); text-wrap: balance; max-width: 22ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-8); align-items: center; } .split.text-first-wide { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); } }
.fig { margin: 0; }
.fig img { width: 100%; height: auto; border-radius: 18px; box-shadow: var(--sc-e3), var(--sc-edge); }
.fig figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.standfirst { font-size: var(--sc-t-lg); line-height: 1.5; letter-spacing: var(--sc-track-snug); max-width: 36rem; color: var(--sc-ink); }
.sec-form { padding-block: var(--sc-7) var(--sc-9); }
.sec-form .split { align-items: start; }
.sec-form h2 { margin-top: var(--sc-7); font-size: var(--sc-t-lg); }
.after-pin { padding-top: var(--sc-5); }

/* ------------------------------------------------------- the pinned word */
.argument .bed, .close .bed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.argument .sc-scrim { --sc-scrim-a: 92%; }
.argument .line-set { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(3rem, 14vh, 10rem); max-width: 40rem; }
.argument .line-set p { position: absolute; left: 0; bottom: 0; margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; max-width: 16ch; }
.argument .line-set p.after { font-weight: 500; font-size: var(--sc-t-xl); max-width: 24ch; color: var(--sc-ink); }
.argument .line-set p.gets { font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.35; max-width: 30ch; letter-spacing: var(--sc-track-snug); }


/* ------------------------------------------------------------ situations */
.situations p { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.22; letter-spacing: var(--sc-track-snug); max-width: 24ch; margin: 0; text-wrap: balance; }
.situations p + p { margin-top: var(--sc-4); }

/* --------------------------------------------------------- the plane copy */
.plane-copy h2 { font-weight: 600; max-width: 14ch; }
.plane-copy .sc-lede { margin-top: var(--sc-4); color: var(--sc-ink); }

/* ------------------------------------------------------------------ rail */
.rail { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); padding: 0 var(--sc-gutter); height: 100%; box-sizing: border-box; }
.rail__lead { flex: 0 0 clamp(16rem, 28vw, 24rem); }
.rail__lead h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-4); }
.rail__lead p { color: var(--sc-ink-soft); max-width: 30ch; }
.card { flex: 0 0 clamp(15rem, 24vw, 21rem); }
.card > div { border-radius: 14px; overflow: hidden; box-shadow: var(--sc-e2); background: var(--sc-surface); }
.card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.card h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); margin: var(--sc-3) 0 0; }
.card.last { flex-basis: clamp(18rem, 30vw, 26rem); }
.card.last img { aspect-ratio: 4 / 3; }
.card.last h3 { font-weight: 500; color: var(--sc-ink-soft); font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .rail .card { opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 0) * 2.2 - var(--i, 0) * 0.22), 1)); transform: translateY(calc((1 - clamp(0, (var(--sc-p, 0) * 2.2 - var(--i, 0) * 0.22), 1)) * 10px)); }
}

/* ----------------------------------------------------------------- close */
.close { position: relative; isolation: isolate; }
.close .bed { z-index: -2; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 55%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 100%); }
.close h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-4); }
.close .lede { font-size: var(--sc-t-lg); max-width: 40ch; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }

/* ------------------------------------------------------------- sign-off */
.signoff { display: grid; place-items: center; text-align: center; padding: var(--sc-7) var(--sc-gutter); }
.signoff__inner { max-width: 44rem; }
.signoff .lockup { width: min(34rem, 80vw); height: auto; margin: 0 auto var(--sc-6); }
.signoff .lines { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.7; }
.signoff .lines a { color: var(--sc-ink-soft); }
.signoff .links a { margin: 0 .5rem; }
.signoff .cta { display: inline-block; margin-top: var(--sc-6); font-weight: 600; color: var(--mpb-pine); background: var(--mpb-emerald); text-decoration: none; padding: .9rem 1.4rem; border-radius: var(--sc-r-sm); }

/* ------------------------------------------------------- the short pages */
.doc { padding: calc(var(--sc-7) + 2rem) 0 var(--sc-9); }
.doc h1 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-4); text-wrap: balance; }
.doc h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.2; margin: var(--sc-7) 0 var(--sc-3); }
.doc .lede { font-size: var(--sc-t-lg); line-height: 1.5; letter-spacing: var(--sc-track-snug); max-width: 46ch; }
.doc ul { padding-left: 1.2em; margin: var(--sc-3) 0 0; }
.doc li + li { margin-top: var(--sc-2); }
.doc .big-line { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.15; margin: var(--sc-3) 0; }
.doc .fig img { max-width: 40rem; }
.back { display: inline-block; margin-top: var(--sc-7); }
.colophon { margin-top: var(--sc-10); border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.7; }
.colophon .mark img { height: 26px; width: auto; margin-bottom: var(--sc-3); }
.colophon .links a { color: var(--sc-ink-soft); margin-right: var(--sc-4); }
.colophon .last { margin-top: var(--sc-5); font-family: var(--sc-font-display); font-weight: 600; letter-spacing: var(--sc-track-wide); color: var(--sc-ink); font-size: var(--sc-t-sm); }
.brand-inline { display: flex; align-items: center; margin-bottom: var(--sc-7); }
.brand-inline img { height: 26px; width: auto; }

/* the short pages' column */
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }

/* denser scrims under the two headlines that sit over sky. Only where the text is. */
.scrim-hero { background: linear-gradient(to top right,
  color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
  color-mix(in oklab, var(--sc-canvas) 88%, transparent) 34%,
  color-mix(in oklab, var(--sc-canvas) 62%, transparent) 58%,
  color-mix(in oklab, var(--sc-canvas) 22%, transparent) 78%,
  transparent 100%); }
.scrim-plane { background: linear-gradient(to top,
  color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
  color-mix(in oklab, var(--sc-canvas) 86%, transparent) 30%,
  color-mix(in oklab, var(--sc-canvas) 55%, transparent) 52%,
  transparent 72%); }
@media (max-width: 860px) {
  .scrim-hero { background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 40%,
    color-mix(in oklab, var(--sc-canvas) 60%, transparent) 62%,
    transparent 82%); }
}


/* the five answers as pills, in our colors; radios underneath so it posts without JavaScript */
.chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips legend { padding: 0; }
.chips .chip { display: inline-block; margin: .35rem .5rem 0 0; }
.chips .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips .chip span { display: inline-block; padding: .5rem .85rem; border: 1px solid color-mix(in oklab, var(--sc-ink) 32%, transparent); border-radius: var(--sc-r-pill);
                    font-size: var(--sc-t-sm); color: var(--sc-ink); cursor: pointer; transition: border-color 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out); }
.chips .chip span:hover { border-color: var(--sc-accent); }
.chips .chip input:checked + span { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); font-weight: 600; }
.chips .chip input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.step2 .chips { grid-column: 1 / -1; }

/* ------------------------------------------------------------------- map */
.map-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sc-7); padding: 0 var(--sc-gutter); }
.map-copy h2 { margin: 0 0 var(--sc-4); }
.map-copy .sc-body { max-width: 34ch; }
.map { position: relative; width: min(100%, 78vh * 0.718); margin-inline: auto; }
.map .base { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: var(--sc-e3), var(--sc-edge); }
.map .overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .glow path { fill: var(--mpb-emerald); fill-opacity: 0.34; stroke: var(--mpb-emerald); stroke-opacity: 0.9; stroke-width: 1.4; }
.map .pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .15rem .5rem .15rem .35rem; border-radius: var(--sc-r-pill); background: color-mix(in oklab, #0E2326 72%, transparent);
            font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-ink); text-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.6); }
.map .pin i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--mpb-emerald); box-shadow: 0 0 0 .35rem color-mix(in oklab, var(--mpb-emerald) 28%, transparent); flex: none; }
.map .pin.l { flex-direction: row-reverse; transform: translate(calc(-100% + .35rem), -50%); }
.map .pin.r { transform: translate(-.35rem, -50%); }
.map-col { display: grid; justify-items: center; gap: var(--sc-4); }
.map-col .between { font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: var(--sc-t-base); color: var(--sc-ink); text-align: center; margin: 0; }
.map .pin.between i { display: none; }
@media (max-width: 860px) {
  .map-stage { grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: calc(var(--sc-7) + 2rem); gap: var(--sc-5); }
  .map { width: min(88%, 56vh * 0.718); margin-left: 0; }
  .map .pin { font-size: var(--sc-t-xs); }
  /* on a phone every name sits left of its dot, so none runs off the right edge */
  .map .pin.r { flex-direction: row-reverse; transform: translate(calc(-100% + .35rem), -50%); }
}

/* THE ADDRESS BOX POPS. The one thing the page asks for is a box nobody can miss:
   solid, tall, dark text on bone, the green button on its hip. Everywhere an address is asked. */
.addr .line, #launch-address { background: var(--mpb-bone); color: var(--mpb-pine); border: 0; border-radius: var(--sc-r-sm);
  padding: .95rem 1.1rem; font-size: var(--sc-t-lg); font-weight: 500; box-shadow: var(--sc-e2); }
.addr .line::placeholder, #launch-address::placeholder { color: color-mix(in oklab, var(--mpb-pine) 55%, transparent); }
.addr .line:focus, #launch-address:focus { outline: 3px solid var(--mpb-emerald); outline-offset: 2px; box-shadow: var(--sc-e2); border-bottom-color: transparent; }
.addr .lab { color: var(--sc-ink); font-weight: 600; letter-spacing: var(--sc-track-wide); }
.hero-copy .launch { align-items: flex-end; max-width: 44rem; }
.hero-copy .launch .btn { padding: 1.05rem 1.4rem; font-size: var(--sc-t-base); box-shadow: var(--sc-e2); }
.hero-copy .launch .addr .line { font-size: var(--sc-t-lg); }
@media (max-width: 560px) { .hero-copy .launch .btn { width: 100%; } }