/* Elegant Apartments. Cream, muted gold, brand teal. Light only.
   Headings: Cormorant Garamond (thin, high-contrast, close to the Dolce Gargia wordmark). Body: Helvetica Neue (brand font).
   One product, three compositions: phone (stacked, one month calendar), tablet, desktop (floating bar on the hero edge, staggered story blocks). */
:root {
  color-scheme: light;
  --bg: #F8F4EA; --bg2: #F0EADA; --card: #FFFFFF; --ink: #1C1A16; --muted: #5A5548; --dim: #8A826F;
  --line: rgba(28, 26, 22, 0.14); --gold: #A9822C; --gold-ink: #826418; --teal: #007A60; --teal-hi: #008C6F; --on-teal: #FFFFFF;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: 22px; --max: 1240px; --head: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-text-size-adjust: 100%; }
body:not(.has-hero) { padding-top: var(--head); }
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 9vw, 5rem); font-weight: 300; }
h2 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); font-weight: 400; }
h3 { font-size: 1.6rem; line-height: 1.15; }
em { font-style: italic; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { display: block; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin-bottom: 16px; }
.lede { color: var(--muted); font-size: 1.06rem; max-width: 52ch; }
.pad { padding-block: 72px; }
.alt { background: var(--bg2); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.orn { display: block; width: 44px; height: 1px; background: var(--gold); margin: 22px 0; }
.center .orn { margin-inline: auto; }
.leaf { position: absolute; pointer-events: none; opacity: 0.1; width: clamp(160px, 30vw, 380px); height: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; background: var(--teal); color: var(--on-teal); border: 1px solid var(--teal); border-radius: 999px; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--teal-hi); border-color: var(--teal-hi); }
.btn.line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--bg); }
.btn.sm { min-height: 40px; padding: 0 20px; font-size: 0.66rem; }
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.go { display: inline-block; margin-top: 14px; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--gold); padding-bottom: 4px; text-decoration: none; }

/* header: transparent over the hero, cream once you scroll */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; color: #fff; transition: background .3s, color .3s, box-shadow .3s; }
body:not(.has-hero) .site-header, .site-header.solid { background: rgba(248, 244, 234, 0.96); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header:not(.solid)::before { content: ""; position: absolute; inset: 0 0 -30px 0; background: linear-gradient(#0c130f88, transparent); z-index: -1; pointer-events: none; }
body:not(.has-hero) .site-header::before { display: none; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--head); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 38px; height: 38px; flex: none; }
.bn { font-family: var(--serif); font-size: 1.35rem; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.nav-inline { display: none; }
.nav-inline a { text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; padding-block: 8px; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav-inline a:hover, .nav-inline a[aria-current="page"] { border-bottom-color: var(--gold); }
.head-r { display: flex; align-items: center; gap: 6px; }
.head-r .btn { background: transparent; color: inherit; border-color: currentColor; }
.head-r .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.site-header.solid .head-r .btn, body:not(.has-hero) .head-r .btn { background: var(--teal); color: #fff; border-color: var(--teal); }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary i { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .2s; }
.menu[open] summary i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu[open] summary i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); padding: 4px var(--gutter) 24px; display: grid; box-shadow: 0 20px 30px #0000001a; }
.menu-panel a { text-decoration: none; font-family: var(--serif); font-size: 1.9rem; padding-block: 12px; border-bottom: 1px solid var(--line); }
.menu-panel a.quiet { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); border: 0; padding-top: 18px; }

/* hero */
.hero { position: relative; color: #fff; min-height: 100svh; max-height: 880px; display: grid; align-items: center; padding: 120px var(--gutter) 150px; isolation: isolate; z-index: 3; }
.hero > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0c130f66 0%, #0c130f22 40%, #0c130f99 100%); }
.hero-in { width: 100%; max-width: var(--max); margin-inline: auto; display: grid; gap: 18px; }
.hero .eyebrow { color: #EBD9A6; margin: 0; }
.hero h1 { text-shadow: 0 2px 30px #00000055; max-width: 11ch; }
.hero p.sub { color: #ffffffe6; max-width: 36ch; font-size: 1.05rem; }
.hero.short { min-height: 56svh; max-height: 560px; padding-bottom: 90px; }

/* floating booking bar */
.rb { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; transform: translateY(50%); z-index: 5; background: var(--card); border-radius: 20px; box-shadow: 0 18px 50px #00000030, 0 2px 8px #00000014; display: grid; grid-template-columns: 1fr 1fr; padding: 8px; color: var(--ink); }
.rb-f { text-align: left; background: transparent; border: 0; font: inherit; color: inherit; padding: 10px 14px; border-radius: 14px; cursor: pointer; display: grid; gap: 1px; min-width: 0; }
.rb-f:hover, .rb-f.on { background: var(--bg); }
.rb-f .k { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.rb-f .v { font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb .btn { grid-column: 1 / -1; margin-top: 6px; width: 100%; }
.pop { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--card); border-radius: 20px; box-shadow: 0 24px 60px #00000030; padding: 18px; z-index: 6; }
.pop[hidden] { display: none; }
.pop-g { left: auto; right: 0; width: min(300px, 100%); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--ink); }
.cal-head button:disabled { opacity: .3; cursor: default; }
.cal-months { display: grid; gap: 22px; }
.cal-m h4 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; text-align: center; margin: 0 0 8px; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-g .dow { font-size: 0.6rem; letter-spacing: 0.1em; text-align: center; color: var(--dim); padding-bottom: 6px; font-weight: 700; }
.cal-d { height: 40px; border: 0; background: transparent; font: inherit; font-size: 0.92rem; color: var(--ink); cursor: pointer; position: relative; padding: 0; }
.cal-d:disabled { color: #b9b2a0; cursor: default; text-decoration: line-through; }
.cal-d.range { background: #E8F1EC; }
.cal-d.edge { background: var(--teal); color: #fff; border-radius: 999px; z-index: 1; }
.cal-d.edge.s { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-d.edge.e { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-d.only { border-radius: 999px; }
.cal-hint { text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper b { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; }
.stepper button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--ink); }
.stepper button:disabled { opacity: .3; }

/* story blocks (staggered) */
.story { display: grid; gap: 28px; align-items: center; position: relative; z-index: 1; }
.pic { overflow: hidden; background: var(--bg2); border-radius: 4px; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.r43 { aspect-ratio: 4 / 3; } .r45 { aspect-ratio: 4 / 5; } .r54 { aspect-ratio: 5 / 4; }
.signs { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; margin-top: 40px; }
.why div { text-align: center; min-width: 0; }
.ico { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; }
.ico svg { width: 30px; height: 30px; stroke: var(--teal); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.why h3 { font-size: 1.35rem; margin-bottom: 4px; }
.why p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* cinematic video band */
.film { position: relative; min-height: 70svh; max-height: 720px; display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; background: #0c130f; }
.film video, .film .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.film::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0c130f33, #0c130f00 40%, #0c130fb0 100%); }
.film-in { padding: 0 var(--gutter) 48px; max-width: var(--max); margin-inline: auto; width: 100%; display: grid; gap: 10px; }
.film .eyebrow { color: #EBD9A6; margin: 0; }
.film h2 { max-width: 14ch; }
.film .playpause { position: absolute; right: var(--gutter); top: 20px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #ffffffaa; background: #0c130f55; color: #fff; cursor: pointer; font-size: .8rem; }

/* reviews */
.revs { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 36px calc(var(--gutter) * -1) 0; padding-inline: var(--gutter); padding-bottom: 6px; scrollbar-width: none; }
.revs::-webkit-scrollbar { display: none; }
.rev { flex: 0 0 84%; scroll-snap-align: center; margin: 0; background: var(--card); padding: 34px 26px 28px; text-align: center; display: grid; gap: 14px; align-content: start; border-radius: 4px; }
.rev blockquote { margin: 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; font-style: italic; }
.rev .who { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.stars { color: var(--gold); letter-spacing: 4px; font-size: 0.8rem; }

/* choose-a-stay cards */
.choose { display: grid; gap: 28px; margin-top: 34px; }
.card { display: block; text-decoration: none; background: var(--card); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 var(--line); }
.card .pic { border-radius: 0; aspect-ratio: 4 / 3; }
.card .pic img { transition: transform .9s ease; }
.card:hover .pic img { transform: scale(1.04); }
.card-b { padding: 22px 24px 26px; }
.card-b .code { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.card-b h3 { margin: 6px 0 8px; font-size: 1.9rem; }
.card-b p { color: var(--muted); font-size: 0.95rem; }
.soon { opacity: .7; }

/* facts, lists, times */
.ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.ticks li { padding: 13px 0 13px 32px; border-bottom: 1px solid var(--line); position: relative; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.3em; width: 12px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.steps { counter-reset: s; }
.steps li { counter-increment: s; padding-left: 52px; }
.steps li::before { content: counter(s); border: 0; transform: none; left: 0; top: 0.5em; width: auto; height: auto; font-family: var(--serif); font-size: 2rem; color: var(--gold); line-height: 1; }
.facts { margin: 22px 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.times { margin-top: 24px; border-top: 1px solid var(--line); }
.times div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.times dt { color: var(--muted); }
.times dd { margin: 0; font-family: var(--serif); font-size: 2rem; color: var(--gold-ink); white-space: nowrap; }
.faq { margin-top: 28px; border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding-block: 20px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-family: var(--sans); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding-bottom: 20px; color: var(--muted); max-width: 62ch; }

/* gallery */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 30px; }
.gal figure { margin: 0; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3px; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.gal figure:hover img { transform: scale(1.05); }
.gal figcaption { position: absolute; inset: auto 0 0 0; padding: 22px 12px 10px; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: #fff; background: linear-gradient(transparent, #0008); }
.agal { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.agal figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.agal figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.agal img { width: 100%; height: 100%; object-fit: cover; }
.agal figure:nth-child(n+4) { display: none; }

/* apartment page booking card */
.bcard { background: var(--card); border-radius: 18px; padding: 20px; box-shadow: 0 18px 50px #00000018; position: relative; display: grid; gap: 10px; }
.bcard .rb { position: static; transform: none; box-shadow: none; padding: 0; background: transparent; }
.bcard .pop { left: 0; right: 0; }
.price { font-family: var(--serif); font-size: 1.7rem; }
.price small { font-family: var(--sans); font-size: .78rem; color: var(--muted); }

/* contact and forms */
.contact { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.contact .leaf { left: -70px; bottom: -40px; transform: rotate(-18deg); }
.contact-grid { display: grid; gap: 36px; margin-top: 32px; position: relative; z-index: 1; }
.cline { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cline .lbl { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.cline .row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.cline .val { font-size: 1.05rem; overflow-wrap: anywhere; min-width: 0; }
.copy { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 12px; cursor: pointer; }
form.msg { display: grid; gap: 18px; }
form.msg label { display: grid; gap: 2px; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
form.msg input, form.msg textarea, form.msg select { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 1rem; padding: 10px 0; border-radius: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
form.msg textarea { min-height: 96px; resize: vertical; }
.status { font-size: 0.85rem; color: var(--muted); min-height: 1.3em; }
.callout { background: var(--card); border-radius: 6px; padding: 26px; display: grid; gap: 8px; align-content: start; }

footer { padding-block: 44px 30px; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--line); }
.foot { display: grid; gap: 22px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; }
.foot .lettings { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); line-height: 1.3; }
.foot .lettings a { border-bottom: 1px solid var(--gold); }

/* ---------- TABLET ---------- */
@media (min-width: 700px) {
  :root { --gutter: 40px; --head: 76px; }
  .pad { padding-block: 100px; }
  .actions { flex-direction: row; flex-wrap: wrap; }
  .hero { padding-bottom: 130px; }
  .rb { left: 50%; right: auto; width: min(640px, calc(100% - var(--gutter) * 2)); transform: translate(-50%, 50%); grid-template-columns: 1.3fr 0.8fr auto; align-items: center; border-radius: 999px; padding: 8px 8px 8px 14px; }
  .rb .btn { grid-column: auto; margin: 0; width: auto; }
  .rb-f { border-radius: 999px; padding-inline: 18px; }
  .pop { left: 0; right: 0; }
  .cal-months { grid-template-columns: 1fr 1fr; }
  .story { grid-template-columns: 1fr 1fr; gap: 56px; }
  .why { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .choose { grid-template-columns: 1fr 1fr; }
  .gal { grid-template-columns: repeat(3, 1fr); }
  .revs { display: grid; grid-template-columns: 1fr 1fr 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .rev { flex: none; padding-inline: 20px; }
  .rev blockquote { font-size: 1.2rem; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .foot { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .facts div { grid-template-columns: 9rem 1fr; gap: 16px; align-items: baseline; }
  .agal { grid-template-columns: repeat(4, 1fr); }
  .agal figure:first-child { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
  .agal figure:nth-child(n+4) { display: block; }
  .agal figure { aspect-ratio: 4 / 3; }
  .agal figure:nth-child(n+6) { display: none; }
}

@media (min-width: 900px) { .nav-inline { display: flex; gap: 22px; } .nav-inline .lg { display: none; } }
.gal.n4 { grid-template-columns: 1fr 1fr; } .gal.n6 { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .gal.n4 { grid-template-columns: repeat(4, 1fr); } .gal.n6 { grid-template-columns: repeat(3, 1fr); } }
/* ---------- DESKTOP ---------- */
@media (min-width: 1100px) {
  :root { --gutter: 56px; --head: 88px; }
  .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-inline { gap: 34px; justify-self: center; }
  .head-r { justify-self: end; gap: 22px; }
  .pad { padding-block: 132px; }
  .hero { padding-block: 140px 160px; }
  .hero-in { padding-left: 4%; }
  .rb { width: 700px; }
  .story { gap: 110px; }
  .story.flip .pic { order: -1; }
  .story .pic.tall { aspect-ratio: 4 / 5; }
  .story .offset { transform: translateY(60px); }
  .why { gap: 0; }
  .why div { padding-inline: 24px; border-left: 1px solid var(--line); }
  .why div:first-child { border-left: 0; }
  .film { min-height: 78svh; }
  .film-in { padding-bottom: 72px; }
  .revs { gap: 22px; }
  .rev { padding: 44px 30px 34px; }
  .gal { gap: 8px; }
  .nav-inline .lg { display: inline; }
  .booklayout { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: start; }
  .booklayout aside { position: sticky; top: 110px; }
  .contact-grid { gap: 96px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card .pic img, .gal img { transition: none; } }

/* booking card inside apartment page: always a plain stacked form */
.bcard .rb { width: auto; left: auto; right: auto; transform: none; border-radius: 0; grid-template-columns: 1fr 1fr; }

@media (max-width: 480px) {
  .bar { gap: 6px; }
  .brand { gap: 8px; min-width: 0; }
  .brand img { width: 32px; height: 32px; }
  .bn { font-size: 1.1rem; }
  .head-r .btn { padding: 9px 14px; font-size: .62rem; }
  .menu summary { width: 38px; }
}

.story.center .signs { justify-content: center; }
.story.center .actions { justify-content: center; }
/* preview inside an app frame: keep the header clear of the host's own top bar */
@media (max-width: 699px) { html.inframe .site-header { top: 64px; } }

/* leaf accent: the same monstera motif as the guest app, a little stronger */
.leaf { opacity: 0.16; }
.crumbs { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; }

/* apartment gallery: swipe on phone, grid on larger screens */
@media (max-width: 699px) {
  .agal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .agal::-webkit-scrollbar { display: none; }
  .agal figure, .agal figure:first-child, .agal figure:nth-child(n+4) { display: block !important; flex: 0 0 88%; scroll-snap-align: center; aspect-ratio: 4 / 5 !important; grid-column: auto !important; }
  .showall { display: none; }
}
@media (min-width: 700px) { .agal.all figure:nth-child(n+6) { display: block; } .agal.all { grid-template-columns: repeat(4, 1fr); } }

/* phone header: keep Reserve and the menu from covering the name */
.head-r { flex: none; }
@media (max-width: 480px) {
  .brand { min-width: 0; flex: 1 1 auto; }
  .bn { overflow: hidden; text-overflow: ellipsis; }
  .bn { font-size: .98rem; }
  .head-r .btn { min-height: 36px; padding: 0 13px; font-size: .58rem; letter-spacing: .14em; }
}
@media (min-width: 900px) { .nav-inline { margin-left: 34px; gap: 24px; } }

.film video { pointer-events: none; }
.film .playpause { display: none; }
.ig { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: var(--muted); }
.ig:hover { color: var(--gold-ink); }

/* smooth page-to-page fade where the browser supports it */
@view-transition { navigation: auto; }

/* remote photo that has not loaded (e.g. in a locked-down preview): a quiet placeholder, not a broken icon */
img.ph { background: var(--bg2) url("img/leaf_gold.png") center / 28% no-repeat; font-size: 0; min-height: 120px; width: 100%; height: 100%; }

/* smaller, quieter header Reserve button */
.head-r .btn { min-height: 34px; padding: 0 16px; font-size: .6rem; letter-spacing: .16em; }
@media (max-width: 480px) { .head-r .btn { min-height: 30px; padding: 0 11px; font-size: .54rem; letter-spacing: .12em; } }

/* phones: the name needs the room; booking is reachable from the date bar and menu */
@media (max-width: 560px) { .head-r > .btn { display: none; } .bn { font-size: 1.05rem; overflow: visible; text-overflow: clip; } }

/* reviews: slimmer cards on phones so the next one peeks in */
@media (max-width: 699px) { .rev { flex-basis: 74%; padding: 28px 20px 24px; } .rev blockquote { font-size: 1.2rem; } }
@media (min-width: 700px) { .rev:nth-child(n+7) { display: none; } }

/* find-us map panel: soft, same palette as the page */
.mapb { margin-top: 30px; display: grid; gap: 0; border-radius: 6px; overflow: hidden; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.mapart { position: relative; aspect-ratio: 16 / 10; background: #e9ebed; }
.mapart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapart .pin { position: absolute; left: 50%; top: 48%; width: 22px; height: 22px; margin: -22px 0 0 -11px; background: #3f6ea8; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 6px 14px #0003; }
.mapart .pin::after { content: ""; position: absolute; inset: 6px; background: #fff; border-radius: 50%; }
.mapcard { padding: 26px 24px 28px; display: grid; gap: 10px; justify-items: start; align-content: center; }
.mapcard .lede { margin: 0; }
@media (min-width: 800px) { .mapb { grid-template-columns: 1.5fr 1fr; } .mapart { aspect-ratio: auto; min-height: 320px; } .mapcard { padding: 40px; } }

/* quiet legal strip, set apart from the navigation */
.legal { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.legal p { margin: 0; font-size: .7rem; letter-spacing: .08em; color: var(--muted); opacity: .85; }
.legal { border-top: 0; padding-top: 0; }
.legal p { border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- desktop polish ---------- */
.story.center { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }
.story.center p { max-width: 38em; }
.foot nav { display: grid; grid-template-columns: repeat(2, auto); gap: 28px 56px; justify-content: start; }
.foot nav > div { display: grid; gap: 10px; align-content: start; }
.foot nav h4 { margin: 0 0 4px; font-family: var(--sans); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
@media (min-width: 1100px) {
  .hero h1 { max-width: 14ch; font-size: clamp(4rem, 5.4vw, 5.6rem); }
  .hero-in p, .hero .lede { max-width: 34em; font-size: 1.15rem; }
  .story.center h2 { font-size: clamp(3rem, 4.2vw, 4.2rem); max-width: 14em; }
  .story.center .lede, .story.center p { font-size: 1.12rem; line-height: 1.8; }
  .why { margin-top: 24px; }
  .why h3 { font-size: 1.5rem; }
  .why p { font-size: .95rem; }
  .foot { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 80px; }
  .foot nav { justify-content: end; gap: 28px 96px; }
  .foot .lettings { font-size: 1.7rem; max-width: 22em; }
  .legal p { font-size: .72rem; }
}

.mapart .mapjs{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.mapart.live .mapjs{opacity:1}.mapart.live>svg,.mapart.live>.pin:not(.live){display:none}
.mapart .pin.live{position:static;margin:0;display:block;width:22px;height:22px;background:#3f6ea8;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 6px 14px #0003}
.mapart .pin.live::after{content:"";position:absolute;inset:6px;background:#fff;border-radius:50%}
.maptog{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;background:#fff;border-radius:999px;box-shadow:0 2px 10px #0002;overflow:hidden}
.maptog button{border:0;background:none;padding:8px 14px;font:600 .68rem/1 var(--sans,inherit);letter-spacing:.12em;text-transform:uppercase;color:#555;cursor:pointer}
.maptog button.on{background:#222;color:#fff}

.rwd{margin:14px 0 0;font-size:.82rem;line-height:1.5;color:var(--gold);text-align:center;font-family:'Cormorant Garamond',serif;font-size:1.05rem}
.rwd em{font-style:italic}
.tiers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.tiers span{border:1px solid var(--gold);color:var(--ink,#2a2a2a);padding:9px 18px;border-radius:999px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.tiers .inv{border-style:dashed;opacity:.75}
.sticky-cta{display:none}
@media (max-width:700px){
 .sticky-cta{display:block;opacity:0;pointer-events:none;transform:translateY(20px);transition:.3s;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--teal);color:#fff;text-align:center;padding:15px;border-radius:999px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;box-shadow:0 8px 24px #0003}
 body{padding-bottom:80px}
}
@media (max-width:700px){.sticky-cta.show{opacity:1;pointer-events:auto;transform:none}}

/* ---- Website improvements (extends existing system; no new framework) ---- */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--teal);color:#fff;padding:10px 16px;border-radius:999px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:calc(8px + env(safe-area-inset-top,0px))}
.btn .t-l{display:none}
@media (min-width:700px){.btn .t-s{display:none}.btn .t-l{display:inline}}
.amen .ticks{margin-top:14px}
.fnav{grid-template-columns:repeat(2,auto)}
@media (min-width:900px){.foot nav.fnav{grid-template-columns:repeat(4,auto);gap:28px 44px}}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}

.cal-g .dow{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot nav .fh{margin:0 0 4px;font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.foot nav{gap:8px 56px}
.foot nav > div{gap:0}
.foot nav a,.foot p a,.cline a,.crumbs a{display:inline-block;padding-block:8px}
.foot .legal a{padding-block:0;display:inline}
.crumbs{display:flex;flex-wrap:wrap;gap:0 6px;align-items:center}
.crumbs span[aria-current]{color:var(--muted)}
.copy{min-height:40px}
.foot .ig{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;vertical-align:middle;margin-block:-12px}
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
.legal a{display:inline-block;padding:10px 6px}
.film .go{display:inline-block;padding-block:12px}

.flow{list-style:none;counter-reset:f;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 6px;margin:22px 0 0;padding:0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.flow li{counter-increment:f;display:flex;align-items:center;gap:6px}
.flow li::before{content:counter(f);display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--gold);border-radius:50%;color:var(--gold-ink);font-size:.64rem}
.flow li+li::after{content:none}
.flow li:not(:last-child)::after{content:"\2192";margin-left:6px;color:var(--dim)}
.trust{margin:14px 0 0;font-size:.82rem;line-height:1.55;color:var(--muted)}
.actions + .trust{margin-top:16px}
.center .trust,.bcard .trust{text-align:center;max-width:36em;margin-inline:auto}
.pullq{margin:22px 0 0;padding-left:16px;border-left:2px solid var(--gold)}
.pullq blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.4;color:var(--ink)}
.pullq figcaption{margin-top:6px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* Guest app section: existing tokens only */
.app{display:grid;gap:38px;align-items:center}
.app-copy .stages{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.app-copy .stages li{padding:14px 0;border-bottom:1px solid var(--line)}
.app-copy .stages .code{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.app-copy .stages p{margin:5px 0 0;color:var(--muted)}
.app-copy .flow{justify-content:flex-start;margin-top:22px}
.app-copy .actions{margin-top:22px}
.phones{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.phone{width:min(230px,44vw);aspect-ratio:9/19;border:1px solid var(--gold);border-radius:30px;padding:8px;background:var(--card);box-shadow:0 18px 40px rgba(28,26,22,.10)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.phone .screen{height:100%;border-radius:22px;background:var(--bg2);display:grid;place-content:center;justify-items:center;gap:14px;text-align:center}
.phone .screen img{width:46%;height:auto;opacity:.7;border-radius:0}
.phone .screen span{font-family:var(--serif);font-size:1.35rem;line-height:1.2;color:var(--ink)}
.phones.ph-empty{display:none}
@media (min-width:900px){.app{grid-template-columns:1.25fr .75fr;gap:64px}.phones.ph-empty{display:flex}.phone{width:min(260px,100%)}}
@media (max-width:899px){.phones:not(.ph-empty){overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding:4px 2px 12px;min-width:0}.phones:not(.ph-empty) .phone{flex:none;scroll-snap-align:center;width:min(220px,62vw)}}
.app>*{min-width:0}

/* Menu (three lines) is on every screen size; it holds Elegant Lettings for property owners */
.menu-panel a.lettings-link{display:grid;gap:2px;font-family:var(--serif);font-size:1.9rem;letter-spacing:0;text-transform:none;color:var(--ink);border-bottom:0;padding-top:12px}
.menu-panel a.lettings-link span{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){
 .menu-panel{left:auto;right:var(--gutter);width:min(340px,calc(100vw - 2*var(--gutter)));top:calc(100% + 6px);border:1px solid var(--line);border-radius:14px;padding:6px 22px 18px}
 .menu-panel a{font-size:1.5rem}
 .menu-panel a.lettings-link{font-size:1.5rem}
 .menu-panel a:last-child{border-bottom:0}
}
@media (min-width:1100px){.menu-panel a.m{display:none}.menu-panel a.lettings-link{padding-top:12px}}
.menu-panel{max-height:calc(100svh - var(--head));overflow-y:auto;overscroll-behavior:contain}
@media (max-width:899px){.menu-panel a{font-size:1.6rem;padding-block:10px}.menu-panel a.lettings-link{font-size:1.6rem}}

/* motion */
.js .flow li{opacity:0;transform:translateX(-34px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.js .flow li:nth-child(even){transform:translateX(34px)}
.js .flow.in li{opacity:1;transform:none}
.js .flow.in li:nth-child(2){transition-delay:.14s}.js .flow.in li:nth-child(3){transition-delay:.28s}.js .flow.in li:nth-child(4){transition-delay:.42s}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .flow li,.js .rv{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:699px){
.flow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;justify-content:stretch;font-size:.58rem;letter-spacing:.1em;text-align:center}
.flow li{flex-direction:column;gap:8px;position:relative;align-items:center}
.flow li::before{width:30px;height:30px;font-size:.8rem;background:var(--bg);position:relative;z-index:1}
.flow li:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 19px);width:calc(100% - 38px);height:1px;margin:0;background:var(--gold)}
.app-copy .flow{text-align:left}
}
.js main{overflow-x:clip}
/* Review source: tone-on-tone, engraved into the card */
.rev .src{display:block;margin-top:8px;font-family:var(--serif);font-size:.95rem;letter-spacing:.14em;text-transform:none;font-weight:600;color:#BFB28E;text-shadow:0 1px 0 #fff,0 -1px 0 #AC9F7C}
.rev .src-direct{font-style:italic;letter-spacing:.06em}
.cancel{margin-top:16px;padding-top:14px;border-top:1px solid #E4DCC6;text-align:left}
.cancel h3{margin:0 0 6px;font-family:var(--serif);font-size:1.15rem}
.cancel ul{margin:0;padding-left:1.1em;font-size:.82rem;line-height:1.55;color:var(--muted)}
/* Source colours: typed names in each platform's brand colour, in our serif */
.rev .src-airbnb{color:#FF385C;text-shadow:none;letter-spacing:.04em;font-weight:700;font-size:1.05rem}
.rev .src-booking{color:#003B95;text-shadow:none;letter-spacing:.02em;font-weight:700;font-size:1.05rem}
.rev .src-direct img{display:block;margin:2px auto 0}
.rev .src-logo img{display:block;margin:4px auto 0;height:22px;width:auto}

.mapart .mapph{position:absolute;inset:0;margin:0;display:grid;place-items:center;text-align:center;padding:16px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mapart.fail .mapph{letter-spacing:0;text-transform:none;font-size:.95rem}
.mapart.live .mapph{display:none}

/* header + menu: the bar runs the full width of the screen so the menu button
   sits at the far right, and the menu panel opens directly beneath it */
.site-header{--hpad:clamp(22px,2.6vw,56px)}
.site-header .wrap.bar{max-width:none;padding-inline:var(--hpad)}
.menu summary{-webkit-tap-highlight-color:transparent;outline:none;user-select:none}
.menu summary:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-radius:6px}
.menu summary i{transition:transform .28s cubic-bezier(.4,0,.2,1)}
@media (min-width:900px){.menu-panel{right:var(--hpad)}}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu[open] .menu-panel{animation:menu-in .22s ease-out both}
@media (prefers-reduced-motion:reduce){.menu[open] .menu-panel{animation:none}.menu summary i{transition:none}}

/* guest app phone: a scripted walkthrough of the real app. Each screen scrolls, then a tap lands on the next bottom-bar tab, the bar's active tab changes and the next screen pushes in.
   Loop = 5 screens x 4.8s = 24s (--secs). Keyframes are in % of the loop: 1s = 4.1667%. */
.phones.cycle{display:none;flex-direction:column;align-items:center;gap:14px}
@media (min-width:900px){.phones.cycle{display:flex}}
@media (max-width:899px){.phones.cycle{display:flex;margin-top:8px}.phones.cycle .phone{width:min(240px,64vw)}}
.phones.cycle .phone{aspect-ratio:auto}
.phone .screen.live{position:relative;display:block;overflow:hidden;background:#0c130f;aspect-ratio:520/1125;height:auto;border-radius:22px}
.phone .screen.live .pg{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;object-fit:initial;border-radius:0;opacity:0;transform-origin:50% 30%;animation:pg-run var(--secs) linear infinite both}
.phone .screen.live .nv{position:absolute;left:0;bottom:0;width:100%;height:auto;border-radius:0;opacity:0;z-index:2;animation:nv-run var(--secs) linear infinite both}
@keyframes pg-run{
 0%{opacity:0;transform:translateY(0) scale(1.035);animation-timing-function:ease-out}
 2.083%{opacity:1;transform:translateY(0) scale(1)}
 4.167%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.45,0,.25,1)}
 15%{opacity:1;transform:translateY(calc(var(--sy) * -1)) scale(1)}
 18.75%{opacity:1;transform:translateY(calc(var(--sy) * -1)) scale(1);animation-timing-function:ease-in}
 22.083%{opacity:0;transform:translateY(calc(var(--sy) * -1)) scale(.985)}
 100%{opacity:0;transform:translateY(calc(var(--sy) * -1)) scale(.985)}}
@keyframes nv-run{0%{opacity:0}1.04%{opacity:1}20%{opacity:1}21.04%{opacity:0}100%{opacity:0}}
.tap{position:absolute;width:0;height:0;z-index:4;pointer-events:none}
.tap::before,.tap::after{content:"";position:absolute;border-radius:50%;left:0;top:0;opacity:0;transform:translate(-50%,-50%) scale(.2);animation-duration:var(--secs);animation-timing-function:ease-out;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:inherit}
.tap::before{width:26px;height:26px;background:rgba(255,255,255,.6);box-shadow:0 0 14px rgba(212,181,104,.55);animation-name:tap-dot}
.tap::after{width:62px;height:62px;border:2px solid rgba(212,181,104,.95);animation-name:tap-ring}
@keyframes tap-dot{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}.833%{opacity:1;transform:translate(-50%,-50%) scale(1)}2.29%{opacity:1;transform:translate(-50%,-50%) scale(.82)}3.33%,100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
@keyframes tap-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}.833%{opacity:.95}3.75%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.phones.cycle .caps{position:relative;height:1.4em;width:100%;margin:0;text-align:center}
.phones.cycle .cap{position:absolute;inset:0;opacity:0;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink);animation:cap-run var(--secs) linear infinite both}
@keyframes cap-run{0%{opacity:0;transform:translateY(4px)}2.083%{opacity:1;transform:none}18.75%{opacity:1}22.083%{opacity:0}100%{opacity:0}}
.phones.cycle .samp{margin:0;font-size:.72rem;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){.phone .screen.live .pg,.phone .screen.live .nv,.phones.cycle .cap{animation:none}.tap{display:none}.phone .screen.live .pg:first-of-type,.phone .screen.live .nv:first-of-type,.phones.cycle .cap:first-child{opacity:1}}
/* Stay page: the date bar sits in normal flow (it used to hang half below its box and cover the booking steps) */
.rbhold .rb{position:relative;left:auto;right:auto;bottom:auto;transform:none;width:100%}