/*
 * Immersive (DRI-678): dark and cinematic. Bricolage Grotesque for display,
 * DM Sans for text, unless the account uses its brand font. The brand colour
 * lights the actions and the status tag; --brand-hi is a lighter cut of it
 * for icons and links on the dark ground.
 */
:root {
  --night: #0d1116; --panel: #151b22; --raise: #1d252e; --text: #edf0f3; --muted: #9aa4ae; --line: rgba(237,240,243,.12);
  --brand-hi: color-mix(in oklab, var(--brand) 70%, #ffffff);
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1280px;
  color-scheme: dark;
}
body { background: var(--night); color: var(--text); font: 17px/1.6 var(--body); }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--display); font-weight: 700; }
:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid var(--line); background: rgba(13,17,22,.35); backdrop-filter: blur(12px); cursor: pointer; color: var(--text); }
.pill-brand { background: var(--brand); color: var(--on-brand); border-color: transparent; backdrop-filter: none; }

.hero { position: relative; min-height: min(86svh, 900px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-img { position: absolute; inset: 0; z-index: -2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; animation: pp-drift 16s ease-out both; }
@keyframes pp-drift { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,17,22,.55) 0%, rgba(13,17,22,0) 22%, rgba(13,17,22,0) 42%, rgba(13,17,22,.86) 82%, var(--night) 100%); }
.hero-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 20px; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.hero-top .pill { padding: 9px 16px; }
.hero-body { display: grid; gap: 18px; padding-block: 120px 40px; width: 100%; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(13,17,22,.45); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.tag-status { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.tag--sold, .tag--leased { background: var(--text); color: var(--night); }
.hero h1 { font-size: clamp(38px, 6.6vw, 96px); line-height: .9; letter-spacing: -.035em; font-weight: 800; overflow-wrap: anywhere; }
.hero .sub { font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; color: rgba(237,240,243,.82); margin: -4px 0 0; }
.hero-row { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.hero-price small { display: block; color: var(--muted); font-size: 14px; }
.hero-price strong { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-price a { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.play { width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--night); display: grid; place-items: center; }
.play svg { width: 12px; height: 12px; margin-left: 2px; }

.facts { display: grid; grid-template-columns: repeat(var(--facts, 5), minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.facts > div { display: flex; align-items: center; gap: 14px; padding: 22px 24px; min-width: 0; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts svg { width: 26px; height: 26px; color: var(--brand-hi); }
.facts .f { display: grid; gap: 4px; margin: 0; }
.facts dt { order: 2; font-size: 13px; color: var(--muted); }
.facts dd { order: 1; margin: 0; font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.facts dd small { font-size: 15px; font-weight: 500; margin-left: 2px; }
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts > div { padding: 16px; gap: 10px; }
  .facts > div:nth-child(4) { border-left: 0; }
  .facts > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .facts svg { display: none; }
  .facts dd { font-size: 24px; }
}

.intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; padding-block: 96px; }
.intro h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -.025em; }
.intro p { margin: 0 0 1em; color: rgba(237,240,243,.84); overflow-wrap: anywhere; }
.intro .attach { color: var(--brand-hi); font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; gap: 24px; padding-block: 64px; } }

.bleed img { height: min(78svh, 760px); }
@media (max-width: 640px) { .bleed img { height: auto; aspect-ratio: 4 / 3.4; } }

.rooms { padding-block: 96px 40px; display: grid; gap: 28px; }
.rooms-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; width: 100%; }
/* Arrows from tablet width up, "Swipe" on phones. By width, not (hover):
   touch laptops and headless browsers answer the hover query wrongly. The
   arrows are hidden by property-page.js when every photo already fits. */
.swipe-hint { display: none; }
.strip-nav { display: flex; gap: 10px; }
.strip-nav[hidden] { display: none; }
.strip-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  display: grid; place-items: center; padding: 0; cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.strip-btn:hover:not(:disabled) { background: var(--raise); }
.strip-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 767px) { .strip-nav { display: none; } .swipe-hint { display: inline; } }
.rooms h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.02em; line-height: 1.05; }
.strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  scroll-padding-left: max(20px, env(safe-area-inset-left, 0px)); scrollbar-width: thin; scrollbar-color: var(--raise) transparent; }
.strip .pp-photo-btn { flex: 0 0 min(78vw, 400px); aspect-ratio: 4 / 5; scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: var(--panel); }
.strip img { transition: transform .6s ease; }
.strip .pp-photo-btn:hover img { transform: scale(1.04); }
@media (min-width: 1320px) { .strip { padding-left: calc((100vw - var(--max)) / 2 + 20px); scroll-padding-left: calc((100vw - var(--max)) / 2 + 20px); } }

.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; padding-block: 56px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.box h2 { font-size: 26px; letter-spacing: -.015em; }
.features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.features li { padding: 8px 14px; border-radius: 999px; background: var(--raise); font-size: 15px; }
.opens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opens li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--raise); }
.opens b { font-family: var(--display); font-weight: 700; font-size: 18px; }
.opens span { color: var(--muted); font-variant-numeric: tabular-nums; }
.plan { grid-column: 1 / -1; }
.plan .sheet { background: #ffffff; border-radius: 14px; padding: 16px; }
.plan img { width: 100%; }
@media (max-width: 860px) { .detail { padding-block: 32px; } .box { padding: 22px; border-radius: 18px; } }

.location { padding-block: 24px 96px; display: grid; gap: 16px; }
.location h2 { font-size: 26px; }
.location .map { height: 380px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.location p { margin: 0; color: var(--muted); }
@media (max-width: 640px) { .location .map { height: 300px; } }

.enquire { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; padding-bottom: 96px; }
.portrait { position: relative; border-radius: 22px; overflow: hidden; min-height: 460px; background: var(--panel); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.portrait div { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; background: linear-gradient(transparent, rgba(13,17,22,.92)); display: grid; gap: 2px; }
.portrait b { font-family: var(--display); font-size: 28px; font-weight: 700; }
.portrait span { color: rgba(237,240,243,.8); overflow-wrap: anywhere; }
.portrait a { font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; text-decoration: none; width: fit-content; }
.formbox { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 40px; display: grid; gap: 24px; align-content: start; min-width: 0; }
.formbox h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.02em; line-height: 1.05; }
.pp-field { font-size: 14px; color: var(--muted); font-weight: 500; }
.pp-field input, .pp-field textarea { color: var(--text); background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; }
.pp-field input:focus, .pp-field textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.pp-error { color: #ff8a80; }
.pp-send { justify-self: stretch; border-radius: 999px; padding: 15px; font-size: 16px; font-weight: 600; background: var(--brand); color: var(--on-brand); border: 0; }
.pp-sent { background: var(--raise); color: var(--text); }
@media (max-width: 860px) {
  .enquire { grid-template-columns: 1fr; padding-bottom: 56px; }
  .portrait { min-height: 0; aspect-ratio: 4 / 3.6; }
  .formbox { padding: 24px; }
}

footer { border-top: 1px solid var(--line); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.actions { display: none; }
@media (max-width: 860px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .actions { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(13,17,22,.82); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .actions .pill-brand { flex: 1; }
  .actions .pill { padding: 13px 18px; }
}