/* ── The first screen ───────────────────────────────────────────────────
   A photograph, a question, and a way to answer it. Nothing above the fold
   explains the company: the inventory does that. */
.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;
  background:var(--brand-950,#241634)}
.hero-art{position:absolute;inset:0;background:#241634 center/cover no-repeat;transform:scale(1.02)}
/* No photograph yet: a brand surface, not a stock house. */
.hero-art:not(.has-photo){background-image:
  radial-gradient(1100px 520px at 72% 18%,rgba(160,110,190,.34),transparent 62%),
  radial-gradient(760px 460px at 12% 92%,rgba(96,58,128,.42),transparent 66%)}
/* Two gradients, not one: the vertical keeps the bar and the shelf edge
   dark, and the horizontal holds the text side down so a headline never
   has to survive a sunlit window behind it. */
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(28,17,40,.58) 0%,rgba(28,17,40,.34) 42%,rgba(28,17,40,.82) 100%),
  linear-gradient(90deg,rgba(24,14,34,.72) 0%,rgba(24,14,34,.52) 46%,rgba(24,14,34,.18) 100%)}
/* .hero-in is the page wrap itself, so it keeps the wrap's centring and
   gutter; only the words inside it are held to a readable measure. */
.hero-in{position:relative;padding:78px 0;color:#fff}
.hero-in>*{max-width:660px}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:-1.6px;margin:0 0 14px;color:#fff}
.hero-sub{font-size:clamp(15px,1.7vw,18px);line-height:1.6;color:#e6dcef;margin:0 0 26px;max-width:34em}
.hero-popular{margin:18px 0 0;font-size:13.5px;color:#d9cee4}
.hero-popular .lnk{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero-credit{margin:10px 0 0;font-size:11.5px;color:#bcaecb}
.hero-credit .lnk{color:#e4d8ef}

/* One column, explicitly. styles.css still carries the two-column grid the
   old segmented control needed, and without this the commercial kinds row
   sits beside the search field and squeezes it to nothing. */
.searchband{background:rgba(255,255,255,.1);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
  border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr;gap:12px;max-width:660px}
.search-row{display:flex;gap:10px}
.search-field{position:relative;flex:1;min-width:0}
.search-field input{width:100%;height:56px;padding:0 16px 0 46px;border-radius:12px;border:0;
  font:inherit;font-size:16px;background:#fff;color:#241634}
.search-field svg{position:absolute;left:16px;top:18px;width:20px;height:20px;fill:none;stroke:#7c6a88;stroke-width:2}
.search-row .btn{height:56px;padding:0 22px;white-space:nowrap;font-size:15px}

/* ── Shelves ─────────────────────────────────────────────────────────── */
.shelf{margin:54px auto}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.shelf-head h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.8px;margin:0}
.shelf-head p{margin:6px 0 0;color:var(--ink-2,#6c6076);font-size:14px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

/* ── A property card: image dominant, then the facts that decide it ──── */
.pcard{border-radius:16px;overflow:hidden;background:var(--card,#fff);border:1px solid var(--line,#eae4ee);
  display:flex;flex-direction:column}
.pcard-shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand-100,#f0ebe1)}
.pcard-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.pcard:hover .pcard-shot img{transform:scale(1.045)}
.pcard-none{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:#948a7e;background:linear-gradient(160deg,#f5f1e9,#e9e2d6)}
.pcard-none span{letter-spacing:4px;font-size:12px;font-weight:700}
.pcard-none small{font-size:11px}
.pbadge{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:.2px;background:rgba(28,17,40,.76);color:#fff;backdrop-filter:blur(4px)}
.pbadge.is-ver{left:auto;right:52px;background:rgba(28,74,48,.82)}
.pheart{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer}
.pheart svg{width:18px;height:18px;fill:none;stroke:#5c4a68;stroke-width:2}
.pheart.is-on svg{fill:var(--jac,#71448b);stroke:var(--jac,#71448b)}
.pstep{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:#3b2b47;font-size:19px;line-height:1;cursor:pointer;opacity:0;transition:opacity .18s}
.pstep.prev{left:10px}.pstep.next{right:10px}
.pcard:hover .pstep,.pcard:focus-within .pstep{opacity:1}
.pdots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.pdots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}
.pdots i.is-on{background:#fff}
.pcard-body{padding:14px 16px 16px;display:grid;gap:3px}
.pcard-price{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px}
.pcard-price span{font-size:13px;font-weight:500;color:var(--ink-2,#6c6076)}
.pcard-body h3{margin:2px 0 0;font-size:16px;font-weight:600;line-height:1.3}
.pcard-where{margin:0;font-size:13.5px;color:var(--ink-2,#6c6076)}
.pcard-facts{margin:4px 0 0;font-size:13px;color:var(--ink-2,#6c6076)}
.pcard-avail{margin:8px 0 0;font-size:12.5px;color:#7d7186;display:flex;align-items:center;gap:6px}
.pcard-avail.is-fresh{color:#1f6b3f;font-weight:600}
.pcard-avail .dot{width:7px;height:7px;border-radius:50%;background:#2b8a55}

/* ── Empty states carry the argument the copy used to make ───────────── */
.shelf-empty{grid-column:1/-1;padding:44px 30px;border:1px dashed var(--line,#ded5e4);border-radius:16px;
  background:var(--brand-50,#faf7fc);text-align:center}
.shelf-empty h3{margin:0 0 8px;font-size:19px}
.shelf-empty p{margin:0 auto 16px;max-width:52ch;color:var(--ink-2,#6c6076);font-size:14px;line-height:1.65}

/* ── Areas ───────────────────────────────────────────────────────────── */
.area-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* Scoped to this grid on purpose. The neighbourhood cards in .area-grid reuse
   the .area-tile class as a plain wrapper, and an unscoped 3:2 box left each
   of them holding a photograph's worth of empty space under a card that has
   no photograph -- eleven times down a phone screen. */
.area-tiles>.area-tile{position:relative;aspect-ratio:3/2;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--brand-100,#efe9f3)}
.area-tiles>.area-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.area-tiles>.area-tile:hover img{transform:scale(1.05)}
.area-none{position:absolute;inset:0;display:grid;place-items:center;letter-spacing:4px;font-size:12px;
  font-weight:700;color:#9a8ca6}
.area-label{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;text-align:left;color:#fff;
  background:linear-gradient(transparent,rgba(24,14,34,.85))}
.area-label strong{display:block;font-size:17px}
.area-label small{font-size:12.5px;color:#e0d5ea}

/* ── Trust: three statements, not a marketing section ────────────────── */
.trust{margin:60px auto}
.trust h2{font-size:clamp(22px,2.8vw,29px);letter-spacing:-.7px;margin:0 0 22px}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.trust-item h3{margin:10px 0 5px;font-size:16px}
.trust-item p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2,#6c6076)}
.trust-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--brand-100,#f0e9f5);color:var(--jac,#71448b);font-size:17px}

/* ── Account menu ────────────────────────────────────────────────────── */
.topside{display:flex;align-items:center;gap:8px}
.acct-wrap{position:relative}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;padding:6px;border-radius:12px;
  background:#fff;border:1px solid var(--line,#e4dfe7);box-shadow:0 12px 34px rgba(40,24,56,.18);z-index:60;
  display:grid}
.acct-menu button,.acct-menu a{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;
  background:none;font:inherit;font-size:14px;color:var(--ink,#2c2233);text-decoration:none;cursor:pointer}
.acct-menu button:hover,.acct-menu a:hover{background:var(--brand-50,#f6f1f9)}
.acct-menu #acctAdmin{color:var(--jac,#71448b);font-weight:600}
.icon-tab{position:relative;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;
  background:none;cursor:pointer}
.icon-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.icon-tab .pill{position:absolute;top:2px;right:0}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .card-grid,.area-tiles,.trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{min-height:480px}
  .hero-in{padding:56px 0}
  .topnav{gap:2px}
}
/* ── Phone ───────────────────────────────────────────────────────────── */
@media(max-width:700px){
  .hero{min-height:420px}
  .hero-in{padding:40px 0}
  .searchband{padding:12px;border-radius:14px}
  .search-row{flex-direction:column}
  .search-field input,.search-row .btn{height:52px;width:100%}
  /* At 16px the third example was sliced through the middle of "Ruaka". */
  .search-field input{font-size:15px;padding-left:42px;padding-right:12px;
    text-overflow:ellipsis}
  .search-field svg{top:16px}
  .card-grid,.area-tiles,.trust-row{grid-template-columns:1fr}
  .shelf{margin:38px auto}
  .shelf-head{display:block}
  .shelf-all{margin-top:8px}
  /* Touch targets stay finger-sized rather than shrinking with the layout. */
  .pheart,.pstep{width:44px;height:44px}
  .icon-tab{width:44px;height:44px}
}

/* ── Search suggestions ─────────────────────────────────────────────── */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:340px;overflow:auto;z-index:40;
  background:#fff;border:1px solid var(--line,#e4dfe7);border-radius:14px;box-shadow:0 16px 40px rgba(36,22,52,.22);
  padding:6px;text-align:left}
.sg-head{margin:8px 10px 4px;font-size:10.5px;letter-spacing:1.4px;font-weight:700;color:#8b7c95;text-transform:uppercase}
.sg-item{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:9px;background:none;
  font:inherit;cursor:pointer;color:var(--ink,#2c2233)}
.sg-item strong{display:block;font-size:14.5px;font-weight:600}
.sg-item span{display:block;font-size:12px;color:var(--ink-2,#6c6076);margin-top:1px}
.sg-item:hover,.sg-item.is-at{background:var(--brand-50,#f6f1f9)}
.sg-none{margin:0;padding:14px 12px;font-size:13.5px;color:var(--ink-2,#6c6076)}

/* ── Market ─────────────────────────────────────────────────────────── */
.mkt{padding-block:36px 60px}
.mkt h1{font-size:clamp(26px,3.4vw,38px);letter-spacing:-1px;margin:0 0 10px}
.mkt-lede{max-width:60ch;color:var(--ink-2,#6c6076);line-height:1.65;margin:0 0 26px}
.mkt-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}
.mkt-pick label{display:grid;gap:6px;font-size:12px;font-weight:700;letter-spacing:.4px;color:#7b6d85}
.mkt-pick select{padding:11px 12px;border:1px solid var(--line,#d8cfdd);border-radius:10px;background:#fff;
  font:inherit;font-size:14.5px;color:var(--ink,#2c2233)}
.mkt-card{max-width:560px;padding:26px;border:1px solid var(--line,#e8e1ea);border-radius:18px;background:#fff}
.mkt-where{margin:0 0 18px;font-size:11px;letter-spacing:2px;font-weight:700;color:#85708c}
.mkt-figure{margin:0 0 18px}
.mkt-figure dt{font-size:13px;color:var(--ink-2,#6c6076)}
.mkt-figure dd{margin:2px 0 0;font-size:26px;font-weight:700;letter-spacing:-.6px}
.mkt-figure small{display:block;margin-top:3px;font-size:12px;color:#8b7f93}
.mkt-basis{margin:-10px 0 18px;font-size:12px;color:#8b7f93}
.mkt-none{padding:18px;border-radius:12px;background:var(--brand-50,#f8f4fa);margin-bottom:18px}
.mkt-none strong{display:block;font-size:15px;margin-bottom:5px}
.mkt-none p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2,#6c6076)}
.mkt-wait{margin:0;color:#8b7f93;font-size:14px}
@media(max-width:900px){.mkt-pick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mkt-pick{grid-template-columns:1fr}}

/* ── Result chips: what the search is currently asking ──────────────── */
.result-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.rchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line,#ded5e4);
  border-radius:20px;background:#fff;font:inherit;font-size:13px;color:var(--ink,#2c2233);cursor:pointer}
.rchip span[aria-hidden]{color:#9a8ca6;font-size:15px;line-height:1}
.rchip:hover{border-color:var(--jac,#71448b);color:var(--jac,#71448b)}
.rchip.is-clear{border-style:dashed;color:var(--ink-2,#6c6076)}

/* ── Quick view ─────────────────────────────────────────────────────── */
.qv-bg{position:fixed;inset:0;background:rgba(24,14,34,.62);z-index:70}
.qv{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px,94vw);
  max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(24,14,34,.4)}
.qv-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);font-size:22px;line-height:1;cursor:pointer;color:#3b2b47}
.qv-shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--brand-100,#f0ebf4)}
.qv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.qv-count{position:absolute;bottom:12px;right:12px;padding:5px 10px;border-radius:16px;font-size:12px;
  background:rgba(28,17,40,.76);color:#fff}
.qv-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;padding:24px}
.qv-main h2{margin:0;font-size:23px;letter-spacing:-.5px}
.qv-where{margin:5px 0 0;color:var(--ink-2,#6c6076)}
.qv-facts{margin:10px 0 0;font-size:14px;color:var(--ink-2,#6c6076)}
.qv-main h3{margin:20px 0 6px;font-size:14px;letter-spacing:.3px}
.qv-desc{margin:0;font-size:14px;line-height:1.7;color:var(--ink,#2c2233)}
.qv-side{display:grid;gap:10px;align-content:start;padding:18px;border-radius:14px;background:var(--brand-50,#f8f5fb)}
.qv-price{margin:0;font-size:24px;font-weight:700;letter-spacing:-.5px}
.qv-price span{font-size:13px;font-weight:500;color:var(--ink-2,#6c6076)}
.qv-marks{list-style:none;margin:4px 0 8px;padding:0;display:grid;gap:6px}
.qv-marks li{font-size:13px;color:#7d7186;padding-left:20px;position:relative}
.qv-marks li:before{content:"○";position:absolute;left:0;color:#b4a7bf}
.qv-marks li.is-yes{color:#1f6b3f;font-weight:600}
.qv-marks li.is-yes:before{content:"✓";color:#2b8a55}
.qv-full{margin-top:4px;font-size:13px;text-align:left}
@media(max-width:760px){
  /* A sheet, not a modal: on a phone the useful shape is full height from
     the bottom edge. */
  .qv{left:0;top:auto;bottom:0;transform:none;width:100%;max-height:92vh;border-radius:20px 20px 0 0}
  .qv-cols{grid-template-columns:1fr;gap:18px;padding:18px}
  .qv-shot{aspect-ratio:4/3}
}

/* ── Commercial kinds in the hero ───────────────────────────────────── */
.commercial-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.commercial-category{padding:0;overflow:hidden;border:1px solid var(--line,#e4dcea);border-radius:16px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.commercial-category img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.commercial-category>span{display:flex;justify-content:space-between;padding:16px;font-weight:600}
.commercial-category:hover,.commercial-category[aria-pressed="true"]{border-color:var(--brand-950,#241634);box-shadow:0 4px 16px rgba(36,22,52,.12)}
.commercial-category:focus-visible{outline:3px solid var(--brand-950,#241634);outline-offset:4px}
@media(max-width:700px){.commercial-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.commercial-category>span{padding:12px}}
.hero-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kind{padding:8px 14px;border:1px solid rgba(255,255,255,.34);border-radius:20px;background:rgba(255,255,255,.1);
  color:#fff;font:inherit;font-size:13px;cursor:pointer}
.kind:hover{background:rgba(255,255,255,.2)}
.kind.is-on{background:#fff;color:var(--brand-950,#241634);border-color:#fff;font-weight:600}

/* ── Nothing here yet: an offer to both sides, not an apology ───────── */
.offer{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  border:1px solid var(--line,#e4dcea);border-radius:16px;overflow:hidden;background:var(--line,#e4dcea)}
.offer-half{padding:26px 24px;background:#fff;display:grid;align-content:start;gap:8px}
.offer-half:first-child{background:var(--brand-50,#f8f5fb)}
.offer-half h3{margin:0;font-size:17px}
.offer-half p{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--ink-2,#6c6076);max-width:36ch}
.offer-half .btn{justify-self:start}
@media(max-width:700px){.offer{grid-template-columns:1fr}}

/* Photography-led residential editorial. */
.hero{min-height:650px}
.hero-art{transform:none}
.hero-art picture,.hero-art img{display:block;width:100%;height:100%}
.hero-art img{object-fit:cover;object-position:center 58%}
.hero-veil{background:linear-gradient(90deg,rgba(37,18,39,.72),rgba(37,18,39,.30) 52%,rgba(37,18,39,.04)),linear-gradient(0deg,rgba(37,18,39,.35),transparent 40%)}
.hero-credit,.hero-credit a{color:#fff}.hero-credit{font-size:12px;text-shadow:0 1px 5px #241634}
#gridInside:not(.is-empty){grid-template-columns:repeat(6,minmax(0,1fr));align-items:start}
#gridInside>.pcard{grid-column:span 2}
#gridInside>.pcard:nth-child(-n+2){grid-column:span 3}
#gridInside>.pcard:nth-child(2){margin-top:36px}
.pcard-shot{aspect-ratio:1/1;flex-shrink:0}
/* A card with no photograph should not reserve a photograph's worth of
   space. The square is for pictures; where there is only the brand mark
   and "Photography coming soon", a band is enough. */
.pcard-shot:has(.pcard-none){aspect-ratio:16/6}
.pcard-none{gap:3px}
.pcard-body{gap:2px;padding:12px 15px}.pcard-avail{margin-top:4px}
.cards.grid .card-shot img{aspect-ratio:1/1}
.pstep:focus-visible,.gallery-tile:focus-visible{outline:3px solid #a48c5f;outline-offset:-3px}
.d-gallery{grid-template-columns:2.3fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));aspect-ratio:16/9}
.d-gallery .gallery-tile{position:relative;display:block}
.d-gallery .gallery-tile:first-child{grid-row:1/-1}
.d-gallery[data-count="2"]{grid-template-rows:1fr}
.d-gallery[data-count="3"]{grid-template-rows:repeat(2,minmax(0,1fr))}
.gallery-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(37,18,39,.45);color:#fff;font-size:16px;font-weight:600}
@media(hover:none){.pstep{opacity:1}}
@media(max-width:700px){.hero{min-height:560px}.hero-art img{object-position:42% 62%}.hero-veil{background:linear-gradient(180deg,rgba(31,17,38,.62) 0%,rgba(31,17,38,.22) 34%,rgba(31,17,38,.20) 58%,rgba(31,17,38,.72) 100%)}#gridInside:not(.is-empty){grid-template-columns:1fr}#gridInside>.pcard,#gridInside>.pcard:nth-child(-n+2){grid-column:1;margin-top:0}.pcard-shot,.cards.grid .card-shot img{aspect-ratio:4/3}.pcard-shot:has(.pcard-none){aspect-ratio:16/5}.d-gallery{aspect-ratio:1.1}.d-gallery .gallery-tile:nth-child(4){display:block}.gallery-more{font-size:12px}}
@media(prefers-reduced-motion:reduce){.pcard-shot img,.area-tiles>.area-tile img{transition:none}.pcard:hover .pcard-shot img{transform:none}}

.dining-story{display:grid;grid-template-columns:1.4fr 1fr;background:var(--sand-100);margin:54px auto;overflow:hidden;border-radius:4px}
.dining-story picture{display:block;min-width:0;aspect-ratio:3/2}
.dining-story img{display:block;width:100%;height:100%;object-fit:cover}
.dining-story>div{padding:36px;align-self:center}
.dining-story h2{font:400 clamp(28px,3vw,42px)/1.15 Georgia,serif;margin:14px 0;color:#372336}
.dining-story p{color:#716457;line-height:1.6}
.dining-story small{display:block;font-size:10px;line-height:1.6;color:#716457;margin-top:22px}
.dining-story small a{color:inherit}
@media(max-width:700px){.dining-story{grid-template-columns:1fr}.dining-story>div{padding:26px}}
@media(max-width:700px){.topbar-in{gap:8px;justify-content:space-between}.topside{gap:2px}.acct-btn{margin-left:0;padding:8px}.topside .tab-cta{padding:8px;font-size:12px}}
.hero-in{width:100%;padding-left:var(--pad,24px);padding-right:var(--pad,24px)}

/* ── Stays: dates, a calendar, and a reservation ───────────────────────
   A stay is bought by the night, so the dates sit in the search band beside
   the query rather than in the filter panel: they decide what can be had at
   all, not merely what to show first. */
.stay-dates{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.stay-field{display:grid;gap:5px;min-width:0}
.stay-field>span{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#e6dcef}
.stay-field input{height:46px;border-radius:10px;border:0;padding:0 12px;font:inherit;font-size:15px;
  background:#fff;color:#241634;min-width:0;width:100%}
.stay-guests{max-width:96px}
.stay-clear{grid-column:1/-1;justify-self:start;color:#e4d8ef}
@media(max-width:700px){
  .stay-dates{grid-template-columns:1fr 1fr;gap:8px}
  .stay-guests{max-width:none;grid-column:1/-1}
  .stay-field input{height:44px;font-size:15px}
}

/* The panel that turns a rate into a decision. */
.stay-panel{display:grid;gap:16px}
.stay-rate{margin:0;font-size:20px;font-weight:700}
.stay-rate span{font-size:13.5px;font-weight:500;color:var(--ink-2,#6c6076)}
.stay-min{font-weight:500}
.stay-loading{margin:0;color:var(--muted,#6A6389);font-size:14px}

.cal-month{min-width:0}
.cal-label{margin:0 0 8px;font-weight:600;font-size:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal-dow{display:grid;place-items:center;height:24px;font-size:11px;font-weight:700;color:var(--muted,#6A6389)}
.cal-day{height:38px;border:0;border-radius:9px;background:none;font:inherit;font-size:13.5px;
  color:var(--ink,#1B1633);cursor:pointer}
.cal-day:hover:not(:disabled){background:var(--sand-100,#F0EBE1)}
.cal-day.is-out{visibility:hidden}
/* A night that is gone says so by being struck through, not merely by being
   pale: "unavailable" and "a bit faint" are the same thing at a glance. */
.cal-day.is-off{color:#b3aaa0;cursor:not-allowed;text-decoration:line-through}
.cal-day.is-on{background:var(--brand-700,#6247BE);color:#fff;font-weight:700}
.cal-day.is-mid{background:var(--brand-100,#EDE9FA)}
.cal-day:focus-visible{outline:3px solid var(--brand-700,#6247BE);outline-offset:-3px}

.stay-sum dl{margin:0;display:grid;gap:7px}
.stay-sum dl>div{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;color:var(--ink-2,#6c6076)}
.stay-sum .stay-total{border-top:1px solid var(--line,#E7E1D9);padding-top:9px;font-weight:700;
  color:var(--ink,#1B1633);font-size:16px}
.stay-sum dt,.stay-sum dd{margin:0}
.stay-note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted,#6A6389)}
.stay-why{margin:0;font-size:14px;color:var(--ink-2,#6c6076)}
.stay-msg{display:grid;gap:6px}
.stay-msg>span{font-size:13px;font-weight:600;color:var(--ink-2,#6c6076)}
.stay-msg textarea{border:1px solid var(--line,#E7E1D9);border-radius:10px;padding:10px 12px;font:inherit;
  font-size:14.5px;resize:vertical}
.stay-go{width:100%}
.stay-go:disabled{opacity:.55;cursor:not-allowed}
@media(min-width:700px){.stay-panel{grid-template-columns:1fr 1fr}
  .stay-quote,.stay-sum,.stay-msg,.stay-go{grid-column:1/-1}}

/* A reservation, from either side of it. */
.stay-row{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--line,#E7E1D9);border-radius:14px;padding:16px 18px;margin-bottom:12px;
  background:var(--card,#fff)}
.stay-row h3{margin:0 0 4px;font-size:16.5px}
.stay-row-main{min-width:0;flex:1 1 260px}
.stay-when{margin:0;font-size:13.5px;color:var(--ink-2,#6c6076)}
.stay-money{margin:4px 0 0;font-size:14px;font-weight:600}
.stay-said{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2,#6c6076);font-style:italic}
.stay-said-owner{font-style:normal}
.stay-row-side{display:grid;gap:7px;align-content:start;justify-items:stretch;flex:0 0 auto;min-width:150px}
.stay-role{margin:0;font-size:12px;color:var(--muted,#6A6389)}
.stay-row-side .btn{width:100%}
@media(max-width:700px){.stay-row{flex-direction:column;gap:12px}.stay-row-side{min-width:0}}
/* Status, in a word and a colour. Scoped: .pill in styles.css is the little
   count badge on the navigation and means something else entirely. */
.stay-pill{display:inline-block;padding:4px 10px;border-radius:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;border:1px solid transparent}
.stay-pill.is-wait{background:#FBF2DF;border-color:#EEDCB4;color:#8A5D06}
.stay-pill.is-ok{background:#E9F4EE;border-color:#CBE5D6;color:#1F5C41}
.stay-pill.is-no{background:#FBE7EE;border-color:#F2CBD9;color:#A31D50}
.stay-pill.is-mute{background:var(--sand-100,#F0EBE1);border-color:var(--line,#E7E1D9);color:#6d6459}
/* A row of actions inside a card wants a smaller button than a hero does. */
.stay-row-side .btn{padding:9px 12px;font-size:13.5px;display:block;text-align:center;text-decoration:none}
.stay-row-side .btn.danger{color:#A31D50;border-color:#F2CBD9}

/* Marketplace navigation and owner entry share the existing brand surface. */
.topnav{gap:5px;align-items:center}
.topnav .tab{border:1px solid transparent;border-radius:9px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
/* Sell is a link and the marketplaces are buttons; one lit state for both. */
.topnav .tab.is-on,.topnav [aria-current="page"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.topnav .tab:hover{background:rgba(255,255,255,.1)}
.topbar :focus-visible{outline:2px solid #b79bc9;outline-offset:4px}
.topside .icon-tab{display:flex;width:auto;gap:6px;padding:8px 12px;color:inherit}
.saved-label{font-size:13px}

/* The seller hero is the same photograph as the browse one, read against a
   heavier veil: the words sit over it rather than beside it. */
.seller-hero h1{max-width:760px}
.seller-hero .editorial-eyebrow{color:#eee1ee}
.seller-hero .hero-veil{background:linear-gradient(90deg,rgba(37,18,39,.8),rgba(37,18,39,.3))}
.seller-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.seller-actions .btn-ghost{background:rgba(37,18,39,.45);color:#fff;border-color:#c6b7c9}

/* One photograph, four marketplaces: the crop moves to what each one is
   about rather than shipping four files of the same room. */
#hero[data-mode="sale"] .hero-art img{object-position:55% 45%}
#hero[data-mode="commercial"] .hero-art img{object-position:80% 50%}

/* Six tabs do not fit beside a logo and a sign-in. Below this width they
   take a line of their own and scroll, rather than wrapping into a block
   that pushes the search box off the first screen. */
@media(max-width:1150px){
  .topbar-in{flex-wrap:wrap;gap:10px;padding-bottom:8px}
  .topside{margin-left:auto}
  .topbar .topnav{display:flex;order:3;flex:1 0 100%;min-width:0;max-width:100%;margin:0;padding:4px 0;gap:4px;overflow-x:auto;scrollbar-width:thin;scroll-padding-inline:4px}
  .topbar .topnav .tab{flex:0 0 auto;min-height:44px;padding:9px 12px}
  .saved-label{display:none}
}
@media(max-width:480px){.topbar-in{gap:6px}.topside{gap:2px}.seller-actions .btn{width:100%}}

/* ── How fresh an availability claim is ────────────────────────────────
   The colour carries the same meaning as the words, for the same reason the
   words exist: a listing that was confirmed this morning and one confirmed
   three weeks ago should not look identical. Green while current, amber once
   it is aging, and plain grey once the claim has been withdrawn -- grey
   rather than red, because a stale confirmation is Funguo saying it does not
   know, not a warning about the property. */
.availability.is-fresh{color:var(--success,#2C6B4F);font-weight:600}
.availability.is-aging{color:var(--warning,#C9860E);font-weight:600}
.availability.is-unknown{color:var(--text-secondary,#6A6389)}
.availability.is-fresh::before,
.availability.is-aging::before,
.availability.is-unknown::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:currentColor
}

/* The same fact, on the owner's side of the screen: not how old it is, but
   how long they have before it stops showing. */
.own-expiry{font-size:13px;margin:8px 0 0;color:var(--text-secondary,#6A6389)}
.own-expiry.is-soon{color:var(--warning,#C9860E);font-weight:600}
.own-expiry.is-late{color:var(--accent,#D22C6E);font-weight:600}
.own-actions .btn-confirm{
  background:var(--success,#2C6B4F);color:#fff;border-color:transparent;font-weight:600
}
.own-actions .btn-confirm:hover{filter:brightness(1.08)}
.st-expired{background:#FBF2DF;color:#8A5D06;border-color:#EEDCB4}

/* Account: compact, quiet cards within the existing Funguo shell. */
.account-view{background:#faf9f7}
#view-account .page{max-width:1160px;padding-top:36px;padding-bottom:40px}
/* The step after publishing wants a wider measure than .page gives; the
   side gutter comes from .wrap like everywhere else. */
#view-pay .page{max-width:1100px}
#view-pay .page-sub{margin-bottom:26px}
#view-account .page-h{margin-bottom:10px}
#view-account .acct-intro{margin-bottom:32px;max-width:65ch}
.acct-block{margin:0 0 32px}
.acct-block:last-child{margin-bottom:0}
.acct-block .page-h2{margin:0 0 20px}
.acct-details,.acct-privacy{background:#fff;border:1px solid #e5e0e7;border-radius:14px;padding:24px}
.acct-person{margin:-8px 0 20px;font-weight:600}
.acct-block .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;margin:0}
.acct-block .facts div{margin:0;min-width:0}
.acct-block .facts dt{font-size:13px;color:#6c6573;margin:0 0 6px}
.acct-block .facts dd{margin:0;font-size:15px;overflow-wrap:anywhere}
.acct-note,.acct-empty{display:block;font-size:14px;line-height:1.6;color:#6c6573;margin:6px 0 10px}
.acct-block .facts .acct-note{display:block}
#view-account .btn-jac{background:var(--brand-900);box-shadow:none}
#view-account .btn-jac:hover{background:var(--brand-950)}
.acct-verified{color:#28704a}
.acct-add{margin-top:6px}
.acct-add summary,.acct-privacy-more summary{cursor:pointer;color:var(--jac);font-size:14px;text-underline-offset:4px}
.acct-contact-form{display:grid;gap:10px;margin-top:12px;max-width:340px}
.acct-contact-form input{width:100%;min-width:0}
.acct-contact-form button{justify-self:start}
.acct-counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.acct-count{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:20px;min-width:0;border:1px solid #e5e0e7;border-radius:12px;background:#fff;font:inherit;color:inherit;text-align:left;text-decoration:none}
button.acct-count,a.acct-count{cursor:pointer;transition:border-color .15s,background .15s}
button.acct-count:hover,a.acct-count:hover{border-color:#c7bbd0;background:#f8f6fa}
.acct-count b{font-size:28px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.acct-count .acct-zero{color:#77707d;font-weight:400}
.acct-count span{font-size:13px;color:#6c6573}
.acct-empty{margin:16px 0 0}
.acct-action{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid #e5e0e7}
.acct-action h3{font:inherit;font-weight:500;margin:0}
.acct-action .btn{text-decoration:none}
.acct-orgs,.acct-history{list-style:none;padding:0;margin:0}
.acct-orgs li,.acct-history li{padding:12px 0;border-bottom:1px solid #e5e0e7;font-size:15px}
.acct-history li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.acct-history .lnk{font-size:15px;text-align:left}
.acct-history-meta{font-size:13px;color:#6c6573}
.acct-privacy .page-h2{margin-bottom:10px}
.acct-privacy-rows{margin:20px 0}
.acct-privacy-rows div{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid #eeeaf0;font-size:14px;line-height:1.6}
.acct-privacy-rows dt{font-weight:500}
.acct-privacy-rows dd{margin:0;color:#6c6573}
.acct-privacy-more ul{padding-left:20px;margin:18px 0;font-size:14px;line-height:1.7;color:#6c6573}
.acct-privacy-more li{margin-bottom:12px}
.acct-privacy-more .page-sub{font-size:14px;margin-bottom:0}
#view-account :is(a,button,input,summary):focus-visible{outline:2px solid var(--jac);outline-offset:4px}
.account-view .topside{gap:10px}
.account-view .acct-btn{margin-left:0}
.acct-btn.is-on{background:#fff;color:var(--deep,#251334);border-color:#fff}
.account-view .foot{background:var(--brand-950);padding-top:24px;padding-bottom:28px}
.account-view .foot-logo{margin-bottom:10px}
.account-view .foot-credit{margin-top:8px;opacity:1;color:#bdb3cf}
@media(max-width:700px){
  .acct-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-view .topside{gap:4px}
  .account-view .foot{padding-bottom:80px}
}
@media(max-width:560px){
  #view-account .page{padding-top:28px}
  .acct-details,.acct-privacy{padding:20px}
  .acct-block .facts{grid-template-columns:1fr;gap:20px}
  .acct-count{padding:18px}
  .acct-action{flex-direction:column;align-items:stretch}
  .acct-action .btn{width:100%;text-align:center;justify-content:center}
  .acct-privacy-rows div{grid-template-columns:1fr;gap:4px}
}

/* ── The property passport ─────────────────────────────────────────────
   The rule this is designed around is that an unmade check must not look
   like a failed one. So there is no red anywhere in it: green for what was
   checked, amber for what was checked partly or is ageing, and plain grey
   for what nobody has looked at. Grey is a statement about Funguo. Red would
   be a statement about the property, and no such statement has been made. */
.passport{
  margin:20px 0 24px;padding:18px 20px 16px;
  background:var(--surface,#fff);border:1px solid var(--border,#E7E1D9);border-radius:12px
}
.passport-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.passport-head h3{margin:0;font-size:15px;font-weight:600;letter-spacing:.01em}
.passport-count{
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-secondary,#6A6389);
  background:var(--sand-100,#F0EBE1);padding:2px 8px;border-radius:20px;white-space:nowrap
}

.passport-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.passport-list li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:start}
.pmark{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;line-height:1;margin-top:2px;font-weight:700
}
.pbody{display:block;min-width:0}
.pbody b{display:block;font-size:14px;font-weight:600;color:var(--text-primary,#1B1633)}
.pbasis{display:block;font-size:13px;line-height:1.45;color:var(--text-secondary,#6A6389);margin-top:1px}

.passport-list .is-yes  .pmark{background:var(--success,#2C6B4F);color:#fff}
.passport-list .is-part .pmark{background:var(--warning,#C9860E);color:#fff}
/* Said, not checked. An outline rather than a fill: somebody asserted it. */
.passport-list .is-said .pmark{background:transparent;color:var(--text-secondary,#6A6389);
  box-shadow:inset 0 0 0 1.5px var(--border-strong,#D8D0C4)}
.passport-list .is-none .pmark{background:var(--sand-200,#E3DCCF);color:var(--text-secondary,#6A6389)}
.passport-list .is-none .pbody b{color:var(--text-secondary,#6A6389);font-weight:500}

.passport-foot{font-size:12.5px;color:var(--text-secondary,#6A6389);margin:14px 0 0}
.passport-more{margin-top:8px;font-size:13px;text-align:left}

.passport-detail{
  margin:14px 0 0;padding:16px 0 0;border-top:1px solid var(--border,#E7E1D9)
}
.passport-detail h4{margin:0 0 10px;font-size:13.5px;font-weight:600}
.passport-defs{margin:0;display:grid;gap:10px}
.passport-defs div{margin:0}
.passport-defs dt{font-size:13px;font-weight:600;color:var(--text-primary,#1B1633)}
.passport-defs dd{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--text-secondary,#6A6389)}
.passport-note{
  margin:14px 0 0;padding:12px 14px;background:var(--sand-100,#F0EBE1);border-radius:8px;
  font-size:13px;line-height:1.55;color:var(--text-secondary,#6A6389)
}
.passport-note b{color:var(--accent,#D22C6E)}
@media(max-width:480px){.passport{padding:16px 15px 14px}}

/* ── How long it has been looking for somebody ─────────────────────────
   Quiet at a fortnight, and only slightly less quiet past two months. This
   is information a seeker weighs, not an accusation: a property can sit for
   a season because it is priced ambitiously, which is worth knowing and is
   not a fault. */
.market-age{font-size:12.5px;color:var(--text-secondary,#6A6389);margin:6px 0 0}
.market-age.is-long{color:var(--warning,#C9860E)}

/* ── The paid lane ─────────────────────────────────────────────────────
   Set apart rather than blended in. A seeker should be able to tell at a
   glance where the bought results end and the real ordering begins, without
   reading anything -- so the lane sits on its own ground with its own rule
   under it, and does not pretend to be the top of the list. */
#priorityLane{
  margin:0 0 26px;padding:16px 18px 18px;
  background:var(--sand-100,#F0EBE1);border:1px solid var(--border,#E7E1D9);border-radius:14px
}
.lane-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 14px}
.lane-head h2{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary,#6A6389)
}
.lane-head p{margin:0;font-size:13px;color:var(--text-secondary,#6A6389);max-width:62ch}
#priorityLane .cards{margin:0}

/* The mark on a paid card. Deliberately not the shape or colour of any
   verification badge: a seeker must never read "paid" as "checked". */
.badge.paid{
  background:var(--surface,#fff);color:var(--text-secondary,#6A6389);
  border:1px solid var(--border-strong,#D8D0C4);font-weight:600
}
@media(max-width:560px){#priorityLane{padding:14px 13px 15px;border-radius:12px}}