/*
Theme Name: PRIVÉ
Theme URI: https://prive.uk
Author: PRIVÉ
Author URI: https://prive.uk
Description: A luxury rental residence theme — rental living, private club refinement.
Version: 1.0.107
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
License URI: https://prive.uk
Text Domain: prive
*/

/* ═══════════════════════════════════════════════════════════════
   PRIVÉ — WordPress Theme Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Font Imports ─────────────────────────────────────────────── */
/* Self-hosted fonts — place .woff2 and .woff files in the /fonts/ folder */

@font-face {
  font-family: 'EngraversGothicBold W08 Rg';
  src: url('fonts/engravers-gothic-bold-w08-rg.woff2') format('woff2'),
       url('fonts/engravers-gothic-bold-w08-rg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'EngraversGothic BT W08 Regular';
  src: url('fonts/engravers-gothic-bt-w08-regular.woff2') format('woff2'),
       url('fonts/engravers-gothic-bt-w08-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Canela-Light';
  src: url('fonts/canela-light.woff2') format('woff2'),
       url('fonts/canela-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Canela-Regular';
  src: url('fonts/canela-regular.woff2') format('woff2'),
       url('fonts/canela-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/noto-sans-sc-400.woff2') format('woff2'),
       url('fonts/noto-sans-sc-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/noto-sans-sc-500.woff2') format('woff2'),
       url('fonts/noto-sans-sc-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Noto Serif SC';
  src: url('fonts/noto-serif-sc-300.woff2') format('woff2'),
       url('fonts/noto-serif-sc-300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
  --font-headline: 'EngraversGothicBold W08 Rg', 'Oswald', sans-serif;
  --font-location-regular: 'EngraversGothic BT W08 Regular', 'Oswald', sans-serif;
  --font-body: 'Canela-Light', 'Canela Light', 'Cormorant Garamond', serif;
  --font-body-medium: 'Canela-Regular', 'Canela Regular', 'Cormorant Garamond', serif;
  --font-body-zh: 'Noto Serif SC', 'Canela-Light', serif;
  --font-chinese-sans: 'Noto Sans SC', sans-serif;
  --font-chinese-serif: 'Noto Serif SC', serif;

  --color-bg: #FAFBF5;
  --color-parchment: #F5F1EB;
  --color-dark: #1C2226;
  --color-primary: #2E4755;
  --color-body: #4A5F6A;
  --color-secondary: #4A5F6A;
  --color-muted: #707F87;
  --color-accent: #A38A74;
  --color-placeholder: #DDE0DA;

  --max-w: 1600px;
  --font-size: 16px;
  --utility-h: 48px;
  --topbar-h: 88px;
}

@media (min-width: 768px) {
  :root { --font-size: 17.6px; }
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: light;
  font-size: var(--font-size);
  /* Override WordPress core's scroll-behavior: smooth (block-library/style.css)
     which causes freeze loops with programmatic scrollTo + scroll handlers */
  scroll-behavior: auto !important;
}

body {
  background: var(--color-dark);
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
a, button, summary, .filter-chip, .enquiry-chip {
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--color-accent);
}

/* Hidden until keyboard focus; visible state reuses the ghost button. */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: env(safe-area-inset-left, 0px);
  z-index: 200;
  background: var(--color-bg);
}

img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
select { font: inherit; }
textarea { font: inherit; }
input { font: inherit; }

/* ── Typography Utilities ─────────────────────────────────────── */
.font-hl { font-family: var(--font-headline); }
.font-body { font-family: var(--font-body); letter-spacing: 0.035em; }
.font-body-medium { font-family: var(--font-body-medium); letter-spacing: 0.035em; }
.font-zh-hl { font-family: 'EngraversGothicBold W08 Rg', 'Oswald', 'Noto Sans SC', sans-serif; font-weight: 500; }
.font-zh-body { font-family: 'Canela-Light', 'Canela Light', 'Noto Serif SC', serif; font-weight: 300; letter-spacing: 0.06em; }

.uppercase { text-transform: uppercase; }

/* ── Layout Utilities ─────────────────────────────────────────── */
.pad {
  padding-left: 32px;
  padding-right: 32px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .pad { padding-left: 48px; padding-right: 48px; }
}

@media (min-width: 1280px) {
  .pad { padding-left: 64px; padding-right: 64px; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.items-end { align-items: end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-7 { gap: 28px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }
.gap-16 { gap: 64px; }
.gap-20 { gap: 80px; }
.shrink-0 { flex-shrink: 0; }

.grid { display: grid; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:flex-row { flex-direction: row; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-5 { grid-column: span 5; }
  .lg\:col-span-6 { grid-column: span 6; }
  .lg\:col-span-7 { grid-column: span 7; }
  .lg\:col-span-8 { grid-column: span 8; }
  .lg\:col-start-8 { grid-column-start: 8; }
  .lg\:col-start-9 { grid-column-start: 9; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:items-end { align-items: end; }
  .lg\:gap-28 { gap: 112px; }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Spacing ──────────────────────────────────────────────────── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.text-center { text-align: center; }
.select-none { user-select: none; }
.cursor-pointer { cursor: pointer; }
.cursor-zoom-in { cursor: zoom-in; }

.border-t { border-top: 1px solid rgba(46,71,85,0.1); }
.border-b { border-bottom: 1px solid rgba(46,71,85,0.1); }
.border { border: 1px solid rgba(46,71,85,0.08); }

.mt-auto { margin-top: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Page Wrapper ─────────────────────────────────────────────── */
.page-wrap {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.page-wrap > main { flex: 1; }
.page-wrap > main.has-topbar { padding-top: 136px; }

/* ═══════════════════════════════════════════════════════════════
   UTILITY BAR
   ═══════════════════════════════════════════════════════════════ */
.utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: black;
  display: flex;
  align-items: center;
  height: calc(var(--utility-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.utility-bar.hidden-bar { transform: translateY(-100%); }

.utility-bar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}

@media (min-width: 1024px) { .utility-bar__inner { padding: 0 48px; } }
@media (min-width: 1280px) { .utility-bar__inner { padding: 0 64px; } }

.utility-label {
  font-family: var(--font-headline);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.utility-label-zh {
  font-family: var(--font-chinese-sans, var(--font-headline));
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em;
  position: relative;
  top: 2.5px;
}

.utility-bar a,
.utility-bar button { color: white; transition: color 0.2s; }
.utility-bar a:hover,
.utility-bar button:hover { color: rgba(255,255,255,0.7); }

.utility-bar__promo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.utility-bar__promo:hover { color: white; }
@media (min-width: 768px) { .utility-bar__promo { display: flex; } }

.utility-bar__promo .line {
  width: 16px;
  height: 1px;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

.utility-bar__right { display: flex; align-items: center; gap: 20px; }
.utility-bar__divider { width: 1px; height: 14px; background: rgba(255,255,255,0.25); }

.utility-bar__signin {
  position: relative;
  align-self: stretch;
}

.utility-bar__signin::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.utility-bar__signin.is-active::after { transform: scaleX(1); }

/* Language dropdown */
.lang-dropdown { position: relative; }

.lang-dropdown__menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: black;
  border: 1px solid rgba(255,255,255,0.15);
  min-width: 148px;
  padding: 4px 0;
  display: none;
  z-index: 60;
}

.lang-dropdown__menu.open { display: block; }

.lang-dropdown__option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  text-align: left;
  color: white;
  white-space: nowrap;
  transition: color 0.15s;
}
.lang-dropdown__option:hover { color: rgba(255,255,255,0.7); }

/* Compact language label shown on mobile (globe + ENG / 中) */
.lang-abbr {
  display: none;
  font-family: var(--font-headline);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Mobile utility bar: icons only; language keeps globe + compact label.
   Dropdown-menu text is preserved — only the bar-level labels are hidden. */
@media (max-width: 767px) {
  .utility-bar__inner > a:not(.utility-bar__back) .utility-label,
  .utility-bar__right > a .utility-label,
  .utility-bar__right > button .utility-label,
  .lang-dropdown__trigger .utility-label { display: none; }
  .lang-dropdown__trigger .lang-abbr { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════
   MyPRIVÉ SIGN-IN WINDOW
   ═══════════════════════════════════════════════════════════════ */
body.signin-dialog-open { overflow: hidden; }

.signin-dialog {
  overscroll-behavior: contain;
  position: fixed;
  inset: 0;
  width: 920px;
  height: 600px;
  max-width: calc(100vw - 64px);
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--color-primary);
  background: #fff;
  border: 0;
  border-radius: 0;
}

.signin-dialog[open] {
  display: block;
  animation: signin-dialog-fade 0.18s ease-out both;
}

.signin-dialog::backdrop {
  background: rgba(28, 34, 38, 0.62);
  animation: signin-dialog-backdrop-fade 0.18s ease-out both;
}

.signin-dialog__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.signin-dialog__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.signin-dialog__frame-wrap {
  position: relative;
  min-width: 0;
  background: #fff;
}

.signin-dialog__frame {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 0;
}

.signin-dialog__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  color: var(--color-body);
  background: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
}

.signin-dialog__fallback[hidden] { display: none; }

.signin-dialog__retry {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.signin-dialog__invitation {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 48px 56px;
  background: var(--color-parchment);
  border-left: 1px solid rgba(46, 71, 85, 0.16);
}

.signin-dialog__close {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 22px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--color-primary);
  font-family: var(--font-location-regular);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}

.signin-dialog__close:hover { color: var(--color-accent); }

.signin-dialog__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 320px;
}

.signin-dialog__heading {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.signin-dialog__heading span { letter-spacing: 0; }

.signin-dialog__body {
  margin-top: 26px;
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0;
}

.signin-dialog__actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 28px;
  margin-top: 38px;
}

.signin-dialog__residences {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-transform: none;
  text-underline-offset: 4px;
}

.signin-dialog__membership {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

@media (min-width: 768px) {
  .signin-dialog__invitation {
    position: relative;
    padding: 0 56px;
  }

  .signin-dialog__copy {
    position: absolute;
    top: 124px;
    left: 56px;
    display: flex;
    flex: none;
    width: calc(100% - 112px);
  }

  .signin-dialog__membership {
    position: absolute;
    top: 300px;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
  }
}

.skip-link:focus-visible,
.topbar__hamburger:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.lightbox button:focus-visible,
#hero-playback:focus-visible,
.signin-dialog button:focus-visible,
.signin-dialog a:focus-visible,
.signin-dialog iframe:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
}

@keyframes signin-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes signin-dialog-backdrop-fade {
  from { background: rgba(28, 34, 38, 0); }
  to { background: rgba(28, 34, 38, 0.62); }
}

@media (max-width: 767px) {
  .signin-dialog {
    inset: calc(var(--utility-h) + env(safe-area-inset-top, 0px)) 0 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    width: 100%;
    height: calc(100vh - var(--utility-h) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--utility-h) - env(safe-area-inset-top, 0px));
    max-width: none;
    max-height: none;
    margin: 0;
  }

  .signin-dialog__inner {
    display: block;
    height: 100%;
    overflow: hidden;
  }

  .signin-dialog__frame-wrap,
  .signin-dialog__frame {
    width: 100%;
    height: 100%;
  }

  .signin-dialog__invitation {
    display: none;
  }

  .signin-dialog__close {
    top: 10px;
    right: calc(10px + env(safe-area-inset-right, 0px));
    background: rgba(255, 255, 255, 0.88);
  }
}


/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Start below the utility bar (48px) before JS takes over.
     The transform is overridden by scripts.js on scroll. */
  transform: translateY(calc(var(--utility-h) + env(safe-area-inset-top, 0px)));
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
  will-change: transform;
}

.topbar.solid {
  background: var(--color-bg);
  border-bottom: 1px solid rgba(46,71,85,0.1);
}

.topbar.transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
}

.topbar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: var(--topbar-h);
}

@media (min-width: 1024px) { .topbar__inner { padding: 0 48px; } }
@media (min-width: 1280px) { .topbar__inner { padding: 0 64px; } }

.logo {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  transition: color 0.3s;
}

.topbar.solid .logo { color: var(--color-primary); }
.topbar.transparent .logo { color: white; }

.topbar__nav { display: none; align-items: center; gap: 32px; }
@media (min-width: 1024px) { .topbar__nav { display: flex; } }

.topbar__nav a {
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.topbar.solid .topbar__nav a { color: var(--color-muted); }
.topbar.solid .topbar__nav a:hover,
.topbar.solid .topbar__nav a.active { color: var(--color-primary); }
.topbar.transparent .topbar__nav a { color: rgba(255,255,255,0.7); }
.topbar.transparent .topbar__nav a:hover,
.topbar.transparent .topbar__nav a.active { color: white; }

/* External nav link (House) — arrow icon inline */
.topbar__nav-external {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.mobile-menu__external {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.topbar__hamburger {
  display: block;
  padding: 8px;
  margin-right: -4px;
  transition: color 0.3s;
}
@media (min-width: 1024px) { .topbar__hamburger { display: none; } }

.topbar.solid .topbar__hamburger { color: var(--color-primary); }
.topbar.transparent .topbar__hamburger { color: white; }

.mobile-menu {
  overscroll-behavior: contain;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--color-bg);
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.mobile-menu.open { opacity: 1; visibility: visible; }

@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

.mobile-menu nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 161px 32px 0;
}

.mobile-menu nav a {
  text-transform: uppercase;
  padding: 16px 0;
  font-family: var(--font-headline);
  font-size: clamp(24px, 2.8vw, 42px);
  letter-spacing: 0.2em;
  color: var(--color-muted);
  transition: color 0.2s;
}

.mobile-menu nav a:hover,
.mobile-menu nav a.active { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--color-dark);
  color: white;
  padding: 56px 0;
}

.footer__logo {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  margin-bottom: 32px;
}

a.footer__logo {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
a.footer__logo:hover { color: rgba(255,255,255,0.7); }

.footer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 1024px) {
  .footer__body { grid-template-columns: repeat(12, 1fr); gap: 32px; }
  .footer__left { grid-column: span 5; }
  .footer__right { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-end; }
}

.footer__desc {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 19px;
  color: rgba(255,255,255,0.65);
  line-height: 1.85;
  max-width: 28rem;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.footer__links a {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.footer__links a:hover { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.4); }

.footer__links-divider { color: rgba(255,255,255,0.15); }

.footer__hours {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 16px;
  color: rgba(255,255,255,0.45);
  line-height: 1.85;
}

@media (min-width: 1024px) { .footer__hours { text-align: right; } }

.footer__socials {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.footer__socials a {
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}

.footer__socials a:hover { color: white; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
}

@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

.footer__copyright {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

@media (min-width: 768px) { .footer__copyright { order: -1; } }

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 768px) {
  .footer__legal { flex-direction: row; align-items: center; gap: 24px; }
}

.footer__legal a {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  transition: color 0.2s;
}

.footer__legal a:hover { color: rgba(255,255,255,0.6); }

.footer__legal button {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  transition: color 0.2s;
}

.footer__legal button:hover { color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════════════════════════════════════
   COMMON SECTION STYLES
   ═══════════════════════════════════════════════════════════════ */
.section-label {
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.h1-style {
  font-family: var(--font-headline);
  font-size: clamp(24px, 2.8vw, 42px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  line-height: 1.15;
}

.h2-style {
  font-family: var(--font-headline);
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.2;
}

.h3-style {
  font-family: var(--font-headline);
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.35;
}

.body-text {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 19px;
  color: var(--color-body);
  line-height: 1.9;
}

.body-text-sm {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 16px;
  color: var(--color-body);
  line-height: 1.85;
}

/* Ghost Button */
.ghost-btn {
  display: block;
  width: 100%;
  text-align: center;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 12px 40px;
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  text-decoration: none;
}

@media (min-width: 640px) {
  .ghost-btn { display: inline-block; width: auto; }
}

.ghost-btn:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

.ghost-btn--white {
  border-color: rgba(255,255,255,0.7);
  color: white;
}

.ghost-btn--white:hover {
  background: white;
  color: var(--color-primary);
}

.ghost-btn--light {
  border-color: rgba(46,71,85,0.3);
  color: rgba(46,71,85,0.7);
}

.ghost-btn--light:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   RESIDENCE CARD
   ═══════════════════════════════════════════════════════════════ */
.residence-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid rgba(46,71,85,0.08);
  transition: border-color 0.3s;
}

.residence-card:hover { border-color: rgba(46,71,85,0.2); }

.residence-card__img {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.residence-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.residence-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px;
}

@media (min-width: 1024px) { .residence-card__body { padding: 32px; } }

.residence-card__location { margin-bottom: 16px; }

.residence-card__location p {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
}

.residence-card__location p:first-child { color: var(--color-muted); }
.residence-card__location p:last-child { color: rgba(112,127,135,0.6); margin-top: 3px; }

.residence-card__name {
  font-family: var(--font-headline);
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 16px;
}

.residence-card__desc {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 16px;
  color: var(--color-body);
  line-height: 1.85;
  margin-bottom: 24px;
}

.residence-card__specs {
  padding-top: 20px;
  margin-top: auto;
  border-top: 1px solid rgba(46,71,85,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.residence-card__specs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.residence-card__spec-label {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2px;
}

.residence-card__spec-value {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 16px;
  color: var(--color-primary);
}

.residence-card__cta { margin-top: 28px; }

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: black;
}

@media (max-width: 1023px) {
  /* On mobile, extend hero slightly past viewport for scroll-reveal feel.
     Uses svh (stable viewport) to avoid resize loops from address bar. */
  .hero { height: 115svh; }
}

.hero img.hero__bg,
.hero video.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.65));
}

.hero__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  align-items: flex-start;
  padding-bottom: calc(15svh + 4rem);
}

@media (min-width: 1024px) { .hero__content { padding-bottom: 96px; } }

/* Reuse the lightbox text button in the gap below the hero CTA. */
#hero-playback { top: auto; bottom: 12px; z-index: 2; }
#hero-playback[hidden] { display: none; }

.hero__tagline {
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
}

.hero__title {
  font-family: var(--font-headline);
  font-size: clamp(24px, 4.5vw, 42px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: white;
  line-height: 1.15;
  margin-bottom: 40px;
}

@media (min-width: 1024px) { .hero__title { letter-spacing: 0.38em; } }

/* Landscape mobile fix — prevents hero text overlap when viewport is wide but short. */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
  .hero { height: 100svh; }
  .hero__content { padding-bottom: 2rem; }
  .hero__tagline {
    font-size: 11px;
    letter-spacing: 0.25em;
    margin-bottom: 8px;
  }
  .hero__title {
    font-size: clamp(18px, 5.5vh, 30px);
    letter-spacing: 0.18em;
    line-height: 1.25;
    margin-bottom: 20px;
  }
}

.hero__sub {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 19px;
  color: rgba(255,255,255,0.7);
  line-height: 1.9;
  max-width: 30rem;
  margin-bottom: 32px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO
   ═══════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  padding-top: calc(var(--utility-h) + var(--topbar-h) + 32px);
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  .page-hero { min-height: 420px; padding-top: calc(var(--utility-h) + var(--topbar-h) + 48px); padding-bottom: 64px; }
}

.page-hero img.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__overlay { position: absolute; inset: 0; }

.page-hero__content { position: relative; text-align: left; width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   FILTER CHIPS
   ═══════════════════════════════════════════════════════════════ */
.filter-chip {
  padding: 12px 20px;
  border: 1px solid rgba(46,71,85,0.2);
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.filter-chip:hover {
  border-color: rgba(46,71,85,0.5);
  color: var(--color-primary);
}

.filter-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════ */
.accordion-item { border-bottom: 1px solid rgba(46,71,85,0.12); }

/* Hide default <details> marker / triangle */
.accordion-item > summary { list-style: none; }
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item > summary::marker { display: none; content: ''; }

.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
}

.accordion-item__trigger:hover .accordion-item__q { color: var(--color-body); }

.accordion-item__q {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 19px;
  color: var(--color-primary);
  line-height: 1.5;
  transition: color 0.2s;
  /* Reset h3 defaults so the semantic tag looks identical to the old span */
  margin: 0;
  padding: 0;
  font-weight: inherit;
  display: inline;
}

.accordion-item__icon {
  flex-shrink: 0;
  margin-top: 6px;
  color: var(--color-muted);
  transition: transform 0.3s;
}

.accordion-item[open] > .accordion-item__trigger .accordion-item__icon { transform: rotate(45deg); }

.accordion-item__body {
  overflow: hidden;
}

/* Native details controls collapsed layout; fade the answer at the same
   duration/easing, with no animated height or arbitrary clipping limit. */
.accordion-item[open] > .accordion-item__body {
  animation: accordion-answer-fade 0.3s ease-in-out;
}
@keyframes accordion-answer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.accordion-item__answer {
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 19px;
  color: var(--color-body);
  line-height: 1.9;
  padding-bottom: 28px;
}

/* FAQ category sections: hidden class keeps content in DOM for crawlers */
.faq-section--hidden {
  display: none;
}

/* FAQ SIDEBAR NAV */
.faq-nav button {
  display: block;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 6px 0;
  font-family: var(--font-headline);
  font-size: 14px;
  color: var(--color-muted);
  transition: color 0.2s;
}

.faq-nav button:hover { color: var(--color-body); }
.faq-nav button.active { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(46,71,85,0.25);
  color: var(--color-primary);
  padding: 16px 0;
  outline: none;
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 19px;
  transition: border-color 0.2s;
}

.form-input::placeholder { color: rgba(112,127,135,0.6); }
.form-input:focus { border-color: var(--color-primary); }

/* 1.0.20: two-column field row (First Name + Last Name). Stacks on mobile. */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.form-select {
  width: 100%;
  background-color: var(--color-bg);
  border: none;
  border-bottom: 1px solid rgba(46,71,85,0.25);
  color: var(--color-primary);
  padding: 16px 0;
  outline: none;
  font-family: var(--font-body);
  letter-spacing: 0.035em;
  font-size: 19px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.form-select option {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.form-select:focus { border-color: var(--color-primary); }

.enquiry-chip {
  width: 100%;
  padding: 12px 24px;
  border: 1px solid rgba(46,71,85,0.25);
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-body);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

@media (min-width: 640px) { .enquiry-chip { width: auto; } }

.enquiry-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Enquiry controls reuse the sign-in focus outline and the chip hover colours. */
#viewing-checkbox-wrap input:focus-visible + span,
.enquiry-chip:focus-visible,
.calendar-day:focus-visible,
.calendar-slot:focus-visible,
.period-btn:focus-visible,
#datetime-wrap button:focus-visible,
#contact-form button:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
}

.calendar-day {
  border: none;
  color: var(--calendar-color);
}
.calendar-slot,
.period-btn {
  border-color: var(--calendar-border);
  color: var(--calendar-color);
}
/* Borderless days use the existing primary-button border on hover. */
.calendar-day:not(:disabled):not([aria-pressed="true"]):hover {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.calendar-slot:not(:disabled):not([aria-pressed="true"]):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.period-btn:not(:disabled):not([aria-pressed="true"]):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.enquiry-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: var(--color-primary);
  color: var(--color-bg);
  border: 1px solid var(--color-primary);
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.cta-primary:hover {
  background: transparent;
  color: var(--color-primary);
}
.cta-primary[disabled] { cursor: default; }

.optional-tag {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-muted);
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */
.lightbox {
  overscroll-behavior: contain;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.open { display: flex; }

.lightbox__close {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top, 0px));
  right: calc(32px + env(safe-area-inset-right, 0px));
  color: rgba(255,255,255,0.7);
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.lightbox__close:hover { color: white; }

.lightbox__counter {
  position: absolute;
  top: calc(28px + env(safe-area-inset-top, 0px));
  left: calc(32px + env(safe-area-inset-left, 0px));
  color: rgba(255,255,255,0.4);
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.2em;
}

.lightbox__nav {
  position: absolute;
  top: calc(50% + env(safe-area-inset-top, 0px) / 2);
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  padding: 16px;
  transition: color 0.2s;
}

.lightbox__nav:hover { color: white; }
.lightbox__nav--prev { left: calc(24px + env(safe-area-inset-left, 0px)); }
.lightbox__nav--next { right: calc(24px + env(safe-area-inset-right, 0px)); }

/* The old rule was max-width:56rem with 80px of side padding, which capped the
   opened image at ~736px of actual picture on ANY screen - on a 1900px display
   it sat as a small panel in a field of black (Jason, 1.0.87). The nav arrows
   are absolutely positioned at the viewport edges, so they never needed that
   padding to clear the image. Size to the viewport instead and let the inner
   img keep object-fit:contain, which handles portrait and landscape alike. */
.lightbox__img {
  width: min(88vw, 1680px);
  height: min(86vh, 1060px);
}

.lightbox__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE PLACEHOLDER
   ═══════════════════════════════════════════════════════════════ */
.img-placeholder {
  background: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY STRIP
   ═══════════════════════════════════════════════════════════════ */
.gallery-strip {
  display: flex;
  overflow-x: auto;
  gap: 3px;
  height: clamp(280px, 28vw, 420px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-strip::-webkit-scrollbar { display: none; }

.gallery-strip__item {
  flex: none;
  cursor: zoom-in;
  height: 100%;
  aspect-ratio: 4/3;
}

/* cover, not contain (Jason, 1.0.90): the STRIP crops to fill its tile, while
   the stored file stays uncropped at its native aspect. Those are separate
   things and 1.0.89 conflated them - fixing the file by letterboxing the tile
   left every photograph floating in a dark gap. The lightbox sets contain on
   its own img, so opening a photo still shows the whole frame. */
.gallery-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-strip__item--video { cursor: default; }

.gallery-video__facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--color-dark);
  cursor: pointer;
}

.gallery-video__facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.16);
}

.gallery-strip__item--photo:focus-visible,
.gallery-video__facade:focus-visible {
  outline: 3px solid white;
  outline-offset: -3px;
}

.gallery-video__play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(46, 71, 85, 0.78);
  transform: translate(-50%, -50%);
}

.gallery-video__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 53%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid white;
  transform: translate(-50%, -50%);
}

/* The film opens in the lightbox, not in the strip cell (Jason, 1.0.87): a
   4/3 cell ~420px tall is no way to watch a film. In video mode the counter
   and the prev/next arrows are hidden - there is one film, nothing to page
   through - and closing DESTROYS the iframe, which is what stops the audio. */
.lightbox__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox--video .lightbox__nav,
.lightbox--video .lightbox__counter { display: none; }

/* ═══════════════════════════════════════════════════════════════
   LOCATION DISTANCES (residence detail)
   On mobile the grid collapses to 2 columns; items in the second
   row get a top border to separate them visually.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .location-distances > div:nth-child(n+3) {
    border-top: 1px solid rgba(46,71,85,0.1);
  }
  /* In the 2-col mobile layout, odd items (1st column) must not
     carry the inline border-left that the PHP loop adds. */
  .location-distances > div:nth-child(odd) {
    border-left: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COLLABORATION PAGE
   ═══════════════════════════════════════════════════════════════ */
.collab-video {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  background: var(--color-dark);
  overflow: hidden;
  cursor: pointer;
}

.collab-video--inline {
  cursor: default;
  background: #000;
}
.collab-video--inline video {
  display: block;
}

.collab-video__grid {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(var(--color-bg) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-bg) 1px, transparent 1px);
  background-size: 80px 80px;
}

.collab-video__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.5s;
}

@media (min-width: 1024px) { .collab-video__play { width: 80px; height: 80px; } }

.collab-video:hover .collab-video__play { border-color: rgba(255,255,255,0.6); }

/* Collaboration hero responsive overrides */
@media (min-width: 1024px) {
  .collab-hero-section {
    padding-top: 160px !important;
    padding-bottom: 80px !important;
    min-height: 85svh !important;
  }
  .collab-hero-inner { padding-top: 64px !important; }
  .collab-video-wrap { margin-top: 80px !important; }
}

/* Collaboration content blocks — use simple 2-col grid to avoid
   the 12-col + large-gap overflow that breaks at 1024-1280px. */
@media (min-width: 1024px) {
  .collab-block {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 112px !important;
    padding: 112px 0 !important;
  }
  .collab-block--reverse {
    direction: rtl;
  }
  .collab-block--reverse > * {
    direction: ltr;
  }
}

/* Collaboration CTA responsive overrides */
@media (min-width: 1024px) {
  .collab-cta-section { padding: 80px 0 !important; }
  .collab-cta {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════════ */
.required-star { color: var(--color-accent); margin-left: 2px; }

/* ── Leaflet Map z-index containment ─────────────────────────── */
#residence-map,
#contact-map {
  position: relative;
  z-index: 0;
}

#residence-map .leaflet-pane,
#contact-map .leaflet-pane,
#residence-map .leaflet-control,
#contact-map .leaflet-control {
  z-index: auto;
}

#residence-map .leaflet-top,
#contact-map .leaflet-top,
#residence-map .leaflet-bottom,
#contact-map .leaflet-bottom {
  z-index: 10;
}

.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-5-4 { aspect-ratio: 5/4; }
.aspect-video { aspect-ratio: 16/9; }

.max-w-3xl { max-width: 48rem; }
.max-w-xl { max-width: 36rem; }
.max-w-md { max-width: 28rem; }
.max-w-sm { max-width: 24rem; }
.max-w-2xl { max-width: 42rem; }

.hidden { display: none; }

@media (max-width: 1023px) {
  .lg-only { display: none; }
}

@media (min-width: 1024px) {
  .mobile-only { display: none; }
}

@media (max-width: 767px) {
  .md-up { display: none; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .utility-bar, .topbar, .mobile-menu, .footer { display: none; }
  .page-wrap > main.has-topbar { padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.navigation.pagination {
  margin-top: 48px;
  text-align: center;
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid rgba(46,71,85,0.15);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.navigation.pagination .page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.navigation.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

/* (cookie consent panel removed — handled by CookieYes plugin) */

/* ==========================================================================
   Cookie consent banner - PRIVÉ overrides  [230-MEAS-015]
   --------------------------------------------------------------------------
   CookieYes ships a stock banner that, on mobile, eats half the viewport and
   buries the hero, the price and the CTA behind three stacked full-width
   buttons. Consent is refused or ignored by ~2 in 3 paid visitors, which is
   why Google spend has been unmeasurable (230-MEAS-015).

   These rules change SIZE, SPACING and ARRANGEMENT only. They do not change
   what is asked, what is stored, or how hard it is to refuse: Accept and
   Reject stay on the first layer, one click each, the same size, the same
   font. Settings becomes a text link - still one click, still first layer.

   CookieYes injects <style id="cky-style"> at runtime, after this sheet, and
   forces a column stack plus width:100% on every button below 440px, so
   these rules carry !important and use grid rather than fight flex-direction.
   Keep this block last in the file.
   ========================================================================== */

.cky-consent-container .cky-consent-bar {
  border-radius: 2px !important;
  border-width: 1px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45) !important;
}
.cky-consent-container .cky-consent-bar .cky-notice-content-wrapper {
  padding: 22px 0 10px !important;
}
.cky-consent-container .cky-notice .cky-title,
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-btn-wrapper {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* Title - brand caps, quieter than the body it introduces */
.cky-consent-container .cky-title {
  font-family: var(--font-headline, 'EngraversGothicBold W08 Rg', 'Oswald', sans-serif) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
}

/* Description - the single biggest height saving on mobile.
   CookieYes caps this at 40vh and scrolls it; with copy this short the cap
   only produces a stray scrollbar, so it is lifted. */
.cky-consent-container .cky-notice-des {
  max-height: none !important;
  overflow: visible !important;
  margin: 0 0 16px !important;
}
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p,
.cky-consent-container .cky-notice-des * {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.cky-consent-container .cky-notice-des p { margin: 0 !important; }

/* Policy link - brand accent, not the stock cornflower blue */
.cky-consent-container .cky-notice-des a,
.cky-consent-container .cky-notice-des a.cky-policy {
  color: var(--color-accent, #A38A74) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
}

/* --- Buttons ------------------------------------------------------------
   Accept and Reject side by side, equal width, equal height, equal type.
   Settings drops to a text link beneath them - one click, same layer.
   Grid, because CookieYes forces flex-direction:column under 440px.        */
.cky-consent-container .cky-notice-btn-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  min-height: 46px !important;          /* iOS touch target */
  padding: 12px 8px !important;
  font-family: var(--font-headline, 'EngraversGothicBold W08 Rg', 'Oswald', sans-serif) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  line-height: 1.1 !important;
  border-radius: 2px !important;
  border-width: 1px !important;
  transition: opacity .18s ease !important;
}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn:hover { opacity: .86 !important; }

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
  order: 1 !important; grid-column: 1 !important; grid-row: 1 !important;
}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject {
  order: 2 !important; grid-column: 2 !important; grid-row: 1 !important;
}

/* Settings - full width beneath the pair, a link rather than a third choice */
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
  order: 3 !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  padding: 8px 0 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  opacity: .7 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize:hover { opacity: 1 !important; }

/* Vendor credit - present, not shouting */
.cky-consent-container [data-cky-tag="powered-by"] { padding-bottom: 0 !important; }
.cky-consent-container [data-cky-tag="powered-by"] > div {
  margin-top: 0 !important;
  font-size: 10px !important;
  line-height: 16px !important;
  opacity: .4 !important;
}
.cky-consent-container [data-cky-tag="powered-by"] img,
.cky-consent-container [data-cky-tag="powered-by"] svg {
  height: 10px !important;
  width: auto !important;
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 768px) {
  .cky-consent-container.cky-box-bottom-right { max-width: 420px !important; }
}

/* --- Mobile -------------------------------------------------------------
   Inset from the edges so the banner reads as a card on the page rather
   than a system sheet clamped to the bezel.                                */
@media (max-width: 767px) {
  .cky-consent-container.cky-box-bottom-right {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
  }
  .cky-consent-container .cky-consent-bar .cky-notice-content-wrapper {
    padding: 18px 0 8px !important;
  }
  .cky-consent-container .cky-notice .cky-title,
  .cky-consent-container .cky-notice-des,
  .cky-consent-container .cky-notice-btn-wrapper {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .cky-consent-container .cky-notice-des,
  .cky-consent-container .cky-notice-des p,
  .cky-consent-container .cky-notice-des * { font-size: 13px !important; }
}

/* Policy link - CookieYes gives .cky-policy a 1px border that inherits the
   link colour, which draws a box round the words. Neutralised here. */
.cky-consent-container .cky-notice-des a,
.cky-consent-container .cky-notice-des a.cky-policy {
  border-color: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .utility-bar__signin::after,
  .signin-dialog[open],
  .signin-dialog::backdrop,
  .topbar,
  .utility-bar,
  .mobile-menu,
  .accordion-item__q,
  .accordion-item__icon,
  .accordion-item__body,
  .accordion-item[open] > .accordion-item__body {
    animation: none;
    transition: none;
  }
}