@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root {
  --je-black: #16130f;
  --je-ink-deep: #1a2436;   /* deep navy — retained token; no longer used since the footer moved to paper */
  --je-cream: #faf8f5;
  --je-gold: #b8a06a;
  --je-line: #d8d1c6;
  --je-text-muted: #7c7264;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  background: var(--je-cream);
  color: var(--je-black);
}

/* Headings and hero/brand text use the serif display face */
h1, h2, h3, h4, h5, h6,
.brand,
.hero-section h1, .hero-content h1,
.location-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

a { color: inherit; }

.je-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
  border-bottom: 1px solid var(--je-line);
  background: var(--je-cream);
  color: var(--je-black);
}

.je-header .brand {
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.je-header .brand span { color: var(--je-gold); }

/* Brand monogram images swapped in for the old text wordmark. width:auto
   preserves the full mark, including the diamond full stop, at any height.
   The header uses a tightly-cropped file (je-gold-web-trimmed), so a smaller
   display height now reads larger and bolder than the old padded original did
   at a taller height. */
.je-header .brand img { height: 42px; width: auto; display: block; }
.je-footer .brand img { height: 76px; width: auto; display: block; }
.je-header .brand a, .je-footer .brand a { display: inline-block; line-height: 0; }

.je-nav a {
  color: var(--je-black);
  text-decoration: none;
  margin-left: 24px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

.je-nav a:hover { color: var(--je-gold); }
/* The Private Office is our flagship discreet service — give its nav link a
   subtle gold accent so it reads as the premium tier without shouting. */
.je-nav a.po-link { color: var(--je-gold); }
.je-nav a.po-link:hover { opacity: .8; }

/* Private Office band — a discreet dark feature panel on the homepage. */
.po-band { background: var(--je-black); color: #f4f1ea; padding: 66px 24px; text-align: center; }
.po-band-inner { max-width: 720px; margin: 0 auto; }
.po-band-tag {
  display: inline-block; font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 2px; text-transform: uppercase; font-size: 12px;
  color: var(--je-gold); border: 1px solid var(--je-gold); padding: 5px 14px; margin-bottom: 20px;
}
.po-band h2 { color: #fff; margin: 0 0 16px; }
.po-band p { color: #cfc9bc; font-size: 16px; line-height: 1.75; margin: 0 auto 26px; }
/* The site button is dark ink on paper; on this dark band it needs light text. */
.po-band .btn { color: #f4f1ea; }
.po-band .btn:hover { color: var(--je-black); }

/* Logout in the header nav (buyer sessions) is a <button> in a POST form, styled
   to match the nav links sitting beside it. */
.je-nav-logout-form { display: inline; }
.je-nav-logout {
  background: none; border: none; padding: 0; cursor: pointer;
  margin-left: 24px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; color: var(--je-black);
}
.je-nav-logout:hover { color: var(--je-gold); }

/* "My Account" dropdown in the header nav (buyer sessions) — built on <details>,
   so it works with no JavaScript. */
.account-menu { position: relative; display: inline-block; margin-left: 24px; }
.account-menu > summary { list-style: none; cursor: pointer; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--je-black); font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: ' \25BE'; font-size: 10px; }
.account-menu > summary:hover, .account-menu[open] > summary { color: var(--je-gold); }
.account-menu-list { position: absolute; right: 0; top: 100%; margin-top: 10px; min-width: 170px; background: #fff; border: 1px solid var(--je-line); box-shadow: 0 8px 24px rgba(22, 19, 15, .12); z-index: 100; display: flex; flex-direction: column; }
.account-menu-list a, .account-menu-list button { display: block; width: 100%; text-align: left; padding: 11px 16px; margin: 0; font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--je-black); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }
.account-menu-list a:hover, .account-menu-list button:hover { background: var(--je-cream); color: var(--je-gold); }
.account-menu-list form { margin: 0; border-top: 1px solid var(--je-line); }

/* Buyer area sub-nav tabs (My Offers / My Starred / My Search). */
.buyer-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--je-line); margin-top: 20px; flex-wrap: wrap; }
.buyer-tabs a { padding: 8px 14px; font-size: 14px; text-decoration: none; color: var(--je-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.buyer-tabs a:hover { color: var(--je-black); }
.buyer-tabs a.is-active { color: var(--je-black); border-bottom-color: var(--je-gold); }

/* Auto left-margin pushes the nav (and the social cluster after it) to the
   right edge. Works whether the header holds brand+nav (admin) or
   brand+nav+social (public), so no per-page layout change is needed. */
.je-nav { margin-left: auto; }

/* Persistent header social cluster — WhatsApp / Instagram / Facebook.
   Understated muted-gold icons sitting to the right of the main nav, quieter
   than the nav so they don't compete with it. On mobile the cluster detaches
   and pins to the top-right corner so it stays reachable at any scroll
   position (fixed), with a subtle cream pill so it reads over any content. */
.header-social {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-left: 28px;
}
.header-social a { display: inline-flex; color: var(--je-text-muted); transition: color .2s ease; }
.header-social a:hover { color: var(--je-gold); }
.header-social svg { width: 18px; height: 18px; display: block; fill: currentColor; }

@media (max-width: 640px) {
  .header-social {
    position: fixed;
    /* Sits below the (wrap-to-three-rows) mobile nav so it never covers a tab
       such as About while scrolling; the cream pill keeps it legible over the
       hero. */
    top: 196px;
    right: 12px;
    z-index: 1000;
    margin-left: 0;
    gap: 16px;
    padding: 8px 14px;
    background: rgba(250, 248, 245, 0.94); /* --je-cream, slightly translucent */
    border: 1px solid var(--je-line);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(22, 19, 15, 0.08);
  }
}

.container { max-width: 1180px; margin: 0 auto; padding: 40px 48px; }

/* Long-form legal pages (Terms, Privacy) — readable body type, numbered
   headings, and tidy bulleted lists. */
.legal-body .legal-meta { color: var(--je-text-muted); font-size: 14px; line-height: 1.6; margin: 0 0 28px; }
.legal-body h3 { font-size: 20px; margin: 32px 0 8px; }
.legal-body p { color: #333; line-height: 1.8; margin: 0 0 14px; }
.legal-body ul { color: #333; line-height: 1.8; margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.card {
  background: #fff;
  border: 1px solid var(--je-line);
  overflow: hidden;
  transition: box-shadow .2s ease;
}

.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

.card img { width: 100%; height: 220px; object-fit: cover; display: block; background: #ddd; }

.card-body { padding: 20px; }

.card-price { color: var(--je-gold); font-size: 18px; margin: 4px 0 8px; }

.card-meta { font-size: 13px; color: var(--je-text-muted); }

/* Homepage search bar — sits below the hero, submits to /listings */
.search-section { background: var(--je-cream); border-top: 1px solid var(--je-gold); border-bottom: 1px solid var(--je-line); padding: 24px; }
.search-bar { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.search-field { display: flex; flex-direction: column; flex: 1 1 160px; }
.search-field label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--je-text-muted); margin-bottom: 6px; }
.search-field select, .search-field input {
  padding: 11px; border: 1px solid var(--je-line); background: #fff;
  font-family: inherit; font-size: 14px; color: var(--je-black);
}
.search-field-price { flex-basis: 220px; }
.search-price-group { display: flex; gap: 8px; }
.search-price-group select { flex: 0 0 88px; }
.search-price-group input { flex: 1 1 auto; min-width: 0; }
.search-submit { flex: 0 0 auto; padding: 12px 30px; }
@media (max-width: 640px) {
  .search-field { flex-basis: 100%; }
  .search-submit { width: 100%; }
}

.filter-summary { margin: 4px 0 20px; color: var(--je-text-muted); font-size: 14px; }
.filter-summary a { color: var(--je-gold); }

/* Location narrative — quiet editorial blocks above the listings grid,
   shown only when a country filter is active. Unboxed; just spaced type. */
.location-narrative { max-width: 720px; margin: 8px 0 44px; }
.narrative-block { margin-bottom: 26px; }
.narrative-block:last-child { margin-bottom: 8px; }
.narrative-block h2 {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; color: var(--je-text-muted); margin: 0 0 8px;
}
.narrative-block p { font-size: 16px; line-height: 1.7; color: var(--je-black); margin: 0; }
.narrative-block p.narrative-placeholder { font-style: italic; color: var(--je-text-muted); }

/* Compact bed/price ranges on development cards */
.card-snapshot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 8px; font-size: 14px; }
.card-snapshot span { color: var(--je-black); }
.card-snapshot .card-snapshot-price { color: var(--je-gold); }

.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--je-gold);
  color: var(--je-text-muted);
  margin-bottom: 8px;
}

.brochure-hero { position: relative; }
.brochure-hero img { width: 100%; height: 520px; object-fit: cover; }

/* Interactive hero gallery on the listing brochure */
.hero-gallery { background: var(--je-black); }
.hero-gallery.hg-under-video { border-top: 1px solid var(--je-line); }
.hg-stage { position: relative; width: 100%; height: 520px; background: #16130f; overflow: hidden; }
.hg-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease;
}
.hg-slide.is-active { opacity: 1; }
.hg-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border: none; cursor: pointer; line-height: 1;
  font-size: 28px; color: #fff; background: rgba(22, 19, 15, .45);
  transition: background .2s ease, color .2s ease;
}
.hg-nav:hover { background: rgba(184, 160, 106, .92); color: var(--je-black); }
.hg-prev { left: 0; }
.hg-next { right: 0; }
.hg-counter {
  position: absolute; bottom: 16px; right: 16px; z-index: 2;
  background: rgba(22, 19, 15, .55); color: #fff; font-size: 13px;
  padding: 4px 10px; letter-spacing: .5px;
}
.hg-thumbs {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px;
  background: var(--je-cream); border-bottom: 1px solid var(--je-line);
}
.hg-thumb {
  flex: 0 0 auto; width: 96px; height: 64px; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: none; opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}
.hg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-thumb.is-active, .hg-thumb:hover { opacity: 1; border-color: var(--je-gold); }
@media (max-width: 640px) {
  .hg-stage { height: 300px; }
  .hg-nav { width: 40px; height: 40px; font-size: 24px; }
  .hg-thumb { width: 76px; height: 52px; }
}

.brochure-body { max-width: 820px; margin: 0 auto; padding: 48px; }

/* Redesigned listing brochure: wider container + two-column layout with a
   sticky enquiry sidebar. Scoped to .brochure-detail so the shared
   .brochure-body (development pages) keeps its original 820px width. */
.brochure-detail { max-width: 1140px; }
.brochure-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 20px;
}
.brochure-address { color: var(--je-text-muted); margin: 0 0 6px; }
.brochure-summary { font-size: 18px; color: #333; margin: 6px 0 0; }
.brochure-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px; align-items: start;
}
.brochure-main { min-width: 0; }
/* Zero the title's top margin so it lines up with the top of the sticky
   enquiry card in the adjacent column. */
.brochure-main h1 { margin-top: 0; }
.brochure-description { line-height: 1.75; }
/* Sticky sidebar: align-self:start keeps the item its natural height so
   position:sticky actually engages within the grid row. */
.brochure-aside { position: sticky; top: 24px; align-self: start; }
.brochure-aside .enquiry-box { margin-top: 0; }
.brochure-agent { margin-top: 16px; color: #6b6a63; font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) {
  .brochure-detail { padding: 32px 24px; }
  .brochure-cols { grid-template-columns: 1fr; gap: 32px; }
  .brochure-aside { position: static; }
}

/* Full-width document sections below the two columns (floorplans, EPC).
   Each only renders when images of that type exist. */
.brochure-docs { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--je-line); }
.brochure-docs-title { font-size: 22px; margin: 0 0 20px; }
.brochure-docs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
}
.brochure-doc { margin: 0; }
/* Fixed-height frame so floorplans and EPCs display at a consistent size
   whatever their source dimensions; object-fit: contain letterboxes each
   image within the frame rather than distorting or resizing the box. */
.brochure-doc-frame {
  height: 400px; background: #fff; border: 1px solid var(--je-line);
  display: flex; align-items: center; justify-content: center; padding: 12px;
  position: relative; width: 100%; cursor: pointer; font-family: inherit;
  transition: border-color .2s ease;
}
.brochure-doc-frame:hover, .brochure-doc-frame:focus-visible { border-color: var(--je-gold); }
.brochure-doc-frame img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
/* "Click to enlarge" affordance in the corner of each frame. */
.brochure-doc-zoom {
  position: absolute; bottom: 8px; right: 8px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 19, 15, .55); color: #fff; font-size: 16px; border-radius: 2px;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.brochure-doc-frame:hover .brochure-doc-zoom, .brochure-doc-frame:focus-visible .brochure-doc-zoom { opacity: 1; }
/* PDF (non-image) floorplan / EPC tile — a document that can't render in an
   <img>, so it opens in a new tab from a labelled tile. */
.brochure-doc-file {
  flex-direction: column; gap: 12px; text-decoration: none;
  color: var(--je-text-muted); text-align: center;
}
.brochure-doc-fileicon { font-size: 54px; line-height: 1; }
.brochure-doc-filetext {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--je-text); font-weight: 500;
}
.brochure-doc-file:hover, .brochure-doc-file:focus-visible { color: var(--je-gold); }

/* Full-size image lightbox (floorplans / EPC) */
.lightbox {
  position: fixed; inset: 0; z-index: 200; padding: 32px;
  background: rgba(16, 19, 15, .9);
  display: none; align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; background: #fff; box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: absolute; top: 18px; right: 24px; z-index: 2;
  background: none; border: none; color: #fff; font-size: 40px; line-height: 1;
  cursor: pointer; transition: color .2s ease;
}
.lightbox-close:hover { color: var(--je-gold); }
@media print { .lightbox { display: none !important; } }
.brochure-doc-cap {
  margin-top: 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--je-text-muted);
}
@media (max-width: 640px) { .brochure-doc-frame { height: 300px; } }

.brochure-body h1 { font-size: 34px; margin-bottom: 4px; }

.brochure-price { font-size: 22px; color: var(--je-gold); margin-bottom: 24px; }

.stats-row { display: flex; gap: 32px; margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--je-line); border-bottom: 1px solid var(--je-line); }

.stat { text-align: center; }
.stat .num { font-size: 22px; }
.stat .label { font-size: 12px; text-transform: uppercase; color: var(--je-text-muted); }

/* Development snapshot bar — unit min/max ranges shown below the hero */
.dev-snapshot { background: #fff; border-bottom: 1px solid var(--je-line); }
.dev-snapshot-inner {
  max-width: 820px; margin: 0 auto; padding: 22px 48px;
  display: flex; flex-wrap: wrap; gap: 20px;
}
.snapshot-item { flex: 1 1 0; min-width: 150px; display: flex; align-items: center; gap: 12px; }
.snapshot-item + .snapshot-item { border-left: 1px solid var(--je-line); padding-left: 20px; }
.snapshot-icon { width: 26px; height: 26px; color: var(--je-gold); flex-shrink: 0; }
.snapshot-value { font-size: 18px; color: var(--je-black); line-height: 1.2; }
.snapshot-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--je-text-muted); margin-top: 3px; }
@media (max-width: 640px) {
  .dev-snapshot-inner { padding: 18px 24px; gap: 16px; }
  .snapshot-item { flex-basis: 40%; }
  .snapshot-item + .snapshot-item { border-left: none; padding-left: 0; }
}

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 24px 0; }
.thumbs img { width: 100%; height: 100px; object-fit: cover; }

.features-list { columns: 2; margin: 24px 0; }
.features-list li { margin-bottom: 6px; }

.enquiry-box { background: #fff; color: var(--je-black); padding: 32px; margin-top: 40px; border: 1px solid var(--je-line); border-top: 2px solid var(--je-gold); }
.enquiry-box h3 { margin-top: 0; }
.enquiry-intro { color: var(--je-text-muted); font-size: 14px; line-height: 1.6; margin: -4px 0 20px; max-width: 540px; }

.units-remaining { color: var(--je-gold); font-size: 14px; letter-spacing: .5px; margin: -8px 0 16px; }

/* Sticky enquiry CTA — a slim bar prompting an enquiry until the form is on screen */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--je-cream); border-top: 1px solid var(--je-gold);
  box-shadow: 0 -4px 20px rgba(22, 19, 15, 0.06);
  padding: 14px 24px; transition: transform .3s ease;
}
.sticky-cta.is-hidden { transform: translateY(110%); }
.sticky-cta-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sticky-cta-text { color: var(--je-black); font-size: 15px; }
.sticky-cta .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .sticky-cta { padding: 12px 16px; }
  .sticky-cta-inner { flex-direction: column; gap: 10px; }
  .sticky-cta-text { font-size: 13px; text-align: center; }
  .sticky-cta .btn { width: 100%; }
}
@media print { .sticky-cta { display: none !important; } }

/* Back-to-top button — injected site-wide by /js/site.js, appears after
   scrolling ~400px. Muted gold/cream palette, matching the header social pill.
   Sits bottom-right, the opposite corner to that fixed top-right pill on
   mobile, so the two never collide. */
.scroll-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 70;
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--je-gold); border-radius: 999px;
  background: rgba(250, 248, 245, 0.94); /* --je-cream, translucent */
  color: var(--je-gold); cursor: pointer;
  box-shadow: 0 4px 16px rgba(22, 19, 15, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s,
              background .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover, .scroll-top:focus-visible {
  background: var(--je-gold); color: var(--je-cream); outline: none;
}
.scroll-top svg {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.2;
}
/* On pages with the sticky enquiry bar, lift the button clear of it. */
.scroll-top.above-cta { bottom: 84px; }
@media (max-width: 640px) {
  .scroll-top { width: 42px; height: 42px; bottom: 18px; right: 18px; }
  .scroll-top.above-cta { bottom: 104px; } /* the mobile CTA stacks taller */
}
@media print { .scroll-top { display: none !important; } }

.enquiry-box input, .enquiry-box textarea, .enquiry-box select {
  width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid var(--je-line);
  background: #fff; font-family: inherit; font-size: 14px; color: var(--je-black);
}
/* Checkboxes / radios must not be stretched full-width by the rule above — that
   pushed the consent tick out of line with its label in the enquiry boxes. */
.enquiry-box input[type="checkbox"], .enquiry-box input[type="radio"] {
  width: auto; padding: 0; margin: 0; flex: 0 0 auto; vertical-align: middle;
}
.enquiry-box button {
  background: transparent; color: var(--je-black); border: 1px solid var(--je-gold); padding: 12px 24px;
  text-transform: uppercase; letter-spacing: 1px; cursor: pointer; font-size: 13px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  transition: background .2s ease, color .2s ease;
}
.enquiry-box button:hover { background: var(--je-gold); color: var(--je-black); }

/* Make-an-offer box in the brochure aside — same card treatment as the enquiry
   box, with a reveal toggle and a mortgage-only broker sub-section. */
.offer-box { background: #fff; color: var(--je-black); padding: 32px; margin-top: 20px; border: 1px solid var(--je-line); border-top: 2px solid var(--je-gold); }
.offer-box h3 { margin-top: 0; }
.offer-box .btn { width: 100%; }
.offer-error { color: #8a3b3b; font-size: 14px; margin: 0 0 12px; }
.offer-success { color: #2f6b3a; font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.offer-form { margin-top: 14px; }
.offer-form input, .offer-form select {
  width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid var(--je-line);
  background: #fff; font-family: inherit; font-size: 14px; color: var(--je-black);
}
.offer-amount-row { display: flex; gap: 8px; }
.offer-amount-row select { flex: 0 0 92px; }
.offer-amount-row input { flex: 1 1 auto; min-width: 0; }
.offer-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--je-text-muted); margin-bottom: 6px; }
.offer-form button[type="submit"] {
  width: 100%; background: transparent; color: var(--je-black); border: 1px solid var(--je-gold);
  padding: 12px 24px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; font-size: 13px;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; transition: background .2s ease, color .2s ease;
}
.offer-form button[type="submit"]:hover { background: var(--je-gold); color: var(--je-black); }

/* Save / favourite star overlaid on a listing card (buyer feature). The card
   itself is an <a>, so the star is a sibling inside a positioned wrapper. */
.card-wrap { position: relative; }
.card-wrap > .save-star,          /* logged-out: an <a> that routes through login */
.card-wrap > .save-star-form {    /* logged-in buyer: a save/unsave toggle form */
  position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0;
}
.save-star {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--je-line); border-radius: 999px;
  color: var(--je-gold); font-size: 18px; line-height: 1; cursor: pointer; text-decoration: none; padding: 0;
}
.save-star:hover, .save-star:focus-visible { border-color: var(--je-gold); background: #fff; outline: none; }
.save-star.is-saved { color: var(--je-gold); }
/* Save control on the brochure aside (not a card overlay — a full-width button). */
.brochure-save { margin: 0 0 16px; }
.brochure-save .btn { width: 100%; }
a.brochure-save-link { display: block; width: 100%; margin: 0 0 16px; text-align: center; }

/* Full-page offer form (/listing/:id/offer) — deliberately structured and
   sectioned so the process signals seriousness from the first step. */
.offer-page { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.offer-page-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--je-gold); margin: 0 0 8px; }
.offer-page h1 { margin: 0 0 6px; }
.offer-page-sub { color: var(--je-text-muted); margin: 0 0 20px; }
.offer-page-note { color: var(--je-text-muted); font-size: 14px; line-height: 1.6; margin: 0 0 28px; }
.offer-section { background: #fff; border: 1px solid var(--je-line); border-top: 2px solid var(--je-gold); padding: 24px 24px 10px; margin-bottom: 24px; }
.offer-section h2 { margin: 0 0 16px; font-size: 20px; }
.offer-section .field { margin-bottom: 16px; }
.offer-section label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--je-black); }
.offer-section input[type="text"], .offer-section input[type="email"], .offer-section input[type="number"],
.offer-section input[type="date"], .offer-section select, .offer-section textarea {
  width: 100%; padding: 10px; border: 1px solid var(--je-line); background: #fff;
  font-family: inherit; font-size: 14px; color: var(--je-black);
}
.offer-section textarea { min-height: 72px; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 160px; }
.field-narrow { flex: 0 0 120px; }
.field-note { font-size: 12px; color: var(--je-text-muted); font-weight: normal; }
label.opt { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 8px 0; font-size: 14px; }
label.opt input { width: auto; }
.declaration { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.declaration input { width: auto; margin-top: 3px; }
.offer-submit { margin-top: 8px; }
@media (max-width: 640px) { .field-narrow { flex: 1 1 100%; } }

/* Admin */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 24px; background: #fff; }
.admin-table th, .admin-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--je-line); font-size: 14px; }
.admin-table th { text-transform: uppercase; font-size: 12px; color: var(--je-text-muted); }

/* Offer SLA pills — the acknowledgment-deadline state at a glance. */
.sla-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.sla-ok { background: #e7f1e9; color: #2f6b3a; }        /* acknowledged / met */
.sla-due { background: #fbf1dd; color: #8a6d1f; }       /* still within the window */
.sla-overdue { background: #f6e2e2; color: #8a3b3b; }   /* past the deadline */

/* Simple admin action card (offer detail: acknowledge / MIP / proceedability). */
.admin-card { background: #fff; border: 1px solid var(--je-line); border-top: 2px solid var(--je-gold); padding: 24px; margin-top: 24px; }
.admin-card h3 { margin-top: 0; }
.admin-card label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--je-text-muted); margin: 12px 0 6px; }
.admin-card label.inline { display: inline-block; text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--je-black); margin: 0 16px 8px 0; }
.admin-card input[type="text"], .admin-card textarea { width: 100%; padding: 10px; border: 1px solid var(--je-line); background: #fff; font-family: inherit; font-size: 14px; color: var(--je-black); }
.admin-card textarea { min-height: 80px; }
.admin-card .btn { margin-top: 14px; }

/* Read-only full offer detail table on the admin offer view. */
.offer-detail-table th { font-weight: normal; color: var(--je-text-muted); vertical-align: top; width: 190px; }
.offer-detail-table .detail-group { font-weight: 600; color: var(--je-black); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; padding-top: 18px; }
.flag-follow { color: #8a6d1f; font-size: 12px; font-weight: 500; }

/* Valuation request status pills (admin queue). */
.val-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.val-pending { background: #fbf1dd; color: #8a6d1f; }
.val-appointment_booked { background: #e7f1e9; color: #2f6b3a; }
.val-completed { background: #eef0f2; color: #555; }
.val-lost { background: #f6e2e2; color: #8a3b3b; }

/* Outlined buttons — thin gold border on paper, fill gold on hover */
.btn {
  display: inline-block; background: transparent; color: var(--je-black);
  padding: 8px 16px; text-decoration: none; font-size: 13px;
  border: 1px solid var(--je-gold); cursor: pointer;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--je-gold); color: var(--je-black); }
.btn-gold { background: transparent; color: var(--je-black); border-color: var(--je-gold); }
.btn-gold:hover { background: var(--je-gold); color: var(--je-black); }
.btn-danger { background: #8a3b3b; color: #fff; border-color: #8a3b3b; }
.btn-danger:hover { background: #763232; color: #fff; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 12px; text-transform: uppercase; margin-bottom: 4px; color: var(--je-text-muted); }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 10px; border: 1px solid var(--je-line); font-family: inherit; font-size: 14px;
}
.form-grid textarea { min-height: 100px; }

/* Checkbox option rows (e.g. the portal-feed toggles). These opt out of the
   full-width text-input styling above: the box must sit inline, its natural
   size, right next to its label — not stretch to 100% width. */
.form-grid .checkbox-row { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 6px 0; }
.form-grid .checkbox-option {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; text-transform: none; font-size: 14px; color: var(--je-black);
}
.form-grid .checkbox-option input[type="checkbox"] {
  width: auto; padding: 0; margin: 0; flex: 0 0 auto;
}

.login-box { max-width: 360px; margin: 80px auto; background: #fff; padding: 40px; border: 1px solid var(--je-line); }
.login-box .brand { text-align: center; margin-bottom: 20px; }
.login-box .brand img { height: 52px; width: auto; display: inline-block; }

.status-badge { padding: 2px 8px; font-size: 11px; text-transform: uppercase; border-radius: 2px; }
.status-available { background: #dff0d8; color: #2b6b2b; }
.status-under_offer { background: #fcf3d6; color: #8a6d1b; }
.status-sold, .status-let { background: #eee; color: #666; }

.hero-section {
  background: var(--je-cream);
  color: var(--je-black);
  text-align: center;
  padding: 100px 24px;
}
.hero-section h1 { font-size: 36px; margin-bottom: 20px; line-height: 1.3; }
.hero-section p { max-width: 560px; margin: 0 auto 32px; color: var(--je-text-muted); font-size: 17px; }

.hero-section.hero-video {
  position: relative;
  height: 620px;
  padding: 0;
  overflow: hidden;
}
.hero-video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.hero-video-bg iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Left-side vignette: the video fades into the paper background on the left,
   so ink-coloured headline copy sits on paper while the video stays visible right. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--je-cream) 0%,
    var(--je-cream) 20%,
    rgba(250, 248, 245, 0.92) 36%,
    rgba(250, 248, 245, 0.45) 56%,
    rgba(250, 248, 245, 0) 74%);
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 0 48px;
}
.hero-content-inner { max-width: 560px; }
.hero-content h1 { font-size: 44px; margin-bottom: 20px; line-height: 1.15; color: var(--je-black); }
.hero-content .hero-dev-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; font-weight: 400; margin-bottom: 20px; line-height: 1.15; color: var(--je-black); }
.hero-content p { max-width: 520px; margin: 0 0 32px; color: var(--je-text-muted); font-size: 17px; }
@media (max-width: 640px) {
  .hero-content { padding: 0 24px; }
  .hero-content h1, .hero-content .hero-dev-title { font-size: 34px; }
}

/* Closing referral strip — a static-image mirror of the hero's fade treatment,
   flipped horizontally: the image sits on the LEFT and fades into paper
   (--je-cream) toward the RIGHT, where ink-coloured copy sits on the paper. */
.referral-strip {
  position: relative;
  height: 620px;
  overflow: hidden;
  background: var(--je-cream) url('/img/referral-strip-terrace.jpg') left center / cover no-repeat;
}
/* Right-side vignette: mirror of the hero overlay (same stops, reversed
   direction), so the paper stays solid on the right well past the copy before
   fading to reveal the image on the left. */
.referral-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
    var(--je-cream) 0%,
    var(--je-cream) 20%,
    rgba(250, 248, 245, 0.92) 36%,
    rgba(250, 248, 245, 0.45) 56%,
    rgba(250, 248, 245, 0) 74%);
}
.referral-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  /* Right-aligned: the home page closes as a mirror of the left-aligned hero. */
  text-align: right;
  padding: 0 48px;
}
.referral-content-inner { max-width: 520px; }
.referral-content h2 { font-size: 44px; margin-bottom: 20px; line-height: 1.15; color: var(--je-black); }
.referral-content p { margin: 0 0 32px; color: var(--je-text-muted); font-size: 17px; }
.referral-cta { text-align: right; }
@media (max-width: 640px) {
  .referral-content { padding: 0 24px; }
  .referral-content h2 { font-size: 34px; }
}

.locations-section {
  background: var(--je-cream);
  color: var(--je-black);
  text-align: center;
  padding: 80px 24px 100px;
  border-top: 1px solid var(--je-line);
}
.locations-section h2 { font-size: 30px; margin: 10px 0 12px; }
.locations-section > p { color: var(--je-text-muted); max-width: 560px; margin: 0 auto 40px; }
.location-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Exclusive Locations: a single-row horizontal scroll strip (distinct from the
   wrapping .location-grid the segmentation banners use). Cards are fixed width
   and don't shrink, so they scroll sideways instead of wrapping. Scroll-snap
   gives a considered feel; the scrollbar is minimised so it reads as an
   intentional design element. As locations overflow the container, the next
   card naturally peeks at the right edge, hinting that it scrolls. */
.locations-strip {
  display: flex;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden; /* keep the card hover-lift from triggering a vertical scrollbar */
  padding: 8px 2px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                         /* Firefox */
  scrollbar-color: var(--je-line) transparent;   /* Firefox: thumb / track */
}
.locations-strip::-webkit-scrollbar { height: 6px; }
.locations-strip::-webkit-scrollbar-track { background: transparent; }
.locations-strip::-webkit-scrollbar-thumb { background: var(--je-line); border-radius: 3px; }
.locations-strip::-webkit-scrollbar-thumb:hover { background: var(--je-gold); }
.locations-strip .location-card {
  flex: 0 0 280px;          /* fixed width, no grow/shrink */
  max-width: none;
  scroll-snap-align: start;
}

/* Branded-residences category banners: a single row of four on desktop
   (repeat(4, 1fr), no wrap), stacking to one column on mobile. Dedicated class
   so it doesn't inherit the shared .location-grid wrapping. Cards are a taller
   vertical rectangle — narrower (4 across) and taller than a location card. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .category-grid { grid-template-columns: 1fr; }
}
.category-grid .location-card {
  max-width: none;    /* fill the grid cell, not the shared 420px flex cap */
  min-height: 520px;  /* taller vertical rectangle vs the ~420px location card */
}
/* Explicit CTA on each category card (the card is no longer a whole-card link). */
.category-grid .location-card .btn { margin-top: 16px; align-self: flex-start; }
.location-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Grow to share a row evenly, but cap width so a lone card on the last row
     stays its normal size and centres instead of stretching full-bleed. */
  flex: 1 1 320px;
  max-width: 420px;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  background-color: #ece7dc; /* paper tone shows while the image loads */
  overflow: hidden;
  text-decoration: none;
  color: var(--je-black);
  border: 1px solid var(--je-line);
  transition: transform .3s ease;
}
.location-card:hover { transform: translateY(-4px); }
/* Photo fades up into a paper shelf at the foot of the card, holding ink text */
.location-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--je-cream) 0%,
    var(--je-cream) 22%,
    rgba(250, 248, 245, 0.85) 40%,
    rgba(250, 248, 245, 0.15) 62%,
    rgba(250, 248, 245, 0) 100%);
}
.location-card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 28px;
  text-align: left;
}
.location-card-name { font-size: 32px; line-height: 1.1; margin-bottom: 10px; color: var(--je-black); }
.location-card-count { font-size: 12px; color: var(--je-gold); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
.location-card-blurb { font-size: 14px; line-height: 1.6; color: var(--je-text-muted); margin: 0; }

.cta-section {
  background: var(--je-cream);
  text-align: center;
  padding: 80px 24px;
}

/* Editorial promo banners (valuation, buyer representation) — paper with a
   gold hairline separator, centred, consistent with the CTA section. */
.promo-banner {
  background: var(--je-cream);
  border-top: 1px solid var(--je-gold);
  text-align: center;
  padding: 72px 24px;
}
.promo-banner h2 { font-size: 30px; margin: 0 0 14px; }
.promo-banner p { max-width: 620px; margin: 0 auto 28px; color: var(--je-text-muted); font-size: 16px; line-height: 1.7; }

/* Gold-inverted variant — a single strong CTA moment (applied to Considering a
   Sale only). Cream text fails contrast on --je-gold (~2.4:1), so copy is ink
   (~7:1); the CTA flips to an ink outline since a gold-outline button would
   vanish on the gold ground. */
.promo-banner--gold {
  background: var(--je-gold);
  border-top-color: rgba(22, 19, 15, 0.15);
  color: var(--je-black);
}
.promo-banner--gold h2 { color: var(--je-black); }
.promo-banner--gold p { color: var(--je-black); }
.promo-banner--gold .btn { background: transparent; border-color: var(--je-black); color: var(--je-black); }
.promo-banner--gold .btn:hover { background: var(--je-black); border-color: var(--je-black); color: var(--je-cream); }
.cta-section h2 { font-size: 28px; margin-bottom: 12px; }
.cta-section > p { max-width: 560px; margin: 0 auto 40px; color: var(--je-text-muted); }
.cta-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: left;
}
.cta-feature-title { font-size: 17px; margin-bottom: 6px; }
.cta-feature-text { font-size: 14px; color: var(--je-text-muted); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin: 32px 0 60px;
}
/* Home "What We Do": a single scrollable row. Cards keep a fixed width and snap
   into place, so adding a service extends the row instead of the page. */
.services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.services-nav { display: flex; gap: 8px; }
.services-arrow {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--je-gold); background: transparent; color: var(--je-black);
  font-size: 22px; line-height: 1; transition: background .2s, color .2s, opacity .2s;
}
.services-arrow:hover:not(:disabled) { background: var(--je-gold); color: #fff; }
.services-arrow:disabled { opacity: .3; cursor: default; }
.services-row {
  display: flex; gap: 28px; margin: 28px 0 60px; padding-bottom: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--je-line) transparent;
}
.services-row::-webkit-scrollbar { height: 4px; }
.services-row::-webkit-scrollbar-thumb { background: var(--je-line); border-radius: 2px; }
.services-row > .service-card { flex: 0 0 min(380px, 82%); scroll-snap-align: start; }
@media (max-width: 640px) { .services-nav { display: none; } }
.service-card { display: flex; flex-direction: column; }
.service-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
/* Home "What We Do" line-drawing tiles: shown whole at their own 1500x840 shape, never cropped. */
.service-card--tile img { height: auto; aspect-ratio: 1500 / 840; object-fit: contain; background: #f0ebe1; }
.service-card h3 { margin: 16px 0 8px; font-size: 19px; }
.service-card p { color: var(--je-text-muted); font-size: 14px; line-height: 1.6; flex-grow: 1; }
/* Per-card CTA sits at the foot of each card so buttons line up across a row. */
.service-card .btn { align-self: flex-start; margin-top: 16px; }
/* Non-interactive "coming soon" CTA (e.g. Private Office register-interest). */
.btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn.is-disabled:hover { background: transparent; color: var(--je-black); }

/* Footer sits on the same paper (--je-cream) as the rest of the site, for a
   continuous experience from hero to footer rather than an abrupt dark block.
   A thin gold hairline at the top separates it from the content above. */
.je-footer {
  background: var(--je-cream);
  color: var(--je-text-muted);
  border-top: 1px solid var(--je-gold);
  padding: 60px 48px 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
}
.footer-grid h4 {
  color: var(--je-black);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.footer-grid a {
  display: block;
  color: var(--je-text-muted);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
}
.footer-grid a:hover { color: var(--je-gold); }
/* WhatsApp footer link — deliberately in the site's muted gold/cream palette
   rather than WhatsApp's standard bright green, so it sits within the brand. */
.footer-grid a.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--je-gold);
  margin-top: 10px; /* sits just beneath the contact details block */
}
.footer-grid a.footer-whatsapp svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.footer-grid a.footer-whatsapp:hover { color: var(--je-black); }
/* Links inside the address/contact paragraph stay inline (e.g. the mailto
   after 'E. '); the block style above is only for the link-column lists. */
.footer-grid p a { display: inline; margin: 0; }
.footer-grid p { font-size: 14px; line-height: 1.6; }

.footer-compliance {
  max-width: 1180px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--je-line);
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
/* Footer badges: fix the height and let width follow the aspect ratio, so every
   badge sits at the same modest size regardless of the uploaded file's native
   dimensions (same principle as the header monogram). */
.footer-compliance img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  background: #fff;
  padding: 6px 10px;
  display: block;
}
.footer-aml {
  max-width: 1180px;
  margin: 12px auto 0;
  font-size: 12px;
  color: var(--je-text-muted);
}

.footer-bottom {
  max-width: 1180px;
  margin: 24px auto 0;
  font-size: 12px;
  color: var(--je-text-muted);
}

/* Floating call — a persistent quick-dial, bottom-right. Styled as a clean gold
   glyph in keeping with the header social icons, not a filled button. */
/* Pinned to the right edge, vertically centred (mid-page) — a calm, always-in-eye
   quick dial that stays clear of both the header nav and the bottom back-to-top
   button. Same treatment on mobile, where a bottom-corner icon was easy to miss. */
/* top:40% (not 50%) keeps it clear of the hero gallery's prev/next arrows, which
   sit dead-centre (top:50%) on a listing's photos — it was covering the arrow on
   entry — while staying pleasantly mid-page. */
.float-contact { position: fixed; right: 22px; top: 40%; transform: translateY(-50%); z-index: 900; }
.float-call { display: inline-flex; color: var(--je-gold, #b8a06a); transition: color .2s ease, transform .15s ease; }
.float-call svg { width: 30px; height: 30px; fill: currentColor; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.float-call:hover { color: var(--je-black, #16130f); transform: scale(1.08); }
@media (max-width: 600px) { .float-contact { right: 16px; } }

/* Share menu (listing brochure top bar) — a no-JS dropdown of share links. */
.brochure-actions { display: flex; align-items: center; gap: 10px; }
.share-menu { position: relative; }
.share-menu > summary { list-style: none; cursor: pointer; }
.share-menu > summary::-webkit-details-marker { display: none; }
.share-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid var(--je-line); box-shadow: 0 8px 22px rgba(0,0,0,.14);
  min-width: 160px; padding: 6px; display: flex; flex-direction: column;
}
.share-list a {
  padding: 9px 12px; font-size: 13px; color: var(--je-black); text-decoration: none;
  text-transform: none; letter-spacing: 0;
}
.share-list a:hover { background: var(--je-line, #f0ece3); }

/* Print / Save-as-PDF: hides site chrome, leaves a clean client-ready brochure */
/* Print / Save-as-PDF watermark — hidden on screen, shown only when printing.
   Fixed positioning makes the browser repeat it on every printed page. */
.print-watermark { display: none; }
@media print {
  .print-watermark { display: block; }
  .pw-diagonal {
    position: fixed; top: 44%; left: 0; right: 0; text-align: center;
    transform: rotate(-28deg); transform-origin: center;
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
    font-size: 92px; letter-spacing: 8px; color: rgba(184, 160, 106, .13);
    z-index: 9999; pointer-events: none;
  }
  .pw-footer {
    position: fixed; bottom: 8px; left: 0; right: 0; text-align: center;
    font-family: 'Jost', Arial, sans-serif; font-size: 9px; letter-spacing: .05em;
    color: #8a8378; z-index: 9999; pointer-events: none;
  }
}
@media print {
  .je-header, .je-footer, .enquiry-box, .print-btn, .float-contact, .share-menu, .offer-btn { display: none !important; }
  /* Embedded video iframes don't print; hide the whole video hero so the
     printout starts cleanly at the title/description. */
  .hero-section.hero-video, .hero-video-bg, .hero-overlay { display: none !important; }
  body { background: #fff; }
  /* Keep photo/EPC colours in the PDF instead of being stripped. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .brochure-hero img { height: 380px; }
  .brochure-body { padding: 20px 10px; }
  .brochure-detail { max-width: none; }
  a { text-decoration: none; color: inherit; }
  .thumbs img { height: 90px; }

  /* Hero gallery → static stacked sequence of EVERY photo, so the PDF captures
     all of them, not just the frame that happened to be active on screen. The
     interactive controls (arrows, counter, thumbnail strip) are dropped. */
  .hg-nav, .hg-counter, .hg-thumbs { display: none !important; }
  .hero-gallery { background: none !important; }
  .hg-stage { position: static !important; height: auto !important; overflow: visible !important; }
  .hg-slide {
    position: static !important; opacity: 1 !important;
    width: 100% !important; height: auto !important;
    margin-bottom: 8px; page-break-inside: avoid;
  }

  /* Two columns collapse to a single flow; the enquiry form is hidden (above)
     but the agent contact line still prints. */
  .brochure-cols { display: block !important; }
  .brochure-aside { position: static !important; }

  /* Floorplans + EPC print with their headings, each image at natural size
     (the fixed-height on-screen frame is released) and kept whole. */
  .brochure-docs { border-top: 1px solid #ccc; }
  .brochure-docs-grid { display: block !important; }
  .brochure-doc { margin: 0 0 16px; page-break-inside: avoid; }
  .brochure-doc-frame {
    height: auto !important; border: none; padding: 0; display: block !important;
  }
  .brochure-doc-frame img { max-width: 100% !important; max-height: none !important; }
}

/* ============================================================
   Development brochure — per-unit "Request floorplan" + confirmation
   ============================================================ */
.fp-open {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--je-gold); background: transparent; color: #2b2a26;
  font: inherit; font-size: 13px; line-height: 1.2; padding: 5px 12px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.fp-open:hover, .fp-open:focus-visible { background: var(--je-gold); color: #fff; }
.fp-none { color: #b4afa4; }

/* Confirmation banner shown after a floorplan is requested. */
.fp-confirm {
  max-width: 1100px; margin: 16px auto 0; padding: 14px 18px;
  background: #eef6ee; border: 1px solid #bcd9bc; border-radius: 8px;
  color: #2f6b3d; font-size: 15px; line-height: 1.5;
}

/* Print: a clean development marketing sheet — first 3 images + all descriptive
   copy + a link back online — not the full units table or interactive chrome. */
.dev-print-cta { display: none; }
@media print {
  body.dev-brochure .fp-confirm { display: none !important; }
  body.dev-brochure .dev-units,
  body.dev-brochure .container { display: none !important; }
  body.dev-brochure .hg-slide:nth-of-type(n + 4) { display: none !important; }
  body.dev-brochure .dev-print-cta {
    display: block; margin-top: 28px; padding-top: 18px;
    border-top: 1px solid #ccc; text-align: center; page-break-inside: avoid;
  }
  body.dev-brochure .dev-print-url { font-size: 15px; color: #8a6d1f; word-break: break-all; }
}

/* ============================================================
   Development hero → click to open a full-screen, uncropped gallery
   ============================================================ */
.hero-gallery .hg-stage { cursor: zoom-in; }
.hg-expand {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  background: rgba(0, 0, 0, .5); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.hg-expand:hover, .hg-expand:focus-visible { background: rgba(0, 0, 0, .78); }

.hg-lightbox {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center; background: rgba(8, 7, 5, .95);
}
.hg-lightbox.is-open { display: flex; }
.hg-lb-img { max-width: 94vw; max-height: 90vh; object-fit: contain; display: block; }
.hg-lb-close {
  position: absolute; top: 14px; right: 22px; background: none; border: 0;
  color: #fff; font-size: 40px; line-height: 1; cursor: pointer; z-index: 2;
}
.hg-lb-close:hover { color: var(--je-gold); }
.hg-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer;
  font-size: 38px; width: 56px; height: 74px; line-height: 1;
}
.hg-lb-prev { left: 12px; } .hg-lb-next { right: 12px; }
.hg-lb-nav:hover, .hg-lb-nav:focus-visible { background: rgba(255, 255, 255, .28); }
.hg-lb-counter {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, .85); font-size: 14px; letter-spacing: .05em;
}
@media (max-width: 640px) {
  .hg-lb-nav { width: 44px; height: 60px; font-size: 30px; }
  .hg-lb-close { font-size: 34px; }
}
@media print { .hg-lightbox, .hg-expand { display: none !important; } }

/* In-body development "Feature" video (after amenities) — responsive 16:9 embed. */
.dev-video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 8px; overflow: hidden; margin-top: 12px;
}
.dev-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Development 360 virtual tour — embedded panel, plus a full-window overlay for unit tours. */
.dev-tour-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #111; border-radius: 8px; overflow: hidden; margin-top: 12px;
}
.dev-tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .dev-tour-frame { aspect-ratio: 4 / 5; } }
.dev-tour-open { margin: 10px 0 0; }
.tour-lightbox {
  position: fixed; inset: 0; z-index: 1200; display: none;
  flex-direction: column; background: rgba(8, 7, 5, .96);
}
.tour-lightbox.is-open { display: flex; }
.tour-lb-bar { display: flex; align-items: center; gap: 16px; padding: 8px 12px 8px 18px; color: #fff; }
.tour-lb-title { flex: 1; font-size: 15px; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-lb-full { color: #fff; font-size: 13px; text-decoration: none; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.tour-lb-full:hover, .tour-lb-full:focus-visible { background: var(--je-gold); border-color: var(--je-gold); }
.tour-lb-close { background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }
.tour-lb-close:hover { color: var(--je-gold); }
.tour-lightbox iframe { flex: 1; width: 100%; border: 0; background: #111; }
@media print { .dev-tour-frame, .dev-tour-open, .tour-lightbox { display: none !important; } }

/* Development units: one closed drawer per collection — a quiet summary line
   that opens to the table, so the units don't shout straight after the copy. */
.units-drawer { border-top: 1px solid var(--je-line); }
.units-drawer:last-of-type { border-bottom: 1px solid var(--je-line); }
.units-drawer > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 18px;
  padding: 18px 4px;
}
.units-drawer > summary::-webkit-details-marker { display: none; }
.ud-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: var(--je-black); }
.ud-meta { flex: 1; font-size: 13px; letter-spacing: .04em; color: var(--je-text-muted); }
.ud-chevron {
  width: 9px; height: 9px; border-right: 1.5px solid var(--je-gold); border-bottom: 1.5px solid var(--je-gold);
  transform: rotate(45deg); transition: transform .25s; align-self: center; margin-right: 6px;
}
.units-drawer[open] .ud-chevron { transform: rotate(-135deg); }
.units-drawer > summary:hover .ud-title, .units-drawer > summary:focus-visible .ud-title { color: var(--je-gold); }
.ud-body { padding: 0 0 22px; }
.ud-note { font-size: 13px; color: #6b6a63; font-style: italic; margin: 0 0 12px; }
@media (max-width: 640px) {
  .units-drawer > summary { flex-wrap: wrap; gap: 4px 12px; }
  .ud-meta { flex-basis: 100%; order: 3; }
  .ud-title { flex: 1; }
}

/* Sub-heading for a unit collection group on the development page (e.g. Canaletto). */
.unit-collection-title { margin: 28px 0 8px; font-size: 18px; color: var(--je-black); }

/* ---------- Cookie consent ----------
   Sits at the bottom of the viewport as a quiet paper panel rather than a
   full-screen interruption. Accept and Reject are deliberately identical:
   same size, same weight, same row. */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: var(--je-cream);
  border-top: 1px solid var(--je-line);
  box-shadow: 0 -8px 32px rgba(22, 19, 15, .10);
  padding: 22px 28px;
}

.cookie-consent .cc-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

.cookie-consent .cc-copy { flex: 1 1 auto; }

.cookie-consent h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: normal;
  margin: 0 0 6px;
  letter-spacing: .5px;
}

.cookie-consent p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--je-text-muted);
  max-width: 70ch;
}

.cookie-consent .cc-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cookie-consent .cc-btn {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 1px solid var(--je-gold);
  background: transparent;
  color: var(--je-black);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.cookie-consent .cc-btn:hover { background: var(--je-gold); color: #fff; }

.cookie-consent .cc-link {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .5px;
  padding: 12px 4px;
  border: 0;
  background: none;
  color: var(--je-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.cookie-consent .cc-link:hover { color: var(--je-black); }

/* Preferences view */
.cookie-consent .cc-prefs { align-items: flex-start; }

.cookie-consent .cc-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--je-line);
}

.cookie-consent .cc-row:first-of-type { margin-top: 8px; }

.cookie-consent .cc-row strong {
  display: block;
  font-size: 13px;
  letter-spacing: .5px;
  margin-bottom: 3px;
}

.cookie-consent .cc-row span {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--je-text-muted);
  max-width: 62ch;
}

.cookie-consent .cc-always {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--je-gold);
  white-space: nowrap;
}

.cookie-consent .cc-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--je-gold);
  cursor: pointer;
}

.cookie-consent .cc-row label { cursor: pointer; }

@media (max-width: 760px) {
  .cookie-consent { padding: 18px 20px; max-height: 82vh; overflow-y: auto; }
  .cookie-consent .cc-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .cookie-consent .cc-actions { flex-direction: column; align-items: stretch; }
  .cookie-consent .cc-btn { width: 100%; }
}


/* ============================================================
   Content pages (Developer Services, Recently Placed, Journal)
   ============================================================ */
.page-intro { max-width: 760px; margin: 0 auto; padding: 72px 24px 24px; text-align: center; }
.page-intro h1 { font-size: 44px; margin: 10px 0 16px; }
.page-intro p { color: var(--je-text-muted); font-size: 17px; line-height: 1.7; }
.content-narrow { max-width: 900px; }
.muted-copy { color: var(--je-text-muted); text-align: center; }
.page-cta { text-align: center; border-top: 1px solid var(--je-line); margin: 56px 0 24px; padding-top: 40px; }
.page-cta p { color: var(--je-text-muted); max-width: 560px; margin: 0 auto 22px; line-height: 1.7; }
.page-cta .btn { margin: 4px 6px; }

.ds-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; margin-top: 24px; }
.ds-item { border-top: 1px solid var(--je-gold); padding-top: 18px; }
.ds-item h3 { margin: 0 0 8px; font-size: 21px; }
.ds-item p { color: var(--je-text-muted); font-size: 15px; line-height: 1.7; margin: 0; }
@media (max-width: 700px) { .ds-grid { grid-template-columns: 1fr; } .page-intro h1 { font-size: 34px; } }

.placed-card { cursor: default; }
.placed-card .status-badge { margin-bottom: 6px; display: inline-block; }

/* Home: films row + testimonials + journal teaser */
.film-card { flex-basis: min(460px, 86%) !important; }
.film-frame { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: 6px; overflow: hidden; }
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-card h3 a { color: inherit; text-decoration: none; }
.film-card h3 a:hover { color: var(--je-gold); }
.film-place { margin: 0; }

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin: 28px 0 60px; }
.testimonial { margin: 0; padding: 26px 0 0; border-top: 1px solid var(--je-gold); }
.testimonial blockquote { margin: 0 0 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; line-height: 1.5; color: var(--je-black); }
.testimonial figcaption { font-size: 13px; letter-spacing: .04em; color: var(--je-black); }
.testimonial figcaption span { color: var(--je-text-muted); }

.journal-all { color: var(--je-gold); text-decoration: none; font-size: 14px; letter-spacing: .04em; }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; margin: 28px 0 60px; }
.journal-card { text-decoration: none; color: inherit; display: block; }
.journal-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: 14px; }
.journal-card h3 { margin: 6px 0 8px; font-size: 22px; line-height: 1.3; }
.journal-card:hover h3 { color: var(--je-gold); }
.journal-card p { color: var(--je-text-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.journal-meta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--je-text-muted); }

.journal-article { max-width: 720px; margin: 0 auto; padding: 56px 24px 24px; }
.journal-article header { text-align: center; margin-bottom: 32px; }
.journal-article h1 { font-size: 42px; line-height: 1.2; margin: 14px 0 12px; }
.journal-back { color: var(--je-gold); text-decoration: none; font-size: 13px; letter-spacing: .05em; }
.journal-standfirst { font-size: 19px; line-height: 1.6; color: var(--je-text-muted); margin-top: 18px; }
.journal-cover { width: 100%; display: block; margin: 0 0 36px; }
.journal-body { font-size: 17px; line-height: 1.85; color: #333; }
.journal-body h2 { font-size: 28px; margin: 40px 0 12px; }
.journal-body a { color: var(--je-gold); }
.journal-body ul { padding-left: 22px; }
.draft-banner { background: #fff4d6; color: #7a5b12; text-align: center; padding: 10px; font-size: 14px; }
@media (max-width: 640px) { .journal-article h1 { font-size: 32px; } }

/* Home brands line: the brand names in small spaced serif capitals, separated
   by gold dots, drifting slowly right-to-left. Two identical sets sit side by
   side and the track moves by exactly one set, so the loop is seamless. */
.brands-line {
  display: flex; align-items: center; gap: 28px; max-width: 1180px; margin: 8px auto 56px;
  padding: 22px 24px; border-top: 1px solid var(--je-line); border-bottom: 1px solid var(--je-line);
}
.brands-label { flex: none; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--je-text-muted); }
.brands-viewport {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.brands-track { display: flex; width: max-content; animation: brands-drift 70s linear infinite; }
.brands-line:hover .brands-track, .brands-line:focus-within .brands-track { animation-play-state: paused; }
.brands-set { display: flex; margin: 0; padding: 0; list-style: none; }
.brands-set li { display: flex; align-items: center; white-space: nowrap; }
.brands-set li::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--je-gold); margin: 0 26px; }
.brands-set a {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--je-black); text-decoration: none;
}
.brands-set a:hover, .brands-set a:focus-visible { color: var(--je-gold); }
.brands-line--still .brands-track { animation: none; width: auto; justify-content: center; }
.brands-line--still .brands-viewport { -webkit-mask-image: none; mask-image: none; }
.brands-line--still .brands-set li:last-child::after { display: none; }
@keyframes brands-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; width: auto; }
  .brands-viewport { -webkit-mask-image: none; mask-image: none; }
  .brands-set { flex-wrap: wrap; row-gap: 10px; }
  .brands-set[aria-hidden="true"] { display: none; }
  .brands-set li[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .brands-line { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .brands-set a { font-size: 16px; }
}
@media print { .brands-line { display: none; } }

/* ============================================================
   Appointment booking — choose a time, manage a booking
   ============================================================ */
.book-page { max-width: 860px; padding-top: 36px; padding-bottom: 56px; }
.book-page h1 { margin-bottom: 6px; }
.book-back { font-size: 14px; margin: 0 0 18px; }
.book-back a, .book-page .book-intro a { color: #8a6d1f; }
.book-subject { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; margin: 0 0 6px; }
.book-intro { color: #6b6a63; line-height: 1.7; max-width: 640px; }
.book-error { color: #8a3b3b; background: #f7eeee; border: 1px solid #e3caca; padding: 10px 14px; border-radius: 6px; }
.book-notice { color: #2f6b3d; background: #eef6ee; border: 1px solid #bcd9bc; padding: 12px 16px; border-radius: 6px; }
.book-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; }
.book-type { display: block; border: 1px solid var(--je-line); border-radius: 6px; padding: 18px 20px; background: #fff; text-decoration: none; color: var(--je-black); }
.book-type:hover { border-color: var(--je-gold); }
.book-type strong { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 20px; margin-bottom: 4px; }
.book-type span { color: #6b6a63; font-size: 14px; line-height: 1.5; }
.book-days { display: grid; gap: 12px; margin: 22px 0; }
.book-day { border: 1px solid var(--je-line); border-radius: 6px; padding: 12px 14px 14px; margin: 0; background: #fff; }
.book-day legend { font-size: 14px; padding: 0 6px; color: var(--je-black); }
.book-times { display: flex; flex-wrap: wrap; gap: 8px; }
.book-time input { position: absolute; opacity: 0; pointer-events: none; }
.book-time span { display: inline-block; min-width: 64px; text-align: center; padding: 7px 10px; border: 1px solid var(--je-line); border-radius: 999px; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums; }
.book-time span:hover { border-color: var(--je-gold); }
.book-time input:checked + span { background: var(--je-gold); border-color: var(--je-gold); color: #fff; }
.book-time input:focus-visible + span { outline: 2px solid #8a6d1f; outline-offset: 2px; }
.book-details { max-width: 520px; }
.book-details label { display: block; font-size: 14px; margin-bottom: 12px; }
.book-details input, .book-details textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--je-line); font: inherit; background: #fff; }
.book-summary { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 18px 0 22px; font-size: 15px; }
.book-summary dt { color: #6b6a63; }
.book-summary dd { margin: 0; }
.book-actions, .book-manage { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.book-manage { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--je-line); }
.book-cancel { border-color: #c9a9a9; color: #8a3b3b; }
.book-cancel:hover { background: #8a3b3b; border-color: #8a3b3b; color: #fff; }
.enquiry-book-link { display: block; text-align: center; margin-top: 12px; font-size: 14px; color: #8a6d1f; }
@media (max-width: 600px) { .book-summary { grid-template-columns: 1fr; gap: 2px; } .book-summary dd { margin-bottom: 10px; } }
.book-later summary { cursor: pointer; color: #8a6d1f; font-size: 14px; padding: 6px 0; }
.book-later .book-days { margin-top: 10px; }

/* What We Do tile paired with a render (Version A): the tile's own drawing is
   solid at the bottom and dissolves towards the top, where the render shows
   through. The drawing never fades fully, so a cream veil always sits over
   the render and the service, not the photograph, leads. */
.wwd-tile { position: relative; display: block; aspect-ratio: 1500 / 840; background: #f0ebe1; overflow: hidden; }
.wwd-render { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s ease; }
.service-card:hover .wwd-render { transform: scale(1.03); }
.service-card--tile .wwd-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.28) 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 40%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.28) 100%);
}

/* Development page "At a glance": a quiet facts row under the snapshot bar. */
.dev-glance { border-bottom: 1px solid var(--je-line); padding: 18px 24px 14px; }
.dev-glance-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; }
.glance-item { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.glance-label { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--je-text-muted); }
.glance-value { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; color: var(--je-black); }
.glance-plan { max-width: 420px; }
.glance-plan .glance-value { font-size: 17px; line-height: 1.35; }
.glance-asof { text-align: center; font-size: 11.5px; color: var(--je-text-muted); margin: 10px 0 0; letter-spacing: .03em; }
@media (max-width: 640px) { .dev-glance-inner { justify-content: flex-start; gap: 12px 28px; } }
.glance-small { font-size: 16px; line-height: 1.35; }
.glance-team { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--je-line); }
/* On-this-page links under the hero: a quiet single line that scrolls sideways on a phone. */
.dev-jump { display: flex; gap: 26px; overflow-x: auto; padding: 4px 0 14px; margin-bottom: 8px; border-bottom: 1px solid var(--je-line); scrollbar-width: none; }
.dev-jump::-webkit-scrollbar { display: none; }
.dev-jump a { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--je-text-muted); text-decoration: none; white-space: nowrap; }
.dev-jump a:hover { color: var(--je-black); }
#overview, #amenities, #film, #residences, #location, #enquire { scroll-margin-top: 90px; }
.brand-licence { font-size: 12.5px; color: var(--je-text-muted); line-height: 1.6; margin: 14px 0 0; }
@media print { .dev-jump { display: none !important; } }

/* Market buyer questions: country page accordion + development page drawer. */
.market-faqs { max-width: 820px; margin: 56px auto 24px; }
.market-faqs h2 { margin-bottom: 18px; }
.faq-item { border-top: 1px solid var(--je-line); }
.faq-item:last-of-type { border-bottom: 1px solid var(--je-line); }
.faq-item > summary { list-style: none; cursor: pointer; padding: 16px 28px 16px 2px; position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: var(--je-black); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; position: absolute; right: 4px; top: 14px; color: var(--je-gold); font-size: 22px; }
.faq-item[open] > summary::after { content: '–'; }
.faq-item p { margin: 0 0 18px; color: #4a4740; line-height: 1.75; font-size: 15px; }
.faq-note { font-size: 12.5px; color: var(--je-text-muted); margin-top: 16px; font-style: italic; }
.faq-drawer { margin-top: 24px; }
.faq-qa { margin-bottom: 14px; }
.faq-q { margin: 0 0 4px; font-weight: 500; color: var(--je-black); font-size: 15px; }
.faq-a { margin: 0; color: #4a4740; line-height: 1.7; font-size: 14.5px; }

/* =====================================================   The Director's Cut: grid, detail page and the home banner
   ============================================================ */
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; margin: 24px 0 64px; }
.dc-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--je-line); }
.dc-card-img { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; transition: transform .6s ease; }
.dc-card:hover .dc-card-img { transform: scale(1.02); }
.dc-card { overflow: hidden; }
.dc-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.dc-card-place { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--je-gold); }
.dc-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; line-height: 1.25; color: var(--je-black); }
.dc-card-note { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16px; color: #5a564e; line-height: 1.45; }
.dc-card-meta { font-size: 13px; color: var(--je-text-muted); margin-top: 4px; }
.dc-price { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; margin: 14px 0 4px; color: var(--je-black); }
.dc-facts { color: var(--je-text-muted); font-size: 14px; letter-spacing: .03em; margin: 0 0 18px; }
.dc-note { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--je-gold); }
.dc-note p { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.5; margin: 0 0 8px; color: var(--je-black); }
.dc-note footer { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--je-text-muted); }

.dc-banner { margin: 56px 0 64px; }
.dc-banner-head { max-width: 1180px; margin: 0 auto 20px; padding: 0 24px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.dc-banner-head h2 { margin: 0; }
.dc-banner-head .journal-all { margin-left: auto; }
.dc-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.dc-track { display: flex; gap: 18px; width: max-content; animation: brands-drift 80s linear infinite; }
.dc-banner:hover .dc-track, .dc-banner:focus-within .dc-track { animation-play-state: paused; }
.dc-slide { position: relative; display: block; width: 340px; aspect-ratio: 4 / 3; overflow: hidden; flex: none; }
.dc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.dc-slide:hover img { transform: scale(1.04); }
.dc-slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; color: #fff; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.25;
  background: linear-gradient(to top, rgba(10, 9, 7, .72), transparent); }
.dc-slide-cap em { display: block; font-family: 'Jost', sans-serif; font-style: normal; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
@media (max-width: 640px) { .dc-slide { width: 260px; } }
@media (prefers-reduced-motion: reduce) { .dc-track { animation: none; } .dc-viewport { overflow-x: auto; } }
@media print { .dc-banner { display: none; } }
=======
/* About: the Director's portrait beside her name. */
.director-card { display: flex; align-items: center; gap: 22px; margin-top: 40px; }
.director-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 1px solid var(--je-gold); padding: 3px; background: #fff; flex: none; }
.director-card h3 { margin: 0 0 6px; }
.director-card p { margin: 0; color: #6b6a63; line-height: 1.6; }

/* ============================================================
   Phone header: logo + Menu button; the nav and social icons open as a
   stacked panel. Only applies once the toggle script has run
   (.has-nav-toggle), so without JavaScript the nav shows as before.
   ============================================================ */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .je-header.has-nav-toggle { flex-wrap: wrap; padding: 14px 20px; position: relative; }
  .je-header.has-nav-toggle .brand img { height: 34px; }
  .je-header.has-nav-toggle .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--je-black);
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  }
  .nav-toggle-bars { position: relative; width: 22px; height: 9px; }
  .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--je-gold); transition: transform .25s ease, top .25s ease;
  }
  .nav-toggle-bars::before { top: 0; }
  .nav-toggle-bars::after { top: 7.5px; }
  .je-header.nav-open .nav-toggle-bars::before { top: 4px; transform: rotate(45deg); }
  .je-header.nav-open .nav-toggle-bars::after { top: 4px; transform: rotate(-45deg); }

  .je-header.has-nav-toggle .je-nav,
  .je-header.has-nav-toggle .header-social { display: none; }
  .je-header.nav-open .je-nav {
    display: flex; flex-direction: column; width: 100%; margin: 12px 0 0; border-top: 1px solid var(--je-line);
  }
  .je-header.nav-open .je-nav > a,
  .je-header.nav-open .je-nav > .je-nav-logout-form,
  .je-header.nav-open .je-nav > .account-menu {
    display: block; margin: 0; padding: 15px 2px; border-bottom: 1px solid var(--je-line); font-size: 14px; letter-spacing: .14em;
  }
  .je-header.nav-open .je-nav .je-nav-logout { margin: 0; }
  .je-header.nav-open .account-menu-list { position: static; box-shadow: none; border: 0; margin: 8px 0 0; background: transparent; min-width: 0; }
  .je-header.nav-open .account-menu-list a, .je-header.nav-open .account-menu-list button { padding: 9px 0 9px 14px; }
  .je-header.nav-open .header-social {
    display: flex; position: static; width: 100%; margin: 0; padding: 16px 2px 6px; gap: 24px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .je-header.nav-open .header-social svg { width: 20px; height: 20px; }
}

/* Self-hosted development films (lib/dev-video). */
.hero-video-bg video.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dev-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.journal-residences { margin: 48px 0 8px; }

/* "Tax at a glance" on a development page. The list reuses .features-list; this
   is just the sub-points and the fixed for-information-only footer, set quieter
   than the facts above it so it reads as a caveat rather than a claim. */
.features-list ul {
  margin: 6px 0 2px;
  padding-left: 18px;
  list-style: disc;
}

.features-list ul li {
  font-size: .95em;
  color: var(--je-text-muted);
}

.tax-glance-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--je-text-muted);
  max-width: 70ch;
}