:root {
  --mauve: #e0afff;
  --mauve-dark: #d39bfb;
  --green: #ceffaf;
  --green-dark: #bdf59a;
  --deep: #5f307e;
  --ink: #111111;
  --muted: #666666;
  --bg: #ffffff;
  --surface: #f8f4fb;
  --line: #e6e0ec;
  --radius: 12px;
  --max: 1100px;
  --column: 760px;
  --gutter: 16px;
  --bleed: clamp(0px, calc((100vw - var(--max)) / 2 - var(--gutter)), 64px); /* photo section overhang */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
/* Always reserve the scrollbar's width, so short and long pages share the same content position */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
main { flex: 1 0 auto; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Section titles carry a short green bar, the one playful accent */
.layout__body > section > h2, .listings__title { margin-bottom: 1rem; }
.layout__body > section > h2::after, .listings__title::after { content: ""; display: block; width: 2rem; height: 3px; margin-top: .45rem; border-radius: 2px; background: var(--green); }

/* Controls share the logo's look: pale mauve, deep mauve text, corners at a quarter of the height */
.button { display: inline-block; padding: .65rem 1.1rem; border: 0; border-radius: 11px; background: var(--mauve); color: var(--deep); font: inherit; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--mauve-dark); }
.button--primary { background: var(--green); }
.button--primary:hover { background: var(--green-dark); }
.icon { width: 18px; height: 18px; flex: none; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: .15rem .5rem; border-radius: 6px; font-weight: 700; }

/* Banner: solid mauve. At rest the inner box is the content column, so the logo sits on the content margin.
   Scrolled, the box widens to the viewport and the logo slides to the viewport margin while the page title
   appears at the content edge, behind a chevron. The logo word is pulled left by its own invisible padding. */
.banner { position: sticky; top: 0; z-index: 10; background: var(--mauve); --logo-h: 32px; }
.banner__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 56px; display: grid; grid-template-columns: 0fr auto 1fr; align-items: center; transition: height .3s ease, max-width .3s ease, padding-left .3s ease, grid-template-columns .3s ease; }
.banner__logo { display: inline-flex; grid-column: 2; margin-left: calc(var(--logo-h) * -0.35); transition: margin-left .3s ease; }
.banner__logo .logo { height: var(--logo-h); width: auto; transition: height .3s ease; }
.banner__title { position: absolute; top: 50%; transform: translateY(-50%); left: max(calc((100% - var(--max)) / 2 + var(--gutter)), calc(var(--gutter) + var(--logo-h) * 3.25 + 2rem)); right: var(--gutter); color: var(--deep); font-weight: 600; font-size: .95rem; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.banner__title span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.banner__title::before { content: "\203A"; position: absolute; left: -1.1rem; top: 50%; transform: translateY(-52%); font-size: 1.4rem; line-height: 1; opacity: .55; }
.banner__title:hover span { text-decoration: underline; }
/* Collapsed property bar: the box widens to the viewport and the logo settles 2rem left of the title, or on the gutter when there is no room */
.banner--page.banner--scrolled .banner__inner { max-width: 100vw; padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter) - var(--logo-h) * 3.25 - 2rem)); }
.banner--page.banner--scrolled { --logo-h: 22px; }
.banner--page.banner--scrolled .banner__inner { height: 40px; }
.banner--page.banner--scrolled .banner__title { opacity: 1; visibility: visible; }

/* Landing: the listings are the page */
.listings { padding: 1.5rem 0 3rem; }
.listings__title { font-size: 1.5rem; }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.card--listing { padding: 0; overflow: hidden; }
.card--listing a { display: block; text-decoration: none; }
.card--listing img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform .45s ease; }
.card--listing a:hover img { transform: scale(1.04); }
.card--listing h2 { font-size: 1.05rem; margin: .75rem 1rem .25rem; color: var(--deep); }
.card--listing p { margin: 0 1rem 1rem; color: var(--muted); }

/* Forms */
.contact { padding: 1.5rem 0 3rem; }
.contact .form { max-width: 36rem; }
.layout__body .contact .form { max-width: none; }
.form { display: grid; gap: .75rem; }
.form label { display: grid; gap: .25rem; font-weight: 500; }
.form input, .form textarea { font: inherit; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--mauve); outline-offset: 1px; border-color: var(--mauve); }
.form__error { color: #b00020; margin: 0; }
.form__trap { display: none; }
.form--done { background: var(--green); border-radius: var(--radius); padding: 1rem; }

.footer { background: var(--surface); margin-top: 2rem; color: var(--muted); font-size: .9rem; }
.footer__inner { max-width: var(--max); margin: 0 auto; padding: 1.5rem var(--gutter) 1.75rem; display: grid; gap: .9rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.footer a, .footer__link { color: inherit; }
.footer__link { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }

.notfound { padding: 3rem 0; }

/* Legal page: a reading column */
.legal { padding-top: 1.5rem; padding-bottom: 3rem; }
.legal h1, .legal h2, .legal p { max-width: var(--column); }
.legal h1 { margin-bottom: .75rem; }
.legal h2 { margin: 1.75rem 0 .5rem; font-size: 1.15rem; }
.legal p { margin: 0 0 .75rem; }
.legal__intro { color: var(--muted); }

/* Property: media */
.media { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 12px calc(-1 * var(--bleed)) 0; position: relative; }
.property .tabs { position: relative; z-index: 0; border-bottom: 0; }
.property .tabs::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); border-bottom: 1px solid var(--line); z-index: -1; }
.media__hero, .media__tile { display: block; min-height: 0; overflow: hidden; border-radius: var(--radius); }
.media__hero { position: relative; }
.media__hero img, .media__tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.media__hero img, .media__tile img, .assets .grid img { transition: transform .45s ease; }
.media__hero:hover img, .media__tile:hover img, .assets .grid a:hover img { transform: scale(1.04); }
.media__tile { display: none; }
.media__more { position: absolute; right: 12px; bottom: 12px; background: var(--mauve); color: var(--deep); padding: .35rem .75rem; border-radius: 8px; font-size: .9rem; font-weight: 600; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.media__more:hover { background: var(--mauve-dark); }
/* Tabs: deep mauve text on a hairline, the active one underlined in green. Buttons in the row share the look. */
.tabs { display: flex; align-items: stretch; gap: .25rem; flex-wrap: wrap; grid-column: 1 / -1; margin-top: .35rem; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .75rem; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--deep); font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.tab:hover { border-bottom-color: var(--mauve); }
.tab--active { border-bottom-color: var(--green); }
.tab__count { opacity: .6; font-weight: 500; }
.tabs__spacer { flex: 1; }
.tabs__close { display: inline-flex; align-items: center; margin-left: auto; padding: .5rem; color: var(--deep); }
.tabs__close .icon { width: 22px; height: 22px; }

/* Property: intro, sticky summary card, reading body */
.intro { padding: 1.25rem 0 .25rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.intro__title { min-width: 0; overflow-wrap: anywhere; }
.meta__title { margin: 0; }
.meta__address { margin: .15rem 0 0; color: var(--muted); font-size: 1.05rem; }
.meta__status { flex: none; display: inline-block; margin-top: .4rem; font-size: .9rem; font-weight: 600; color: var(--deep); background: var(--mauve); padding: .3rem .7rem; border-radius: 8px; }
.meta__status--available { background: var(--green); }
/* Right column: key facts scroll away, the price card sticks */
.summary { margin: .75rem 0 .5rem; display: grid; gap: .75rem; }
.summary__card { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: .7rem; }
.summary__price { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: 1.4rem; font-weight: 700; color: var(--deep); line-height: 1.2; }
.summary__sub { margin-top: -.5rem; color: var(--muted); font-size: .85rem; }
.summary .button { text-align: center; padding: .55rem .9rem; font-size: .95rem; }
/* Share row: a small tab bar across the card, one cell per action */
.summary__share { display: grid; grid-template-columns: repeat(3, 1fr); margin: .15rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary__share .tab { justify-content: center; padding: .8rem 0; margin-bottom: -1px; }
.summary__share .icon { width: 22px; height: 22px; }
.info { display: inline-flex; padding: .1rem; border: 0; background: none; color: var(--deep); cursor: help; }
.info .icon { width: 19px; height: 19px; }

/* Tooltips: data-tip shown above the element on hover, focus, or when forced by a class */
.tip { position: relative; }
.tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: .35rem .6rem; border-radius: 6px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 500; line-height: 1.3; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; z-index: 6; }
.tip:hover::after, .tip:focus-visible::after, .tip.tip--show::after { opacity: 1; visibility: visible; }
.tip--right::after { left: auto; right: 0; transform: none; }
/* Key facts as mini cards; a green glint travels along each border now and then */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: .5rem; }
.summary .facts { background: var(--bg); }
.fact { position: relative; display: grid; gap: .15rem; justify-items: center; text-align: center; padding: .6rem .35rem .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.fact::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, var(--green) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: glint 9s ease-in-out infinite; }
.fact:nth-child(2)::after { animation-delay: .6s; }
.fact:nth-child(3)::after { animation-delay: 1.2s; }
.fact:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes glint { 0%, 60% { background-position: 100% 0; } 82%, 100% { background-position: 0 0; } }

/* Location: static map preview, click for the interactive map, attribution tucked in the corner */
.location { position: relative; margin: 1rem 0 .25rem; }
.location--link { margin-left: -.75rem; }
.location__map { display: block; width: 100%; padding: 0; border: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.location__map img { width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; transition: transform .45s ease; }
.location__map:hover img { transform: scale(1.03); }
.location__credit { position: absolute; right: 8px; bottom: 6px; padding: .05rem .35rem; border-radius: 4px; background: rgba(255,255,255,.8); color: #444; font-size: .65rem; line-height: 1.4; pointer-events: none; }
.location__credit a { color: inherit; pointer-events: auto; }
.facts li { display: grid; grid-template-rows: 1.85rem auto; align-items: end; justify-items: center; gap: .2rem; text-align: center; }
.facts__value { display: inline-flex; align-items: center; height: 1.85rem; font-weight: 600; font-size: 1.15rem; color: var(--deep); }
.facts .pill { padding: 0 .55rem; font-size: 1rem; }
.facts__label { color: var(--muted); font-size: .8rem; line-height: 1.2; }

.dialog { border: 0; border-radius: var(--radius); padding: 2.75rem 1.25rem 1.25rem; max-width: min(92vw, 520px); text-align: center; }
.dialog::backdrop { background: rgba(0,0,0,.5); }
.dialog img { margin: 0 auto .5rem; }
.dialog__url { font-size: .9rem; color: var(--muted); word-break: break-all; margin: 0; }
.dialog__close { position: absolute; top: .6rem; right: .6rem; display: inline-flex; padding: .35rem; border: 0; border-radius: 8px; background: transparent; color: var(--deep); cursor: pointer; }
.dialog__close:hover { background: var(--surface); }
.dialog__close .icon { width: 22px; height: 22px; }
.dialog__actions { display: flex; justify-content: center; margin-top: .5rem; }
.dialog--map { width: min(96vw, 1000px); max-width: none; }
.dialog.dialog--contact { width: min(94vw, 720px); max-width: none; padding: 2.5rem 2rem 2rem; text-align: left; }
.dialog__title { margin: 0 0 .25rem; font-size: 1.35rem; }
.dialog__lead { margin: 0 0 1.25rem; color: var(--muted); }
.dialog--contact .form { gap: 1rem; }
.dialog--contact .form label { text-align: left; }
.dialog--contact .form .button { justify-self: start; padding: .7rem 1.5rem; }
.dialog--map iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 8px; display: block; }

.description { padding: 1.25rem 0; }
.description__body { max-height: 17rem; overflow: hidden; position: relative; }
.description__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5rem; background: linear-gradient(rgba(255,255,255,0), #fff); }
.description__toggle:checked ~ .description__body { max-height: none; }
.description__toggle:checked ~ .description__body::after { display: none; }
.description__more { display: inline-block; margin-top: .5rem; font-weight: 600; color: var(--deep); cursor: pointer; text-decoration: underline; }
.description__more::after { content: attr(data-more); }
.description__toggle:checked ~ .description__more::after { content: attr(data-less); }
.prose h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
.prose p { margin: 0 0 .75rem; }

/* Property: characteristics, one stacked column */
.characteristics { padding: 1.25rem 0; }
.characteristics__list { display: grid; gap: 1rem; }
.specs { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.specs caption { text-align: left; font-weight: 600; color: var(--deep); padding: .75rem 1rem .25rem; caption-side: top; }
.specs th, .specs td { text-align: left; padding: .5rem 1rem; vertical-align: top; border-top: 1px solid #fff; }
.specs th { font-weight: 500; color: var(--muted); width: 40%; }

/* Assets */
/* justified rows: each tile grows with its aspect ratio so a row shares one height, nothing is cropped */
.assets .grid { --row: 150px; list-style: none; margin: 12px 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.assets .grid li { --r: calc(var(--w) / var(--h)); flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--row)); min-width: 0; }
.assets .grid::after { content: ""; flex: 100000 1 0; }
.assets .grid a { display: block; overflow: hidden; border-radius: 8px; }
.assets .grid img { display: block; width: 100%; height: auto; }
.tabs--assets { position: sticky; top: 0; z-index: 5; margin: 0; padding-top: .35rem; background: var(--bg); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: #000; color: #fff; display: grid; place-items: center; z-index: 50; }
.lightbox__img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; }
.lightbox__close, .lightbox__nav { position: absolute; color: #fff; text-decoration: none; font-size: 2.2rem; line-height: 1; padding: .4rem .9rem; background: rgba(0,0,0,.45); border-radius: 999px; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__counter { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); margin: 0; font-size: .9rem; }
body:has(.lightbox) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .media__hero img, .media__tile img, .assets .grid img, .location__map img, .banner__inner, .banner__logo, .banner__logo .logo { transition: none; }
  .fact::after { animation: none; }
}

@media (min-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .dialog--contact .form { grid-template-columns: 1fr 1fr; }
  .dialog--contact .form label:nth-of-type(3), .dialog--contact .form__error, .dialog--contact .form .button { grid-column: 1 / -1; }
  .assets .grid { --row: 220px; }
}
@media (min-width: 960px) {
  h1 { font-size: 2rem; }
  .media { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
  .media__hero { grid-row: 1 / 3; }
  .media__hero img { height: 100%; aspect-ratio: auto; }
  .media__tile { display: block; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "intro summary" "body summary"; column-gap: 2.5rem; align-items: start; }
  .intro { grid-area: intro; }
  .summary { grid-area: summary; margin: 1.25rem 0 0; align-self: stretch; align-content: start; }
  .summary .facts { grid-template-columns: 1fr 1fr; }
  .summary__card { position: sticky; top: 3.5rem; }
  .layout__body .location { margin-top: .5rem; }
  .layout__body { grid-area: body; }
  .assets .grid { --row: 280px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}