/* LandOuks public site. Navy and red from the brand, a soft lavender-grey ground, and Poppins for headings. */
@font-face { font-family: "Poppins"; font-weight: 800; src: url("/fonts/Poppins-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; src: url("/fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; }
:root {
  --navy: #0d1c39; --navy-2: #16294f; --red: #e71442; --red-dark: #c40f37;
  --ink: #211a2b; --muted: #6b6478; --line: #e4deed; --tint: #f5f3f8; --white: #fff; --ok: #1e7a46;
  --radius: 14px; --shadow: 0 1px 2px rgba(33,26,43,.06), 0 8px 24px rgba(33,26,43,.07);
  --head: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; max-width: 100%; font: 16px/1.55 var(--body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
button, a, input, select, textarea { touch-action: manipulation; }
a { color: var(--navy); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; color: var(--navy); text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 3.2vw + 1rem, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 1.4vw + 1rem, 1.9rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.sr, .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 10px 14px; background: var(--navy); color: #fff; z-index: 100; clip: auto; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.staging-bar { background: #fff3cd; color: #6b4e00; text-align: center; font-size: .82rem; padding: 6px 12px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid transparent; font: 600 .95rem var(--body); text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: var(--red-dark); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--navy); } .btn-ghost:hover { border-color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); } .btn-light:hover { background: var(--tint); }
.btn-block { width: 100%; }
.more { font-weight: 600; text-decoration: none; white-space: nowrap; } .more::after { content: " \2192"; }

/* ---- header ---- */
.topbar { background: var(--navy); color: #cfd6e6; font-size: .8rem; }
.topbar-in { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.topbar a { color: #cfd6e6; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; } .topbar a:hover { color: #fff; }
.topbar-r a { margin: 0 0 0 18px; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; gap: 20px; min-height: 70px; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: .95rem; color: var(--navy); text-decoration: none; }
.nav-link svg { width: .9em; height: .9em; } .nav-link:hover, .nav-link.is-active { background: var(--tint); }
.nav-drop { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: none; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: block; }
.nav-drop a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-size: .93rem; } .nav-drop a:hover { background: var(--tint); }
.burger { display: none; background: none; border: 0; padding: 8px; color: var(--navy); cursor: pointer; } .burger svg { width: 28px; height: 28px; }

/* ---- hero + search ---- */
.hero { background: radial-gradient(1200px 500px at 85% -10%, #2a3f73 0%, transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero-sub { font-size: 1.1rem; color: #d3daea; max-width: 56ch; margin-bottom: 28px; }
.hero-links { margin-top: 18px; display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; color: #b9c3dc; font-size: .9rem; }
.hero-links a { color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.4); }
.search { background: #fff; color: var(--ink); border-radius: 18px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.search-tabs { display: inline-flex; background: var(--tint); border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.search-tab { position: relative; }
.search-tab input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.search-tab span { display: block; padding: 8px 26px; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--muted); }
.search-tab input:checked + span { background: var(--navy); color: #fff; }
.search-tab input:focus-visible + span { outline: 3px solid var(--red); }
.search-row { display: grid; grid-template-columns: minmax(220px, 2.2fr) repeat(4, minmax(110px, 1fr)) auto; gap: 8px; }
.search-q { position: relative; } .search-q svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-q input { padding-left: 42px; }
.search input, .search select, .form input, .form textarea, .form select, .filters input, .filters select, .calc input { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.search input:focus, .search select:focus, .form input:focus, .form textarea:focus, .filters input:focus, .filters select:focus, .calc input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,28,57,.12); }
.search-go { padding-inline: 26px; }
.suggest { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.suggest a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--ink); } .suggest a:hover, .suggest a.is-hot { background: var(--tint); }
.suggest small { color: var(--muted); }
.stats { background: #fff; border-bottom: 1px solid var(--line); }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stats-in a { padding: 18px 8px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); } .stats-in a:last-child { border: 0; }
.stats-in strong { font: 800 1.6rem var(--head); color: var(--navy); } .stats-in span { color: var(--muted); font-size: .9rem; }

/* ---- sections ---- */
.section { padding: clamp(36px, 5vw, 64px) 0; } .section-tint { background: var(--tint); } .section-pad { padding-block: 36px 64px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; } .section-head h2 { margin: 0; }
.page-head { background: var(--tint); padding: 26px 0 22px; border-bottom: 1px solid var(--line); } .page-head h1 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.2rem); margin-bottom: .2em; }
.page-head-dark { background: var(--navy); color: #d3daea; padding: 54px 0; border: 0; } .page-head-dark h1 { color: #fff; } .page-head-dark p { max-width: 60ch; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 10px; } .crumbs a { color: var(--muted); }
.draft { background: #fff3cd; padding: 6px 10px; border-radius: 8px; display: inline-block; font-size: .85rem; }
.empty { background: var(--tint); border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }

/* ---- listing cards ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--tint); overflow: hidden; } .card-photo img { width: 100%; height: 100%; object-fit: cover; }
.noimg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; min-height: 160px; color: #a59cb8; background: linear-gradient(135deg, #f1eef7, #e8e3f2); font-size: .85rem; } .noimg svg { width: 38px; height: 38px; }
.badge { position: absolute; padding: 4px 10px; border-radius: 999px; font: 600 .72rem var(--body); letter-spacing: .02em; }
.badge-mode { top: 10px; left: 10px; background: var(--navy); color: #fff; } .badge-new { top: 10px; right: 10px; background: var(--red); color: #fff; } .badge-count { bottom: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; }
.detail-head .badge-mode { position: static; display: inline-block; margin-bottom: 8px; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-price { font: 800 1.2rem var(--head); color: var(--navy); }
.card-title { margin: 0; font-size: 1rem; } .card-title a { text-decoration: none; }
.card-place { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }
.card-facts { display: flex; gap: 16px; color: var(--ink); font-size: .9rem; margin-top: auto; padding-top: 8px; } .card-facts span { display: inline-flex; align-items: center; gap: 6px; }
.card-agent { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; font-size: .85rem; color: var(--muted); } .card-agent img { border-radius: 50%; object-fit: cover; width: 28px; height: 28px; }

/* ---- results ---- */
.results { display: grid; grid-template-columns: 290px 1fr; gap: 28px; padding-block: 28px 64px; align-items: start; }
.filters form { background: var(--tint); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; position: sticky; top: calc(var(--header-h, 71px) + var(--crumb-h, 0px) + 12px); }
.filters h2 { font-size: 1.05rem; margin: 0; } .filters label { display: grid; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.filters .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .filters .check { display: flex; gap: 8px; align-items: center; font-size: .92rem; color: var(--ink); } .filters .check input { width: auto; }
.reset { text-align: center; font-size: .9rem; }
.list { display: grid; gap: 18px; }
.list .card { flex-direction: row; } .list .card-photo { width: 320px; aspect-ratio: auto; min-height: 210px; flex: none; }
.list .card-body { padding: 16px 20px; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.pager a { min-width: 40px; text-align: center; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 600; } .pager a.is-current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- detail ---- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; padding-block: 28px 56px; align-items: start; }
.gallery-main { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--tint); } .gallery-main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs button { border: 2px solid transparent; border-radius: 10px; padding: 0; width: 96px; height: 68px; flex: none; overflow: hidden; background: var(--tint); cursor: pointer; } .gallery-thumbs button[aria-current="true"] { border-color: var(--red); } .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin: 22px 0 14px; } .detail-head h1 { font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem); margin-bottom: .25em; }
.detail-price { font: 800 clamp(1.4rem, 1.5vw + 1rem, 2rem) var(--head); color: var(--red); white-space: nowrap; }
.keyfacts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.keyfacts li { background: var(--tint); border-radius: 12px; padding: 12px 14px; display: grid; } .keyfacts span { font-size: .78rem; color: var(--muted); } .keyfacts strong { font-size: 1.05rem; color: var(--navy); }
.prose { white-space: normal; max-width: 70ch; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 8px; } .features ul, .ticks { list-style: none; padding: 0; margin: 0; } .features li, .ticks li { display: flex; gap: 8px; padding: 4px 0; align-items: start; } .features svg, .ticks svg { color: var(--ok); margin-top: .25em; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; margin: 0 0 22px; } .facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .facts dt { color: var(--muted); } .facts dd { margin: 0; font-weight: 600; text-align: right; }
.detail-side { position: sticky; top: calc(var(--header-h, 71px) + var(--crumb-h, 0px) + 16px); }
.enquire { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; box-shadow: var(--shadow); } .enquire h2 { font-size: 1.15rem; }
.enquire-agent { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .enquire-agent img { border-radius: 50%; object-fit: cover; width: 56px; height: 56px; } .enquire-agent span { display: block; color: var(--muted); font-size: .85rem; }
.enquire-contact { display: grid; gap: 8px; margin-bottom: 14px; } .or { text-align: center; color: var(--muted); font-size: .85rem; margin: 10px 0 6px; }

/* ---- forms, calculators ---- */
.form { display: grid; gap: 12px; } .form label, .calc label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.form-status { margin: 0; font-weight: 600; } .form-status.ok { color: var(--ok); } .form-status.err { color: var(--red-dark); }
.calcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.card-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; } .calc { display: grid; gap: 12px; } .calc h2 { margin: 0; font-size: 1.2rem; }
.calc-inline { grid-template-columns: repeat(3, 1fr); } .calc-inline .calc-out, .calc-inline p { grid-column: 1 / -1; }
.calc-out { background: var(--tint); border-radius: 12px; padding: 12px 16px; display: grid; gap: 2px; } .calc-out span { color: var(--muted); font-size: .85rem; } .calc-out strong { font: 800 1.35rem var(--head); color: var(--navy); } .calc-total { background: var(--navy); } .calc-total span, .calc-total strong { color: #fff; }

/* ---- misc sections ---- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.service { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; color: var(--ink); transition: box-shadow .2s, transform .2s; } .service:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.service svg { width: 34px; height: 34px; color: var(--red); margin-bottom: 10px; } .service p { color: var(--muted); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; background: #fff; } .chip:hover { border-color: var(--navy); } .chip span { background: var(--tint); border-radius: 999px; padding: 1px 9px; font-size: .8rem; color: var(--muted); } .chip small { color: var(--muted); font-weight: 400; }
.chips-lg .chip { padding: 16px 20px; border-radius: var(--radius); }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.agent { text-align: center; } .agent-photo { display: block; width: 150px; height: 150px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; background: var(--tint); } .agent-photo img { width: 100%; height: 100%; object-fit: cover; }
.agent h3 { margin-bottom: .1em; } .agent h3 a { text-decoration: none; } .agent-links a { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.agent-profile { display: grid; grid-template-columns: 280px 1fr; gap: 36px; padding-block: 28px 64px; align-items: start; } .agent-side { text-align: center; position: sticky; top: calc(var(--header-h, 71px) + var(--crumb-h, 0px) + 16px); } .agent-side img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; }
.tools { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; } .tool-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .tool-list a { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; font-weight: 600; } .tool-list svg { color: var(--red); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .news { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .news time { color: var(--muted); font-size: .82rem; } .news h3 a { text-decoration: none; } .article h1 { margin-top: .3em; } .article p { font-size: 1.05rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; counter-reset: s; } .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .step span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; margin-bottom: 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cta { background: var(--navy); color: #fff; padding: 40px 0; } .cta-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .cta h2 { color: #fff; margin: 0 0 4px; } .cta p { margin: 0; color: #cfd6e6; }

/* ---- footer ---- */
.footer { background: #0a1530; color: #b9c3dc; margin-top: 0; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; padding-block: 48px 32px; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: .8em; } .footer a { display: block; color: #b9c3dc; text-decoration: none; padding: 3px 0; } .footer a:hover { color: #fff; } .footer p a { display: inline; }
.footer-logo { filter: brightness(0) invert(1); margin-bottom: 12px; }
.footer-base { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; font-size: .82rem; }

/* ---- lightbox ---- */
.lightbox { position: fixed; inset: 0; background: rgba(8,12,24,.92); z-index: 200; display: grid; place-items: center; padding: 20px; } .lightbox img { max-width: min(1200px, 94vw); max-height: 88vh; border-radius: 10px; } .lightbox button { position: absolute; top: 14px; right: 14px; background: #fff; border: 0; border-radius: 999px; width: 42px; height: 42px; font-size: 1.4rem; cursor: pointer; }

/* ---- responsive ---- */
@media (max-width: 1020px) {
  .search-row { grid-template-columns: 1fr 1fr; } .search-q, .search-go { grid-column: 1 / -1; }
  .results { grid-template-columns: minmax(0, 1fr); } .filters form { position: static; }
  .detail { grid-template-columns: minmax(0, 1fr); } .detail-side { position: static; }
  .agent-profile { grid-template-columns: minmax(0, 1fr); } .agent-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; } .tools, .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1040px) {
  .burger { display: block; margin-left: auto; } .header-cta { display: none; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; display: none; max-height: 80vh; overflow: auto; }
  .nav.is-open { display: flex; } .nav-link { padding: 12px 8px; } .nav-item .nav-drop { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 6px 12px; } .nav-item .nav-link svg { display: none; }
  .topbar-r { display: none; }
}
@media (max-width: 640px) {
  .list .card { flex-direction: column; } .list .card-photo { width: 100%; aspect-ratio: 4/3; }
  .stats-in { grid-template-columns: repeat(2, 1fr); } .stats-in a:nth-child(2) { border-right: 0; }
  .search-row { grid-template-columns: 1fr; } .calc-inline { grid-template-columns: 1fr; }
  .detail-head { flex-direction: column; } .footer-grid { grid-template-columns: 1fr; } .topbar-l a:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- tickets, reveal, news art, mobile bar ---- */
.btn-sm { padding: 9px 16px; font-size: .88rem; }
.agent-title { font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.agent .small { margin: 0 0 4px; }
.agent .reveal { margin: 10px 0 8px; } .agent .btn { margin-top: 2px; }
.reveal-out { margin-top: 10px; display: grid; gap: 8px; text-align: left; }
.reveal-out a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; text-decoration: none; font-weight: 600; word-break: break-all; background: #fff; }
.reveal-out a:hover { border-color: var(--navy); } .reveal-out svg { color: var(--red); }
.agent .reveal-out { text-align: left; }
.notice { background: #e8f4ec; border: 1px solid #b7e0c7; color: #14532d; border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; }
.thread { display: grid; gap: 12px; margin-bottom: 26px; }
.msg { border-radius: 14px; padding: 12px 16px; max-width: 92%; } .msg-you { background: var(--tint); } .msg-agent { background: var(--navy); color: #fff; justify-self: end; } .msg-agent .msg-meta { color: #b9c3dc; }
.msg-meta { font-size: .78rem; color: var(--muted); margin-bottom: 4px; font-weight: 600; } .msg-body { white-space: normal; overflow-wrap: anywhere; }
.news-cover { display: block; margin: -20px -20px 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--tint); } .news-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-cover { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); margin-bottom: 20px; }
.ticket-box { margin-top: 28px; }
.enquire-agent span.small { display: block; color: var(--muted); font-size: .8rem; }
.mobile-cta { display: none; }
.two-col > * { min-width: 0; }
.filters-toggle { display: none; }
.locator-hint { display: none; padding: 8px 14px; font-size: .85rem; color: var(--muted); background: var(--tint); border-top: 1px solid var(--line); }

@media (max-width: 1020px) {
  .mobile-cta { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(33,26,43,.08); }
  .mobile-cta .btn { flex: 1; }
  body:has(.mobile-cta) { padding-bottom: 76px; }
  .filters-toggle { display: inline-flex; width: 100%; margin-bottom: 12px; }
  .filters.is-collapsible form { display: none; } .filters.is-collapsible.is-open form { display: grid; }
  .locator-hint { display: block; }
}
@media (max-width: 640px) {
  :root { --radius: 12px; }
  .wrap { width: calc(100% - 28px); }
  .hero { padding: 28px 0 36px; } .hero-sub { font-size: 1rem; margin-bottom: 20px; }
  .search { padding: 12px; border-radius: 16px; } .search-tab span { padding: 9px 22px; }
  .search input, .search select, .form input, .form textarea, .form select, .filters input, .filters select, .calc input { font-size: 16px; padding: 13px 14px; }
  .btn { padding: 13px 20px; min-height: 46px; }
  .section { padding: 28px 0; } .section-head { flex-direction: column; align-items: start; gap: 6px; }
  .grid { grid-template-columns: 1fr; gap: 16px; } .agents { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .agent-photo { width: 110px; height: 110px; } .agent .btn { width: 100%; }
  .detail { gap: 22px; padding-block: 18px 32px; } .keyfacts { grid-template-columns: repeat(2, 1fr); }
  .gallery-thumbs button { width: 76px; height: 54px; }
  .card-facts { gap: 12px; flex-wrap: wrap; }
  .calc-inline { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; }
  .msg { max-width: 100%; }
  .page-head { padding: 18px 0 16px; }
  h1 { font-size: 1.7rem; }
  .cta-in .btn { width: 100%; }
}

/* ---- agent cards and profile, office opportunities ---- */
.agent-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .2s; }
.agent-card:hover { box-shadow: var(--shadow); }
.agent-card .agent-photo { width: 132px; height: 132px; margin: 0 auto 12px; }
.agent-card h3 { margin: 0 0 2px; } .agent-reg { margin: 0 0 4px; font-size: .82rem; color: var(--ok); font-weight: 600; }
.agent-actions { width: 100%; margin-top: auto; padding-top: 12px; display: grid; gap: 8px; }
.agent-card .reveal-out { text-align: left; }
.btn-block { width: 100%; }
.profile-hero { background: #fff; border-bottom: 1px solid var(--line); }
.profile-band { height: 150px; background: radial-gradient(900px 260px at 80% -40%, #2a3f73 0%, transparent 60%), linear-gradient(180deg, var(--navy), var(--navy-2)); }
.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: end; padding-bottom: 20px; margin-top: -64px; }
.profile-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; background: var(--tint); box-shadow: var(--shadow); }
.profile-id { padding-top: 70px; } .profile-id h1 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.2rem); margin-bottom: .1em; } .profile-id .crumbs { margin-bottom: 4px; }
.profile-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: end; }
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; padding-block: 28px 64px; align-items: start; background: transparent; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; } .panel h2 { font-size: 1.15rem; }
.profile-side .panel { position: static; } .profile-side { position: sticky; top: calc(var(--header-h, 71px) + var(--crumb-h, 0px) + 16px); }
.featured .card { flex-direction: row; } .featured .card-photo { width: 52%; aspect-ratio: auto; min-height: 280px; } .featured .card-body { padding: 22px; }
.profile-tools { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .tab { background: none; border: 0; padding: 10px 16px; font: 600 .95rem var(--body); color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; } .tab.is-active { color: var(--navy); border-color: var(--red); }
.map { height: 420px; border-radius: var(--radius); overflow: hidden; background: var(--tint); } .map.map-empty { display: grid; place-items: center; height: 160px; }
.statline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; } .statline div { background: var(--tint); border-radius: 12px; padding: 16px 8px; display: grid; } .statline strong { font: 800 1.8rem var(--head); color: var(--navy); } .statline span { color: var(--muted); font-size: .85rem; }
.section-head select { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.area-tools { display: grid; grid-template-columns: 1fr 220px auto; gap: 10px; align-items: center; margin: 16px 0 8px; } .area-tools input, .area-tools select { font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; width: 100%; }
.area-tools .check, .form .check { display: flex; gap: 10px; align-items: start; font-weight: 400; color: var(--ink); font-size: .92rem; } .area-tools .check input, .form .check input { width: auto; margin-top: .3em; }
.area-group { margin-top: 26px; } .area-group h3 { border-bottom: 2px solid var(--navy); padding-bottom: 6px; }
.area-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.area-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .area-row[hidden], .area-group[hidden] { display: none; } .area-row strong { margin-right: 8px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; } .pill-ok { background: #e7f3ec; color: #1e7a46; } .pill-wait { background: #faf3e4; color: #8a5a00; } .pill-off { background: #efefef; color: #6b6478; }
.steps-list { padding-left: 20px; display: grid; gap: 10px; } .ticks { list-style: none; padding: 0; margin: 0; } .ticks li { display: flex; gap: 10px; padding: 6px 0; align-items: start; } .ticks svg { color: var(--ok); margin-top: .3em; }
.section-tint { background: var(--tint); }

@media (max-width: 1020px) {
  .profile-head { grid-template-columns: auto 1fr; } .profile-cta { grid-column: 1 / -1; justify-content: start; }
  .profile-body { grid-template-columns: 1fr; } .profile-side { position: static; }
  .featured .card { flex-direction: column; } .featured .card-photo { width: 100%; }
}
@media (max-width: 640px) {
  .profile-band { height: 110px; } .profile-head { grid-template-columns: 1fr; margin-top: -56px; justify-items: center; text-align: center; }
  .profile-photo { width: 120px; height: 120px; } .profile-id { padding-top: 0; } .profile-cta { justify-content: center; width: 100%; } .profile-cta .btn { flex: 1; }
  .area-tools { grid-template-columns: 1fr; } .area-list { grid-template-columns: 1fr; } .map { height: 320px; } .panel { padding: 18px; }
  .agents { grid-template-columns: 1fr; }
}

/* ---- office locator: a full map with a list beside it ---- */
.locator-head { padding: 16px 0 14px; } .locator-title h1 { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); margin-bottom: .1em; }
.locator { display: grid; grid-template-columns: minmax(0, 1fr) 430px; height: calc(100vh - 190px); min-height: 560px; border-bottom: 1px solid var(--line); }
.locator-mapwrap { position: relative; z-index: 0; min-height: 0; display: flex; flex-direction: column; } .locator-mapwrap .locator-map { flex: 1; min-height: 340px; }
.locator-map { background: #e9e4f1; position: relative; z-index: 0; } .locator-map.map-empty { display: grid; place-items: center; color: var(--muted); }
.locator-panel { overflow-y: auto; padding: 22px 24px 40px; background: #fff; border-left: 1px solid var(--line); }
.locator-panel h2 { font-size: 1.5rem; }
.loc-input { width: 100%; font: inherit; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.loc-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,28,57,.12); }
.loc-filters { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin: 10px 0 6px; } .loc-filters .check { display: flex; gap: 8px; align-items: center; font-size: .9rem; white-space: nowrap; } .loc-filters .check input { width: auto; }
.loc-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; } .loc-cards li[hidden] { display: none; }
.loc-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(33,26,43,.05); transition: box-shadow .15s, border-color .15s; }
.loc-card:hover, .loc-card.is-selected { box-shadow: var(--shadow); border-color: var(--navy); }
.loc-card strong { display: block; font-size: 1.05rem; color: var(--navy); } .loc-card small { color: var(--muted); }
.loc-back { background: none; border: 0; padding: 0; margin-bottom: 14px; font: 600 .95rem var(--body); color: var(--navy); cursor: pointer; } .loc-back:hover { text-decoration: underline; }
.loc-detail h2 { margin-bottom: 4px; } .loc-detail h3 { margin: 22px 0 8px; font-size: 1rem; }
.loc-detail ul, .loc-detail ol { padding-left: 20px; margin: 0; display: grid; gap: 8px; } .loc-detail ul.ticks { padding-left: 0; }
.loc-claim { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.loc-claim h3 { margin-top: 0; }
.loc-claim .form { gap: 10px; } .loc-claim input, .loc-claim textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.loc-claim .check { display: flex; gap: 10px; align-items: start; font-weight: 400; color: var(--ink); } .loc-claim .check input { width: auto; margin-top: .3em; }
.loc-dot { background: #e71442; } 
@media (max-width: 1020px) {
  .locator { grid-template-columns: 1fr; height: auto; }
  .locator-map { height: 340px; } .locator-panel { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
}

/* map markers: just the LandOuks mark, coloured by status (red available, amber being finalised, grey claimed) */
.mk-wrap { background: none; border: 0; }
.mk-img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 1px 2px rgba(13,28,57,.45)); transition: transform .15s; }
.mk-wrap:hover .mk-img, .mk-wrap.is-selected .mk-img { transform: scale(1.3); }
.mk-wrap.is-selected { z-index: 1000 !important; }
.mk-cluster { position: relative; width: 100%; height: 100%; }
.mk-cluster-n { position: absolute; right: -6px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #0d1c39; color: #fff; font: 700 .72rem/20px var(--body); text-align: center; border: 2px solid #fff; }
.loc-apps { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: #0d1c39; background: #e8ecf7; border-radius: 999px; padding: 2px 10px; }
.loc-interest { padding: 10px 14px; border-radius: 12px; background: var(--tint); color: var(--muted); } .loc-interest.has { background: #e8ecf7; color: #0d1c39; }
.loc-opp { margin: 14px 0; padding: 16px 18px; border-radius: var(--radius); background: var(--navy); color: #fff; }
.loc-opp strong { display: block; font: 800 1.05rem var(--head); margin-bottom: 6px; } .loc-opp p { margin: 0 0 8px; color: #d3daea; } .loc-opp .loc-fun { color: #fff; }
.loc-opp small { color: #9fb0d4; font-size: .78rem; }
.loc-insight { border-left: 3px solid var(--red); padding: 4px 0 4px 12px; margin: 12px 0; }

/* ---- an applicant's page ---- */
.notice-err { background: #fbefec; border-color: #f0c4b8; color: #8a2a1a; }
.req { margin-bottom: 16px; } .req h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.req-items { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.req-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.req-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .req-form input[type="file"] { flex: 1; min-width: 200px; font: inherit; padding: 8px; border: 1.5px dashed var(--line); border-radius: 12px; background: #fff; }

/* office list: one drop-down per province, ten areas a page, and the areas nearest to the visitor */
.loc-locate { margin-top: 12px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.loc-locate svg { width: 18px; height: 18px; }
.loc-groups { display: grid; gap: 10px; margin-top: 12px; }
.loc-group { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.loc-group[hidden] { display: none; }
.loc-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 600; color: var(--navy); min-height: 52px; }
.loc-group > summary::-webkit-details-marker { display: none; }
.loc-group > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); margin-left: 6px; transition: transform .15s; flex: none; }
.loc-group[open] > summary::after { transform: rotate(-135deg); }
.loc-group > summary small { margin-left: auto; font-weight: 400; color: var(--muted); }
.loc-group .loc-cards { padding: 0 12px 12px; margin-top: 0; }
.loc-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px 12px; font-size: .9rem; color: var(--muted); }
.loc-pager[hidden] { display: none; }
.loc-pager .btn[disabled] { opacity: .45; cursor: default; }
.loc-near { margin-top: 14px; padding: 12px; border: 1px solid var(--navy); border-radius: var(--radius); background: #f8f6fb; }
.loc-near[hidden] { display: none; }
.loc-near h3 { margin: 0 0 8px; font-size: 1.05rem; }
.loc-near .loc-pager { padding: 10px 0 0; }

/* the cost of renting, and of buying and owning, on a listing */
.costs h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.cost-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cost-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.cost-table th, .cost-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.cost-table td { text-align: right; white-space: nowrap; font-weight: 600; color: var(--navy); }
.cost-table th small { display: block; color: var(--muted); font-size: .82rem; }
.cost-table tr.total th, .cost-table tr.total td { font-weight: 700; border-top: 2px solid var(--navy); border-bottom: 0; color: var(--navy); }
.cost-table tr[hidden] { display: none; }
.cost-verdict { margin: 4px 0 8px; font-weight: 600; color: var(--navy); }

/* list with us */
.list-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; }
.list-choice { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(33,26,43,.05); transition: box-shadow .15s, transform .15s; }
.list-choice:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.list-choice h2 { margin: 0; font-size: 1.5rem; }
.list-choice p { margin: 0 0 8px; color: var(--muted); flex: 1; }
.list-choice-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fdeaf0; color: #e71442; }
.list-choice-rent .list-choice-ico { background: #e8edf7; color: #0d1c39; }
.list-choice-ico svg { width: 26px; height: 26px; }
.list-choice .btn { align-self: flex-start; }
.list-more { max-width: 880px; margin-top: 22px; color: var(--muted); }
@media (max-width: 700px) { .list-choices { grid-template-columns: 1fr; } }

/* "Do you want to know what it costs...": a closed panel that opens to the figures and graphics */
.acc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin: 18px 0; box-shadow: 0 1px 2px rgba(33,26,43,.05); }
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #0d1c39, #26407a); color: #fff; display: grid; place-items: center; }
.acc-ico svg { width: 24px; height: 24px; }
.acc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acc-title { font-weight: 700; font-size: 1.08rem; color: var(--navy); }
.acc-sub { color: var(--muted); font-size: .9rem; }
.acc-chev { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform .18s; margin-right: 6px; }
.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc[open] .acc-chev { transform: rotate(-135deg); }
.costs-form { padding: 18px; display: block; }
.cost-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #faf8fc; display: flex; flex-direction: column; gap: 4px; }
.tile span { color: var(--muted); font-size: .85rem; }
.tile strong { font-size: 1.35rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.tile small { color: var(--muted); }
.tile-accent { background: linear-gradient(135deg, #0d1c39, #26407a); border-color: transparent; }
.tile-accent span, .tile-accent strong { color: #fff; }
.stackbar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: #e9e4f1; margin: 8px 0 10px; }
.stackbar span { display: block; height: 100%; min-width: 3px; transition: width .25s; }
.legend { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); font-size: .9rem; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--navy); }
.donut-row { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; margin: 8px 0 6px; }
.donut { width: 170px; height: 170px; border-radius: 50%; background: #e9e4f1; display: grid; place-items: center; position: relative; }
.donut::before { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: #fff; }
.donut span { position: relative; font-weight: 700; color: var(--navy); font-size: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; }
.meter { position: relative; height: 14px; background: #e9e4f1; border-radius: 999px; margin: 10px 0 6px; overflow: visible; }
.meter[hidden] { display: none; }
.meter-fill { height: 100%; border-radius: 999px; background: #1e7a46; transition: width .25s; }
.meter-fill.over { background: #b3261e; }
.meter-mark { position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 2px dashed var(--navy); font-size: .72rem; color: var(--muted); padding-left: 4px; top: 16px; line-height: 1; }
.costs-form .check { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.costs-form .check input { width: auto; }
@media (max-width: 700px) { .cost-tiles { grid-template-columns: 1fr; } .donut-row { grid-template-columns: 1fr; justify-items: center; } .acc-sub { display: none; } }

/* the panels beside a listing */
.act { margin: 10px 0; }
.act > summary { list-style: none; cursor: pointer; text-align: center; }
.act > summary::-webkit-details-marker { display: none; }
.act-body { padding-top: 12px; }
.act[open] > summary { opacity: .92; }
.act-quiet > summary.act-link { color: var(--navy); text-decoration: underline; font-size: .92rem; padding: 6px 0; }
.apply-note { margin: 8px 0 4px; font-size: .9rem; color: var(--muted); text-align: center; }
.notice { margin: 16px 0; padding: 14px 16px; border-radius: var(--radius); background: #e7f3ec; color: #14532d; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* agent map pins are plain HTML (an SVG circle was squeezed by the page-wide svg size rule) */
.pin-wrap { background: none; border: 0; }
.pin { display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(13,28,57,.45); }
.pin-sale { background: #e71442; } .pin-rent { background: #0d1c39; }
.leaflet-container svg, .leaflet-pane svg { width: auto; height: auto; max-width: none; }

/* pointing at an area in the list makes its mark jump out on the map */
.mk-wrap.is-hover { z-index: 1100 !important; }
.mk-wrap.is-hover .mk-img { transform: scale(1.9); }
.mk-wrap.is-hover::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #e71442; opacity: .85; animation: mkpulse 1s ease-out infinite; pointer-events: none; }
@keyframes mkpulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-wrap.is-hover::after { animation: none; } }

/* listings ten to a page */
.carousel { position: relative; }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; }
.car-track::-webkit-scrollbar { display: none; }
.car-page { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.car-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.car-ctrl [data-car-dots] { display: inline-flex; gap: 8px; }
.car-ctrl i { width: 9px; height: 9px; border-radius: 50%; background: #d9d2e6; display: block; }
.car-ctrl i.on { background: var(--navy); }
.car-ctrl .btn[disabled] { opacity: .45; cursor: default; }
.car-count { color: var(--muted); font-size: .9rem; }

/* the search box: the icon sits in the padding, not over the text */
.search .search-q input { padding-left: 44px; }

/* agent cards on the home page and the agents page are one link to the profile, which has the contact options */
.agent-card { position: relative; cursor: pointer; }
.agent-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.agent-card:hover { transform: translateY(-2px); }
.agent-card .agent-photo { position: relative; z-index: 1; pointer-events: none; }
.agent-card { padding-bottom: 22px; }

/* the office call to action on the home page */
.office-cta { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 32px; border-radius: 22px; color: #fff; text-decoration: none; overflow: hidden;
  background: linear-gradient(135deg, #0d1c39 0%, #26407a 100%); box-shadow: 0 10px 30px rgba(13,28,57,.22); transition: transform .18s, box-shadow .18s; }
.office-cta::before, .office-cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(231,20,66,.9); }
.office-cta::before { width: 150px; height: 150px; right: -50px; top: -50px; opacity: .85; }
.office-cta::after { width: 90px; height: 90px; right: 40px; bottom: -40px; background: rgba(255,255,255,.1); }
.office-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(13,28,57,.3); }
.office-cta > * { position: relative; z-index: 1; }
.office-cta-n { font-family: var(--font-display, inherit); font-size: 3.4rem; font-weight: 800; line-height: 1; }
.office-cta-l { font-size: 1.02rem; opacity: .92; max-width: 22ch; }
.office-cta-go { margin-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #e71442; color: #fff; font-weight: 700; padding: 12px 18px; border-radius: 999px; }
.office-cta-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.office-cta:hover .office-cta-go { background: #c80f38; }

/* the search conversation */
.assistant { max-width: 100%; }
.search-ai .search-row-ai { grid-template-columns: 1fr auto; }
.search-ai .search-tab span { padding: 8px 20px; }
.ai-spark { color: #ffd0dc; font-size: 1.05em; margin-right: 6px; }
.search-go .ai-spark { margin-right: 4px; }
.assist-panel { margin-top: 12px; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; }
.assist-panel[hidden] { display: none; }
.assist-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: linear-gradient(135deg, #0d1c39, #26407a); color: #fff; font-weight: 700; }
.assist-head .ai-spark { color: #ff7a9c; }
.assist-x { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.assist-log { padding: 16px; max-height: 420px; overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.assist-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; }
.assist-bot { background: #f1eef6; justify-self: start; border-bottom-left-radius: 4px; }
.assist-you { background: var(--navy); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.assist-think { opacity: .6; font-style: italic; }
.assist-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.assist-chip { border: 1.5px solid var(--navy); background: #fff; color: var(--navy); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.assist-chip:hover { background: var(--navy); color: #fff; }
.assist-results { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.assist-card { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); background: #fff; transition: box-shadow .15s, border-color .15s; }
.assist-card:hover { box-shadow: var(--shadow); border-color: var(--navy); }
.assist-thumb { flex: none; width: 74px; height: 62px; border-radius: 10px; background: var(--tint); overflow: hidden; display: block; }
.assist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.assist-round { width: 62px; border-radius: 50%; }
.assist-card-body { display: flex; flex-direction: column; min-width: 0; }
.assist-card-body strong { color: var(--navy); }
.assist-card-body small { color: var(--muted); }
@media (max-width: 700px) { .search-ai .search-tab span { padding: 8px 12px; font-size: .92rem; } .search-ai .search-row-ai { grid-template-columns: 1fr; } .assist-msg { max-width: 94%; } }

/* the assistant in the corner */
.ask { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ask-launch { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff; padding: 13px 20px; border-radius: 999px; background: linear-gradient(135deg, #0d1c39, #26407a); box-shadow: 0 10px 28px rgba(13,28,57,.35); transition: transform .15s, box-shadow .15s; }
.ask-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(13,28,57,.42); }
.ask-launch .ai-spark { color: #ff7a9c; margin: 0; }
.ask.is-open .ask-launch { display: none; }
.ask-panel { width: min(390px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 36px)); display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 20px 60px rgba(13,28,57,.38); overflow: hidden; }
.ask-panel[hidden] { display: none; }
.ask-panel .assist-log { flex: 1; min-height: 220px; max-height: none; overflow-y: auto; }
.ask-panel .assist-results { grid-template-columns: 1fr; }
.ask-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ask-form input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; }
.ask-form input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,28,57,.12); }
.mobile-cta ~ .ask, body:has(.mobile-cta) .ask { bottom: 78px; }
.search-finder .search-row { grid-template-columns: 1fr auto; }
.agent-find { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; max-width: 640px; }
.agent-find input { flex: 1; min-width: 200px; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; }
@media (max-width: 700px) { .ask { right: 12px; bottom: 12px; } .ask-launch span:last-child { display: none; } .ask-launch { padding: 14px 16px; } }

/* ---- the search bar: one calm card, captioned fields, a clear button ---------------------------------------------- */
.search { border-radius: 24px; padding: 16px 16px 18px; box-shadow: 0 24px 60px rgba(7,14,32,.35); }
.search-tabs { display: flex; gap: 8px; background: none; padding: 0; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.search-tabs::-webkit-scrollbar { display: none; }
.search-tab { flex: none; }
.search-tab span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: #f1eef6; color: var(--navy); font-weight: 600; transition: background .15s, color .15s, transform .15s; white-space: nowrap; }
.search-tab span svg { width: 18px; height: 18px; flex: none; }
.search-tab:hover span { background: #e6e1f0; }
.search-tab input:checked + span { background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(13,28,57,.3); }
.search-tab input:checked + span svg { color: #ff7a9c; }
.search-bar { display: grid; grid-template-columns: minmax(240px, 2.4fr) repeat(4, minmax(120px, 1fr)) auto; align-items: stretch; border: 1.5px solid var(--line); border-radius: 18px; padding: 6px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.search-bar:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(13,28,57,.1); }
.sf { position: relative; padding: 8px 16px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; transition: background .15s; }
.sf[hidden] { display: none; }
.sf + .sf:not([hidden])::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; border-left: 1px solid var(--line); }
.sf:hover { background: #faf8fc; }
.sf:focus-within { background: #f3f5fb; }
.sf-cap { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 2px; cursor: pointer; }
.search .sf input, .search .sf select { border: 0; background: transparent; box-shadow: none; padding: 2px 0; border-radius: 0; font-size: 1rem; font-weight: 600; color: var(--navy); width: 100%; }
.search .sf input::placeholder { color: #8d86a0; font-weight: 500; }
.search .sf select { cursor: pointer; text-overflow: ellipsis; }
.search .sf input:focus, .search .sf select:focus { outline: none; box-shadow: none; }
.sf-in { position: relative; display: flex; align-items: center; gap: 9px; }
.sf-in > svg { position: static; transform: none; flex: none; width: 18px; height: 18px; color: var(--red); }
.search .sf .sf-in input { padding-left: 0; }
.sf .suggest { top: calc(100% + 16px); left: -16px; right: -16px; border-radius: 14px; }
.search-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.02rem; color: #fff; background: linear-gradient(135deg, #e71442, #c80f38); padding: 0 28px; margin-left: 6px; border-radius: 14px; min-height: 58px; box-shadow: 0 8px 20px rgba(231,20,66,.35); transition: transform .15s, box-shadow .15s; }
.search-go:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(231,20,66,.45); }
.search-go svg { width: 19px; height: 19px; }
.search-finder .search-bar { grid-template-columns: 1fr auto; }
.hero-links a { border-bottom: 0; background: rgba(255,255,255,.12); padding: 5px 12px; border-radius: 999px; transition: background .15s; }
.hero-links a:hover { background: rgba(255,255,255,.24); }
@media (max-width: 1020px) {
  .search-bar { grid-template-columns: 1fr 1fr; padding: 6px; }
  .search-bar .search-q { grid-column: 1 / -1; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
  .sf + .sf:not([hidden])::before { display: none; }
  .search-go { grid-column: 1 / -1; margin: 8px 0 0; }
  .search-finder .search-bar { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .search { padding: 12px; border-radius: 20px; }
  .search-tab span { padding: 9px 14px; }
  .search .sf input, .search .sf select { font-size: 16px; }
}

/* suggestions */
.suggest { max-height: 340px; overflow-y: auto; }
.suggest a { align-items: center; padding: 11px 16px; }
.suggest a.is-hot, .suggest a:hover { background: #f3f5fb; }
.suggest mark { background: none; color: var(--red); font-weight: 800; }
.suggest-name { font-weight: 600; color: var(--navy); }
.suggest small { white-space: nowrap; }
.suggest-head { padding: 10px 16px 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.suggest-none { padding: 14px 16px; color: var(--muted); font-size: .95rem; }

/* the home page hero sits on a photograph of a kitchen, under a light navy wash: just enough that the words read well */
.hero {
  background:
    linear-gradient(90deg, rgba(13,28,57,.74) 0%, rgba(13,28,57,.52) 40%, rgba(13,28,57,.16) 75%, rgba(13,28,57,.06) 100%),
    linear-gradient(180deg, rgba(13,28,57,.10) 0%, rgba(13,28,57,0) 40%, rgba(13,28,57,.22) 100%),
    url("/img/hero-kitchen.jpg") center 58% / cover no-repeat,
    var(--navy);
}
.hero h1 { text-shadow: 0 2px 22px rgba(10,20,44,.55); }
.hero-sub { color: #fff; text-shadow: 0 1px 12px rgba(10,20,44,.55); }
.hero-links { color: #fff; }
.hero-links > span { text-shadow: 0 1px 8px rgba(10,20,44,.55); }
.hero-links a { background: rgba(13,28,57,.45); backdrop-filter: blur(4px); }
.hero-links a:hover { background: rgba(13,28,57,.65); }
@media (max-width: 760px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(13,28,57,.72) 0%, rgba(13,28,57,.5) 55%, rgba(13,28,57,.45) 100%),
      url("/img/hero-kitchen-sm.jpg") center / cover no-repeat,
      var(--navy);
  }
}
.assist-links { display: flex; flex-wrap: wrap; gap: 8px; }
.assist-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 600; font-size: .93rem; transition: transform .15s, box-shadow .15s; }
.assist-link::after { content: "\2192"; }
.assist-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,28,57,.3); }

/* the bar under the header: a way back, and where you are */
.crumbbar { background: #fff; border-bottom: 1px solid var(--line); }
.crumbbar-in { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; min-width: 0; }
.crumb-back { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--red); font-weight: 700; font-size: 1.02rem; text-decoration: none; }
.crumb-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crumb-back:hover { text-decoration: underline; }
.crumb-divider { flex: none; width: 1px; align-self: stretch; background: var(--line); }
.crumbbar .crumbs { margin: 0; min-width: 0; font-size: .92rem; }
.crumbbar .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.crumbbar .crumbs li { display: inline-flex; align-items: center; color: var(--muted); }
.crumbbar .crumbs li + li::before { content: ""; width: 7px; height: 7px; border-top: 1.6px solid #9a94ab; border-right: 1.6px solid #9a94ab; transform: rotate(45deg); margin: 0 12px 0 6px; flex: none; }
.crumbbar .crumbs a { color: var(--navy); text-decoration: none; font-weight: 500; }
.crumbbar .crumbs a:hover { color: var(--red); text-decoration: underline; }
.crumbbar .crumbs li[aria-current] span { color: var(--muted); }
@media (max-width: 700px) {
  .crumbbar-in { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .crumbbar .crumbs { overflow-x: auto; scrollbar-width: none; }
  .crumbbar .crumbs::-webkit-scrollbar { display: none; }
  .crumbbar .crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
}

/* the breadcrumb bar stays put under the header while the page scrolls */
html { scroll-padding-top: calc(var(--header-h, 71px) + var(--crumb-h, 0px) + 12px); }
.crumbbar { position: sticky; top: var(--header-h, 71px); z-index: 45; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); }

/* grid children may shrink below their content (a wide photo must not widen the page) */
.detail > *, .results > *, .agent-profile > *, .tools > *, .footer-grid > * { min-width: 0; }

/* ---- phones: compact, thumb-friendly, one idea per screen ---- */
@media (max-width: 700px) {
  body { font-size: 15px; line-height: 1.5; }
  h1 { font-size: clamp(1.55rem, 6.4vw, 1.9rem); } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
  .section { padding: 26px 0; } .section-pad { padding-block: 22px 40px; }
  .section-head { margin-bottom: 14px; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px; } .section-head > div { min-width: 0; flex: 1; } .section-head p { font-size: .88rem; margin: 2px 0 0; }
  .section-head .more { font-size: .88rem; flex: none; padding-bottom: 2px; }
  .page-head { padding: 18px 0 14px; } .page-head-dark { padding: 32px 0; }

  /* header */
  .topbar-in { padding: 5px 0; } .topbar { font-size: .76rem; }
  .header-in { min-height: 54px; gap: 10px; } .brand img { height: 30px; }
  .burger { padding: 6px; margin-right: -6px; } .burger svg { width: 26px; height: 26px; }
  .nav { padding: 6px 14px 14px; } .nav-link { padding: 11px 6px; font-size: 1rem; }

  /* hero and search */
  .hero { padding: 20px 0 24px; }
  .hero h1 { max-width: none; margin-bottom: .35em; } .hero-sub { font-size: .95rem; margin-bottom: 14px; }
  .search { padding: 10px; border-radius: 18px; }
  .search-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; overflow: visible; margin-bottom: 10px; }
  .search-tab span { justify-content: center; padding: 9px 4px; font-size: .88rem; gap: 6px; }
  .search-tab span svg { width: 16px; height: 16px; }
  .sf { padding: 6px 12px; } .sf-cap { font-size: .64rem; }
  .search-go { padding: 13px; }
  .hero-links { margin-top: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; font-size: .84rem; }
  .hero-links::-webkit-scrollbar { display: none; } .hero-links > *, .hero-links a { flex: none; white-space: nowrap; }


  /* the menu: groups as short rows of pills instead of one long list; "List with Us" stays in the header */
  .nav-item .nav-drop { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px 6px; }
  .nav-drop a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; }
  .nav-item > .nav-link { font-family: var(--head); font-size: .95rem; color: var(--navy); padding: 8px 6px 6px; }
  .header-cta { display: inline-flex; margin-left: auto; padding: 7px 14px; min-height: 0; font-size: .82rem; } .header-cta + .burger { margin-left: 0; }

  /* the numbers strip stays on one line */
  .stats-in { grid-template-columns: repeat(4, 1fr); }
  .stats-in a { padding: 12px 2px; } .stats-in a:nth-child(2) { border-right: 1px solid var(--line); }
  .stats-in strong { font-size: 1.15rem; } .stats-in span { font-size: .7rem; }

  /* listings: a thumbnail beside the facts instead of a full-width photo */
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .grid .card, .list .card { flex-direction: row; align-items: stretch; border-radius: 14px; }
  .card:hover { transform: none; box-shadow: none; }
  .grid .card-photo, .list .card-photo { width: 124px; min-height: 124px; aspect-ratio: auto; flex: none; }
  .card-photo .noimg { min-height: 0; gap: 4px; } .noimg svg { width: 28px; height: 28px; } .noimg span { display: none; }
  .card-photo .badge { padding: 3px 8px; font-size: .64rem; }
  .card-photo .badge-mode { top: 6px; left: 6px; } .card-photo .badge-new { top: auto; bottom: 6px; left: 6px; right: auto; } .card-photo .badge-count { display: none; }
  .grid .card-body, .list .card-body { padding: 10px 12px; gap: 2px; min-width: 0; justify-content: center; }
  .card-price { font-size: 1.05rem; }
  .card-title { font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .card-place { font-size: .78rem; } .card-place span, .card-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-facts { font-size: .78rem; gap: 10px; padding-top: 4px; margin-top: 0; } .card-agent { display: none; }
  .featured .card { flex-direction: column; } .featured .card-photo { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }

  /* services, areas */
  .services { grid-template-columns: 1fr 1fr; gap: 10px; }
  .service { padding: 14px; } .service svg { width: 24px; height: 24px; margin-bottom: 6px; }
  .service h3 { font-size: .95rem; margin-bottom: .2em; } .service p { font-size: .8rem; line-height: 1.4; }
  .chips { gap: 8px; } .chip { padding: 7px 13px; font-size: .88rem; gap: 8px; }

  /* agents and news swipe sideways instead of stacking */
  .agents, .news-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -14px; padding: 2px 14px 8px; scroll-padding-inline: 14px; scrollbar-width: none; }
  .agents::-webkit-scrollbar, .news-grid::-webkit-scrollbar { display: none; }
  .agents > *, .news-grid > * { flex: 0 0 74%; scroll-snap-align: start; }
  .agent-card { padding: 16px 14px; } .agent-card .agent-photo { width: 88px; height: 88px; margin-bottom: 8px; }
  .news { padding: 16px; } .news-cover { margin: -16px -16px 12px; }

  /* tools and calls to action */
  .tools { gap: 16px; } .tool-list { gap: 8px; }
  .cta { padding: 26px 0; } .cta-in { flex-direction: column; align-items: stretch; text-align: left; gap: 14px; } .cta-in .btn { width: 100%; }

  /* footer: two columns of links under a short brand block */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding-block: 28px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer h4 { margin-bottom: .5em; } .footer a { padding: 5px 0; }
  .footer-base { padding: 14px 64px calc(14px + env(safe-area-inset-bottom)) 0; }

  /* a listing page: photo to the screen edge, facts in rows of three */
  .detail { padding-block: 0 24px; gap: 18px; }
  .detail-main .gallery { margin-inline: -14px; }
  .gallery-main { border-radius: 0; aspect-ratio: 4 / 3; }
  .gallery-thumbs { padding: 0 14px 4px; scrollbar-width: none; margin-top: 6px; } .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumbs button { width: 72px; height: 52px; border-radius: 8px; }
  .detail-head { margin: 14px 0 10px; gap: 6px; flex-direction: column; } .detail-head h1 { font-size: 1.3rem; margin-bottom: .2em; }
  .detail-price { font-size: 1.45rem; }
  .keyfacts { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
  .keyfacts li { padding: 9px 10px; } .keyfacts span { font-size: .7rem; } .keyfacts strong { font-size: .92rem; overflow-wrap: anywhere; }
  .features { grid-template-columns: 1fr 1fr; gap: 6px 14px; } .features h3 { font-size: .9rem; margin-bottom: .2em; } .features li { padding: 2px 0; font-size: .86rem; }
  .facts { grid-template-columns: 1fr; } .facts div { padding: 8px 0; font-size: .92rem; }
  .enquire { padding: 16px; }
  body:has(.mobile-cta) .ask { bottom: calc(76px + env(safe-area-inset-bottom)); }
}