/* =========================================================================
   LANDFALL — website. A nautical chart, not a brochure: chart paper, ocean ink,
   turquoise shallows, coral survey lines. Newsreader for the voice, Figtree to
   read, DM Mono for soundings and figures. Buttons are always pills.
   ========================================================================= */
:root {
  --paper: #f4efe4; --paper-2: #ebe3d2; --paper-3: #e2d8c3; --ink: #0d2b3a; --ink-2: #3e5664; --mute: #7b8a92; --line: rgba(13, 43, 58, .14); --line-2: rgba(13, 43, 58, .24);
  --sea: #1b8aa0; --deep: #0f4c63; --shallow: #5fd3c7; --foam: #c8f1e8; --sand: #efe2c4; --coral: #ef6f5e; --coral-2: #d9533f; --gold: #e9a23b;
  --f-s: 'Newsreader', Georgia, serif; --f: 'Figtree', system-ui, sans-serif; --f-m: 'DM Mono', ui-monospace, monospace;
  --e-out: cubic-bezier(.16, 1, .3, 1); --wrap: 1320px; --gut: clamp(16px, 4vw, 52px);
  --sh-1: 0 1px 2px rgba(13, 43, 58, .06), 0 10px 26px -14px rgba(13, 43, 58, .3); --sh-2: 0 2px 6px rgba(13, 43, 58, .06), 0 34px 70px -34px rgba(13, 43, 58, .45);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip;
  background-image: radial-gradient(rgba(13, 43, 58, .045) 1px, transparent 1px); background-size: 4px 4px; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; } main:focus { outline: none; }
::selection { background: var(--shallow); color: var(--ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; } .skip:focus { top: 12px; }

/* type */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--coral); }
.h1 { font: 380 clamp(52px, 8.6vw, 132px)/.92 var(--f-s); letter-spacing: -.025em; font-optical-sizing: auto; }
.h1 em, .h2 em { font-style: italic; font-weight: 300; color: var(--sea); }
.h2 { font: 380 clamp(38px, 5.2vw, 76px)/.98 var(--f-s); letter-spacing: -.02em; margin-top: 14px; text-wrap: balance; }
.h3 { font: 420 clamp(24px, 2.4vw, 32px)/1.1 var(--f-s); }
.lede { font-size: clamp(16.5px, 1.25vw, 19px); color: var(--ink-2); max-width: 56ch; margin-top: 16px; text-wrap: pretty; }
.fine { font-size: 13px; color: var(--mute); } .mono { font-family: var(--f-m); } .num { font-variant-numeric: tabular-nums; }
.sec { padding: clamp(80px, 10vw, 150px) 0; } .sec-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: 36px; } .sec-head .lede { max-width: 44ch; }

/* pills & fields */
.pill { --py: 13px; --px: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--py) var(--px); border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; font: 650 15px/1.1 var(--f); transition: transform .35s var(--e-out), box-shadow .35s var(--e-out), background .3s, color .3s; }
.pill i { font-style: normal; transition: transform .35s var(--e-out); } .pill:hover i { transform: translateX(4px); } .pill:active { transform: scale(.97); } .pill:disabled { opacity: .45; cursor: not-allowed; }
.pill--sm { --py: 9px; --px: 16px; font-size: 13.5px; } .pill--lg { --py: 17px; --px: 30px; font-size: 16px; }
.pill--coral { color: #fff; background: linear-gradient(140deg, #f5836f, #ef6f5e 50%, #d9533f); box-shadow: 0 14px 30px -14px rgba(217, 83, 63, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pill--coral:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(217, 83, 63, .9), inset 0 1px 0 rgba(255, 255, 255, .4); }
.pill--ink { color: var(--paper); background: linear-gradient(160deg, #1a4a5f, #0d2b3a); box-shadow: 0 14px 30px -16px rgba(13, 43, 58, .9), inset 0 1px 0 rgba(255, 255, 255, .14); } .pill--ink:hover:not(:disabled) { transform: translateY(-2px); }
.pill--sea { color: var(--ink); background: linear-gradient(140deg, #9fe9df, #5fd3c7 60%, #3cb9ad); box-shadow: 0 12px 28px -14px rgba(27, 138, 160, .8), inset 0 1px 0 rgba(255, 255, 255, .5); } .pill--sea:hover:not(:disabled) { transform: translateY(-2px); }
.pill--line { color: var(--ink); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(8px); } .pill--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.linkish { background: none; border: 0; padding: 0; color: var(--sea); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-weight: 600; }
.field { display: grid; gap: 6px; margin-top: 12px; } .field > span { font: 500 11px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .7); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px rgba(95, 211, 199, .3); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; } .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14.5px; cursor: pointer; } .check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--coral); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; font: 600 13.5px/1.1 var(--f); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, box-shadow .2s; }
.chip[aria-pressed='true'], .chip[aria-checked='true'], .chip[aria-selected='true'] { background: var(--ink); color: var(--paper); box-shadow: none; }
.err { color: var(--coral-2); font-weight: 600; font-size: 14px; min-height: 1.2em; margin-top: 10px; } .ok { color: var(--sea); font-weight: 600; }
.card { border-radius: 24px; padding: clamp(18px, 2.4vw, 28px); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }

/* header & footer */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px var(--gut); transition: background .4s, transform .5s var(--e-out), box-shadow .4s; }
.hd.is-solid { background: rgba(244, 239, 228, .82); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line); } .hd.is-hidden { transform: translateY(-110%); }
.hd__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 15px var(--f-m); letter-spacing: .3em; } .hd__logo svg { width: 34px; height: 34px; }
.hd__nav { display: flex; gap: 2px; } .hd__nav a { padding: 9px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--ink-2); } .hd__nav a:hover, .hd__nav a[aria-current] { background: rgba(13, 43, 58, .07); color: var(--ink); }
.hd__act { display: flex; gap: 8px; }
@media (max-width: 900px) { .hd__nav { display: none; } } @media (max-width: 520px) { .hd__act .pill--coral { display: none; } .hd__logo span { display: none; } }
.ft { margin-top: 40px; padding: 60px 0 30px; background: var(--ink); color: #d6dfe3; }
.ft__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; } .ft__grid a { display: block; text-decoration: none; padding: 4px 0; color: #d6dfe3; } .ft__grid a:hover { color: var(--shallow); }
.ft__logo { font: 600 20px var(--f-m); letter-spacing: .3em; color: #fff; margin-bottom: 10px; } .ft__h { font: 500 11px var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: #8aa3ae; margin-bottom: 8px; }
.ft .fine { color: #8aa3ae; } .ft__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: #8aa3ae; }
@media (max-width: 760px) { .ft__grid { grid-template-columns: 1fr 1fr; } }

/* chart (2D SVG) */
.chart { width: 100%; height: auto; } .ch-sea { fill: #1d6f86; } .ch-grid line { stroke: rgba(255, 255, 255, .07); }
.ch-deep ellipse { fill: #0c3c50; opacity: .85; } .ch-shore ellipse { fill: #a8efe4; } .ch-land ellipse { fill: #efe2c4; stroke: #d8c79f; stroke-width: 1.2; }
.ch-lbl text { font: 600 11px var(--f-m); letter-spacing: .14em; fill: rgba(255, 255, 255, .78); text-anchor: middle; paint-order: stroke; stroke: rgba(13, 43, 58, .4); stroke-width: 3px; }
.ch-rose circle { fill: none; stroke: rgba(255, 255, 255, .35); } .ch-rose path { fill: var(--coral); } .ch-rose text { font: 600 11px var(--f-m); fill: #fff; text-anchor: middle; }
.pin { cursor: pointer; } .pin__halo { fill: rgba(239, 111, 94, .25); transition: r .2s; } .pin__dot { fill: var(--coral); stroke: #fff; stroke-width: 1.6; } .pin text { font: 600 11px var(--f-m); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: var(--ink); stroke-width: 3px; }
.pin.on .pin__halo, .pin:hover .pin__halo { r: 16; fill: rgba(255, 255, 255, .45); } .pin.on .pin__dot { fill: #fff; stroke: var(--coral); stroke-width: 3; }

/* listing cards & art */
.art { width: 100%; height: 100%; } .art .snd { font: 500 12px var(--f-m); fill: rgba(255, 255, 255, .7); } .art .cap { font: 500 11px var(--f-m); letter-spacing: .12em; fill: rgba(13, 43, 58, .6); } .art .acr { font: 600 26px var(--f-m); fill: var(--coral-2); text-anchor: middle; letter-spacing: .1em; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.lc { position: relative; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); transition: transform .5s var(--e-out), box-shadow .5s; }
.lc:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.lc__img { display: block; aspect-ratio: 16 / 11; position: relative; overflow: hidden; } .lc__img .art { transition: transform 1.2s var(--e-out); } .lc:hover .lc__img .art { transform: scale(1.05); }
.tag { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; font: 600 10.5px var(--f-m); letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .92); color: var(--ink); } .tag--uc { background: var(--gold); } .tag--f { background: var(--ink); color: var(--paper); }
.lc__save { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; color: var(--coral-2); background: rgba(255, 255, 255, .92); box-shadow: var(--sh-1); }
.lc__body { display: block; padding: 16px 18px 18px; text-decoration: none; } .lc__p { font: 500 24px/1 var(--f-s); } .lc__p small { font: 500 13px var(--f); color: var(--mute); }
.lc h3 { font: 650 15.5px/1.3 var(--f); margin-top: 8px; } .lc__f { font: 500 12.5px var(--f-m); color: var(--ink-2); margin-top: 6px; } .lc__a { font-size: 13px; color: var(--mute); margin-top: 2px; }

/* ---------------------------------------------------------------- home */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: #0f4c63; color: #fff; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 34, 46, .82) 0%, rgba(8, 34, 46, .55) 38%, rgba(8, 34, 46, 0) 70%), linear-gradient(0deg, rgba(8, 34, 46, .6), transparent 35%); pointer-events: none; }
.hero__in { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gut) 50px; max-width: 760px; }
.hero .eyebrow { color: #bfe9e4; } .hero .eyebrow::before { background: var(--shallow); }
.hero .h1 { margin-top: 20px; } .hero .h1 em { color: var(--shallow); }
.hero .lede { color: #d6e7ea; }
.isle-lbl { position: absolute; z-index: 1; font: 600 11px var(--f-m); letter-spacing: .16em; color: rgba(255, 255, 255, .85); pointer-events: none; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); transform: translate(-50%, -50%); transition: opacity .4s; }
.finder { margin-top: 30px; border-radius: 26px; padding: 8px; background: rgba(244, 239, 228, .96); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.finder__tabs { display: flex; gap: 4px; padding: 4px 4px 8px; } .finder__tabs button { padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 650; background: none; color: var(--ink-2); } .finder__tabs button[aria-selected='true'] { background: var(--ink); color: var(--paper); }
.finder__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 6px; align-items: end; padding: 0 6px 6px; } .finder .field { margin: 0; } .finder .pill { height: 48px; }
@media (max-width: 760px) { .finder__row { grid-template-columns: 1fr 1fr; } .finder__row .pill { grid-column: 1 / -1; } }
.pulse { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-size: 13.5px; color: #cfe3e6; } .pulse b { display: block; font: 400 30px/1 var(--f-s); color: #fff; }
.islands { position: relative; background: #0f4c63; color: #fff; }
.islands__pin { position: relative; height: 100vh; overflow: hidden; } .islands__pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.isle-card { position: absolute; z-index: 3; left: var(--gut); bottom: 8vh; width: min(460px, calc(100% - 2 * var(--gut))); border-radius: 26px; padding: 26px; background: rgba(244, 239, 228, .96); color: var(--ink); box-shadow: var(--sh-2); }
.isle-card .h3 { font-size: clamp(34px, 3.4vw, 48px); margin-top: 8px; } .isle-card p.b { color: var(--ink-2); margin-top: 10px; font-size: 15px; }
.isle-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; } .isle-stats b { display: block; font: 400 24px/1 var(--f-s); } .isle-stats span { font: 500 10.5px var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.isle-dots { display: flex; gap: 6px; margin-top: 14px; } .isle-dots i { width: 24px; height: 3px; border-radius: 3px; background: var(--line-2); } .isle-dots i.on { background: var(--coral); }
.no-pin .islands__pin { height: auto; } .no-pin .islands__pin canvas { display: none; } .no-pin .isle-card { position: relative; left: auto; bottom: auto; margin: 0 auto; }
.isle-list { display: none; } .no-pin .isle-list { display: grid; gap: 14px; padding: 60px var(--gut); } .no-pin .isle-card { display: none; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.way { border-radius: 30px; padding: clamp(24px, 3vw, 40px); min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.way--buy { background: linear-gradient(160deg, #fbf8f1, #efe2c4); box-shadow: inset 0 0 0 1px var(--line); } .way--own { background: linear-gradient(160deg, #134f66, #0d2b3a); color: #fff; }
.way ul { margin-top: 18px; display: grid; gap: 8px; } .way li { display: flex; gap: 10px; } .way li::before { content: '⟶'; color: var(--coral); } .way--own li::before { color: var(--shallow); }
.way--own .lede { color: #cfe3e6; }
.earn { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; margin-top: 18px; } @media (max-width: 860px) { .earn { grid-template-columns: 1fr; } }
.earn__out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .earn__out .card { background: #fff; } .earn__out b { display: block; font: 400 34px/1 var(--f-s); margin-top: 8px; } .earn__out .best { box-shadow: inset 0 0 0 2px var(--coral), var(--sh-1); }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ag { border-radius: 24px; padding: 20px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.ag__av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 400 26px var(--f-s); color: #fff; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45), transparent 55%), var(--c); }
.ag h3 { font: 500 22px/1.1 var(--f-s); margin-top: 14px; } .ag .t { font: 500 11px var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--sea); margin-top: 4px; } .ag p { font-size: 14px; color: var(--ink-2); margin-top: 10px; }

/* ---------------------------------------------------------------- search */
.srch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 0; min-height: 100vh; padding-top: 72px; }
.srch__list { padding: 20px var(--gut) 60px; }
.srch__map { position: sticky; top: 72px; height: calc(100vh - 72px); background: #1d6f86; } .srch__map .chart { width: 100%; height: 100%; }
.filters { position: sticky; top: 72px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 0; background: linear-gradient(var(--paper) 80%, rgba(244, 239, 228, 0)); }
.filters select, .filters input { padding: 10px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; }
@media (max-width: 960px) { .srch { grid-template-columns: 1fr; } .srch__map { position: relative; top: 0; height: 52vh; order: -1; } }

/* ---------------------------------------------------------------- listing */
.ld { padding-top: 84px; }
.gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: min(64vh, 620px); border-radius: 28px; overflow: hidden; }
.gal > div { position: relative; overflow: hidden; background: var(--paper-2); } .gal > div:first-child { grid-row: span 2; }
@media (max-width: 760px) { .gal { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; } .gal > div { aspect-ratio: 16 / 11; } .gal > div:first-child { grid-row: auto; } .gal > div:not(:first-child) { display: none; } }
.ld__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 30px; margin-top: 30px; align-items: start; }
@media (max-width: 960px) { .ld__grid { grid-template-columns: 1fr; } }
.ld__price { font: 400 clamp(40px, 4.6vw, 64px)/1 var(--f-s); } .ld__price small { font: 500 16px var(--f); color: var(--mute); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1px; margin-top: 22px; border-radius: 18px; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.facts div { background: var(--paper); padding: 14px 16px; } .facts span { display: block; font: 500 10.5px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .facts b { font: 400 22px var(--f-s); }
.feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .feats li { padding: 7px 12px; border-radius: 999px; font-size: 13.5px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.side { position: sticky; top: 90px; display: grid; gap: 14px; }
.tabs2 { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); } .tabs2 button { flex: 1; padding: 10px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 650; background: none; } .tabs2 button[aria-selected='true'] { background: var(--ink); color: var(--paper); }
.days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; } .day { flex: none; width: 58px; padding: 8px 4px; border: 0; border-radius: 14px; cursor: pointer; display: grid; justify-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .day small { font: 500 10px var(--f-m); text-transform: uppercase; color: var(--mute); } .day b { font: 400 22px var(--f-s); }
.day[aria-checked='true'] { background: var(--ink); color: var(--paper); } .day[aria-checked='true'] small { color: #9fb2bb; } .day:disabled { opacity: .3; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .slot { padding: 9px 13px; border: 0; border-radius: 999px; cursor: pointer; font: 500 13.5px var(--f-m); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); } .slot[aria-checked='true'] { background: var(--coral); color: #fff; box-shadow: none; }
.cost { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 14.5px; margin-top: 12px; } .cost .num { text-align: right; } .cost .tot { font-weight: 700; border-top: 1px solid var(--ink); padding-top: 8px; }
.hist { display: grid; gap: 4px; margin-top: 12px; font-size: 14px; } .hist div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line-2); padding: 6px 0; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; font: 500 12.5px var(--f-m); text-align: center; }
.cal span { padding: 8px 0; border-radius: 8px; } .cal .dow { color: var(--mute); font-size: 10.5px; } .cal .bk { background: var(--paper-3); color: var(--mute); text-decoration: line-through; } .cal .ok { background: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); } .cal .sel { background: var(--ink); color: var(--paper); } .cal .rng { background: var(--foam); }
.cal-h { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font: 500 15px var(--f-s); }
.done { border-radius: 22px; padding: 22px; background: linear-gradient(160deg, #e9faf6, #fff); box-shadow: inset 0 0 0 1px rgba(27, 138, 160, .3); }

/* motion prefs */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ---------------------------------------------------------------- home extras */
.hero__labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__fallback { position: absolute; inset: 0; } .hero__fallback svg { width: 100%; height: 100%; object-fit: cover; }
.hero__legend { position: absolute; z-index: 2; right: var(--gut); bottom: 26px; display: flex; gap: 14px; align-items: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #bfe9e4; }
.d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: -6px; } .d--s { background: var(--coral); } .d--r { background: var(--gold); } .d--v { background: var(--shallow); }
@media (max-width: 760px) { .hero__legend { display: none; } .hero__scrim { background: linear-gradient(0deg, rgba(8, 34, 46, .92) 25%, rgba(8, 34, 46, .35) 75%, rgba(8, 34, 46, .5)); } .hero__in { justify-content: flex-end; } }
.ln { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; } .ln > span { display: inline-block; }
.islands__intro { padding-top: clamp(80px, 10vw, 140px); padding-bottom: 40px; } .islands__intro .h2 em { color: var(--shallow); } .islands__intro .lede { color: #cfe3e6; } .islands__intro .eyebrow { color: #bfe9e4; }
.isle-card--flat { display: block !important; position: relative; left: auto; bottom: auto; width: auto; overflow: hidden; padding: 0 0 22px; }
.isle-card--flat > :not(.isle-map) { margin-left: 22px; margin-right: 22px; } .isle-card--flat .eyebrow { margin-top: 18px; }
.isle-map { aspect-ratio: 34 / 22; overflow: hidden; } .isle-map svg { width: 100%; height: 100%; }
.sec--sand { background: linear-gradient(180deg, var(--paper), var(--sand) 30%, var(--paper)); }
.sec--ink { background: radial-gradient(120% 80% at 80% 0%, #1b6f86, #0d2b3a 60%); color: #fff; } .sec--ink .h2 em { color: var(--shallow); } .sec--ink .eyebrow::before { background: var(--shallow); }
.close, .val { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: start; } @media (max-width: 900px) { .close, .val { grid-template-columns: 1fr; } }
input[type=range] { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; accent-color: var(--coral); height: 28px; }
.receipt { position: sticky; top: 100px; }
.rc { position: relative; padding: 30px 28px 34px; background: #fffdf7; box-shadow: var(--sh-2); font-size: 14.5px; transform: rotate(.6deg);
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x; mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x; }
.rc__h { font-size: 11px; letter-spacing: .14em; color: var(--mute); text-align: center; border-bottom: 1px dashed var(--line-2); padding-bottom: 14px; }
.rc__p { display: flex; justify-content: space-between; margin: 14px 0 6px; font-size: 13px; letter-spacing: .08em; } .rc__p span { font-weight: 500; }
.rc ul { display: grid; } .rc li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dotted var(--line-2); } .rc li small { display: block; font-size: 12px; color: var(--mute); }
.rc li b { font: 500 14px var(--f-m); white-space: nowrap; }
.rc__t { display: flex; justify-content: space-between; padding-top: 12px; font-weight: 700; } .rc__t b { font: 400 26px var(--f-s); } .rc__t--all { color: var(--sea); }
.rc__pct { text-align: center; margin: 14px 0; padding: 8px; border: 1.5px solid var(--coral); color: var(--coral-2); border-radius: 999px; font-size: 12px; letter-spacing: .14em; transform: rotate(-2deg); width: fit-content; margin-inline: auto; }
.rc__n { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.val__nums { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; } .val__nums b { display: block; font: 400 42px/1 var(--f-s); } .val__nums span { font: 500 11px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: #8fb3be; }
.val__f { background: rgba(244, 239, 228, .97); color: var(--ink); }
.earn-card .earn__out .card { padding: 16px; }
.on-dark .hd:not(.is-solid) { color: #fff; } .on-dark .hd:not(.is-solid) .hd__nav a { color: rgba(255, 255, 255, .78); } .on-dark .hd:not(.is-solid) .hd__nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.on-dark .hd:not(.is-solid) .pill--line { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* ---------------------------------------------------------------- search extras */
.is-search .ft { display: none; } .is-search .hd { background: rgba(244, 239, 228, .9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); } .is-search .hd.is-hidden { transform: none; }
.srch__head { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 22px; padding-top: 18px; } .srch__head .tabs2 { width: 100%; max-width: 360px; }
.srch__t { font-size: clamp(34px, 3.6vw, 54px); margin-top: 6px; } .srch__n { font-size: 12.5px; letter-spacing: .08em; color: var(--ink-2); padding-bottom: 8px; }
.filters .chip { padding: 10px 14px; } .filters input[type=search] { min-width: 0; } .fdate input { padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; }
.filters select:disabled, .filters [hidden] { display: none; }
.lc.is-hi { box-shadow: inset 0 0 0 2px var(--coral), var(--sh-2); transform: translateY(-4px); }
#map, #map svg { width: 100%; height: 100%; } .chart--map .ch-lbl text { font-size: 12px; } .chart--map.is-zoom .ch-lbl text { font-size: 7px; } .chart--map.is-zoom .pin__dot { r: 2.6; } .chart--map.is-zoom .pin__halo { r: 5; } .chart--map.is-zoom .ch-rose { display: none; }
.pin--rent .pin__dot { fill: var(--gold); } .pin--vacation .pin__dot { fill: var(--shallow); }
.map-pop { position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: 420px; border-radius: 20px; background: var(--paper); box-shadow: var(--sh-2); overflow: hidden; }
.map-pop__in { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; text-decoration: none; padding: 10px; } .map-pop__img { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; }
.map-pop__t { font-weight: 650; font-size: 14.5px; margin-top: 4px; } .map-pop__x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(13, 43, 58, .08); cursor: pointer; font-size: 18px; }
.map-reset { position: absolute; top: 14px; right: 14px; }
.empty { padding: 60px 0; text-align: center; } .empty .lede { margin-inline: auto; }
.fdate { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); } .fdate span { font: 500 10.5px var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .fdate input { border: 0; background: none; padding-left: 0; }
.ftoggle { display: none; margin-top: 10px; }
@media (max-width: 960px) { .ftoggle { display: inline-flex; } .filters { display: none; position: static; } .filters.is-open { display: flex; } .srch__head .tabs2 { max-width: none; } }

/* ---------------------------------------------------------------- listing extras */
.crumbs { font-size: 12px; letter-spacing: .08em; color: var(--ink-2); padding: 18px 0 14px; display: flex; gap: 6px; flex-wrap: wrap; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--coral-2); } .crumbs__ref { margin-left: auto; color: var(--mute); }
.gal { position: relative; } .gal__cap { position: absolute; left: 14px; bottom: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); }
.gal__save { right: 16px; top: 16px; z-index: 2; } .gal .art { transition: transform 1.6s var(--e-out); } .gal > div:hover .art { transform: scale(1.04); }
.ld__h { font-size: clamp(36px, 4.4vw, 62px); } .ld__addr { color: var(--ink-2); margin-top: 8px; }
.ld__sec { margin-top: 44px; } .ld__sec .h3 { margin-bottom: 12px; } .ld__desc { color: var(--ink-2); max-width: 64ch; font-size: 17px; } .ld__sub { font: 600 15px var(--f); margin-top: 26px; }
.ld__map { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; } .ld__map svg { width: 100%; height: 100%; }
.money { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 700px) { .money { grid-template-columns: 1fr; } }
.mort { margin: 16px 0 8px; } .mort b { display: block; font: 400 40px/1 var(--f-s); } .mort span { font-size: 13.5px; color: var(--ink-2); }
.rules { display: grid; gap: 10px; } .rules li { padding-left: 22px; position: relative; color: var(--ink-2); } .rules li::before { content: ''; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--coral); } .rules b { color: var(--ink); }
.agent { display: flex; gap: 14px; align-items: center; } .agent .ag__av { width: 52px; height: 52px; font-size: 20px; flex: none; } .agent__n { font: 500 21px/1.1 var(--f-s); }
.ld__k { font: 500 11px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 16px 0 8px; }
#act .tabs2 { margin-bottom: 4px; } .ld__sim { padding-bottom: 60px; }
.cal button.ok { border: 0; font: inherit; padding: 8px 0; border-radius: 8px; } .cal button.sel { background: var(--ink); color: var(--paper); } .cal button.rng { background: var(--foam); }
@media (max-width: 960px) { .side { position: static; } }
.ld__grid > *, .side, .side > .card { min-width: 0; } .days { scrollbar-width: thin; }
.facts { background: none; gap: 0; } .facts div { background: rgba(255, 255, 255, .5); box-shadow: inset -1px -1px 0 var(--line); }
.gal__cap { bottom: auto; top: 14px; }

/* demo build: link to the one-click sign-in */
.demo-pill { position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  font: 600 11px/1 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; background: rgba(13, 43, 58, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(13, 43, 58, .6); }
.demo-pill span { letter-spacing: .01em; text-transform: none; color: #5fd3c7; }
.demo-pill:hover, .demo-pill:focus-visible { box-shadow: 0 0 0 1px #5fd3c7 inset; }
@media (max-width: 600px) { .demo-pill span { display: none; } }