/* Find a Car Park — Clear Lane. One stylesheet for the public site. Light theme. */
:root {
  --display: "Archivo", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink: #14212e; --ink-2: #34414e; --muted: #5d6b79; --faint: #8a97a4; --line: #e1e7ed; --line-2: #cfd8e1;
  --soft: #f3f7fa; --paper: #ffffff;
  --green: #1e975b; --green-ink: #16784a; --green-soft: #e3f3ea;
  --blue: #2e394f; --blue-ink: #1f2838; --blue-soft: #eceff4; --blue-ring: #a3adc2;
  --amber: #8a5700; --amber-soft: #fff4dc; --red: #b3261e; --red-soft: #fdecea;
  --map: #e9f0f5;
  --radius: 12px; --gutter: 26px;
  --shadow-lift: 0 10px 28px rgba(20, 33, 46, .08);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--body); color: var(--ink); background: var(--paper); }
img { max-width: 100%; height: auto; }
a { color: var(--blue-ink); }
a:hover { color: var(--blue); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .4em; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
h2 { font-size: clamp(21px, 2.6vw, 25px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 .9em; }
.tab, .num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--blue-ring); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.4em; }
.prose img { border-radius: 10px; }
.prose .press-clip { margin: 0 0 20px; display: grid; gap: 8px; }
.prose .press-clip video { display: block; width: 100%; height: auto; background: #0b1622; border-radius: 10px; }
.prose .press-clip figcaption { color: var(--muted); font-size: 14px; }
.prose .press-audio { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.prose .press-audio figcaption { color: var(--ink); font-weight: 600; font-size: 15px; }
.prose .press-clip audio { display: block; width: 100%; height: 44px; }
.prose .news-source { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.prose .news-credit { font-size: 12.5px; color: var(--faint); }
.prose .news-credit a { color: inherit; }
.stack { display: grid; gap: 16px; }
@media (max-width: 700px) { :root { --gutter: 16px; } body { font-size: 15.5px; } }

@keyframes fade-in { from { opacity: 0; } }
/* ---------- header / footer ---------- */
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 12px rgba(20, 33, 46, .08); }
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.logo img { display: block; height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue-ink); font-weight: 700; }
/* Buttons inside the nav keep their own colours (the generic .nav a rule is more specific than .btn-*) */
.nav a.nav-cta, .nav a.nav-cta:hover, .nav a.nav-cta:focus-visible { color: #fff; }
.nav a.nav-cta { background: var(--green); border-color: var(--green); }
.nav a.nav-cta:hover { background: #1a8550; border-color: #1a8550; }
/* Signed-in owner: an outlined account pill, distinct from the plain links */
.nav a.nav-account { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1.5px solid var(--blue); border-radius: 10px;
  background: var(--blue-soft); color: var(--blue-ink); font-weight: 700; }
.nav a.nav-account:hover { background: #fff; color: var(--blue-ink); }
.nav a.nav-account[aria-current="page"] { background: var(--blue); border-color: var(--blue); color: #fff; }
/* "P" parking sign, the same mark as the no-photo placeholder (.nophoto .np-sign) */
.nav-account .avatar { width: 26px; height: 26px; box-sizing: border-box; border-radius: 6px; background: var(--blue); color: #fff; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(20,33,46,.18); display: grid; place-items: center; padding-top: 1px; font: 900 15px/1 var(--display); }
.nav-count { background: #d93025; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; }
.nav form { margin: 0; }
/* Mobile-only parts of the header: the burger, the "List your space" button beside it, and the menu cards' icon/description/chevron */
.menu-btn, .site-header .header-cta, .nav-ico, .nav-desc, .nav-chev { display: none; }
.nav-text { display: contents; }
.menu-btn { width: 40px; height: 40px; padding: 0; place-items: center; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.menu-btn .menu-close, .menu-btn[aria-expanded="true"] .menu-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-close { display: block; }
@media (max-width: 860px) {
  .site-header .wrap { gap: 10px; }
  .menu-btn { display: inline-grid; }
  .site-header .header-cta { display: inline-flex; margin-left: auto; height: 40px; padding: 0 14px; background: var(--green); border-color: var(--green); color: #fff; white-space: nowrap; }
  .site-header .header-cta:hover { background: #1a8550; border-color: #1a8550; color: #fff; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--soft); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px var(--gutter) 16px; box-shadow: 0 18px 32px -4px rgba(0, 0, 0, .6), 0 6px 10px -2px rgba(0, 0, 0, .35); max-height: calc(100vh - 68px); overflow-y: auto; }
  .nav.open { display: flex; }
  /* Dim the page under the open menu (the sticky header, z-index 30, stays above it) */
  body.menu-open { overflow: hidden; }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(20, 33, 46, .45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .15s ease-out; }
  .nav a.nav-cta { display: none; }
  /* Menu cards: outlined, full width, icon tile + label + description + chevron */
  .nav a.nav-item, .nav a.nav-account { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0; background: #fff; color: var(--ink);
    border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .12s, background-color .12s; }
  .nav a.nav-item:hover, .nav a.nav-account:hover { border-color: var(--blue); background: #fff; color: var(--ink); }
  .nav a.nav-item[aria-current="page"], .nav a.nav-account[aria-current="page"] { border-color: var(--blue); background: var(--blue-soft); color: var(--ink); }
  .nav-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
  .nav a[aria-current="page"] .nav-ico { background: var(--blue); color: #fff; }
  .nav a.nav-account .avatar { width: 40px; height: 40px; border-radius: 10px; border-width: 3px; font-size: 24px; flex: none; }
  .nav-text { display: grid; gap: 1px; min-width: 0; }
  .nav-label { font-weight: 700; font-size: 16px; }
  .nav-desc { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
  .nav-chev { display: block; flex: none; margin-left: auto; color: var(--muted); }
  .nav a .nav-count { margin-left: auto; }
  .nav a .nav-count + .nav-chev { margin-left: 0; }
  .logo img { height: 36px; }
}
.impersonation { background: var(--amber-soft); color: var(--amber); font-size: 14px; font-weight: 600; text-align: center; padding: 6px 12px; }
.site-footer { background: #0f1b27; color: #b7c3cf; margin-top: 56px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 22px; padding-block: 34px; font-size: 14.5px; }
.site-footer b { color: #fff; display: block; margin-bottom: 8px; font-family: var(--display); }
.site-footer a { color: #b7c3cf; text-decoration: none; display: block; padding: 2px 0; }
.site-footer a:hover { color: #fff; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid #243444; padding-top: 14px; font-size: 13px; color: #8698a9; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }

/* ---------- buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 10px 16px;
  font: 700 15px/1.2 var(--body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #1f2838; color: #fff; }
.btn-owner { background: var(--green); color: #fff; }
.btn-owner:hover { background: #1a8550; color: #fff; }
.btn-line { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--muted); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--blue-ink); padding-inline: 6px; }
.btn-danger { background: #fff; color: var(--red); border-color: #efc2be; }
.btn-sm { padding: 6px 11px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-ink); cursor: pointer; text-decoration: underline; }
.field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.field > label, .label { font-weight: 600; font-size: 14.5px; }
.input, input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], input[type=date], select, textarea {
  width: 100%; font: 16px/1.4 var(--body); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; min-height: 44px; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--blue-ring); outline-offset: 0; border-color: var(--blue); }
[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.help { font-size: 13.5px; color: var(--muted); margin: 0; }
.errmsg { font-size: 13.5px; color: var(--red); font-weight: 600; margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.money { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.money > span { padding: 10px 12px; background: var(--soft); color: var(--muted); font-weight: 600; display: flex; align-items: center; }
.money input { border: 0; border-radius: 0; min-width: 0; }
.money input:focus { outline: none; }
.money:focus-within { outline: 3px solid var(--blue-ring); border-color: var(--blue); }
.seg { display: inline-flex; background: var(--soft); border-radius: 8px; padding: 3px; }
.seg label, .seg a, .seg span { padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 14.5px; color: var(--muted); cursor: pointer; text-decoration: none; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
/* Selected option in every segmented control / tab list: brand navy */
.seg input:checked + span, .seg .on { background: var(--blue); color: #fff; box-shadow: none; }
.seg input:focus-visible + span { outline: 3px solid var(--blue-ring); }

/* ---------- search bar ---------- */
.searchbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 6px; background: #fff; border: 2px solid var(--blue);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(46,57,79,.12); max-width: 780px; position: relative; }
.searchbar input[type=search] { border: 0; min-height: 44px; font-size: 17px; }
.searchbar input[type=search]:focus { outline: none; }
.searchbar:focus-within { box-shadow: 0 0 0 4px var(--blue-ring), 0 10px 28px rgba(46,57,79,.12); }
@media (max-width: 640px) { .searchbar { grid-template-columns: minmax(0, 1fr); } .searchbar .seg { justify-self: start; } }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-lift);
  list-style: none; margin: 0; padding: 6px; z-index: 40; }
.suggest li { padding: 9px 12px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--blue-soft); }
.suggest li span { color: var(--muted); font-size: 14px; }

/* ---------- chips, tags, badges, alerts ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 13px;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip.on, .chip:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-ink); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12.5px; font-weight: 600; background: var(--soft); color: var(--blue-ink); border-radius: 6px; padding: 3px 8px; }
.badge { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.b-live { background: var(--green-soft); color: var(--green-ink); }
.b-warn { background: var(--amber-soft); color: var(--amber); }
.b-off { background: var(--soft); color: var(--muted); }
.b-new { background: var(--blue-soft); color: var(--blue-ink); }
.b-bad { background: var(--red-soft); color: var(--red); }
.alert { border-radius: 10px; padding: 12px 16px; font-size: 15px; margin: 0 0 16px; }
.alert-success { background: var(--green-soft); color: var(--green-ink); }
.alert-error { background: var(--red-soft); color: var(--red); }
.alert-info { background: var(--blue-soft); color: var(--blue-ink); }
.alert-warning { background: var(--amber-soft); color: var(--amber); }
.flashes { padding-top: 16px; }

/* ---------- photos & maps ---------- */
.photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); display: block; max-width: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.none { display: grid; place-items: center; color: var(--faint); font-size: 14px; font-weight: 600;
  background: repeating-linear-gradient(90deg, transparent 0 24%, rgba(255,255,255,.8) 24% 25.5%, transparent 25.5% 49%, rgba(255,255,255,.8) 49% 50.5%, transparent 50.5% 74%, rgba(255,255,255,.8) 74% 75.5%, transparent 75.5%), linear-gradient(170deg, #d5dde4, #bcc6cf); }
/* "No photo yet": parking sign on a per-listing gradient (View::noPhoto). --np scales it down in small thumbnails. */
.nophoto { --np: 1; display: grid; place-content: center; justify-items: center; gap: calc(10px * var(--np)); color: rgba(255,255,255,.86); background: linear-gradient(160deg, #4a5876, #1f2838); }
.nophoto .np-sign { width: calc(58px * var(--np)); height: calc(58px * var(--np)); display: grid; place-items: center; padding-top: calc(2px * var(--np));
  font: 900 calc(40px * var(--np))/1 var(--display); color: #fff; background: #2e394f; border: calc(3px * var(--np)) solid #fff; border-radius: calc(10px * var(--np));
  box-shadow: 0 0 0 1px rgba(20,33,46,.18), 0 6px 16px rgba(20,33,46,.22); }
.nophoto .np-cap { font-size: calc(14px * var(--np)); font-weight: 600; letter-spacing: .01em; }
.nophoto.np-2 { color: rgba(20,33,46,.72); background: linear-gradient(160deg, #e2e7f0, #a3adc2); }
.nophoto.np-3 { background: linear-gradient(160deg, #3fb57a, #16784a); }
.nophoto.np-4 { background: linear-gradient(160deg, #5fc9b0, #1b7f86); }
.nophoto.np-5 { background: linear-gradient(160deg, #4b5b6b, #14212e); }
.nophoto.np-6 { color: rgba(20,33,46,.72); background: linear-gradient(160deg, #e4eaef, #b6c2cd); }
.nophoto.np-7 { background: linear-gradient(160deg, #1e975b, #2e394f); }
.row-card .nophoto, .mylist .nophoto { --np: .72; }
@media (max-width: 640px) { .row-card .nophoto, .mylist .nophoto { --np: .6; } }
.photo .count { position: absolute; right: 10px; bottom: 10px; background: rgba(20,33,46,.78); color: #fff; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.map { background: var(--map); position: relative; isolation: isolate; border-radius: var(--radius); overflow: hidden; min-height: 260px; }
.map .map-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; padding: 16px; text-align: center; }
.leaflet-container { font: inherit; }
.price-pin { background: var(--ink); color: #fff; font: 700 12.5px/1 var(--body); padding: 5px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); position: relative; display: inline-block; transform: translate(-50%, -100%); }
.price-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.price-pin.on { background: var(--blue); }
.price-pin.on::after { border-top-color: var(--blue); }

/* ---------- listing cards ---------- */
.price { font-family: var(--display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15; }
.price small { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--muted); }
.where { color: var(--muted); font-size: 14.5px; }
.dist { font-weight: 700; color: var(--green-ink); font-size: 13.5px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: grid; align-content: start; color: inherit; text-decoration: none; }
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-lift); color: inherit; }
.card .photo { border-bottom: 1px solid var(--line); }
.card .body { padding: 12px 14px 14px; display: grid; gap: 5px; }
.card .title { font-weight: 700; font-size: 16px; color: var(--ink); }
.rows { display: grid; gap: 12px; }
.row-card { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; color: inherit; text-decoration: none; }
.row-card:hover, .row-card.hl { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); color: inherit; }
.row-card .photo { aspect-ratio: auto; height: 100%; min-height: 128px; }
.row-card .body { padding: 12px 0; display: grid; gap: 4px; align-content: start; min-width: 0; }
.row-card .title { font-weight: 700; font-size: 16.5px; color: var(--ink); }
.row-card .side { padding: 12px 14px 12px 0; display: grid; justify-items: end; align-content: space-between; gap: 6px; text-align: right; }
@media (max-width: 640px) {
  .row-card { grid-template-columns: 116px minmax(0, 1fr); }
  .row-card .side { grid-column: 2; justify-items: start; text-align: left; padding: 0 12px 12px 0; }
}

/* ---------- price guides ---------- */
.guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .guides { grid-template-columns: minmax(0, 1fr); } }
.pg { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 7px; background: #fff; color: inherit; text-decoration: none; align-content: start; }
a.pg:hover { border-color: var(--line-2); box-shadow: var(--shadow-lift); color: inherit; }
.pg .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pg .name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.pg .pc { font-size: 13px; color: var(--muted); font-weight: 600; }
.pg .typ { font-family: var(--display); font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.pg .typ small { font-family: var(--body); font-size: 14px; color: var(--muted); font-weight: 500; }
.pg .none { font-family: var(--display); font-weight: 700; font-size: 18px; }
.conf { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.conf .bars { display: inline-flex; gap: 2px; }
.conf .bars i { width: 5px; height: 12px; border-radius: 1px; background: #d3dbe3; display: block; }
.conf .bars i.f { background: var(--green); }
.rangebar { position: relative; height: 36px; margin: 2px 0; }
.rangebar .track { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); }
.rangebar .iqr { position: absolute; top: 13px; height: 8px; border-radius: 4px; background: #c3cad8; }
.rangebar .med { position: absolute; top: 7px; width: 3px; height: 20px; background: var(--blue-ink); border-radius: 2px; transform: translateX(-50%); }
.rangebar .you { position: absolute; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green); transform: translateX(-50%); }
.rangebar .ticks { position: absolute; left: 0; right: 0; top: 25px; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.insight { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; background: var(--blue-soft); border-radius: 10px; padding: 11px 15px; font-size: 15px; color: var(--ink-2); }
.insight b { color: var(--ink); }
.yearly { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 110px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.yearly div { display: grid; justify-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.yearly .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); }
.yearly .dot.thin { background: #fff; border: 2px solid var(--blue); }
.yearly-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 15px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
table.data .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

/* ---------- page sections ---------- */
.section { padding-block: 34px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.page-head { padding-block: 26px 18px; }
.page-head h1 { margin-bottom: 6px; }
.page-head.tinted { background: linear-gradient(180deg, #e2e7f0, #fff); border-bottom: 1px solid var(--line); }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue-ink); text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 6px; }
.panel { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fff; }
.panel.soft { background: var(--soft); border-color: transparent; }
.panel.owner { background: #f4faf7; border-color: #cdeadb; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.two-col.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .two-col, .two-col.even { grid-template-columns: minmax(0, 1fr); } }
.empty { border: 1px dashed #c4ced8; border-radius: 14px; padding: 26px 20px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.empty p { max-width: 56ch; margin: 0; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.pager a, .pager span { min-width: 38px; padding: 7px 10px; text-align: center; border-radius: 8px; text-decoration: none; }
.pager a { border: 1px solid var(--line-2); color: var(--ink); }
.pager .current { background: var(--blue); color: #fff; font-weight: 700; }

/* ---------- home ---------- */
.hero { background: linear-gradient(180deg, #e2e7f0, #fff); padding-block: 52px 36px; }
.hero h1 { font-size: clamp(32px, 5.4vw, 56px); line-height: 1.02; letter-spacing: -.02em; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero .lead { font-size: 19px; color: var(--muted); max-width: 54ch; margin-bottom: 22px; }
.hero .chips { margin-top: 16px; }
/* Background art behind the hero text (views/partials/hero_map.php): desktop only, decorative */
.hero { position: relative; } /* no overflow:hidden: the search suggestions list must be able to drop below the hero */
.hero > .wrap { position: relative; z-index: 2; } /* above the following sections too, so the search suggestions list is never covered */
/* Sits in the right-hand part of the centred 1200px layout (overhanging its edge by 80px), not against the window edge.
   It runs 110px below the hero, so the drawing (scaled to the box height, "meet" in the SVG) comes out larger.
   It fades out on the left, the right and along the bottom. */
.hero-art { position: absolute; top: 0; bottom: -110px; right: max(0px, calc((100% - 1200px) / 2 - 80px)); width: clamp(640px, 60%, 860px);
  overflow: hidden; opacity: .85; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 78%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 78%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-composite: intersect; }
/* The sections after the hero stay above the part of the map that runs below it */
.hero ~ .section, .hero ~ .seen-on { position: relative; z-index: 1; }
.hero-art svg { display: block; width: 100%; height: 100%; }
.hero-art-accent { fill: var(--green); }
/* Pulse: a thin ring that grows out from the pin tip and fades; invisible before and between pulses */
.hero-art-ping { fill: none; stroke: var(--green); stroke-width: 3; opacity: 0; }
.hero-art-route { stroke-dasharray: 520; animation: hero-route 7s ease-in-out infinite; }
.hero-art-ping { transform-box: fill-box; transform-origin: center; animation: hero-ping 2.8s ease-out infinite both; }
.hero-art-ping-2 { animation-delay: 1.4s; }
@keyframes hero-route { 0% { stroke-dashoffset: 520; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes hero-ping { 0% { transform: scale(.25); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-art-route { animation: none; stroke-dasharray: none; } .hero-art-ping { display: none; } }
@media (max-width: 900px) { .hero-art { display: none; } }
@media print { .hero-art { display: none; } }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { display: grid; gap: 6px; }
.steps li::before { counter-increment: step; content: counter(step); width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 800; }
.steps p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.ownerband { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px; align-items: center; background: var(--blue); color: #fff; border-radius: 16px; padding: 28px; }
.ownerband h2 { color: #fff; }
.ownerband p { color: #d3d9e4; margin: 0 0 14px; max-width: 52ch; }
.ownerband .fee { font-family: var(--display); font-size: 58px; font-weight: 800; line-height: 1; text-align: right; }
.ownerband .fee small { font-size: 15px; display: block; color: #d3d9e4; font-weight: 600; margin-top: 6px; }
@media (max-width: 700px) { .ownerband { grid-template-columns: minmax(0, 1fr); } .ownerband .fee { text-align: left; } }

/* ---------- search results ---------- */
.results-bar { border-bottom: 1px solid var(--line); padding-block: 12px; }
.results-bar form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.results-bar .q { flex: 1 1 240px; min-width: 0; position: relative; }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; padding-block: 18px; }
.split .map { position: sticky; top: 84px; height: calc(100vh - 110px); min-height: 420px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split .map { position: relative; top: 0; height: 320px; min-height: 0; order: -1; } .split .map.collapsed { display: none; } }
.count-line { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 14.5px; }

/* ---------- listing ---------- */
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.gallery .photo { border-radius: var(--radius); }
.gallery .side { display: grid; gap: 8px; grid-template-rows: 1fr 1fr; }
.gallery .side .photo { aspect-ratio: auto; height: 100%; }
.gallery button.photo { border: 0; padding: 0; cursor: zoom-in; }
@media (max-width: 700px) { .gallery { grid-template-columns: minmax(0, 1fr); } .gallery .side { display: none; } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.fact { background: var(--soft); border-radius: 10px; padding: 10px 12px; }
.fact span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fact b { font-size: 15.5px; }
.fact.feature { display: flex; align-items: center; gap: 10px; color: var(--faint); }
.fact.feature .icon { flex: none; width: 34px; height: 34px; }
.fact.feature b { color: var(--muted); font-weight: 600; line-height: 1.25; }
.fact.feature.is-on { background: var(--green-soft); color: var(--green-ink); }
.fact.feature.is-on b { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.block { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.block h2 { font-size: 19px; }
.faq { display: grid; gap: 8px; }
.faq div { background: var(--soft); border-radius: 10px; padding: 10px 14px; }
.faq b { display: block; }
.side-col { display: grid; gap: 14px; align-content: start; }
@media (min-width: 901px) and (min-height: 820px) { .side-col { position: sticky; top: 84px; } }
.enquiry { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 12px; box-shadow: var(--shadow-lift); background: #fff; }
.advertiser { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--soft); }
.advertiser h2 { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
.advertiser .adv-name, .advertiser li { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 34px; }
.advertiser .adv-name b { font-size: 17px; }
.advertiser .icon { flex: none; color: var(--blue); }
.advertiser ul { list-style: none; margin: 0 0 8px; padding: 0; }
.advertiser a, .advertiser .adv-val { overflow-wrap: anywhere; font-weight: 600; }
.enquiry .price { font-size: 30px; }
.owner-card { display: flex; gap: 12px; align-items: center; }
.owner-card img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.contact-bar { display: none; }
@media (max-width: 900px) {
  .enquiry { box-shadow: none; }
  .contact-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; align-items: center; justify-content: space-between; box-shadow: 0 -6px 18px rgba(20,33,46,.08); }
  body.has-contact-bar { padding-bottom: 76px; }
}

/* ---------- owner area & wizard ---------- */
.account { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; padding-block: 26px; }
.account-nav { display: grid; gap: 2px; background: var(--soft); border-radius: 12px; padding: 8px; position: sticky; top: 84px; }
.account-nav a { padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: 15px; color: var(--ink-2); text-decoration: none; display: flex; justify-content: space-between; align-items: center; }
.account-nav a[aria-current="page"] { background: var(--blue); color: #fff; box-shadow: none; }
.account-nav a[aria-current="page"] em { background: #fff; color: var(--blue); }
.account-nav em { font-style: normal; background: var(--blue); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 7px; }
@media (max-width: 860px) { .account { grid-template-columns: minmax(0, 1fr); } .account-nav { display: flex; overflow-x: auto; position: static; } .account-nav a { white-space: nowrap; } }
.mylist { border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 14px; overflow: hidden; align-items: stretch; background: #fff; }
.mylist .photo { aspect-ratio: auto; height: 100%; min-height: 104px; }
.mylist .body { padding: 12px 0; display: grid; gap: 5px; align-content: center; min-width: 0; }
.mylist .acts { padding: 12px 14px 12px 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: flex-end; }
.stats-line { display: flex; gap: 6px 16px; font-size: 14px; color: var(--muted); flex-wrap: wrap; align-items: center; }
.stats-line b { color: var(--ink); }
@media (max-width: 640px) { .mylist { grid-template-columns: 96px minmax(0, 1fr); } .mylist .acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 0 14px 12px; } .acts-links { justify-content: flex-start; } }
.inbox { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.msg { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.msg:last-child { border-bottom: 0; }
.msg:hover { background: var(--soft); color: inherit; }
.msg .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 8px; }
.msg .dot.read { background: transparent; }
.msg p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); }
.wizard { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; padding-block: 26px; }
.wizard-side { position: sticky; top: 84px; display: grid; gap: 10px; min-width: 0; }
.wizard-steps { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; background: var(--soft); border-radius: 12px; }
.wizard-steps li { border-radius: 8px; font-weight: 600; color: var(--muted); font-size: 15px; }
.wizard-steps .step { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; }
.wizard-steps li i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #c4ced8; display: grid; place-items: center; font-style: normal; font-size: 12.5px; flex: none; }
.wizard-steps li.done { color: var(--ink); }
.wizard-steps li.done i { background: var(--green); border-color: var(--green); color: #fff; }
.wizard-steps li[aria-current="step"] { background: var(--blue); color: #fff; }
.wizard-steps li[aria-current="step"] i { border-color: #fff; color: #fff; }
.wizard-steps a.step { color: inherit; text-decoration: none; cursor: pointer; transition: background-color .12s; }
.wizard-steps a.step:hover { background: #fff; color: var(--blue-ink); }
.wizard-steps a.step:hover i { border-color: var(--blue); }
.wizard-steps li.done a.step:hover i { border-color: var(--green); }
.wizard-steps a.step:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* The current step stays navy on hover/focus */
.wizard-steps li[aria-current="step"] a.step:hover { background: transparent; color: #fff; }
.wizard-steps li[aria-current="step"] a.step:hover i { border-color: #fff; }
.wizard-steps li[aria-current="step"] a.step:focus-visible { outline-color: var(--blue-ring); }
.wizard-steps li.locked { opacity: .6; }
.wizard-main { display: grid; gap: 18px; max-width: 760px; }
@media (max-width: 860px) { .wizard { grid-template-columns: minmax(0, 1fr); } .wizard-side { position: static; } .wizard-steps { display: flex; overflow-x: auto; } .wizard-steps li { white-space: nowrap; } }
.suggest-box { border: 1px dashed var(--blue-ring); background: #f7f8fb; border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; }
.summary { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 7px; font-size: 15px; }
.summary .line { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.summary .total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 800; font-size: 17px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-grid figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.photo-grid figcaption { padding: 6px 8px; display: flex; justify-content: flex-end; }
.photo-grid figure.is-uploading .photo { opacity: .55; }
.photo-grid figure.is-uploading figcaption { justify-content: flex-start; color: var(--muted); font-size: 13px; font-weight: 600; }
.photo-grid figure.is-uploading .photo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 3px solid rgba(255,255,255,.7); border-top-color: var(--blue); border-radius: 50%; animation: dz-spin .8s linear infinite; }
.photo-grid figure.is-new { animation: dz-in .25s ease-out; }
@keyframes dz-spin { to { transform: rotate(360deg); } }
@keyframes dz-in { from { transform: scale(.96); opacity: 0; } }

/* Drag-and-drop uploader (site.js [data-dropzone]). Without JS: a plain file input + upload button. */
.dropzone { display: grid; gap: 8px; }
.dropzone .dz-label { display: none; }
.dropzone .dz-status { margin: 0; font-size: 14px; }
.dropzone .dz-status:empty { display: none; }
.dropzone .dz-status.is-error { color: var(--red); font-weight: 600; }
.dropzone .dz-status.is-ok { color: var(--green-ink); font-weight: 600; }
.dropzone.dz-ready { position: relative; border: 2px dashed var(--line-2); border-radius: var(--radius); background: var(--soft);
  padding: 22px 18px; text-align: center; transition: border-color .15s, background-color .15s; }
.dropzone.dz-ready .dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone.dz-ready .dz-label { display: grid; justify-items: center; gap: 4px; cursor: pointer; font-weight: 400; color: var(--ink-2); }
.dropzone.dz-ready .dz-fallback { display: none; }
.dropzone .dz-icon { color: var(--blue); }
.dropzone .dz-link { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.dropzone .dz-hint { color: var(--muted); font-size: 13px; }
.dropzone.dz-ready:hover { border-color: var(--blue-ring); }
.dropzone.dz-ready:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.dropzone.is-over { border-color: var(--blue); background: var(--blue-soft); }
.dropzone.is-busy { cursor: progress; }
.dz-logo .dz-preview { display: none; }
.dz-logo.has-image .dz-preview { display: flex; justify-content: center; }
.dz-logo .dz-preview img { max-width: 240px; max-height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.dz-logo.is-busy .dz-preview img { opacity: .55; }
.dz-ready ~ .dz-nojs, .dz-nojs.dz-hide { display: none; }
.receipt { max-width: 720px; }
@media print { .site-header, .site-footer, .no-print, .account-nav, .contact-bar { display: none !important; } .account { display: block; } body { font-size: 13px; } }

/* ---------- auth ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; min-height: 520px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-block: 30px; }
.auth .pitch { background: linear-gradient(160deg, #1f2838, #2e394f); color: #fff; padding: 40px; display: grid; align-content: center; gap: 14px; }
.auth .pitch h2 { color: #fff; font-size: 28px; }
.auth .pitch p { color: #d3d9e4; margin: 0; }
.auth .pitch ul { margin: 0; padding-left: 18px; color: #d3d9e4; display: grid; gap: 6px; }
.auth .form { padding: 40px; display: grid; gap: 14px; align-content: center; }
.auth .form form { display: grid; gap: 14px; max-width: 420px; }
@media (max-width: 800px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth .pitch { display: none; } .auth .form { padding: 24px 18px; } }
/* Map credit: OpenStreetMap attribution is required by its licence, so keep it, but small and quiet */
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255, 255, 255, .6) !important; color: var(--muted) !important; padding: 0 5px !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }

/* ---------- required fields: automatic asterisk on labels of required inputs ---------- */
.field:has(> input:required, > textarea:required, > select:required, > .money input:required) > label::after,
.field.required > label::after { content: " *"; color: var(--red); font-weight: 700; }
.req-note { font-size: 13.5px; color: var(--muted); margin: 0; }
.req-note b { color: var(--red); }
.biz-reason { margin: 0; padding: 10px 14px; border-left: 3px solid currentColor; background: rgba(255,255,255,.6); border-radius: 0 8px 8px 0; color: var(--ink); }
.biz-reason .small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
input.is-locked { background: var(--soft); color: var(--ink-2); cursor: not-allowed; }

/* ---------- tabs styled as a segmented control ---------- */
.seg [role="tab"] { border: 0; background: transparent; font: 600 14.5px/1.2 var(--body); color: var(--muted); padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.seg [role="tab"][aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: none; }
.seg [role="tab"]:focus-visible { outline: 3px solid var(--blue-ring); }
.enquiry .seg { display: grid; grid-template-columns: 1fr 1fr; }

/* ---------- listing gallery (left column) ---------- */
.lgallery { display: grid; gap: 8px; margin-bottom: 18px; }
.lgallery .main { aspect-ratio: 16 / 10; border-radius: var(--radius); }
.lgallery .thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.lgallery .thumbs button { flex: none; width: 96px; aspect-ratio: 4 / 3; border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; background: var(--soft); }
.lgallery .thumbs button[aria-pressed="true"] { border-color: var(--blue); }
.lgallery .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- expandable map ---------- */
.map-expand-btn { position: absolute; top: 10px; right: 10px; z-index: 500; background: #fff; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 6px 10px; font: 600 13.5px/1.2 var(--body); color: var(--ink); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); display: inline-flex; gap: 6px; align-items: center; }
.map-expand-btn:hover { border-color: var(--muted); }
.map.map-expanded { position: fixed !important; inset: 5vh 5vw; z-index: 1001; height: auto !important; min-height: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(10, 20, 30, .45); }
body.map-open { overflow: hidden; }
body.map-open::after { content: ""; position: fixed; inset: 0; background: rgba(15, 27, 39, .55); z-index: 1000; }
@media (max-width: 700px) { .map.map-expanded { inset: 0; border-radius: 0; } }

/* ---------- "As seen on" media band (home) ---------- */
.seen-on { background: linear-gradient(180deg, #fff, #e2e7f0); border-top: 0; padding-block: 30px 26px; margin-bottom: -56px; }
.seen-on + .site-footer, .seen-on ~ .site-footer { margin-top: 0; }
.seen-on-title { font: 700 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 20px; }
.seen-on-title::before, .seen-on-title::after { content: ""; display: inline-block; width: 36px; height: 1px; background: var(--line-2); vertical-align: middle; margin: 0 12px; }
.seen-on-logos { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 48px; }
.seen-on-logos li { display: flex; align-items: center; }
.seen-on-logos img { display: block; height: auto; max-height: 32px; width: auto; filter: grayscale(1); opacity: .8; transition: opacity .2s ease; }
.seen-on-logos li:hover img { opacity: 1; }
.seen-on-more { text-align: center; margin: 20px 0 0; font-size: 14.5px; }
.seen-on-more a { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.seen-on-more a:hover { text-decoration: underline; }
.seen-on-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
.seen-on-more a { white-space: nowrap; }
.seen-on-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-ink); opacity: .45; font-size: 0; }
@media (max-width: 520px) { .seen-on-more { flex-direction: column; } .seen-on-sep { display: none; } }
@media (max-width: 640px) { .seen-on-logos { gap: 16px 28px; } .seen-on-logos img { max-height: 26px; } .seen-on-title::before, .seen-on-title::after { width: 20px; } }
@media (prefers-reduced-motion: reduce) { .seen-on-logos img { transition: none; } .photo-grid figure.is-new { animation: none; } }

/* About: "Still here" block (20+ years) */
.still-here { background: radial-gradient(1200px 400px at 85% -10%, #4a5876 0%, transparent 60%), linear-gradient(160deg, #1f2838, #1a2130); color: #fff; padding-block: 44px 38px; }
.still-here .still-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
.still-years { margin: 0; display: grid; justify-items: center; line-height: .85; padding-right: 36px; border-right: 1px solid rgba(211, 217, 228, .28); }
.still-years .n { font: 800 clamp(96px, 14vw, 168px)/.85 var(--display); letter-spacing: -.04em; color: #fff;
  background: linear-gradient(180deg, #ffffff 30%, #a3adc2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.still-years .u { font: 700 15px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: #e2e7f0; margin-top: 10px; padding-left: .32em; }
.still-kicker { margin: 0 0 6px; font: 700 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #7fd3a9; }
.still-copy h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 12px; }
.still-copy p { margin: 0; max-width: 62ch; color: #dde2eb; font-size: 17px; }
.still-stats { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.still-stats li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(211, 217, 228, .18); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.still-stats strong { font: 800 28px/1.1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.still-stats span { color: #e2e7f0; font-size: 14px; }
.still-timeline { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: none; }
.still-timeline li { position: relative; padding: 22px 14px 0 0; display: grid; gap: 4px; align-content: start; }
.still-timeline li::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(211, 217, 228, .3); }
.still-timeline li::after { content: ""; position: absolute; left: 0; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #1a2130; border: 2px solid #a3adc2; }
.still-timeline li:last-child::after { background: #7fd3a9; border-color: #7fd3a9; box-shadow: 0 0 0 5px rgba(127, 211, 169, .22); }
.still-timeline b { font: 800 17px/1.2 var(--display); color: #fff; }
.still-timeline span { font-size: 13.5px; line-height: 1.45; color: #e2e7f0; }
.still-foot { margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 13.5px; color: #a3adc2; }
.still-foot a { color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.still-foot a:hover { text-decoration: underline; color: #fff; }
@media (max-width: 900px) {
  .still-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .still-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
}
@media (max-width: 620px) {
  .still-here .still-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .still-years { justify-items: start; border-right: 0; padding-right: 0; display: flex; align-items: baseline; gap: 12px; }
  .still-years .u { margin-top: 0; }
  .still-timeline { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .still-timeline li { padding: 0 0 16px 26px; }
  .still-timeline li::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .still-timeline li:last-child::before { bottom: auto; height: 8px; }
}

/* Payment page: "Save for now – pay later" */
.pay-later { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pay-later > div { flex: 1 1 260px; }
.pay-later h2 { font-size: 17px; margin: 0; }
.pay-later p { margin: 4px 0 0; font-size: 14.5px; }

/* List a space: address as two compact lines (street / locality) */
.addr { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.addr legend { font-weight: 700; font-size: 16px; padding: 0; margin-bottom: 10px; }
.addr-line { display: grid; gap: 10px 12px; align-items: start; }
.addr-street { grid-template-columns: 6.5em 6em minmax(0, 1fr) 10.5em; }
.addr-place { grid-template-columns: minmax(0, 1fr) 6.5em 6.5em; }
.addr .field { position: relative; min-width: 0; }
.addr input, .addr select { width: 100%; }
@media (max-width: 620px) {
  .addr-street { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addr-street .f-street { grid-column: 1 / -1; }
  .addr-street .f-type { grid-column: 1 / -1; }
  .addr-place { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addr-place .f-suburb { grid-column: 1 / -1; }
}
/* Inputs with a suggestion list (<input list>): show a dropdown arrow so it's clear there's a list to choose from */
.addr input[list] { padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6b79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.addr input[list]::-webkit-calendar-picker-indicator { opacity: 0; }

/* Wizard: which draft you're working on */
.wizard-draft { margin: 0; padding: 0 4px; font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.35; }
.wizard-draft span { display: block; font: 700 11.5px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* /list chooser: drafts in progress */
.draft-list { display: grid; gap: 10px; }
.draft-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: center; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.draft-row:hover { border-color: var(--blue-ring); box-shadow: var(--shadow-lift); color: var(--ink); }
.draft-main { display: grid; gap: 2px; min-width: 0; }
.draft-go { color: var(--blue-ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 620px) { .draft-row { grid-template-columns: minmax(0, 1fr) auto; } .draft-state { grid-column: 1 / -1; grid-row: 2; } }

/* My listings: secondary actions as quiet grey links ("Clone and edit", "Delete draft") */
.acts-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 14px; }
.acts-links form { margin: 0; }
.link-quiet { background: none; border: 0; padding: 2px 0; margin: 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .12s, text-decoration-color .12s; }
.link-quiet:hover { color: var(--ink); text-decoration-color: currentColor; }
.link-quiet:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

/* Registration: password pair lines up; required tick box; Turnstile widget */
.pw-pair { align-items: start; }
.pw-pair .help { margin: -6px 0 0; }
.check .req::after { content: " *"; color: var(--red); font-weight: 700; }
.turnstile { min-height: 65px; margin: 4px 0 10px; }
.card-static:hover { border-color: var(--line); box-shadow: none; }
.pay-preview { display: grid; gap: 8px; }
.pay-preview h2 { font-size: 16px; margin: 0; }
.pay-preview .help { margin: 0; }
.pay-preview .card { max-width: 360px; }

/* ---------- help with listings ---------- */
.help-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.help-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.help-card .help-pic img { width: 120px; height: 120px; display: block; }
.help-card h2 { font-size: 19px; margin: 0; }
.help-card h2 a { color: var(--ink); text-decoration: none; }
.help-card h2 a:hover { color: var(--blue); text-decoration: underline; }
.help-card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.help-card ul a { color: var(--muted); }
.help-card ul a:hover { color: var(--ink); }
.help-card .help-more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 15px; }
.help-aud { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); }
.side-owner .help-aud, .side-owner .help-more { color: var(--green-ink); }
.help-head { display: flex; gap: 18px; align-items: center; margin-top: 8px; }
.help-head img { width: 96px; height: 96px; flex: none; }
@media (max-width: 560px) { .help-head { align-items: flex-start; } .help-head img { width: 64px; height: 64px; } }
.help-faq { display: grid; gap: 10px; align-content: start; min-width: 0; }
.help-faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; scroll-margin-top: 90px; }
.help-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary h2 { font-size: 17px; margin: 0; font-family: var(--body); font-weight: 700; letter-spacing: 0; }
.help-faq summary::after { content: "+"; flex: none; font: 700 22px/1 var(--display); color: var(--blue); }
.help-faq.side-owner summary::after { color: var(--green); }
.help-faq details[open] summary::after { content: "\2212"; }
.help-faq summary:hover h2 { color: var(--blue-ink); }
.help-faq details > .prose { padding: 0 18px 16px; max-width: 68ch; }
.help-faq details > .prose > :first-child { margin-top: 0; }
.help-faq details > .prose > :last-child { margin-bottom: 0; }
.help-others { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.help-others a { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.help-others img { width: 40px; height: 40px; flex: none; }