/* Blue Velvet Real Estate, 2026 redesign. One stylesheet for the whole site.
   Sand neutrals, Blue Velvet navy for text and dark surfaces, Blue Velvet amber for actions. */

@font-face {
    font-family: "Noto Serif Display";
    src: url("../fonts/noto-serif-display-latin.woff2") format("woff2");
    font-weight: 300 500;   /* the file is variable; 500 is the hero word */
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Golos Text";
    src: url("../fonts/golos-text-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --sand-50: #f3f1ec;
    --sand-100: #e9e4dc;
    --sand-200: #ddd5c8;
    --sand-300: #cdc2b1;
    --navy: #0f2535;
    --navy-80: #2b4152;
    --ink-60: rgba(15, 37, 53, 0.64);
    --line: rgba(15, 37, 53, 0.16);
    --line-light: rgba(243, 241, 236, 0.22);
    --amber: #eea933;
    --amber-deep: #c98a1c;
    /* Blue Velvet's metallic gold, as on the original site's buttons and rules. Text sits on it in
       navy: the pale middle of the gradient is too light for white text to be read. */
    --gold: linear-gradient(90.47deg, #924f18 -11.39%, #c39235 19.37%, #f5eea6 53.96%, #995d27 91.21%, #cd9c50 109.23%);
    --champagne: #e3c27a;        /* gold for text on navy, where a gradient would be fussy */
    --on-navy-60: rgba(243, 241, 236, 0.66);
    --wa: #25d366;

    --serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
    --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* The scale grows with the screen but reaches its largest only on big monitors: a laptop (1280 to
       1536 wide, often 700 to 860 tall) gets about three quarters of it (2026-10-31: "text too big on my
       laptop"). The rem in each keeps browser zoom working. At 1440: 66 / 46 / 32 / 20 / 18 px. */
    --fs-xl: clamp(2.25rem, 1.25rem + 3.2vw, 4.75rem);       /* section titles */
    --fs-lg: clamp(1.75rem, 1rem + 2.1vw, 3rem);             /* sub-section titles, step names */
    --fs-md: clamp(1.375rem, 0.875rem + 1.35vw, 2rem);      /* card titles, strips */
    --fs-lead: clamp(1.0625rem, 0.875rem + 0.5vw, 1.25rem);
    /* The serif is for headings and short display lines. Anything people read closely (messages, mission,
       statements, phone numbers, prices, facts) is in the body font. */
    --fs-read: clamp(1.0625rem, 0.95rem + 0.25vw, 1.125rem);

    --ease: cubic-bezier(0.625, 0.05, 0, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --gutter: clamp(1rem, 3.33vw, 3rem);
    --section: clamp(3.5rem, 2rem + 5vw, 7rem);   /* 104px between sections at 1440, was 144 */
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }   /* page width stays put when the intro locks scrolling */

body {
    margin: 0;
    background: var(--sand-50);
    color: var(--navy);
    font: 400 1rem/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--amber); color: var(--navy); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.container { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--tight { padding-block: clamp(2rem, 5vw, 4rem) clamp(1rem, 2vw, 2rem); }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; left: 1rem; top: 1rem; z-index: 200; padding: 0.75rem 1.25rem;
    background: var(--navy); color: var(--sand-50); border-radius: 999px; transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }   /* keyboard (Tab) only: a click or a script putting focus there no longer shows it */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.kicker { font-size: 1rem; line-height: 1.4; margin: 0 0 1rem; }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.h-xl, .h-lg, .h-md { font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em; }
.h-xl { font-size: var(--fs-xl); line-height: 1; }
.h-lg { font-size: var(--fs-lg); line-height: 1.04; }
.h-md { font-size: var(--fs-md); line-height: 1.1; }

/* Split headings: each line sits in a mask so it can rise into view. */
.split-line { overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.06em; margin-bottom: -0.06em; }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */

/* A label pill and an arrow disc, 4px apart. On hover the disc moves to the leading side. */
.btn {
    --h: 3em;
    --bg: var(--gold);
    --fg: var(--navy);
    display: inline-flex; align-items: center; gap: 4px;
    height: var(--h); padding: 0; border: 0; background: none;
    color: var(--fg); font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn__label {
    display: inline-flex; align-items: center; height: 100%; padding: 0 1.25em;
    border-radius: 999px; background: var(--bg); font-weight: 500; transition: filter 0.3s;
}
.btn__disc {
    display: inline-grid; place-items: center; flex: none;
    width: var(--h); height: var(--h); border-radius: 50%; background: var(--bg);
    transition: width 0.6s var(--ease), margin 0.6s var(--ease), transform 0.6s var(--ease), opacity 0.4s;
}
.btn__disc--lead { width: 0; margin-right: -4px; transform: scale(0); opacity: 0; }
@media (hover: hover) {
    .btn:hover .btn__disc--lead,
    a:hover > .btn .btn__disc--lead { width: var(--h); margin-right: 0; transform: none; opacity: 1; }
    .btn:hover .btn__disc:not(.btn__disc--lead),
    a:hover > .btn .btn__disc:not(.btn__disc--lead) { width: 0; margin-left: -4px; transform: scale(0); opacity: 0; }
}
@media (hover: hover) { .btn:not(.btn--outline):hover .btn__label, a:hover > .btn:not(.btn--outline) .btn__label { filter: brightness(1.08); } }
.btn:disabled { cursor: progress; opacity: 0.75; }
.btn--outline { --bg: transparent; --fg: currentColor; }   /* takes the colour of the section it sits on */
.btn--outline .btn__label, .btn--outline .btn__disc { box-shadow: inset 0 0 0 1px currentColor; }

/* ─── Preloader (first visit only) ─────────────────────────────────────────── */

/* is-intro sits on <html> while the first-visit intro plays. Not .intro: that is the home intro section. */
.preloader { display: none; }
.is-intro .preloader {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 100; background: var(--navy); color: var(--sand-50);
}
.is-intro body { overflow: hidden; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.preloader__crest { width: clamp(64px, 7vw, 96px); height: auto; }
.preloader__word { font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--champagne); }
.preloader__word .char { display: inline-block; }
.preloader__word { will-change: transform; }
.is-intro .preloader__inner { visibility: hidden; }   /* site.js shows it once the words are split, so nothing flashes */
.failsafe .preloader { display: none !important; }

/* ─── Navigation ───────────────────────────────────────────────────────────── */

/* The bar spans the page at the top and narrows into a floating pill as you scroll. site.js scrubs
   one number, --nav-p, from 0 at the top to 1 after the first 420px of scroll (240px on phones), and
   the pill's size is worked out here from the live window width. It used to be pixel sizes measured
   by the script at one moment: a resize or device preview caught mid-way could leave the pill a
   sliver with the name squeezed out of it. */
.nav {
    --nav-fg: var(--navy);
    --menu-bg: var(--navy);
    --menu-fg: var(--sand-50);
    --nav-p: 0;
    --nav-h0: clamp(5rem, 2.5rem + 3.5vw, 6.75rem);   /* at the top: 90px at 1440 */
    --nav-h1: 76px;                          /* the pill */
    --nav-w1: min(600px, 100% - 16px);   /* room for the logo, "Contact us" and Menu */
    --nav-pl1: 22px;
    --nav-pr1: 14px;
    position: fixed; left: 50%; z-index: 50;
    top: calc(var(--nav-p) * 8px);
    width: calc(100% - var(--nav-p) * (100% - var(--nav-w1)));
    height: calc(var(--nav-h0) + var(--nav-p) * (var(--nav-h1) - var(--nav-h0)));
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-left: calc(var(--gutter) + var(--nav-p) * (var(--nav-pl1) - var(--gutter)));
    padding-right: calc(var(--gutter) + var(--nav-p) * (var(--nav-pr1) - var(--gutter)));
    transform: translateX(-50%);
    color: var(--nav-fg);
}
.has-hero .nav:not(.is-solid) { --nav-fg: var(--sand-50); --menu-bg: var(--sand-50); --menu-fg: var(--navy); }
.nav.is-solid { --nav-fg: var(--sand-50); --menu-bg: var(--gold); --menu-fg: var(--navy); }
.nav__bg {
    position: absolute; inset: 0; z-index: -1;
    background: var(--navy); border-radius: 999px; opacity: 0;
    box-shadow: 0 14px 34px -16px rgba(15, 37, 53, 0.6);
}
.nav__brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; min-width: 0; }
.nav__crest { width: clamp(44px, 3.4vw, 54px); height: auto; flex: none; border-radius: 50%; box-shadow: 0 6px 18px -8px rgba(15, 37, 53, 0.55); transition: width 0.5s var(--ease); }
.nav__word { display: flex; flex-direction: column; font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 1rem + 0.9vw, 1.875rem); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.4s; }
.nav__word small { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.02em; align-self: flex-end; margin-top: 0.2rem; }
.nav.is-solid .nav__crest { width: 48px; }

/* Contact, beside Menu: an outline in the bar's own colour (light over the hero, navy on a pale page,
   light on the navy pill), filled gold on hover like the site's buttons. Phones get a chat disc in
   the same place (no room for words), and the Menu's dots step aside for it. Hidden while the menu
   is open, which lists Contact itself. */
.nav__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.nav__cta {
    position: relative; display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.25rem;
    border-radius: 999px; color: var(--nav-fg); box-shadow: inset 0 0 0 1px currentColor; font-weight: 500; white-space: nowrap;
    text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background 0.4s, color 0.4s, box-shadow 0.4s, opacity 0.3s;
}
.nav__cta-icon { display: none; }
.nav__cta:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (hover: hover) { .nav__cta:hover { background: var(--gold); color: var(--navy); box-shadow: none; } }
.menu-open .nav__cta { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
@media (max-width: 767px) {
    .nav__cta { width: 3rem; padding: 0; }
    .nav__cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nav__cta-icon { display: grid; }
    .nav__actions .menu-btn__dots { display: none; }   /* scoped: the Menu button's own rules come later in this file */
}
@media (max-width: 379px) { .nav__word { font-size: 1.375rem; } }   /* 360px phones: the name keeps clear of the chat disc */

.menu-btn {
    position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none;
    height: 3rem; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--menu-fg); -webkit-tap-highlight-color: transparent;
}
.menu-btn__label, .menu-btn__dots { background: var(--menu-bg); transition: background 0.4s, color 0.4s; }
.menu-btn__label { position: relative; display: grid; height: 100%; padding: 0 1.25rem; border-radius: 999px; overflow: hidden; }
.menu-btn__label > span { grid-area: 1 / 1; display: grid; place-items: center; transition: transform 0.6s var(--ease); }
.menu-btn__label [data-label-open] { transform: translateY(110%); }
.menu-btn[aria-expanded="true"] [data-label-closed] { transform: translateY(-110%); }
.menu-btn[aria-expanded="true"] [data-label-open] { transform: none; }
.menu-btn__dots { display: flex; align-items: center; justify-content: center; gap: 3px; width: 3rem; height: 3rem; border-radius: 50%; }
.menu-btn__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; transition: transform 0.6s var(--ease), opacity 0.4s; }
@media (hover: hover) {
    .menu-btn:hover .menu-btn__dots i:first-child { transform: translateX(-2px); }
    .menu-btn:hover .menu-btn__dots i:last-child { transform: translateX(2px); }
}
.menu-btn[aria-expanded="true"] .menu-btn__dots i:first-child { transform: translateX(7px); opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__dots i:last-child { transform: translateX(-7px); opacity: 0; }

/* ─── Menu ─────────────────────────────────────────────────────────────────── */

.menu {
    position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain;
    background: var(--navy); color: var(--sand-50);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 0.9s var(--ease), visibility 0s linear 0.9s;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 0.9s var(--ease); }
.menu-open .nav, .menu-open .has-hero .nav:not(.is-solid) { --nav-fg: var(--sand-50); --menu-bg: var(--gold); --menu-fg: var(--navy); }
.menu-open .nav__bg { opacity: 0 !important; box-shadow: none; }
.menu__inner {
    min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem 4rem;
    padding: clamp(5.5rem, 14vh, 10rem) var(--gutter) clamp(1.25rem, 4vh, 3rem);
}
.menu__links { display: flex; flex-direction: column; }
.menu__link {
    display: flex; align-items: center; width: fit-content;
    font-family: var(--serif); font-weight: 300; line-height: 1.04; letter-spacing: -0.015em;
    font-size: clamp(2.25rem, min(6.2vw, 6.9vh), 5.5rem);   /* height counts too: all nine links must fit a short laptop screen */
    text-decoration: none;
}
/* The amber dot gets its own space (0.3em gap) so it never touches the word. */
.menu__link::before {
    content: ""; flex: none; width: 0; height: 0.14em; margin-right: 0; border-radius: 50%; background: var(--amber);
    transform: scale(0); transition: width 0.5s var(--ease), margin 0.5s var(--ease), transform 0.5s var(--ease);
}
.menu__link:hover::before, .menu__link:focus-visible::before, .menu__link[aria-current]::before { width: 0.14em; margin-right: 0.3em; transform: none; }
.menu__mask { display: block; overflow: clip; overflow-clip-margin: 0.1em; padding-bottom: 0.04em; }
.menu__link[aria-current] .menu__text { color: var(--champagne); }
@media (max-width: 519px) { .menu__tail { display: none; } }   /* "Business setup in Dubai" would wrap, leaving "Dubai" looking like a link of its own */
@media (hover: hover) {
    .menu__link:hover .menu__text { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.menu__text { display: block; transform: translateY(105%); transition: transform 0.9s var(--ease); }
.menu.is-open .menu__text { transform: none; }
.menu:focus { outline: none; }
.menu.is-open .menu__link:nth-child(1) .menu__text { transition-delay: 0.25s; }
.menu.is-open .menu__link:nth-child(2) .menu__text { transition-delay: 0.3s; }
.menu.is-open .menu__link:nth-child(3) .menu__text { transition-delay: 0.35s; }
.menu.is-open .menu__link:nth-child(4) .menu__text { transition-delay: 0.4s; }
.menu.is-open .menu__link:nth-child(5) .menu__text { transition-delay: 0.45s; }
.menu.is-open .menu__link:nth-child(6) .menu__text { transition-delay: 0.5s; }
.menu.is-open .menu__link:nth-child(7) .menu__text { transition-delay: 0.55s; }
.menu.is-open .menu__link:nth-child(8) .menu__text { transition-delay: 0.6s; }
.menu__aside { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0.5rem; opacity: 0; transform: translateY(1rem); transition: opacity 0.5s, transform 0.8s var(--ease); }
.menu.is-open .menu__aside { opacity: 1; transform: none; transition-delay: 0.5s; }
.menu__label { font-size: 0.875rem; margin: 0 0 0.25rem; color: var(--on-navy-60); }
.menu__big { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3; text-decoration: none; }
.menu__big:hover { color: var(--champagne); }
.menu .socials a { box-shadow: inset 0 0 0 1px var(--line-light); }
.menu .socials a:hover { background: var(--gold); color: var(--navy); }

.socials { display: flex; gap: 0.75rem; }
.socials svg { width: 18px; height: 18px; }
.socials a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: background 0.3s, color 0.3s; }
.socials a:hover { background: var(--navy); color: var(--sand-50); }

/* ─── Hero ─────────────────────────────────────────────────────────────────── */

/* One screen tall; nothing below rises into it (the intro photo that did went on 2026-10-29). */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; background: var(--navy); color: var(--sand-50); }
.hero__media { position: absolute; inset: 0; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--poster) center / cover no-repeat; }
/* The poster for tall screens (the same shape test site.js uses to pick the portrait video). Only
   the background that applies is downloaded. */
@media (max-aspect-ratio: 4/5) { .bg-video { background-image: var(--poster-portrait); } }
/* Darker than a plain tint, and darkest where the name and the intro sit, so the text stands off the moving video. */
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 53, 0.62) 0%, rgba(15, 37, 53, 0.4) 34%, rgba(15, 37, 53, 0.52) 58%, rgba(15, 37, 53, 0.86) 100%); }
.hero__content { position: relative; height: 100vh; height: 100svh; min-height: 34rem; display: flex; flex-direction: column; padding-top: 7rem; padding-bottom: clamp(1.5rem, 4vw, 3rem); container-type: inline-size; }
.hero__word {
    margin-block: auto clamp(1.5rem, 5vh, 3.5rem);
    font-family: var(--serif); font-weight: 500; line-height: 0.9; letter-spacing: -0.025em; white-space: nowrap;
    /* Medium weight, and 84% of the width: "Blue Velvet" is 5.1em wide at 500. */
    font-size: calc((100vw - 2 * var(--gutter)) / 6.08);
    font-size: calc(100cqw / 6.08);
}
.hero__word .char { display: inline-block; }
.hero__word .word { white-space: nowrap; }
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.hero__lead { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.45; }
.hero__lead p:last-child { margin: 0; }
.hero__kicker { font-size: 1.0625rem; font-weight: 500; margin-bottom: 0.75rem; letter-spacing: 0.01em; }

/* ─── Home: three ways in (buy, rent, off-plan) ────────────────────────────── */

/* Even columns, one per way shown (two when one has nothing to list). Each is a photo under a navy
   wash, deepest at the foot where the word, the count and the arrow sit; hover as the cards. */
.doors { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.doors__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.door { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1 / 1; padding: clamp(1.25rem, 2.2vw, 2rem); overflow: hidden; background: var(--navy); color: var(--sand-50); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.door__media { position: absolute; inset: 0; z-index: -1; }
.door__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.door__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 53, 0.08) 0%, rgba(15, 37, 53, 0.2) 45%, rgba(15, 37, 53, 0.82) 100%); }
.door__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.door__text { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; text-shadow: 0 1px 12px rgba(15, 37, 53, 0.4); }
.door__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); line-height: 1; letter-spacing: -0.015em; }
.door__count { font-size: 1rem; color: rgba(243, 241, 236, 0.86); }
.door__go { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--sand-50); color: var(--navy); position: relative; isolation: isolate; transition: transform 0.6s var(--ease), color 0.4s; }
.door__go::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--gold); opacity: 0; transition: opacity 0.4s; }
.door:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (hover: hover) {
    .door:hover .door__media img { transform: scale(1.05); }
    .door:hover .door__go { transform: rotate(-45deg); }
    .door:hover .door__go::before { opacity: 1; }
}

/* ─── Marquee ──────────────────────────────────────────────────────────────── */

.marquee { overflow: hidden; padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 3rem); user-select: none; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item { font-family: var(--serif); font-weight: 300; font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -0.015em; padding-right: 0.35em; white-space: nowrap; }
.marquee--light { color: var(--sand-50); position: relative; }

/* ─── Property cards ───────────────────────────────────────────────────────── */

.grid--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.67vw, 1.5rem); }
.card { background: var(--sand-100); }
.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-200); }   /* 3:2, so a card fits a laptop screen with room around it */
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.card__badges { position: absolute; left: 1rem; top: 1rem; display: flex; gap: 0.375rem; }
/* For sale (navy) and for rent (light) are told apart at a glance, and the shadow keeps either one
   readable on a bright sky or a dark interior. */
.badge { padding: 0.55em 1em; border-radius: 999px; font-size: 0.875rem; font-weight: 500; line-height: 1; letter-spacing: 0.01em; box-shadow: 0 6px 18px -6px rgba(15, 37, 53, 0.55); }
.badge--sale { background: var(--navy); color: var(--sand-50); }
.badge--rent { background: var(--sand-50); color: var(--navy); }
.card__body { display: flex; flex-direction: column; gap: 1rem; flex: 1; padding: clamp(1.1rem, 1.6vw, 1.5rem); }
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.card__title { font-size: clamp(1.125rem, 0.75rem + 0.8vw, 1.375rem); line-height: 1.2; }
/* The arrow disc (listing cards, home "Why" cards) turns gold on the card you point at. The gold is
   a layer that fades in step with the turn: swapping the background outright left tilted navy arrows
   and gold flashes behind as cards scrolled past the pointer. */
.card__go { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--navy); color: var(--sand-50); }
.card__go, .why__go, .person__go { position: relative; isolation: isolate; transition: transform 0.6s var(--ease), color 0.4s; }
.card__go::before, .why__go::before, .person__go::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--gold); opacity: 0; transition: opacity 0.4s; }
.card__specs { display: grid; gap: 0.3rem; margin: 0; }
.card__specs div { display: flex; justify-content: space-between; gap: 1rem; }
.card__specs dt { color: var(--ink-60); }
.card__specs dd { margin: 0; text-align: right; }
@media (hover: hover) {
    .card:hover .card__media img { transform: scale(1.05); }
    .card:hover .card__go, .why__card:hover .why__go, .person:hover .person__go { transform: rotate(-45deg); color: var(--navy); }   /* gold only on the card you point at */
    .card:hover .card__go::before, .why__card:hover .why__go::before, .person:hover .person__go::before { opacity: 1; }
}

/* ─── CTA band ─────────────────────────────────────────────────────────────── */

.cta-band {
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap;
    margin-block: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--gold) top / 100% 2px no-repeat, var(--navy); color: var(--sand-50);
}
.cta-band__line { font-family: var(--serif); font-weight: 300; font-size: var(--fs-md); line-height: 1.05; letter-spacing: -0.01em; }

/* ─── Steps (home process, about services) ─────────────────────────────────── */

.process { position: relative; background: var(--sand-300); padding-block: var(--section); margin-top: clamp(2rem, 6vw, 5rem); }
.process--light { background: var(--sand-100); margin-top: 0; }
.process__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 6vw, 6rem); }
.process__head .h-xl { max-width: 14ch; }
.steps { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; padding-block: clamp(1.5rem, 3vw, 2.75rem); border-bottom: 1px solid var(--line); transition: opacity 0.5s var(--ease); }
.step__num { display: block; margin-bottom: 0.2rem; font-size: 1rem; color: var(--ink-60); }
.step h3 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-lg); line-height: 1; letter-spacing: -0.015em; }
.step__text { max-width: 40rem; margin: 0; font-size: 1.0625rem; }
.step__img { display: none; }
.steps.is-hovering .step:not(.is-active) { opacity: 0.38; }
.cursor-img {
    position: fixed; left: 0; top: 0; z-index: 30; width: clamp(180px, 17vw, 260px); aspect-ratio: 4 / 5;
    overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; background: var(--sand-200);
}
.cursor-img img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Home: from abroad ────────────────────────────────────────────────────── */

.abroad { overflow-x: clip; }
.abroad__title {
    display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); padding-inline: var(--gutter);
    font-family: var(--serif); font-weight: 300; line-height: 1.02; letter-spacing: -0.015em; text-align: center;
    /* A display piece, like the hero: it keeps the original large size (the title scale was reduced, this
       was not), because the drift only reads as intended when the lines span most of the width. The longest
       line ("is exciting. Doing it") is 8.27em wide; on phones it takes 82% of the screen. */
    font-size: min(clamp(2.75rem, 8.3vw, 7.5rem), calc(82vw / 8.27));
}
.abroad__line { display: block; white-space: nowrap; will-change: transform; }
/* The drift runs in the browser's own scrolling, so it glides on phones as it does on desktop. All
   four lines follow the title's one timeline (in view at the bottom to gone at the top), so they meet
   centred halfway. Browsers without scroll timelines get the site.js version instead. */
@supports (animation-timeline: view()) {
    .motion .abroad__title { view-timeline: --abroad block; }
    .motion .abroad__line { animation: drift-a linear both; animation-timeline: --abroad; animation-range: cover; }
    .motion .abroad__line[data-drift-line="-1"] { animation-name: drift-b; }
}
@keyframes drift-a { from { transform: translateX(10%); } to { transform: translateX(-10%); } }
@keyframes drift-b { from { transform: translateX(-10%); } to { transform: translateX(10%); } }
.abroad__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 9vw, 10rem); align-items: start; }
.abroad__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand-200); }
.abroad__media img { width: 100%; height: 115%; object-fit: cover; }
.abroad__text { max-width: 40rem; font-size: 1.125rem; }
.abroad__text .btn { margin-top: clamp(1rem, 4vw, 4rem); }

/* ─── Home: why ────────────────────────────────────────────────────────────── */

/* The marina film fills the whole section, the moving title and every card inside it (cards hanging
   past its edge read as broken). One even grid: every card the same size, lined up. Each card opens
   the page that backs up its claim. */
.why { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); background: var(--navy); color: var(--sand-50); }
.why__media { position: absolute; inset: 0; }
.why__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 53, 0.4), rgba(15, 37, 53, 0.04) 45%, rgba(15, 37, 53, 0.1)); }
.why__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(1rem, 1.67vw, 1.5rem); max-width: 60rem; margin-inline: auto; }
.why__card { position: relative; display: flex; flex-direction: column; min-height: clamp(14rem, 20vw, 19rem); padding: clamp(1.5rem, 2.6vw, 2.5rem); background: var(--sand-100); color: var(--navy); }
.why__card p { margin: 0; }
.why__card .kicker { margin-bottom: 0.5rem; }
.why__card .h-md { margin-bottom: 1rem; }
.why__more { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: clamp(1.5rem, 3vw, 2.25rem); color: var(--navy); font-weight: 500; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.why__more::after { content: ''; position: absolute; inset: 0; }
.why__more:focus-visible { outline: none; }
.why__more:focus-visible::after { outline: 2px solid var(--amber); outline-offset: 4px; }
.why__go { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--navy); color: var(--sand-50); }   /* hover: with .card__go */

/* ─── Let's talk ───────────────────────────────────────────────────────────── */

.talk { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); background: var(--gold) top / 100% 2px no-repeat, var(--navy); color: var(--sand-50); }
.talk .kicker { color: var(--on-navy-60); }
/* The title alone, at the foot of the navy block, level with the buttons on the photo. */
.talk__text { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(20rem, 32vw, 30rem); padding: clamp(1.75rem, 4vw, 3.25rem); }
.talk__text .h-xl { max-width: 9ch; margin: 0; }
.talk__media { position: relative; overflow: hidden; min-height: 26rem; background: var(--sand-200); }
.talk__media img { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; }
/* A navy wash, clear at the top and deepest at the foot where the buttons sit, as on the other photos
   that carry words or buttons: a bright photo (a sunlit room) otherwise swallowed the gold button. */
.talk__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 37, 53, 0.05) 0%, rgba(15, 37, 53, 0.15) 40%, rgba(15, 37, 53, 0.78) 100%); pointer-events: none; }
.talk__actions { position: absolute; z-index: 2; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); left: clamp(1rem, 2vw, 2rem); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.75rem; }
.talk__wa { display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1.25rem; border-radius: 999px; background: var(--sand-50); color: var(--navy); text-decoration: none; }

/* ─── Inner page banner ────────────────────────────────────────────────────── */

/* One block at every width: the photo (or video) is darkened and the title, intro and button sit
   on it, so the page opens without a separate title section and the content starts sooner. The
   photo fills the cell the text defines; it is absolutely placed, so its height never depends on
   a percentage of an indefinite box (which collapses on iOS Safari). Wide screens keep the title
   on the left and the intro on the right; narrow ones stack them. */
.banner { padding-top: clamp(6rem, 9vw, 8.5rem); }
.banner .container { display: grid; }
.banner__media, .banner__text { grid-area: 1 / 1; }
.banner__media { position: relative; overflow: hidden; background: var(--navy); }
.banner__media img, .banner__media video { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; }
.banner__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 37, 53, 0.4) 0%, rgba(15, 37, 53, 0.5) 40%, rgba(15, 37, 53, 0.88) 100%); }
.banner__text {
    position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; align-content: flex-end; gap: 1.25rem 3rem;
    min-height: clamp(16rem, 36vh, 24rem); padding: clamp(5rem, 9vh, 7rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);   /* the title alone */
    color: var(--sand-50); text-shadow: 0 1px 14px rgba(15, 37, 53, 0.5);
}
.banner__title { flex: 1 1 auto; max-width: 100%; font-family: var(--serif); font-weight: 300; font-size: clamp(2.75rem, 1.5rem + 4vw, 6rem); line-height: 0.95; letter-spacing: -0.025em; padding-bottom: 0.08em; }
.banner__title .char { display: inline-block; }

@media (max-width: 899px) {
    /* nowrap: in a wrapping column align-content: flex-end pushed a short title ("About us") to the right. */
    .banner__text { flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-start; gap: 0.75rem; min-height: min(19rem, 50svh); padding: 5rem 1.25rem 1.5rem; }
    .banner__title { flex: none; font-size: clamp(2.5rem, 11vw, 4rem); }
}

/* ─── Properties page ──────────────────────────────────────────────────────── */

.listings { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: 6rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
/* Every control is a labelled pill in the card colour, so the row reads as part of the page, not a box on it. */
.filter { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.filter__label { float: left; width: 100%; padding: 0 0 0 1rem; font-size: 0.8125rem; line-height: 1.3; color: var(--ink-60); }
@media (min-width: 768px) {
    /* Tablet: two rows, both flush with the card grid's edges. */
    .filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
    .filters > fieldset { grid-column: span 3; }
    .filters > .select { grid-column: span 2; }
    .filters .seg { display: flex; }
    .filters .seg__opt { flex: 1; }
    .filters .seg__opt span { justify-content: center; width: 100%; padding: 0 0.75rem; }
    .filters .select select { width: 100%; min-width: 0; }
    .filters__apply { grid-column: 1 / -1; justify-self: end; }
}
@media (min-width: 1200px) {
    /* Desktop: one row; the two toggles take what they need, the three menus share the rest. */
    .filters { grid-template-columns: auto auto repeat(3, minmax(0, 1fr)); }
    .filters > fieldset, .filters > .select { grid-column: auto; }
    .filters .seg__opt span { padding: 0 1rem; }
}

/* Phone-only filter bar and sheet (shown under 768px when scripts run); hidden elsewhere. */
.filterbar, .filters-backdrop, .filters__sheet-head, .filters__sheet-foot { display: none; }

/* Desktop and tablet: a pill that appears once the filters scroll out of view and brings them back. */
.to-filters {
    position: fixed; left: 50%; bottom: clamp(1rem, 2vw, 1.5rem); z-index: 40;
    display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1.35rem; border-radius: 999px;
    background: var(--navy); color: var(--sand-50); text-decoration: none; box-shadow: 0 14px 34px -14px rgba(15, 37, 53, 0.65);
    transform: translate(-50%, 160%); transition: transform 0.7s var(--ease);
}
.to-filters.is-visible { transform: translate(-50%, 0); }
.to-filters:hover { background: var(--navy-80); }
.menu-open .to-filters { transform: translate(-50%, 160%); }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--sand-100); min-width: 0; }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt span { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.5rem; padding: 0 1rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.seg__opt small { font-size: 0.75rem; color: var(--ink-60); transition: color 0.3s; }
.seg__opt input:checked + span { background: var(--navy); color: var(--sand-50); }
.seg__opt input:checked + span small { color: rgba(243, 241, 236, 0.7); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.seg__opt.is-empty span { opacity: 0.45; }
.select select {
    appearance: none; -webkit-appearance: none; height: 3rem; min-width: 11rem; max-width: 100%;
    padding: 0 2.75rem 0 1rem; border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.3s;
    background: var(--sand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230f2535' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1.1rem center;
    color: var(--navy); font-size: 1rem;
}
@media (hover: hover) { .seg__opt span:hover, .select select:hover { background-color: var(--sand-200); } }
.select select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.filters__apply { height: 3rem; padding: 0 1.5rem; border: 0; border-radius: 999px; background: var(--gold); color: var(--navy); cursor: pointer; }
.js .filters__apply { display: none; }
.filters.is-loading { opacity: 0.6; pointer-events: none; }
.listings__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.5rem 0 1.25rem; }
.listings__meta p { margin: 0; }
.empty { padding: clamp(2rem, 5vw, 4rem); background: var(--sand-100); text-align: center; }
.empty .h-md { margin-bottom: 1rem; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.pager a { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: background 0.3s; }
.pager a:hover { background: var(--sand-200); }
.pager a[aria-current] { background: var(--navy); color: var(--sand-50); box-shadow: none; }
.offmarket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.offmarket__text .h-xl { max-width: 10ch; margin-bottom: 1.5rem; }
.offmarket__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-200); }
.offmarket__media img { width: 100%; height: 115%; object-fit: cover; }

/* ─── Media page ───────────────────────────────────────────────────────────── */

.gallery-wall { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: 6rem; }
.gallery-wall__filter { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
a.seg__opt { color: inherit; text-decoration: none; }
a.seg__opt:focus-visible { outline: none; }
a.seg__opt:focus-visible span { outline: 2px solid var(--amber); outline-offset: 2px; }
.seg__opt[aria-current] span { background: var(--navy); color: var(--sand-50); }
.seg__opt[aria-current] span small { color: rgba(243, 241, 236, 0.7); }

/* Masonry: every photo keeps its shape (cropped only beyond 4:5 or 9:5). site.js places the tiles
   so the newest run left to right across the top; plain CSS columns are the fallback. */
.media-grid { --cols: 1; columns: var(--cols); column-gap: clamp(1rem, 2vw, 1.5rem); row-gap: clamp(1.5rem, 3vw, 2.25rem); }
.media-item { display: inline-block; width: 100%; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); break-inside: avoid; }
.media-grid.is-placed { position: relative; columns: auto; }
.media-grid.is-placed .media-item { position: absolute; margin: 0; }
@media (min-width: 600px) { .media-grid { --cols: 2; } }
@media (min-width: 1024px) { .media-grid { --cols: 3; } }
.media-item__link { display: block; color: inherit; text-decoration: none; }
.media-item__link:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.media-item__img { position: relative; display: block; overflow: hidden; background: var(--sand-100); }
.media-item__img img, .media-item__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media-item__play {
    position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
    background: var(--gold); color: var(--navy); transform: translate(-50%, -50%); transition: transform 0.7s var(--ease);
    box-shadow: 0 12px 30px -12px rgba(15, 37, 53, 0.6);
}
.media-item__play .icon { margin-left: 3px; }
.media-item__time {
    position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px;
    background: rgba(15, 37, 53, 0.62); color: var(--sand-50); font-size: 0.8125rem; font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (hover: hover) {
    .media-item__link:hover img, .media-item__link:hover video { transform: scale(1.04); }
    .media-item__link:hover .media-item__play { transform: translate(-50%, -50%) scale(1.12); }
}
.media-item__cap { display: grid; gap: 0.2rem; padding-top: 0.8rem; }
.media-item__title { line-height: 1.35; }
.media-item__meta { font-size: 0.8125rem; color: var(--ink-60); }

/* Full-screen viewer: photo, video or YouTube sized to fit, with its title underneath. */
.lightbox {
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
    background: var(--navy); color: var(--sand-50); overscroll-behavior: contain;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: lightbox-in 0.45s var(--ease-out); }
.lightbox::backdrop { background: transparent; }
.has-lightbox, .has-lightbox body { overflow: hidden; }
.lightbox__top, .lightbox__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.75rem, 2vw, 1.25rem) var(--gutter); }
.lightbox__count { margin: 0; font-size: 0.9375rem; color: rgba(243, 241, 236, 0.7); font-variant-numeric: tabular-nums; }
.lightbox__btn {
    flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%;
    background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--line-light); cursor: pointer; transition: background 0.3s, color 0.3s;
}
.lightbox__btn:hover { background: var(--sand-50); color: var(--navy); }
.lightbox__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lightbox__btn[hidden] { display: grid; visibility: hidden; }
.lightbox__stage { position: relative; container-type: size; padding: 0 var(--gutter); touch-action: pan-y; }
.lightbox__media {
    position: absolute; inset: 0; margin: auto; border: 0; background: #000;
    width: min(100cqw, 100cqh * var(--r, 1.5)); height: min(100cqh, 100cqw / var(--r, 1.5));
    object-fit: contain; animation: lightbox-in 0.6s var(--ease-out);
}
img.lightbox__media { background: transparent; }
.lightbox__text { flex: 1; min-width: 0; text-align: center; }
.lightbox__title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }
.lightbox__caption { margin: 0.3rem 0 0; font-size: 0.9375rem; color: rgba(243, 241, 236, 0.75); }
@keyframes lightbox-in { from { opacity: 0; } }

/* ─── Property page ────────────────────────────────────────────────────────── */

.pd-head { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; gap: 1.5rem 3rem; padding-top: clamp(6.5rem, 4rem + 4vw, 8.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.pd-title { margin: 0 0 1.5rem; font-family: var(--serif); font-weight: 300; font-size: clamp(2.125rem, 1rem + 3.4vw, 4.25rem); line-height: 0.98; letter-spacing: -0.02em; }
.pd-title .char { display: inline-block; }
.pd-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.link-wa { display: inline-flex; align-items: center; gap: 0.5rem; padding-bottom: 2px; border-bottom: 1px solid currentColor; text-decoration: none; }
.link-share { padding-inline: 0; border-top: 0; border-inline: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pd-price { justify-self: end; text-align: right; }
.pd-price__label, .pd-price__meta { margin: 0; color: var(--ink-60); }
.pd-price__value { margin: 0.25rem 0; font-weight: 500; font-size: clamp(1.625rem, 1rem + 1.2vw, 2.125rem); line-height: 1.15; letter-spacing: -0.01em; }

.gallery__stage { position: relative; background: var(--navy); }
.gallery__track { display: flex; width: 100%; height: clamp(15rem, 52vw, 80vh); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
/* The photo is the point, so the controls stay out of its way: see-through glass arrows at its
   edges (no gold), the count as a small chip in the corner. Phones swipe instead (see below). */
.gallery__controls { display: contents; }
.gallery__btn {
    position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem;
    border: 1px solid rgba(243, 241, 236, 0.35); border-radius: 50%; background: rgba(15, 37, 53, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--sand-50); cursor: pointer; transition: background 0.3s, border-color 0.3s;
}
.gallery__btn[data-gallery-prev] { left: clamp(0.75rem, 1.5vw, 1.25rem); }
.gallery__btn[data-gallery-next] { right: clamp(0.75rem, 1.5vw, 1.25rem); }
@media (hover: hover) { .gallery__btn:hover { background: rgba(15, 37, 53, 0.6); border-color: rgba(243, 241, 236, 0.7); } }
.gallery__btn:focus-visible { outline: 2px solid var(--sand-50); outline-offset: 2px; }
.gallery__count {
    position: absolute; right: clamp(0.75rem, 1.5vw, 1.25rem); bottom: clamp(0.75rem, 1.5vw, 1.25rem); z-index: 2; padding: 0.3rem 0.7rem; border-radius: 999px;
    background: rgba(15, 37, 53, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--sand-50); font-size: 0.875rem; font-variant-numeric: tabular-nums; pointer-events: none;
}
.gallery__expand { position: absolute; right: clamp(0.75rem, 1.5vw, 1.25rem); top: clamp(0.75rem, 1.5vw, 1.25rem); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(243, 241, 236, 0.35); border-radius: 50%; background: rgba(15, 37, 53, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--sand-50); pointer-events: none; }
.gallery__thumbs { position: relative; display: flex; gap: 0.5rem; margin-top: 0.5rem; padding-bottom: 0.25rem; overflow-x: auto; scrollbar-width: thin; }   /* positioned: thumbnails' offsetLeft is measured in it */
.gallery__thumb { flex: 0 0 auto; width: clamp(72px, 8vw, 120px); aspect-ratio: 4 / 3; padding: 0; border: 0; cursor: pointer; opacity: 0.5; background: var(--sand-200); transition: opacity 0.3s; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover, .gallery__thumb[aria-current="true"] { opacity: 1; }
.gallery__thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--amber); }

.pd-body { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Each box draws its own left and top divider; the strip clips the outer ones, so a row that is not full
   ends in plain navy rather than an empty grey cell. */
.facts { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 0; overflow: hidden; background: var(--navy); color: var(--sand-50); }
.facts__item { padding: 1.25rem 1.5rem; box-shadow: -1px -1px 0 #34495a; }
.facts dt { font-size: 0.875rem; color: var(--on-navy-60); }
.facts dd { margin: 0.2rem 0 0; font-weight: 500; font-size: 1.125rem; line-height: 1.3; }
.pd-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); }
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }
.prose--columns { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.prose--columns p { break-inside: avoid-column; }
.pd-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pd-list { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--sand-100); }
.pd-list__title { margin-bottom: 1.25rem; font-family: var(--serif); font-weight: 300; font-size: 1.5rem; }
.pd-list ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem 1.5rem; }
.pd-list li { display: flex; align-items: flex-start; gap: 0.6rem; }
.pd-list svg { flex: none; margin-top: 0.15rem; color: var(--amber-deep); }
.pd-video { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* The YouTube walkthrough: its cover and a play button until pressed, then YouTube's player in the same frame. */
.yt { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); color: var(--sand-50); -webkit-tap-highlight-color: transparent; }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt img { object-fit: cover; transition: transform 1.2s var(--ease); }
.yt__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(4rem, 7vw, 5.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--sand-50); transform: translate(-50%, -50%); box-shadow: 0 14px 34px -12px rgba(15, 37, 53, 0.7); }
.yt__play svg { margin-left: 4px; }
.yt:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (hover: hover) {
    .yt:hover img { transform: scale(1.03); }
    .yt:hover .yt__play { background: var(--gold); color: var(--navy); }
}

/* ─── Forms (enquiry, contact) ─────────────────────────────────────────────── */

.enquire, .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; scroll-margin-top: 6rem; }
.enquire__text .h-lg { margin-bottom: 1.5rem; }
.enquire__contact { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-top: 2rem; }
.enquire__contact a { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.enquire__contact a:hover { text-decoration: underline; }
.form { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--sand-100); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; color: var(--ink-60); }
.field input, .field textarea {
    width: 100%; padding: 0.85rem 1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: var(--sand-50); color: var(--navy); font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 1px 0 0 var(--navy); }
.form__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.form__note { max-width: 22rem; margin: 0; font-size: 0.875rem; color: var(--ink-60); }
.form[hidden] { display: none; }   /* .form sets display: flex, which would otherwise beat the hidden attribute */
.form__error { margin: 0; padding: 0.85rem 1rem; border-radius: 4px; background: #f6e3df; color: #6e2216; }
#enquiry-form, #business-form, #newsletter { scroll-margin-top: 6rem; }

/* After a send: the panel takes the form's place, so the visitor sees it where they were looking. */
.thanks {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; scroll-margin-top: 6rem;
    padding: clamp(1.75rem, 3.5vw, 3rem); background: var(--navy); color: var(--sand-50);
}
.thanks:focus { outline: none; }
.thanks__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--gold); color: var(--navy); }
.thanks__title { margin: 0.25rem 0 0; font-family: var(--serif); font-weight: 300; font-size: var(--fs-md); line-height: 1.1; }
.thanks__text { max-width: 30rem; margin: 0; font-size: 1.0625rem; }
.thanks__note { margin: 0; font-size: 0.875rem; color: var(--on-navy-60); }
.thanks__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; margin-top: 0.75rem; }
.thanks__again { min-height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.thanks__again:hover { color: var(--champagne); }
.field em { font-style: normal; opacity: 0.8; }

/* Pill choices (what the visitor wants, how to reach them), styled like the listing filters. */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.choices__legend { width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--ink-60); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; background: var(--sand-50); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.choice span:hover { background: var(--sand-200); }
.choice input:checked + span { background: var(--navy); color: var(--sand-50); box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.choices--small .choice span { height: 2.375rem; padding: 0 0.95rem; font-size: 0.9375rem; }

/* The listing the enquiry is about, beside the property form. */
.enquire__card { display: flex; align-items: center; gap: 1rem; max-width: 30rem; margin-top: 2rem; padding: 0.75rem; background: var(--sand-100); color: inherit; text-decoration: none; }
.enquire__card img { flex: none; width: 7.5rem; height: 5.6rem; object-fit: cover; }
.enquire__card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.enquire__card-body strong { font-weight: 400; font-size: 1.125rem; line-height: 1.25; }
.enquire__card-body span { color: var(--ink-60); font-size: 0.9375rem; }
.enquire__card-body span:first-of-type { color: var(--navy); font-weight: 500; font-size: 1.125rem; }

/* ─── About ────────────────────────────────────────────────────────────────── */

.assoc { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin-bottom: 2rem; }
.assoc li { display: flex; align-items: center; gap: 0.75rem; }
.assoc img { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.leaders { padding-block: var(--section); background: var(--navy); color: var(--sand-50); }
.leaders__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 6rem); }
.leader { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; }
.leaders .kicker { margin: 0; color: var(--on-navy-60); }
/* Mission and vision: their own warm band between the navy sections, the same text style as the messages. */
.leader__quote, .mv__text { max-width: 36rem; margin: 0; font-family: var(--sans); font-weight: 400; font-size: var(--fs-read); line-height: 1.65; }

/* Mission and vision: two photo panels on the sand band (so they read apart from the navy leaders
   band above), each photo darkened with the words on it. The statement keeps the body font, the
   same as the leaders' messages; the heading is serif like every other heading. */
.mv-band { padding-block: clamp(3rem, 6vw, 5.5rem); background: var(--sand-300); }
.mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.mv--single { grid-template-columns: minmax(0, 1fr); }
.mv__card { position: relative; display: grid; min-height: clamp(26rem, 62vh, 36rem); overflow: hidden; background: var(--navy); color: var(--sand-50); }
.mv__media, .mv__body { grid-area: 1 / 1; }
.mv__media { position: relative; overflow: hidden; }
.mv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease); }
.mv__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 53, 0.35) 0%, rgba(15, 37, 53, 0.55) 45%, rgba(15, 37, 53, 0.92) 100%); }
.mv__card:hover .mv__media img { transform: scale(1.06); }
.mv__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.9rem; padding: clamp(1.5rem, 3.5vw, 3rem); text-shadow: 0 1px 14px rgba(15, 37, 53, 0.45); }
.mv__title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: var(--fs-lg); line-height: 1; letter-spacing: -0.015em; }
.mv__card .mv__text { max-width: 32rem; color: rgba(243, 241, 236, 0.9); }
@media (max-width: 767px) {
    .mv__card { min-height: min(28rem, 70svh); }
    .mv__body { padding: 1.5rem 1.25rem; }
}
.leader__quote p { margin: 0; }
.leader__quote p + p { margin-top: 0.9em; }
.leader__quote p:first-child::before { content: "\201C"; color: var(--champagne); }
.leader__quote p:last-child::after { content: "\201D"; color: var(--champagne); }
.leader__by { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; padding-top: 0.5rem; font-size: 0.9375rem; color: var(--on-navy-60); }
.leader__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-light); }

/* About: intro statement, figures and the optional full story */
.about-intro__statement { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); font-family: var(--sans); font-weight: 400; font-size: clamp(1.25rem, 0.875rem + 1vw, 1.625rem); line-height: 1.45; letter-spacing: -0.005em; }
.stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2vw, 2rem) 0 0; }
.stat + .stat { padding-left: clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--line); }
.stat__num { font-family: var(--serif); font-weight: 300; font-size: clamp(2.75rem, 1.5rem + 3.5vw, 5rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--ink-60); font-size: 1.0625rem; }
.story-more { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.story-more summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.25rem; cursor: pointer; list-style: none; font-size: 1.125rem; }
.story-more summary::-webkit-details-marker { display: none; }
.story-more summary:hover span:first-child { text-decoration: underline; }
.story-more__icon { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--gold); }
.story-more__icon::before, .story-more__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -0.8px 0 0 -7px; background: var(--navy); transition: transform 0.5s var(--ease); }
.story-more__icon::after { transform: rotate(90deg); }
.story-more[open] .story-more__icon::after { transform: rotate(0deg); }
.story-more .prose { padding-bottom: 1.5rem; color: var(--navy-80); }

/* About: who we work with. Phones (and no JS): the four stack, each fully shown with its own
   title. Wide screens with JS: the section pins and scrolling steps through them one by one,
   the list on the left showing which one is up and how far through it you are. */
.audience { padding-block: var(--section); background: var(--sand-300); }
.audience__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.audience__tabs { display: none; list-style: none; padding: 0; }
.audience__panels { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); }
.audience__title { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em; }
.audience__title span { font-family: var(--sans); font-size: 1rem; color: var(--ink-60); }
.audience__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-200); }
.audience__img img { width: 100%; height: 100%; object-fit: cover; }
.audience__body { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem 3rem; flex-wrap: wrap; padding-top: 1.25rem; }
.audience__body p { flex: 1 1 22rem; max-width: 34rem; margin: 0; font-size: 1.125rem; }

/* Below 900px the panels stack (no sticky name list), so each does what the steps lists do on a
   phone: the darkened photo carries the number and title, and the text and button sit under it. */
@media (max-width: 899px) {
    .audience__panels { gap: clamp(1.75rem, 5vw, 2.5rem); }
    .audience__panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; }
    .audience__title, .audience__img { grid-area: media; }
    .audience__img { position: relative; aspect-ratio: 16 / 9; background: var(--navy); }
    .audience__img img { position: absolute; inset: 0; }
    .audience__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 53, 0.3) 0%, rgba(15, 37, 53, 0.45) 45%, rgba(15, 37, 53, 0.88) 100%); }
    .audience__title { position: relative; z-index: 1; align-self: end; margin: 0; padding: 1rem 1.1rem 0.95rem; color: var(--sand-50); text-shadow: 0 1px 12px rgba(15, 37, 53, 0.45); }
    .audience__title span { color: var(--champagne); }
    .audience__body { grid-area: body; padding-top: 0.9rem; }
    .audience__body p { font-size: 1rem; }
}

@media (min-width: 900px) {
    .js .audience { padding-block: 0; }
    .js .audience__track { height: calc(100vh + (var(--steps) - 1) * 75vh); }
    .js .audience__stage { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-top: 5.5rem; padding-bottom: 2rem; overflow: hidden; }
    .js .audience__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
    .js .audience__tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
    .audience__tab {
        position: relative; display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: clamp(0.75rem, 2.2vh, 1.4rem) 0; border: 0; border-bottom: 1px solid var(--line);
        background: none; color: var(--navy); text-align: left; cursor: pointer; --tab-ink: rgba(15, 37, 53, 0.38);
    }
    .audience__tab[aria-current="true"] { --tab-ink: rgba(15, 37, 53, 0.5); }
    .audience__tab:hover { --tab-ink: rgba(15, 37, 53, 0.62); }
    .audience__num { flex: none; width: 2.5rem; font-size: 1rem; color: var(--ink-60); opacity: 0.55; transition: opacity 0.4s var(--ease); }
    .audience__tab[aria-current="true"] .audience__num { opacity: 1; }
    /* Progress through the pinned section is read in the words: the active name fills from faded
       to navy, left to right, as you scroll through its panel (site.js sets --fill from -6% to
       106%; the 12% feather keeps the edge soft). No bar under the names. */
    .audience__label {
        --fill: -6%;
        font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, min(3.4vw, 6vh), 3.25rem); line-height: 1.08; letter-spacing: -0.015em;
        background: linear-gradient(90deg, var(--navy) calc(var(--fill) - 6%), var(--tab-ink) calc(var(--fill) + 6%));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .js .audience__title { display: none; }
    @media (forced-colors: active) { .audience__label { background: none; color: CanvasText; } }
    .js .audience__panels { display: grid; }
    .js .audience__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s; }
    .js .audience__panel.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s var(--ease); }
    .js .audience__img { aspect-ratio: auto; height: min(54vh, 36rem); }
    .js .audience__img img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
    .js .audience__panel.is-active .audience__img img { transform: none; }
}

/* About: values, one panel open at a time on wide screens */
.values__head { display: flex; flex-direction: column; margin-bottom: clamp(2rem, 5vw, 4rem); }
.values__head .h-xl { max-width: 20ch; }
.values__list { list-style: none; padding: 0; display: flex; gap: clamp(0.5rem, 1vw, 1rem); min-height: clamp(22rem, 32vw, 28rem); }
/* Each value sits on its own photo under a navy wash, darkest at the foot where the words are. Closed
   panels are dimmed further; the open one brightens and its photo eases in. */
.value {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 0; min-width: 0;
    padding: clamp(1.25rem, 2.2vw, 2rem); background: var(--navy); color: var(--sand-50); cursor: pointer; overflow: hidden;
    transition: flex-grow 0.9s var(--ease);
}
.value.is-open { flex-grow: 2.6; cursor: default; }
.value__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.value__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(0.85); transform: scale(1.08); transition: filter 0.9s var(--ease), transform 1.4s var(--ease); }
.value__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 53, 0.45) 0%, rgba(15, 37, 53, 0.55) 45%, rgba(15, 37, 53, 0.9) 100%); }
.value.is-open .value__media img { filter: brightness(0.95) saturate(1); transform: scale(1); }
@media (hover: hover) { .value:not(.is-open):hover .value__media img { filter: brightness(0.8) saturate(0.95); } }
.value__num { font-size: 1rem; opacity: 0.75; }
.value__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 0.9rem + 1.1vw, 2rem); line-height: 1.05; letter-spacing: -0.01em; }
.value__text { max-width: 26rem; max-height: 0; margin: 0; overflow: hidden; font-size: 1.0625rem; opacity: 0; transform: translateY(0.75rem); transition: opacity 0.4s, transform 0.8s var(--ease), max-height 0.8s var(--ease), margin 0.8s var(--ease); }
.value.is-open .value__text { max-height: 10rem; margin-top: 0.9rem; opacity: 1; transform: none; transition-delay: 0.2s; }
/* Wide screens with scripts: the heading and panels hold still in a full-height stage while the track
   scrolls past, 85vh of scroll per value plus a short rest at each end (site.js [data-values]). The
   panels take the height the heading leaves (at least the 28rem they had before on a laptop, up to
   40rem); the WhatsApp button steps aside while the section is held, so they can reach the foot. */
@media (min-width: 900px) {
    .js:not(.failsafe) .values { padding-block: 0; }
    .js:not(.failsafe) .values__track { height: calc(100vh + (var(--steps) - 0.7) * 85vh); }
    .js:not(.failsafe) .values__stage { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding-block: 6.25rem 1rem; }
    .js:not(.failsafe) .values__head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
    .js:not(.failsafe) .values__list { flex: 1 1 auto; min-height: 16rem; max-height: 40rem; }
}
/* Scroll-driven (site.js sets --o on each panel, 0 closed to 1 open): no transitions, so the panels
   move exactly with the scroll. The photo is shaded by a layer's opacity rather than a filter (a filter
   repaints the photo on every frame), and the words show over the last half of opening. */
.values.is-scrubbed .value { flex-grow: calc(1 + 1.6 * var(--o, 0)); transition: none; }
.values.is-scrubbed .value__media img { filter: none; transform: scale(calc(1.08 - 0.08 * var(--o, 0))); transition: none; }
.values.is-scrubbed .value__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #08141e; opacity: calc(0.05 + 0.33 * (1 - var(--o, 0))); }
@media (hover: hover) {
    .values.is-scrubbed .value:not(.is-open):hover .value__media img { filter: none; }
    .values.is-scrubbed .value:not(.is-open):hover .value__media::before { opacity: calc(0.05 + 0.18 * (1 - var(--o, 0))); }
}
.values.is-scrubbed .value__text {
    opacity: clamp(0, calc(var(--o, 0) * 2 - 1), 1); max-height: calc(clamp(0, calc(var(--o, 0) * 2 - 1), 1) * 10rem);
    margin-top: calc(clamp(0, calc(var(--o, 0) * 2 - 1), 1) * 0.9rem); transform: translateY(calc((1 - clamp(0, calc(var(--o, 0) * 2 - 1), 1)) * 0.75rem)); transition: none;
}

/* About: head office and associates */
.world { padding-block: var(--section); background: var(--navy); color: var(--sand-50); }
.world__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 4rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.world__head .h-xl { max-width: 17ch; }
.world__head p { max-width: 30rem; margin: 0; font-size: 1.0625rem; opacity: 0.85; }
.world__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.5rem, 1vw, 1rem); }
.world__item { display: flex; flex-direction: column; gap: 0.6rem; min-height: clamp(12rem, 17vw, 15rem); padding: clamp(1.25rem, 2vw, 1.75rem); box-shadow: inset 0 0 0 1px var(--line-light); transition: background 0.5s var(--ease); }
.world__item:hover { background: rgba(243, 241, 236, 0.06); }
.world__item--home { background: var(--gold); color: var(--navy); box-shadow: none; }
.world__item--home:hover { background: var(--gold); }
.world__flag { width: 48px; height: 32px; margin-bottom: auto; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 37, 53, 0.12); transition: transform 0.6s var(--ease); }
.world__item:hover .world__flag { transform: scale(1.12); }
.world__city { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2vw, 1.875rem); line-height: 1.05; }
.world__role { font-size: 0.9375rem; opacity: 0.75; }

/* ─── Team ─────────────────────────────────────────────────────────────────── */

/* ─── Team: org chart (components/team-chart.php) ─────────────────────────────
   As the company's own chart: rows from the top, each centred, round photos in a thin gold ring with
   the name and role under them. Four to a line on wide screens (a longer row wraps, still one level),
   two on phones. The connecting lines are drawn by site.js in gold ([data-org]): the people in the top
   row joined side by side, then from each row a stem down to a bar over the next, with a drop into
   each person, wherever the screen has wrapped them. */
.org { position: relative; }
.org__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--amber-deep); }
.org__rows { position: relative; list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; }
.org__row { position: relative; width: 100%; }
.org__row + .org__row { margin-top: clamp(3rem, 6vw, 4.25rem); }
.org__people { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem); max-width: 60rem; }
.org__people > li { width: clamp(9.5rem, 14vw, 12rem); }

.person { display: flex; flex-direction: column; align-items: center; color: var(--navy); text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.person__photo { position: relative; width: clamp(7rem, 10vw, 8.5rem); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(180deg, var(--sand-200), var(--sand-300)); box-shadow: 0 0 0 4px var(--sand-50), 0 0 0 5px var(--amber-deep); transition: box-shadow 0.4s; }
.person__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.person__go { position: absolute; right: 2%; bottom: 4%; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: var(--sand-50); box-shadow: 0 0 0 3px var(--sand-50); }
.person__name { margin-top: 1.1rem; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.person__role { margin-top: 0.2rem; font-size: 0.9375rem; line-height: 1.3; color: var(--ink-60); }
.person:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; border-radius: 0.75rem; }
@media (hover: hover) { .person:hover .person__photo { box-shadow: 0 0 0 4px var(--sand-50), 0 0 0 6px var(--amber); } }
@media (max-width: 599px) {
    .org__people { gap: 2.5rem 0.75rem; }
    .org__people > li { width: calc(50% - 0.375rem); }
    .person__photo { width: min(7.25rem, 80%); }
    .person__name { font-size: 0.9375rem; }
    .person__role { font-size: 0.875rem; }
}

/* The profile a card opens: photo beside name, role, About and the ways to reach them. */
.profiles { width: min(54rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; background: var(--sand-50); color: var(--navy); overflow: auto; overscroll-behavior: contain; }
.profiles::backdrop { background: rgba(15, 37, 53, 0.62); }
.profiles[open] { animation: profile-in 0.45s var(--ease-out); }
@keyframes profile-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.profiles__close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--navy); color: var(--sand-50); cursor: pointer; }
.profile { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.profile[hidden] { display: none; }
.profile__photo { display: grid; place-items: center; padding: clamp(2rem, 4vw, 3rem); background: var(--sand-100); }
.profile__photo img { width: min(15rem, 100%); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center 30%; box-shadow: 0 0 0 5px var(--sand-100), 0 0 0 6.5px var(--amber-deep); }
.profile__body { display: flex; flex-direction: column; padding: clamp(1.75rem, 4vw, 3rem); padding-right: clamp(3.75rem, 5vw, 4.5rem); }
.profile__name { margin: 0; font-family: var(--serif); font-weight: 300; font-size: var(--fs-md); line-height: 1.1; }
.profile__role { margin: 0.6rem 0 0; color: var(--ink-60); }
.profile__bio { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.6; }
.profile__bio p { margin: 0 0 1em; }
.profile__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 2rem; }
.profile__btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.15rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font-weight: 500; text-decoration: none; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.profile__btn--wa { background: var(--navy); color: var(--sand-50); box-shadow: none; }
@media (hover: hover) {
    .profile__btn:hover { background: var(--navy); color: var(--sand-50); box-shadow: none; }
    .profile__btn--wa:hover { background: var(--gold); color: var(--navy); }
}
@media (max-width: 699px) {
    .profiles { width: calc(100% - 1.5rem); max-height: calc(100dvh - 1.5rem); }
    .profile { grid-template-columns: minmax(0, 1fr); }
    .profile__photo { padding: 2rem 1.5rem 1.5rem; }
    .profile__photo img { width: 9.5rem; }
    .profile__body { padding: 1.5rem; }
}
/* Without scripts the profiles are a list under the chart, which each card's link jumps to. */
html:not(.js) .profiles { position: static; display: block; width: auto; max-height: none; margin-top: var(--section); }
html:not(.js) .profile[hidden] { display: grid; }
html:not(.js) .profiles__close { display: none; }

/* ─── Contact, careers, 404 ────────────────────────────────────────────────── */

.contact__details .h-lg { max-width: 14ch; }
.contact__list { display: grid; gap: 1.5rem; margin: clamp(2rem, 4vw, 3rem) 0; }
.contact__list dt { font-size: 0.875rem; color: var(--ink-60); }
.contact__list dd { margin: 0.2rem 0 0; font-size: var(--fs-read); line-height: 1.4; }
.contact__list a { text-decoration: none; }
.contact__list a:hover { text-decoration: underline; }

/* Business setup: a short pitch and the three steps beside one form. */
.setup { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; scroll-margin-top: 6rem; }
.setup__intro { position: sticky; top: 7rem; }
.setup__intro .h-lg { max-width: 16ch; }
.setup__steps { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; max-width: 32rem; border-top: 1px solid var(--line); }
.setup__step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.setup__num { padding-top: 0.35rem; font-size: 0.875rem; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.setup__title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; }
.setup__step p { margin: 0.35rem 0 0; color: var(--ink-60); }
@media (max-width: 899px) {
    .setup { grid-template-columns: minmax(0, 1fr); }
    .setup__intro { position: static; }
}

/* Careers: the open roles as one list, and the application form beside its heading. */
.roles__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.roles__head .h-xl { margin: 0; max-width: 16ch; }
.roles__count { margin: 0; color: var(--ink-60); }
.roles__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.role { border-bottom: 1px solid var(--line); }
.role__link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 0.75rem clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 2.6vw, 2.25rem) 0; color: inherit; text-decoration: none; transition: padding 0.5s var(--ease), background 0.5s var(--ease); }
.role__main { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.role__title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-md); line-height: 1.1; }
.role__meta { font-size: 0.9375rem; color: var(--ink-60); }
.role__summary { color: var(--ink-60); line-height: 1.55; }
.role__go { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background 0.4s, color 0.4s, box-shadow 0.4s; }
.role__link:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (hover: hover) {
    .role__link:hover { padding-inline: clamp(0.75rem, 1.5vw, 1.25rem); background: var(--sand-100); }
    .role__link:hover .role__go { background: var(--navy); color: var(--sand-50); box-shadow: none; }
}
.apply { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.roles + .apply, .role-body + .apply { padding-top: 0; }   /* straight under the banner (no roles open) it keeps its top space */
.apply__intro { position: sticky; top: 7rem; }
.field--file input { padding: 0.7rem 1rem; cursor: pointer; }
.field--file input::file-selector-button { margin-right: 1rem; padding: 0.55rem 1.1rem; border: 0; border-radius: 999px; background: var(--navy); color: var(--sand-50); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.consent { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: var(--ink-60); cursor: pointer; }
.consent input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; accent-color: var(--navy); }
#apply-form, #thanks { scroll-margin-top: 6rem; }
.role-head__meta { margin: -0.5rem 0 1.5rem; font-size: 1.0625rem; color: var(--ink-60); }
.role-head__date { justify-self: end; margin: 0; color: var(--ink-60); }
.role-lead { font-size: var(--fs-read); line-height: 1.5; color: var(--navy); }
.role-lists .pd-list ul { grid-template-columns: 1fr; }
.preview-bar { position: sticky; top: 0; z-index: 60; margin: 0; padding: 0.75rem var(--gutter); background: var(--amber); color: var(--navy); font-weight: 500; text-align: center; }
/* The property page hides its head button on a phone (the sticky bar carries it); a role has no
   sticky bar, so its Apply button stays. */
@media (max-width: 767px) { .role-head .pd-head__actions .btn { display: inline-flex; } }

/* Phones: the home page's "Why Blue Velvet" cards are one row that swipes sideways instead of a
   tall stack in front of the content people came for. The next card peeks in from the edge, so it
   is clear there is more. */
@media (max-width: 767px) {
    .why__grid {
        display: flex; gap: 0.75rem; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
        margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); max-width: none;
    }
    .why__grid::-webkit-scrollbar { display: none; }
    .why__card { flex: 0 0 min(80%, 20rem); scroll-snap-align: start; min-height: 0; padding: 1.5rem; }
    .why__more { padding-top: 1.25rem; }
    .why__go { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 899px) {
    .role__link { grid-template-columns: minmax(0, 1fr) auto; }
    .role__summary { grid-column: 1; grid-row: 2; }
    .role__go { grid-row: 1 / span 2; grid-column: 2; }
    .apply { grid-template-columns: 1fr; }
    .apply__intro { position: static; }
    .role-head__date { justify-self: start; }
}
.notfound { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding-top: 9rem; padding-bottom: var(--section); }
.notfound .h-xl { max-width: 14ch; margin-bottom: 2rem; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ─── Footer ───────────────────────────────────────────────────────────────── */

.footer { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3.5rem, 6vw, 5.5rem); background: var(--gold) top / 100% 2px no-repeat, var(--navy); color: var(--sand-50); }
.footer ::selection { background: var(--champagne); color: var(--navy); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer__crest { display: block; width: clamp(140px, 13vw, 200px); border-radius: 50%; box-shadow: 0 0 0 1px rgba(227, 194, 122, 0.25), 0 24px 50px -24px rgba(0, 0, 0, 0.7); transition: transform 1s var(--ease); }
.footer__crest img { width: 100%; height: auto; }
@media (hover: hover) { .footer__crest:hover { transform: rotate(-8deg) scale(1.03); } }
.footer__brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.footer__brand-text p { max-width: 22rem; margin: 0; color: var(--on-navy-60); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.footer__col > a { font-size: 1.1875rem; line-height: 1.65; text-decoration: none; }
.footer__col > a:hover { color: var(--champagne); }
.footer__label { margin: 0 0 0.2rem; font-size: 0.875rem; color: var(--on-navy-60); }
.footer__contact .footer__big { margin-bottom: 1rem; font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.35; }
.footer address { margin-bottom: 1.5rem; font-style: normal; line-height: 1.6; }
.footer address a { text-decoration: none; }
.footer address a:hover { color: var(--champagne); }
.footer__assoc { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.footer__assoc li { display: flex; align-items: center; gap: 0.6rem; }
.footer__assoc img { border-radius: 2px; box-shadow: 0 0 0 1px var(--line-light); }
.footer__news { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(3rem, 5vw, 4rem); padding-block: 1.5rem; border-block: 1px solid var(--line-light); }
.footer__news-label { font-size: 1.0625rem; }
.footer__news-row { display: flex; gap: 0.5rem; flex: 0 1 30rem; min-width: 0; }
.footer__news-row input { flex: 1 1 0; width: 0; min-width: 0; height: 3rem; padding: 0 1.25rem; border: 1px solid var(--line-light); border-radius: 999px; background: transparent; color: var(--sand-50); }
.footer__news-row input::placeholder { color: var(--on-navy-60); }
.footer__news-row input:focus { outline: none; border-color: var(--champagne); }
.footer__news-done { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.0625rem; color: var(--champagne); }
.footer__news-done:focus { outline: none; }
.footer__news-error { flex-basis: 100%; margin: 0; color: #f2b3a6; }
.footer .socials a { box-shadow: inset 0 0 0 1px var(--line-light); }
.footer .socials a:hover { background: var(--gold); color: var(--navy); }
.footer__mark { display: flex; flex-direction: column; margin-top: clamp(2.5rem, 5vw, 4rem); container-type: inline-size; user-select: none; }
.footer__word {
    font-family: var(--serif); font-weight: 300; line-height: 0.82; letter-spacing: -0.025em; white-space: nowrap;
    font-size: calc((100vw - 2 * var(--gutter)) / 4.84);
    font-size: calc(100cqw / 4.84);
    background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-bottom: 0.06em;   /* room for descenders inside the clipped gradient */
}
.footer__sub { align-self: flex-end; margin-top: 0.15em; font-size: calc(100cqw / 17); line-height: 1; letter-spacing: -0.01em; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.75rem 2rem; font-size: 0.9375rem; color: var(--on-navy-60); }
.footer__base a:hover { color: var(--champagne); }
.footer__base p { margin: 0; }
.footer__credit a { color: var(--sand-50); text-decoration: underline; text-decoration-color: var(--line-light); text-underline-offset: 0.25em; transition: color 0.3s, text-decoration-color 0.3s; }
.footer__credit a:hover { text-decoration-color: currentColor; }

/* ─── Floating WhatsApp, toast ─────────────────────────────────────────────── */

.wa-float {
    position: fixed; right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 40;
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--wa); color: #fff; box-shadow: 0 12px 30px -12px rgba(15, 37, 53, 0.6);
    transform: translateY(150%); transition: transform 0.7s var(--ease);
}
.wa-float.is-visible { transform: none; }
.wa-float.is-hidden, .wa-float.is-aside { transform: translateY(150%); }
.menu-open .wa-float { transform: translateY(150%); }
.toast {
    position: fixed; top: 6.5rem; left: 50%; z-index: 120; display: flex; align-items: center; gap: 1rem;
    max-width: calc(100% - 2rem); padding: 0.85rem 0.85rem 0.85rem 1.25rem; border-radius: 999px;
    transform: translateX(-50%); background: var(--navy); color: var(--sand-50); box-shadow: 0 16px 40px -18px rgba(15, 37, 53, 0.7);
    transition: opacity 0.4s, transform 0.6s var(--ease);
}
.toast--error { background: #8a2b1d; }
.toast button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); cursor: pointer; }
.toast.is-hidden { opacity: 0; transform: translate(-50%, -1rem); pointer-events: none; }

/* ─── Motion states (site.js reveals; the failsafe shows everything if it never runs) ─ */

.motion [data-reveal] { opacity: 0; transform: translateY(2rem); }
.motion [data-split] { visibility: hidden; }
.motion [data-hero-fade] { opacity: 0; }
.motion .hero__word { visibility: hidden; }

/* Unveil: a photo's frame opens upward from its foot as the photo settles (site.js [data-unveil]). */
.motion [data-unveil] { clip-path: inset(100% 0 0 0); }

/* Rows (the steps, open roles, Business setup's steps): the rules are drawn as lines that scale in
   from the left (--draw, 0 to 1), with each row's words rising just behind its rule. Without motion
   they are simply there. */
[data-rows] { position: relative; border-top: 0; }
[data-rows] > * { position: relative; border-bottom: 0; }
[data-rows]::before, [data-rows] > *::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(var(--draw, 1)); transform-origin: left center; pointer-events: none; }
[data-rows]::before { top: 0; }
[data-rows] > *::after { bottom: 0; }
.motion [data-rows], .motion [data-rows] > * { --draw: 0; }
.motion [data-rows] > * > :not(.step__img) { opacity: 0; transform: translateY(1.5rem); }

/* The team chart arrives row by row: photos settle in, names rise, the gold lines grow down. */
.motion [data-org] .person__photo { opacity: 0; transform: scale(0.86); }
.motion [data-org] .person__name, .motion [data-org] .person__role { opacity: 0; transform: translateY(0.75rem); }
.motion [data-org] .org__lines { clip-path: inset(0 0 100% 0); }

/* The footer's wordmark rises into place. */
.motion [data-mark] > * { opacity: 0; transform: translateY(12%); }

.failsafe [data-reveal], .failsafe [data-hero-fade] { opacity: 1 !important; transform: none !important; }
.failsafe [data-split], .failsafe .hero__word { visibility: visible !important; }
.failsafe [data-unveil], .failsafe [data-org] .org__lines { clip-path: none !important; }
.failsafe [data-rows], .failsafe [data-rows] > * { --draw: 1 !important; }
.failsafe [data-rows] > * > *, .failsafe [data-org] .person__photo, .failsafe [data-org] .person__name, .failsafe [data-org] .person__role, .failsafe [data-mark] > * { opacity: 1 !important; transform: none !important; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2rem; }
}

@media (max-width: 1023px) {
    .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
    .abroad__grid, .talk, .offmarket, .enquire, .contact, .leaders__grid, .mv, .pd-about, .pd-head { grid-template-columns: minmax(0, 1fr); }
    .pd-price { justify-self: start; text-align: left; }
    .talk__text { min-height: 0; }
    .talk__media { min-height: 22rem; }
    .prose--columns { columns: 1; }
    .menu__inner { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: space-between; }
    .world__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .world__item--home { grid-column: 1 / -1; min-height: 0; }
    .world__item--home .world__flag { margin-bottom: 1.5rem; }
}

@media (max-width: 767px) {
    .nav { --nav-h0: 5rem; --nav-h1: 64px; --nav-w1: calc(100% - 16px); --nav-pl1: 14px; --nav-pr1: 8px; }
    .nav__word small { display: none; }
    .nav__crest, .nav.is-solid .nav__crest { width: 44px; }
    /* A page's opening on a phone is a band around its title, not a photo with a title in it: a small
       gap above and below, and the photo behind (2026-10-31). Tablets keep the taller banner. */
    .banner__text { min-height: 0; padding: 3.25rem 1.25rem 1.25rem; }
    .doors__list { grid-auto-flow: row; grid-auto-columns: auto; }   /* stacked, each a wide strip */
    .door { aspect-ratio: 3 / 2; }
    .footer__brand { flex-direction: column; align-items: flex-start; }
    /* Phones have no hover, so the photo desktop reveals under the cursor becomes the row itself:
       darkened, with the number and title laid over it and the text underneath. One row is about
       half the height of the old title, photo, text stack. The image is absolutely placed so its
       height never depends on a percentage of an indefinite box (that collapses on iOS Safari). */
    .step { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text"; gap: 0.85rem; padding-block: 1.25rem; }
    .step__img, .step__name { grid-area: media; }
    .step__img { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
    .step__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .step__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 53, 0.3) 0%, rgba(15, 37, 53, 0.45) 45%, rgba(15, 37, 53, 0.88) 100%); }
    .step__name { position: relative; z-index: 1; align-self: end; padding: 1rem 1.1rem 0.95rem; color: var(--sand-50); text-shadow: 0 1px 12px rgba(15, 37, 53, 0.45); }
    .step__num { color: var(--champagne); }
    .step h3 { font-size: clamp(1.75rem, 8.5vw, 2.25rem); }
    .step__text { grid-area: text; font-size: 1rem; }
    .cursor-img { display: none; }
    .hero__foot { flex-direction: column; align-items: flex-start; }
    .hero__word { white-space: normal; line-height: 0.9; font-size: calc(100cqw / 3.3); }   /* "Velvet" is 2.84em at 500: 86% of the width */
    .hero__word [aria-hidden] .word { display: block !important; white-space: nowrap; }
    .why__grid, .form__row { grid-template-columns: minmax(0, 1fr); }
    .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__contact { grid-column: 1 / -1; }
    .stats { grid-template-columns: minmax(0, 1fr); }
    .stat, .stat + .stat { flex-direction: row; align-items: baseline; gap: 1.25rem; padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .stat__num { min-width: 1.7em; font-size: 3.25rem; }
    .values__list { flex-direction: column; min-height: 0; }
    .value, .value.is-open { flex: none; min-height: 19rem; gap: 2rem; cursor: default; }
    .value .value__media img { filter: brightness(0.9); transform: none; }   /* every panel is open on phones */
    .value .value__text { max-height: none; margin-top: 0.9rem; opacity: 1; transform: none; }
}

@media (max-width: 767px) {
    .to-filters { display: none; }
    .js .listings__meta { display: none; }
    .js .filterbar {
        position: sticky; top: 4.75rem; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        margin-inline: calc(-1 * var(--gutter)); padding: 0.6rem var(--gutter); background: var(--sand-50); box-shadow: 0 1px 0 var(--line);
    }
    .filterbar__btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: var(--navy); color: var(--sand-50); cursor: pointer; }
    .filterbar__n { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 0.8125rem; }
    .filterbar__total { margin: 0; }
    .js .filters-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 58; background: rgba(15, 37, 53, 0.45); }
    .js .filters {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
        flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1rem; padding: 0 1rem 1rem;
        background: var(--sand-50); border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -20px 50px -20px rgba(15, 37, 53, 0.5);
        transform: translateY(105%); visibility: hidden; transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
    }
    .js .filters.is-open { transform: none; visibility: visible; transition: transform 0.6s var(--ease); }
    .js .filters__sheet-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: 0 -1rem; padding: 1rem 1rem 0.5rem; background: var(--sand-50); }
    .filters__sheet-head p { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 1.6rem; }
    .filters__close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--sand-100); cursor: pointer; }
    .js .filters__sheet-foot { position: sticky; bottom: -1rem; display: flex; justify-content: space-between; align-items: center; margin: 0 -1rem -1rem; padding: 0.75rem 1rem 1rem; background: var(--sand-50); box-shadow: 0 -1px 0 var(--line); }
}

@media (max-width: 639px) {
    .grid--cards { grid-template-columns: minmax(0, 1fr); }
    .filters { flex-direction: column; align-items: stretch; }
    .seg { width: 100%; }
    .seg__opt { flex: 1; }
    .seg__opt span { justify-content: center; width: 100%; padding: 0 0.5rem; }
    .select select { width: 100%; }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .footer__news-row { flex-basis: 100%; }
}

/* Phones and touch screens: links people tap are at least 44px tall. */
@media (max-width: 767px), (pointer: coarse) {
    .footer__col > a { padding-block: 0.6rem; line-height: 1.35; }
    .footer__contact .footer__big { display: inline-block; margin-bottom: 0.4rem; padding-block: 0.5rem; }
    .footer__base a, .contact__list a { display: inline-block; padding-block: 0.6rem; }
    .link-wa { min-height: 2.75rem; }
    .enquire__contact { gap: 0; }
    .enquire__contact a { padding-block: 0.6rem; }
    .choices--small .choice span { height: 2.75rem; }
    .socials a { width: 2.75rem; height: 2.75rem; }
    .seg__opt span { height: 2.75rem; }
}

.pd-bar { display: none; }
@media (max-width: 767px) {
    /* Phones: one place to act. The page top keeps the title, price and a small Share link; the
       viewing request and WhatsApp live only in the bar at the bottom, shown from the start. The
       gallery is swiped, so its arrows and expand badge go; the thumbnail strip stays (faded, the
       current photo at full strength) so it is obvious there are more photos to swipe to, and
       tapping a photo still opens it full screen. */
    .gallery__btn, .gallery__expand { display: none; }
    .gallery__thumbs { gap: 0.4rem; scrollbar-width: none; }
    .gallery__thumbs::-webkit-scrollbar { display: none; }
    .gallery__thumb { width: 4.25rem; opacity: 0.45; }
    .pd-head { row-gap: 1rem; }
    .pd-head__main { display: contents; }
    .pd-head .kicker { margin-bottom: 0; }
    .pd-title { margin-bottom: 0.25rem; }
    .pd-price { order: 3; }
    .pd-head__actions { order: 4; margin-top: -0.75rem; }
    .pd-head__actions .btn, .pd-head__actions .link-wa:not(.link-share) { display: none; }
    .pd-head .link-share { border-bottom: 0; color: var(--ink-60); font-size: 0.9375rem; }
    .pd-bar {
        position: fixed; left: 0.5rem; right: 0.5rem; bottom: max(0.5rem, env(safe-area-inset-bottom)); z-index: 40;
        display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem; border-radius: 999px;
        background: var(--navy); box-shadow: 0 16px 40px -16px rgba(15, 37, 53, 0.7);
        transform: translateY(calc(100% + 1.5rem)); transition: transform 0.6s var(--ease);
    }
    .pd-bar.is-visible { transform: none; }
    .menu-open .pd-bar { transform: translateY(calc(100% + 1.5rem)); }
    .pd-bar .btn { --h: 2.75rem; flex: 1; min-width: 0; }
    .pd-bar .btn__disc { display: none; }   /* the label alone: one button, not a button and a circle */
    .pd-bar .btn__label { flex: 1; justify-content: center; }
    .pd-bar__wa { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--wa); color: #fff; }
    .page-property .wa-float { display: none; }   /* the bar carries WhatsApp on this page */
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Small phones (under 360px: iPhone SE first edition, small Androids, narrow device frames): the
   wordmark and the "Menu" pill do not both fit, and the word slid under the button. The closed
   button keeps its round dots only (the word stays for screen readers); while the menu is open the
   wordmark steps aside so "Close" can show. Under 300px the wordmark shrinks a little. Last in the
   file so it wins over the phone rules above without !important. */
@media (max-width: 359px) {
    .menu-btn[aria-expanded="false"] { gap: 0; }
    .menu-btn[aria-expanded="false"] .menu-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .menu-open .nav__word { opacity: 0; }
}
@media (max-width: 299px) {
    .nav__brand { gap: 0.5rem; }
    .nav__word { font-size: 1.3rem; }
    .nav__crest, .nav.is-solid .nav__crest { width: 40px; }
}