/* Generated by tools/build_css.py. Edit tokens.css or component sources. */

/* ===== tokens.css ===== */
/* Shared design tokens. All pages inherit these values. */
:root {
  /* --- CI palette (raw). Never use these directly in a component. --- */
  --ci-void:   #111719;   /* warm near-black */
  --ci-plum:   #303a3d;   /* raised charcoal */
  --ci-mist:   #c9c8c0;   /* muted warm grey */
  --ci-paper:  #eeeae2;   /* off-white */
  --ci-ash:    #c9c8c0;   /* light grey */
  --ci-signal: #b6a17d;   /* sand accent */

  /* Shared charcoal ramp; legacy variable names retained for compatibility. */
  --plum-900: #111719;
  --plum-800: #171e20;
  --plum-700: #20282a;
  --plum-600: #283235;
  --plum-500: #303a3d;
  --plum-400: #414c50;

  /* --- Semantic roles. Use these. --- */
  --bg:             var(--plum-900);
  --surface:        var(--plum-800);
  --surface-raised: var(--plum-700);
  --on-bg:          var(--ci-paper);
  --on-bg-muted:    var(--ci-mist);
  --on-bg-faint:    #b4b7b3;
  --accent:         var(--ci-signal);
  /* Sand accents; filled actions use darker sand for readable light text. */
  --accent-fill:    #63563f;
  --accent-fill-hi: #71634b;
  --outline:        rgba(201, 200, 192, 0.15);
  --outline-strong: rgba(201, 200, 192, 0.32);

  /* --- Modular scale. Base 16px, ratio 1.333 (perfect fourth), extended at
         the top so display type can carry a whole screen. --- */
  --ms-caption: 0.75rem;
  --ms-small:   0.875rem;
  --ms-body:    1rem;
  --ms-h3:      1.3125rem;
  --ms-h2:      1.75rem;
  --ms-h1:      2.375rem;
  --ms-display: 3.125rem;
  --ms-mega:    5.5rem;

  /* --- Type. Luxury editorial pairings for English & Thai.
         Display: Cormorant Garamond + Marcellus (high-society serif)
                  Noto Serif Thai (Cadson Demak regal Thai serif).
         Body:    Plus Jakarta Sans (architectural clean grotesk)
                  Noto Sans Thai (Cadson Demak refined Thai reading type). --- */
  --font-display: 'Cormorant Garamond', 'Marcellus', 'Noto Serif Thai', 'Times New Roman', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Noto Sans Thai', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', 'Noto Sans Thai', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --lh-body: 1.7;
  --lh-head: 1.15;

  /* --- Space. 8px grid. --- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-6: 3rem;   --sp-8: 4rem;   --sp-12: 6rem;

  /* --- Light and shadow. On a near-black ground a drop shadow is almost
         invisible — the eye reads depth from a *lit top edge* first and the
         ambient shadow second. Every elevation below is therefore a hairline
         highlight plus a deep, wide shadow, never a shadow alone. --- */
  --lift-1: inset 0 1px 0 rgba(201, 200, 192, 0.07),
            0 10px 30px -14px rgba(0, 0, 0, 0.95);
  --lift-2: inset 0 1px 0 rgba(201, 200, 192, 0.12),
            0 26px 60px -26px rgba(0, 0, 0, 1);
  --lift-bar: 0 18px 40px -28px rgba(0, 0, 0, 1);
  /* the accent only ever glows, never fills, outside of buttons */
  --glow-accent: none;

  /* --- Motion. Cinematic: slow enters, nothing that snaps. --- */
  --dur-sm:   160ms;
  --dur-md:   320ms;
  --dur-lg:   700ms;
  --dur-xl:   1100ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);

  /* --- Elevation scale. --- */
  --z-base: 10; --z-sticky: 20; --z-overlay: 30; --z-top: 50;

    --foot-h: 4.5rem;

  --shell:  1600px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 0;   /* monumental reads as sharp, never rounded */
}

:root {
  --onyx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='o' filterUnits='userSpaceOnUse' x='0' y='0' width='500' height='500' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.016' numOctaves='3' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/%3E%3CfeComponentTransfer in='a' result='v'%3E%3CfeFuncA type='table' tableValues='0 0 0.15 1 0.15 0 0 0.1 0.85 0.1 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%23b9c4e2' result='f'/%3E%3CfeComposite in='f' in2='v' operator='in'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23o)'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Semé-de-lis: the fleur-de-lis strewn in half-drop, which is the French
     royal arms' own arrangement. Drawn once and mirrored about its centre so
     the two lateral petals are true reflections. Inline SVG — no image file. */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 840'%3E%3Cpath d='M90 790 L90 400 A 320 320 0 0 1 410 80' fill='none' stroke='%23000' stroke-width='100' stroke-linecap='round'/%3E%3C/svg%3E");

}

:root {
  /* Alpha colours share the same RGB channels as the solid palette. */
  --rgb-error: 255, 143, 143;
  --rgb-charcoal: 48, 58, 61;
  --rgb-charcoal-light: 65, 76, 80;
  --rgb-accent: 182, 161, 125;
  --rgb-bg: 17, 23, 25;
  --rgb-muted: 201, 200, 192;
  --rgb-shadow: 0, 0, 0;
  --rgb-surface: 23, 30, 32;
  --rgb-surface-raised: 32, 40, 42;
  --rgb-text: 238, 234, 226;
  --rgb-white: 255, 255, 255;
  --color-black: #000;
  --accent-soft: #c9b898;
  --error-border: #ff8f8f;
  --error-text: #ff9a9a;
  --error-text-soft: #ffb3b3;
  --color-white: #ffffff;
  --control-size: 44px;
  --success-text: #9ae6b4;
  --rgb-error-strong: 255, 120, 120;
  --focus-width: 2px;
  --focus-offset: 4px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-16: 64px;
  --space-20: 80px;
}

/* Purple editorial theme; shared layout remains unchanged. */
:root {
  --bg:#08060C; --surface:#0E0A14; --surface-raised:#16101E;
  --on-bg:#ECF2F4; --on-bg-muted:#B9C4E2; --on-bg-faint:#A4ACC2;
  --accent:#A855F7; --accent-fill:#7C3AED; --accent-fill-hi:#8340E0;
  --ci-paper:var(--on-bg); --ci-mist:var(--on-bg-muted); --ci-signal:var(--accent);
  --ci-plum:#372648; --outline:rgba(185,196,226,.15); --outline-strong:rgba(185,196,226,.32);
  --rgb-bg:8,6,12; --rgb-surface:14,10,20; --rgb-surface-raised:22,16,30;
  --rgb-text:236,242,244; --rgb-muted:185,196,226; --rgb-accent:168,85,247;
  --rgb-shadow:0,0,0; --color-white:#FFFFFF;
  --plum-900:var(--bg); --plum-800:var(--surface); --plum-700:var(--surface-raised);
  --rgb-charcoal:55,38,72; --rgb-charcoal-light:74,51,99;
  --error-border:#FF8F8F; --error-text:#FF9A9A; --error-text-soft:#FFB3B3;
  --success-text:#9AE6B4; --radius-card:20px; --radius-control:12px;
  --lift-1:0 4px 20px rgba(var(--rgb-shadow),.18);
  --lift-2:0 12px 32px rgba(var(--rgb-shadow),.30);
  --font-display:'Cormorant Garamond','Noto Serif Thai',Georgia,serif;
  --font-body:'Plus Jakarta Sans','Noto Sans Thai',system-ui,sans-serif;
  --shell:1440px; --gutter:clamp(20px,4vw,64px);
}


/* ===== main.css ===== */
/* =========================================================================
   RESURE LUX — Home
   Tokens first. Every colour and size below is referenced by role, never by
   appearance, so a rebrand is a change here and nowhere else.
   ========================================================================= */



/* Grain. Inline SVG turbulence — no network request, no image file.
   Kept faint: at high opacity it turns a black page muddy grey. */


/* ============================== reset ============================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

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

/* ---------------------------- section snap ----------------------------
   TURNED OFF. Nothing carries html.has-snap, so none of this applies; put the
   class back on <html> in index.html to restore it. It was written when the
   home page was two full-screen sections. The collection section is taller
   than the viewport and a page that snaps past it is worse than one that
   scrolls, so the rules are kept but not switched on.

   Scoped to html.has-snap, which only the home page carried. A residence page
   is a reading page: snapping a long text section fights the reader.
   Proximity, never mandatory: mandatory snapping fights the reader on any
   section taller than the viewport and traps keyboard scrolling. Snapping is
   motion, so it is only offered to visitors who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  html.has-snap { scroll-snap-type: y proximity; }
  .snap { scroll-snap-align: start; scroll-snap-stop: normal; }
}
/* Mandatory only where every section is genuinely one screen tall. Snapping a
   section taller than the window strands whatever sits in its middle, so the
   firm setting is scoped to the sizes that earn it; everything else keeps the
   forgiving proximity above. */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 600px) {
  html.has-snap { scroll-snap-type: y mandatory; }
  .snap { scroll-snap-stop: always; }
}

/* ============================== base ============================== */

body {
  min-height: 100svh;
  margin: 0;
  background: var(--bg);
  color: var(--on-bg);
  font-family: var(--font-body);
  font-size: var(--ms-body);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-head); }
html[lang="th"], .is-th, [lang="th"] { --lh-head: 1.25; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
.is-th h1, .is-th h2, .is-th h3,
[lang="th"] { letter-spacing: normal; }

::selection { background: var(--accent); color: var(--ci-paper); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.vis-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: var(--sp-2); top: -100vh; z-index: var(--z-top);
  padding: 0.8rem var(--sp-3);
  background: var(--accent-fill); color: var(--ci-paper);
  font-size: var(--ms-small); text-decoration: none;
}
.skip:focus { top: var(--sp-2); }

/* ---- shared: the small caps label that sets the monumental register ---- */
.label {
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--on-bg-muted);
}

/* -------- the ground: black, a plum bloom, and a whisper of grain -------- */

.bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* The ground carries a vein field: the bedding planes of backlit onyx, the
   material every luxury lobby of the last decade is clad in. It replaces a
   fleur-de-lys semé over a treillage lattice — French panelling, heraldic and
   traditional, and a repeating motif on a grid, which is what made it read as
   wallpaper rather than as material. Restyling the grid would have kept that;
   this has no geometry in it at all, so it never competes with the
   architecture in the photographs.

   Built the way --noise already is: one inline feTurbulence, no image file and
   no request. The base frequency is anisotropic, which stretches the noise
   four to one and turns blobs into bedding, and the alpha runs through a table
   transfer whose peaks sit off centre, which contours it into filaments rather
   than leaving it as cloud. filterUnits pins the region to the tile, which is
   what makes stitchTiles seamless.

   Still a few percent: a texture you notice on the second look, not a
   wallpaper. Measured at the 90th percentile of backdrop luminance it costs
   under 0.2:1 of contrast, and body text stays above 15:1. */
.bg-decor__lys {
  position: absolute; inset: 0;
  background-image: var(--onyx);
  /* the tile is stretched again on the way out so the veins run long: one tile
     is wider than a laptop, so no repeat is ever on screen */
  background-size: 1200px 900px;
  opacity: 0.05;
}
/* On a phone a 1200px tile shows one pale smear and nothing else, so the vein
   scale comes down with the screen. */
@media (max-width: 700px) {
  .bg-decor__lys { background-size: 620px 500px; }
}
.bg-decor::before {           /* plum bloom behind the search field */
  content: ''; position: absolute;
  left: 50%; top: -30vh; transform: translateX(-50%);
  width: min(1400px, 140vw); height: min(1100px, 110vh);
  background:
    radial-gradient(50% 50% at 50% 50%,
      rgba(var(--rgb-charcoal-light), 0.58) 0%,
      rgba(var(--rgb-charcoal), 0.28) 42%,
      rgba(var(--rgb-bg), 0) 72%);
}
.bg-decor::after {            /* film grain */
  content: ''; position: absolute; inset: 0;
  background-image: var(--noise);
  background-size: 200px 200px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.page { position: relative; z-index: var(--z-base); }
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================ masthead ============================ */

/* Fixed, because with snap sections the nav would otherwise scroll away with
   the first screen and never come back. The scrim keeps it legible over the
   film frame it floats across. */
.masthead {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  /* one x-height of clear space above and below the logotype */
  padding-block: clamp(0.95rem, 1.9vw, 1.55rem);
  background: linear-gradient(to bottom,
    rgba(var(--rgb-bg), 0.96) 0%, rgba(var(--rgb-bg), 0.86) 66%, rgba(var(--rgb-bg), 0) 100%);
  pointer-events: none;   /* the band is decoration; only its contents click */
}
.masthead__shell > * { pointer-events: auto; }
.masthead__shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* the search stays optically centred
                                            whatever the mark and nav weigh */
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.5rem);
}
.masthead__shell > .nav { justify-self: end; }
:root { --masthead-h: 5.75rem; }   /* measured height of the fixed bar */
@media (max-width: 900px) { :root { --masthead-h: 9.5rem; } }

/* ============================ the logotype ============================
   The logo is a monoline lowercase mark; the page is Marcellus. They are two
   voices, so the logo gets its own air and is never set flush against display
   type at a matching size. It carries CI mist — never the violet accent, which
   is reserved for UI state. */
.wordmark {
  display: inline-flex; align-items: center;
  min-height: var(--control-size);
  color: var(--ci-mist);
  text-decoration: none;
  transition: color var(--dur-sm) var(--ease-out);
}
.wordmark__svg {
  width: clamp(132px, 13vw, 190px);
  height: auto;
  overflow: visible;
}
/* The same link carries both cuts of the logo. The logotype is 132px at its
   smallest — half a phone's content width — so it can never share a line with
   the search field. The mark alone is under 20px and can. Only one is ever
   displayed; both are aria-hidden and the link's aria-label is the name. */
.wordmark__mark { display: none; width: auto; height: 32px; overflow: visible; }
.wordmark:hover { color: var(--ci-paper); }

/* The mark alone, for spaces too small or too square for the logotype. */
.foot__mark { display: inline-flex; align-items: center; gap: 0.85rem; }
.foot__mark svg { width: auto; height: 1.35em; color: var(--ci-mist); flex: none; }

.nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); }
.nav a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: var(--control-size);
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 0.95vw, 0.85rem);
  letter-spacing: 0.05em;
  color: var(--on-bg-faint);
  text-decoration: none;
  transition: color var(--dur-sm) var(--ease-out);
  white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 10px;
  height: 1px; background: var(--accent);
  transition: right var(--dur-md) var(--ease-out);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--on-bg); }
.nav a:hover::after, .nav a[aria-current='page']::after { right: 0; }

/* Navigation Controls: Language & Currency Switchers */
.nav__lang,
.nav__cur {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.nav__lang {
  margin-left: 0.35rem;
}

.nav__cur {
  margin-left: 0.2rem;
}

.lang-switch,
.cur-switch {
  display: inline-flex;
  align-items: center;
  height: 28px;
  gap: 2px;
  padding: 2px;
  background: rgba(var(--rgb-white), 0.05);
  border: 1px solid rgba(var(--rgb-white), 0.12);
  border-radius: 9999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 10px rgba(var(--rgb-shadow), 0.35);
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Reset .nav a styles that bleed into .lang-switch__btn */
.nav a.lang-switch__btn,
.lang-switch__btn,
.cur-switch__btn {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: unset !important;
  height: 22px;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--rgb-white), 0.45);
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap !important;
  transition: all var(--dur-sm) var(--ease-out);
  box-sizing: border-box;
}

.nav a.lang-switch__btn::after,
.lang-switch__btn::after,
.cur-switch__btn::after {
  display: none !important;
}

.lang-switch__btn:hover,
.cur-switch__btn:hover {
  color: rgba(var(--rgb-white), 0.9);
  background: rgba(var(--rgb-white), 0.06);
}

.lang-switch__btn.is-active,
.cur-switch__btn.is-active {
  color: var(--color-white) !important;
  background: rgba(var(--rgb-accent), 0.22) !important;
  border-color: rgba(var(--rgb-accent), 0.4) !important;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(var(--rgb-shadow), 0.3);
}

.lang-switch__sep,
.cur-switch__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--rgb-white), 0.16);
  font-size: 0.6rem;
  line-height: 1;
  padding-inline: 1px;
  user-select: none;
}

.cur-sym {
  font-weight: 600;
  margin-right: 3px;
  font-size: 0.72rem;
  opacity: 0.95;
  line-height: 1;
}

.cur-code {
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Visibility toggling by language */
html.is-th .en-only { display: none !important; }
html.is-en .th-only,
html.is-en .coll__th,
html.is-en .rd-hero__th,
html.is-en .coll__name-th,
html.is-en .pf__name-th { display: none !important; }



/* The brief asks for a field a quarter of the page wide. A literal 25%
   truncates the placeholder on a laptop, so 25% is the target with a floor
   that keeps the placeholder whole. */
/* Still the brief's quarter of the page, now living in the bar.
   The boxed panel and its solid slab of a button read like a generic form
   control against Marcellus and hairlines. Rewritten in the page's own language:
   a rule under the field rather than a box around it, and a ghost submit that
   only takes the accent on hover. */
.search {
  --search-w: 25vw;
  display: flex; align-items: center; gap: var(--sp-2);
  width: clamp(15rem, var(--search-w), 26rem);
  padding: 0 0 0 0.25rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--outline-strong);
  transition: border-color var(--dur-md) var(--ease-out);
}
.search:hover { border-bottom-color: rgba(var(--rgb-muted), 0.5); }
.search:focus-within { border-bottom-color: var(--accent); }
.search__icon {
  flex: none; color: var(--on-bg-faint);
  transition: color var(--dur-md) var(--ease-out);
}
.search:focus-within .search__icon { color: var(--on-bg-muted); }
.search__field {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--control-size);
  background: none; border: 0;
  font-size: var(--ms-small);
  letter-spacing: 0.06em;
  color: var(--on-bg);
}
/* Without the old glass panel behind it, the placeholder sits straight on the
   film still; --on-bg-faint measured 4.42:1 there. This step clears AA and is
   still plainly dimmer than entered text, which is --on-bg. */
.search__field::placeholder { color: rgba(var(--rgb-muted), 0.82); }
.search__field:focus { outline: none; }
.search__field::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }

.search__submit {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-size); padding-inline: 1rem;   /* 44 is the floor, bar or not */
  border-left: 1px solid var(--outline);    /* separates it from the field */
  background: none;
  color: var(--on-bg-muted);
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color var(--dur-sm) var(--ease-out),
              background var(--dur-sm) var(--ease-out);
}
.search__submit-icon { display: none; }
.search__submit:hover { color: var(--ci-paper); }
/* Enter already submits; the button is the visible affordance, so it earns the
   accent only when pointed at. */
.search__submit:hover, .search__submit:focus-visible {
  background: var(--accent-fill);
  color: var(--ci-paper);
}

/* ------------------------- the film: full bleed -------------------------
   The still covers the whole window; object-fit crops it rather than letting
   the 16:9 source letterbox. The player itself is a different matter — see
   .film__video below. */
/* First screen, edge to edge: no frame, no gutter, nothing around it. */
.film { height: 100svh; }
.film .stage, .film .stage__frame { width: 100%; height: 100%; }
.film .stage__frame { aspect-ratio: auto; box-shadow: none; background: var(--bg); }
.stage { width: 100%; margin-inline: auto; }

/* The slug used to sit under the frame; on a full-height screen that extra row
   is what would push an 80% film off the edge, so it moved inside. */
.stage__slug {
  position: absolute; z-index: 2;
  top: clamp(0.9rem, 2.2vw, 1.75rem); left: clamp(1.25rem, 3.2vw, 3rem);
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ci-paper);
  text-shadow: 0 2px 16px rgba(var(--rgb-shadow), 0.9);
  pointer-events: none;
}

.stage__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 60px 140px -60px rgba(var(--rgb-shadow), 1),
              inset 0 1px 0 rgba(var(--rgb-muted), 0.08),
              0 0 0 1px var(--outline);
}

/* ------------------------- the film: full-bleed ambient video ------------------------- */
.film__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--bg);
  border: 0;
  z-index: 1;
}

.film__veil {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(72% 60% at 88% 88%,
      rgba(var(--rgb-shadow), 0.72) 0%, rgba(var(--rgb-shadow), 0.35) 46%, rgba(var(--rgb-shadow), 0) 100%),
    linear-gradient(to top,
      rgba(var(--rgb-shadow), 0.88) 0%,
      rgba(var(--rgb-shadow), 0.42) 32%,
      rgba(var(--rgb-shadow), 0.04) 60%,
      rgba(var(--rgb-shadow), 0.65) 100%);
}

.film__content {
  position: absolute; inset: auto 0 0 0;
  z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4);
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 4rem) var(--gutter);
  pointer-events: none;
}

.film__body {
  pointer-events: auto;
  max-width: 32ch;
}

.film__kicker {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ci-paper);
  opacity: 0.82;
}

.film__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  text-shadow: 0 2px 24px rgba(var(--rgb-shadow), 0.85);
  color: var(--ci-paper);
}

.film__meta {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--ms-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--rgb-text), 0.82);
}

.film__sound-toggle {
  pointer-events: auto;
  flex: none;
  display: inline-flex; align-items: center; gap: 0.65rem;
  min-height: 46px; padding: 0.5rem 1.35rem;
  border: 1px solid rgba(var(--rgb-text), 0.45);
  background: rgba(var(--rgb-shadow), 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ci-paper);
  cursor: pointer;
  transition: background var(--dur-md) var(--ease-out),
              border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}
.film__sound-toggle:hover,
.film__sound-toggle:focus-visible {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--ci-paper);
  box-shadow: var(--glow-accent);
}

.film__fallback {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-3) var(--gutter);
  font-size: var(--ms-small); color: var(--on-bg-muted);
}

.stage__caption {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  font-size: var(--ms-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}
.stage__caption span:first-child { font-family: var(--font-display); letter-spacing: 0.3em; }

/* A quiet instruction that there is more than one screen — without it a
   mandatory-snap cover reads as the whole site. */

.scroll-cue {
  position: absolute; z-index: 2;
  left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  text-shadow: 0 2px 14px rgba(var(--rgb-shadow), 0.9);
  pointer-events: none;
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}
.scroll-cue::after {
  content: ''; width: 1px; height: clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(var(--outline-strong), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue::after { animation: cue 2.6s var(--ease-out) infinite; transform-origin: top; }
  @keyframes cue { 0%,100% { transform: scaleY(0.45); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
}

/* ================= 4. the residences — text over the image ================= */

.projects {
  height: calc(100svh - var(--foot-h));
  padding-block: clamp(1rem, 2.2vw, 2rem);
}
.projects__shell {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--masthead-h);
}

.section-head {
  flex: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--outline);
  margin-bottom: clamp(1rem, 2.2vw, 1.75rem);
}
.section-head__title { display: flex; flex-direction: column; gap: var(--sp-2); }
.section-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.section-head p {
  max-width: 40ch;
  font-size: var(--ms-small);
  color: var(--on-bg-faint);
}

.pf { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pf__viewport { overflow: hidden; flex: 1; min-height: 16rem; }
.pf__track { height: 100%; }
.pf__slide { height: 100%; }
.pf__track {
  display: flex;
  transition: transform var(--dur-lg) var(--ease-out);
  will-change: transform;
}
.pf__slide { flex: 0 0 100%; min-width: 0; }

/* Fills whatever height the flex column leaves. object-fit does the cropping,
   so the frame can be any proportion the window ends up giving it. */
.pf__link {
  position: relative; display: block;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--outline);
}
.pf__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1200ms var(--ease-out);
}
.pf__link:hover .pf__img,
.pf__link:focus-visible .pf__img { transform: scale(1.1); }

/* ------------------------------ watermark ------------------------------
   The mark, never the logotype: at watermark weight the logotype's hairlines
   disappear, and it would compete with the caption. Top-right is the only free
   corner — the caption owns bottom-left and the carousel nav bottom-right.
   Painted through a mask so one asset serves any colour or opacity. */
.pf__wm {
  position: absolute; z-index: 2;
  top: clamp(1rem, 2.6vw, 2.25rem);
  right: clamp(1rem, 2.6vw, 2.25rem);
  /* ~7% of the frame's height — a corner watermark is judged by height, and
     sizing off the width made it 11.5% on a wide frame */
  height: clamp(22px, 4.5vh, 40px);
  aspect-ratio: 500 / 840;
  background: var(--ci-paper);
  opacity: 0.58;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  /* a photograph can be white where the mark lands, so it carries its own shadow */
  filter: drop-shadow(0 1px 3px rgba(var(--rgb-shadow), 0.75));
  pointer-events: none;
}

.pf__caption {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.6rem;
  padding: clamp(1.25rem, 3.6vw, 3.5rem);
  color: var(--ci-paper);
  /* There is no overlay on these photographs any more, so every bit of
     legibility the caption has, it carries itself. Four layers doing four
     jobs: a hairline drop that keeps an edge against fine detail, a tight
     halo that closes the gap between stroke and background, a wide halo that
     separates the block from a busy frame, and a long soft shadow that gives
     the whole caption a ground to sit on.

     A stroke would be the other way to do this, and it is the wrong one here:
     Marcellus is a modulated serif, so a 1px stroke turns its thin strokes
     into 3px while barely touching the stems — the modulation that makes the
     face look expensive is exactly what a stroke destroys. */
  text-shadow:
    0 1px 1px rgba(var(--rgb-shadow), 0.92),
    0 0 4px rgba(var(--rgb-shadow), 0.82),
    0 0 12px rgba(var(--rgb-shadow), 0.68),
    0 4px 26px rgba(var(--rgb-shadow), 0.55);
}
/* A patch of shade the size of the caption, and nothing more.

   Every earlier attempt shaped the cover against the FRAME — a gradient up from
   the bottom, a pool in the corner — and each one had to be huge, because the
   caption is tall: it starts 39% down. Covering it that way meant darkening a
   third of the photograph.

   Tying it to the caption's own box instead makes it small and self-sizing: it
   grows with the text and stops there. The insets bleed it a little past the
   type so the edge is never a visible rectangle, and the radial falloff means
   it has no edge to speak of at all.

   isolation on the parent so z-index:-1 puts this behind the type but still in
   front of the photograph. */
.pf__caption { isolation: isolate; }
.pf__caption::before {
  content: '';
  position: absolute;
  /* The box has to be far bigger than the pool it holds. Sized tight, the
     gradient was still part-way through its fade when the element ended, and
     the cut showed as a rectangle over the photograph. Generous insets let the
     fade finish in open space; only the bottom is clipped, and that edge is
     the bottom of the picture anyway. */
  inset: -55% -90% -35% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 68% at 26% 64%,
    rgba(var(--rgb-shadow), calc(0.88 * var(--cap-k, 1))) 0%,
    rgba(var(--rgb-shadow), calc(0.72 * var(--cap-k, 1))) 34%,
    rgba(var(--rgb-shadow), calc(0.34 * var(--cap-k, 1))) 62%,
    rgba(var(--rgb-shadow), 0) 84%);
}

.pf__index {
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ci-paper);
  opacity: 0.82;
}
.pf__name {
  font-size: clamp(1.75rem, 4vw, 3.75rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 4px 40px rgba(var(--rgb-shadow), 0.85);
}
.pf__name-th {
  display: block;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: clamp(0.95rem, 1.8vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--on-bg-muted, var(--accent));
  margin-top: 0.35rem;
  text-shadow: 0 2px 14px rgba(var(--rgb-shadow), 0.85);
}
.pf__tagline {
  max-width: 34ch;
  font-size: var(--ms-small);
  letter-spacing: 0.02em;
  color: var(--ci-paper);
  opacity: 0.86;
  text-shadow: 0 2px 18px rgba(var(--rgb-shadow), 0.85);
}
.pf__facts {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem;
  font-size: var(--ms-small);
  color: var(--ci-paper);
  text-shadow: 0 2px 18px rgba(var(--rgb-shadow), 0.85);
}
.pf__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.pf__price { font-weight: 400; }

/* State is carried by the wording too, never by the dot colour alone. */

/* ------- controls: a thumbnail per residence, plus prev / next ------- */

.pf__bar {
  flex: none;
  display: flex; align-items: flex-end; justify-content: flex-start;
  margin-top: var(--sp-3);
}

.pf__thumbs { display: flex; gap: clamp(0.5rem, 1.2vw, 1rem); flex-wrap: wrap; }
.pf__thumb {
  position: relative;
  display: flex; flex-direction: column; gap: 0.55rem;
  width: clamp(112px, 12vw, 172px);
  padding: 0;
  text-align: left;
  color: var(--on-bg-faint);
  transition: color var(--dur-md) var(--ease-out);
}
.pf__thumb-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--outline);
}
.pf__thumb-img img {
  width: 100%; height: 100%; object-fit: cover;
  /* Unselected thumbnails step back so the current one is unmistakable. */
  filter: grayscale(0.6) brightness(0.5);
  transition: filter var(--dur-md) var(--ease-out),
              transform var(--dur-lg) var(--ease-out);
}
.pf__thumb-img::after {          /* the selected marker, drawn on the image */
  content: ''; position: absolute; inset: auto 0 0 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-md) var(--ease-out);
}
.pf__thumb-label {
  display: flex; align-items: baseline; gap: 0.5rem;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pf__thumb-num { opacity: 0.7; min-width: 2ch; }

.pf__thumb:hover { color: var(--on-bg-muted); }
.pf__thumb:hover .pf__thumb-img img { filter: grayscale(0.2) brightness(0.78); }
.pf__thumb[aria-selected='true'] { color: var(--on-bg); }
.pf__thumb[aria-selected='true'] .pf__thumb-img img { filter: none; }
.pf__thumb[aria-selected='true'] .pf__thumb-img::after {
  transform: scaleX(1);
  box-shadow: var(--glow-accent);
}
.pf__thumb[aria-selected='true'] .pf__thumb-img { box-shadow: var(--lift-2); }


/* ============================== footer ============================== */

.foot {
  min-height: var(--foot-h);
  display: flex; align-items: center;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--outline);
  font-size: var(--ms-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}
/* These sit on one inline row, so the tap area is grown with a pseudo-element
   instead of padding — 44px of target without 44px of layout. */
.foot__shell {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.foot a {
  position: relative; display: inline-block;
  text-decoration: none;
  transition: color var(--dur-sm) var(--ease-out);
}
.foot a::after { content: ''; position: absolute; inset: -15px -10px; }
.foot a:hover { color: var(--on-bg); }

/* ========================== entrance motion ========================== */

/* Reveal. opacity + transform only, so nothing reflows and nothing shifts the
   page as it settles. --i staggers a group; the delay is capped so a long list
   never leaves the last item waiting. */
.js .rise { opacity: 0; transform: translateY(26px); }
.js .rise.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-xl) var(--ease-out),
              transform var(--dur-xl) var(--ease-out);
  transition-delay: calc(min(var(--i, 0) * 90ms, 360ms));
}
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; }
}

/* ========================= search suggestions =========================
   The panel hangs off the field, so it inherits the bar's stacking context and
   needs no z-index of its own. Rows are 52px — over the 44 minimum, because a
   list you scan quickly is worth more room than a control you press once.

   Colours here are the surface tokens, not new ones: the panel is the same
   material as a card, lifted one step further off the page. */

/* The nav is a later sibling in the bar, so without this it paints over the
   panel on the two-row mobile layout. Lifting the field's own stacking context
   is enough — the panel rides along inside it. */
.search--ac { position: relative; z-index: var(--z-overlay); }

.ac {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0; right: 0;
  border: 1px solid var(--outline-strong);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--rgb-charcoal-light), 0.42) 0%, rgba(var(--rgb-bg), 0) 68%),
    var(--surface);
  box-shadow: var(--lift-2);
  overflow: hidden;
}

.ac__list { max-height: min(56vh, 26rem); overflow-y: auto; overscroll-behavior: contain; }

.ac__group {
  padding: 0.85rem 0.85rem 0.4rem;
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--on-bg-faint);
}
.ac [role='group'] + [role='group'] { border-top: 1px solid var(--outline); }

.ac__opt {
  display: flex; align-items: center; gap: 0.85rem;
  min-height: 52px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease-out);
}
/* Hover and keyboard land on the same state, so there is one thing to learn.
   The accent bar on the leading edge carries it, not colour alone. */
.ac__opt.is-active { background: rgba(var(--rgb-accent), 0.14); box-shadow: inset 3px 0 0 var(--accent); }

.ac__thumb { flex: none; width: 52px; height: 33px; }
.ac__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border: 1px solid var(--outline);
}
.ac__icon { flex: none; width: 20px; height: 20px; margin-inline: 1rem 0.98rem; color: var(--on-bg-faint); }
.ac__opt.is-active .ac__icon { color: var(--accent); }

.ac__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ac__name {
  font-size: var(--ms-small); color: var(--on-bg);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The typed part, marked without the browser's yellow highlighter. */
.ac__name mark { background: none; color: var(--accent); font-weight: 500; }
/* Tracked less than the rest of the caption type: this line carries a place
   and a price, and on a 279px panel the tracking is what pushes the figure
   off the end. Ellipsis is the safety net, but losing digits off a price is
   the one truncation worth designing away. */
.ac__meta {
  font-size: var(--ms-caption); color: var(--on-bg-muted);
  letter-spacing: 0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .ac__opt { transition: none; }
}

/* ------------------------- shared elevation ------------------------- */

/* Hover lift. transform moves the card without touching layout, so nothing
   around it reflows. box-shadow is not GPU-composited, but this is a hover on
   at most a handful of visible cards — not a running animation. */
.lift {
  box-shadow: var(--lift-1);
  transition: box-shadow var(--dur-md) var(--ease-out),
              border-color var(--dur-md) var(--ease-out),
              transform var(--dur-md) var(--ease-out);
}
.lift:hover,
.lift:focus-visible,
.lift:focus-within {
  box-shadow: var(--lift-2);
  border-color: var(--outline-strong);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .lift:hover, .lift:focus-visible, .lift:focus-within { transform: none; }
}

/* The bar floats over content, so once the page has moved it earns an edge.
   Toggled from JS rather than backdrop tricks, so it is one class either way. */
.masthead::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: var(--lift-bar);
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease-out);
  pointer-events: none;
}
.masthead.is-scrolled::after { opacity: 1; }
.masthead.is-scrolled { border-bottom: 1px solid var(--outline); }

/* ============================ responsive ============================ */

/* Wide screens: the nav rides on the frame, bottom-right, opposite the
   caption. The frame's own scrim is already darkest there, so the thumbnails
   sit on cover without needing one of their own. */
@media (min-width: 901px) {
  .pf { position: relative; }
  /* One row hard against the bottom edge, where the frame's scrim is deepest —
     stacked, the thumbnails floated into the middle of the picture where there
     is no cover at all. */
  .pf__bar {
    position: absolute; z-index: 2;
    right: clamp(1.25rem, 3vw, 3rem);
    bottom: clamp(1rem, 2.4vw, 2.25rem);
    left: auto;
    margin-top: 0;
    width: auto;
    flex-direction: row; align-items: flex-end;
    flex-wrap: nowrap;
  }
  .pf__thumbs { justify-content: flex-end; flex-wrap: nowrap; }
  .pf__thumb { width: clamp(84px, 7vw, 124px); }
  .pf__thumb-img { box-shadow: 0 0 0 1px rgba(var(--rgb-text), 0.28); }
  .pf__thumb-label { color: var(--ci-paper); text-shadow: 0 2px 12px rgba(var(--rgb-shadow), 0.9); }
  /* "SUKHUMVIT" is wider than the thumbnail it labels, so the names collide.
     Clipped rather than display:none — the button's accessible name has to
     stay "I Sukhumvit", not a bare "I". */
  .pf__thumb-label span:last-child {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .pf__thumb-num { min-width: 0; opacity: 1; }
  /* the caption must not run under the thumbnails */
  .pf__caption { max-width: 44%; }
}

/* Between 900 and 1100 there is not room for four named thumbnails beside the
   caption, so the names drop and the numerals carry the nav. */
@media (min-width: 901px) and (max-width: 1100px) {
  .pf__thumb { width: 76px; }
  .pf__caption { max-width: 44%; }
  .pf__name { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
}

@media (max-width: 900px) {
  /* Row 1: mark + search (search fills all remaining space)
     Row 2: nav full-width */
  .masthead__shell {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'mark search' 'nav nav';
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    justify-items: stretch;
    align-items: center;
  }
  /* A 44px box with the mark flush to its leading edge */
  .wordmark {
    grid-area: mark;
    min-width: var(--control-size); min-height: var(--control-size);
    justify-content: flex-start;
  }
  .wordmark__svg { display: none; }
  .wordmark__mark { display: block; }
  .nav a::before { content: ''; position: absolute; inset: -4px -6px; }
  /* Search takes full remaining width in row 1 */
  .masthead__shell > .search {
    grid-area: search;
    width: 100%;
    max-width: 100%;
  }
  /* Nav spans full width in row 2, centred */
  .masthead__shell > .nav {
    grid-area: nav;
    justify-self: stretch;
  }
  .nav ul { gap: clamp(0.5rem, 2vw, 1.1rem); flex-wrap: wrap; justify-content: center; }
  .nav a { min-height: 36px; font-size: 0.75rem; letter-spacing: 0.02em; }
  .nav__lang,
  .nav__cur { margin-left: 0; }
  .nav a.lang-switch__btn,
  .lang-switch__btn,
  .cur-switch__btn {
    min-height: unset !important;
    height: 22px;
    padding: 0 var(--space-1-5);
    font-size: 0.625rem;
  }

  .poster__body { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  /* stacked, the caption and play button already own the bottom of the frame */
  .scroll-cue { display: none; }
  .section-head { align-items: flex-start; }
  .pf__viewport { flex: none; min-height: 0; }
  .pf__link { height: auto; aspect-ratio: 16 / 9; }
  .poster__body { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .section-head { align-items: flex-start; }
  .pf__viewport { flex: none; min-height: 0; }
  .pf__link { height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  .projects { height: auto; min-height: 0; }
  .foot { min-height: 0; }
  .nav ul { gap: var(--sp-2); flex-wrap: wrap; }
  .nav a { min-height: 36px; }
  .stage { width: 100%; }
  .pf__link { height: auto; aspect-ratio: 3 / 4; }
  .pf__caption, .poster__body { padding: var(--sp-2); }

  .pf__bar { display: block; }
  .pf__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); }
  .pf__thumb { width: auto; }
  .pf__thumb-label { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .foot__shell { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  /* Stacking the button under the field made sense when the search was a hero
     element; inside a bar it doubles the bar's height. Keep one row and take
     the space out of the padding instead. The left inset was clearance for the
     magnifier, which now sits on the button, so the field starts flush and the
     placeholder survives down to 320px. */
  .search { flex-wrap: nowrap; padding: 0.3rem 0.3rem 0.3rem 0; gap: 0.5rem; }
  .search__field { flex: 1 1 auto; min-width: 0; padding-inline: 0; }
  /* Below this width the word SEARCH (98px) and the decorative magnifier (33px
     with its gap) cost more than the placeholder can spare, so the button takes
     the magnifier and the decorative one stands down — two magnifiers in one
     field would say nothing twice anyway. The button keeps its 44px target and
     its accessible name. */
  .search__icon { display: none; }
  .search__submit-text { display: none; }
  .search__submit-icon { display: block; }
  .search__submit { width: 44px; padding-inline: 0; }
  /* numeral only, but clipped so the accessible name survives */
  .pf__thumb-label span:last-child {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .pf__thumb-num { min-width: 0; }
}

/* ---------------------------------------------------------- the collection
   The carousel above is a curated six. This is every residence, as a bento
   grid: a repeating rhythm of one large tile, some wide ones and squares.
   Unlike the sections above it this one is taller than the viewport, so it
   carries no .snap class and scrolls normally. */
.coll {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--outline);
}
/* --- Editorial Thai / English Summary Card in Collection --- */
.coll__th, .coll__en {
  background: rgba(var(--rgb-white), 0.02);
  border: 1px solid rgba(var(--rgb-white), 0.07);
  border-radius: var(--radius, 12px);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
  margin: 1.5rem 0 clamp(2rem, 4vw, 3.5rem) 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.coll__th-lead, .coll__en-lead {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.7;
  color: var(--on-bg);
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.coll__th-lead strong, .coll__en-lead strong {
  color: var(--ci-cream, var(--on-bg));
  font-weight: 500;
}
.coll__th-grid, .coll__en-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(var(--rgb-white), 0.06);
  border-bottom: 1px solid rgba(var(--rgb-white), 0.06);
  margin-bottom: 1.25rem;
}
.coll__th-item, .coll__en-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.coll__th-item-title, .coll__en-item-title {
  font-size: var(--ms-caption, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ci-cream, var(--on-bg));
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.coll__th-item-title::before, .coll__en-item-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ci-sand, var(--accent));
  box-shadow: 0 0 8px rgba(var(--rgb-accent), 0.5);
}
.coll__th-item-desc, .coll__en-item-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--on-bg-muted);
}
.coll__th-note, .coll__en-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--on-bg-muted);
  opacity: 0.75;
  margin: 0;
}
.coll__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
.coll__card--wide { grid-column: span 2; }
.coll__card--big  { grid-column: span 2; grid-row: span 2; }

.coll__card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  min-height: 15rem;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  color: var(--on-bg); text-decoration: none;
  transition: border-color var(--dur-md, .22s) var(--ease-out, ease),
              transform var(--dur-md, .22s) var(--ease-out, ease);
}
.coll__card:hover { border-color: var(--outline-strong); }
.coll__card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.coll__media { position: relative; display: block; flex: 1; min-height: 15rem; overflow: hidden; }
.coll__card--big .coll__media { min-height: 30rem; }
.coll__media picture, .coll__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.coll__media img {
  transition: transform var(--dur-lg, .5s) var(--ease-out, ease);
}
.coll__card:hover .coll__media img { transform: scale(1.035); }

/* Project details follow the image in normal document flow. */
.coll__body {
  position: relative;
  display: flex; flex-direction: column; gap: 0.2rem;
  flex: 0 0 auto;
  padding: clamp(0.85rem, 1.4vw, 1.1rem);
  background: var(--surface);
  border-top: 1px solid var(--outline);
}
.coll__index {
  font-size: var(--ms-caption); letter-spacing: 0.18em; text-transform: uppercase;
  /* faint is 66% alpha and never cleared 4.5:1 over a photograph, however
     strong the scrim; the size and the letter-spacing carry the hierarchy */
  color: var(--on-bg-muted);
}
.coll__name {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.15;
  text-wrap: balance;
}
.coll__card--big .coll__name { font-size: clamp(1.3rem, 2.2vw, 2rem); }
.coll__name-th {
  display: block;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--on-bg-muted);
  margin-top: 0.25rem;
}
.coll__card--big .coll__name-th { font-size: 0.95rem; }
.coll__facts {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem;
  margin-top: 0.3rem;
  font-size: var(--ms-caption); color: var(--on-bg-muted);
}
.coll__price { color: var(--on-bg); }

/* --- AI Video Reel / Living Motion for Top 5 Collection Cards --- */
.coll__poster,
.coll__poster picture,
.coll__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: opacity 0.6s var(--ease-out);
}

.coll__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  opacity: 1;
  transform: translateZ(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--dur-lg, 0.5s) var(--ease-out);
  will-change: opacity, transform;
}

.coll__card--reel .coll__video {
  opacity: 1;
}

.coll__card--reel:hover .coll__video {
  transform: scale(1.035);
}

/* Timeline progress bar across the bottom of the card media */
.coll__reel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(var(--rgb-white), 0.12);
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.coll__card--reel.is-playing .coll__reel-progress {
  opacity: 1;
}

.coll__reel-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  box-shadow: 0 0 8px rgba(var(--rgb-accent), 0.7);
  transition: width 0.08s linear;
}

/* Highlight border glow on the active centered card */
.coll__card--reel.is-playing {
  border-color: rgba(var(--rgb-accent), 0.5);
  box-shadow: 0 16px 36px -12px rgba(var(--rgb-shadow), 0.95), 0 0 24px -4px rgba(var(--rgb-accent), 0.28);
}

@media (max-width: 64rem) {
  .coll__grid { grid-template-columns: repeat(2, 1fr); }
  .coll__card--big { grid-row: span 1; }
  .coll__card--big .coll__media { min-height: 15rem; }
}
@media (max-width: 40rem) {
  .coll__grid { grid-template-columns: 1fr; }
  .coll__card--wide, .coll__card--big { grid-column: span 1; grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .coll__card, .coll__media img, .coll__reel-frame { transition: none !important; animation: none !important; transform: none !important; }
  .coll__card:hover .coll__media img { transform: none; }
}


/* ===== search.css ===== */
/* =========================================================================
   RESURE LUX — Search Experience & Property Directory
   High-end architectural luxury search for high-net-worth property buyers.
   Loaded after main.css.
   ========================================================================= */

.sr-page {
  padding-top: calc(var(--masthead-h, 5.75rem) + clamp(1.5rem, 3vw, 2.5rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

/* ------------------------------- Hero ------------------------------- */

.sr-hero {
  position: relative;
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--outline);
}

.sr-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.sr-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
}

.sr-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-bg);
  margin: 0 0 1rem 0;
}

.sr-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--on-bg-muted);
}

.sr-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.sr-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(var(--rgb-accent), 0.08);
  border: 1px solid rgba(var(--rgb-accent), 0.25);
  font-size: var(--ms-small);
  letter-spacing: 0.06em;
  color: var(--ci-paper);
}

.sr-count-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* In-page Hero Search Bar */
.sr-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  max-width: 52rem;
  background: rgba(var(--rgb-surface), 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--outline);
  box-shadow: var(--lift-1);
  transition: border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}

.sr-search-bar:focus-within {
  border-color: var(--outline-strong);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(var(--rgb-accent), 0.35);
}

.sr-search-bar__icon {
  position: absolute;
  left: 1.25rem;
  width: 20px;
  height: 20px;
  color: var(--on-bg-muted);
  pointer-events: none;
}

.sr-search-bar__input {
  width: 100%;
  height: 3.5rem;
  padding-left: 3.25rem;
  padding-right: 5rem;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.8vw, 1.125rem);
  letter-spacing: 0.03em;
  color: var(--on-bg);
}

.sr-search-bar__input::placeholder {
  color: rgba(var(--rgb-muted), 0.45);
  font-weight: 300;
}

.sr-search-bar__clear {
  position: absolute;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: rgba(var(--rgb-muted), 0.1);
  color: var(--on-bg-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--dur-sm) var(--ease-out);
}

.sr-search-bar__clear:hover {
  background: rgba(var(--rgb-muted), 0.22);
  color: var(--on-bg);
}

/* ------------------------------- Controls & Filters ------------------------------- */

.sr-control-panel {
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--outline);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.sr-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sr-filter-group__label {
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
  min-width: 7rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sr-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.sr-chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--outline);
  background: rgba(var(--rgb-surface), 0.4);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-bg-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              background var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out);
}

.sr-chip:hover {
  color: var(--on-bg);
  border-color: var(--outline-strong);
  background: rgba(var(--rgb-muted), 0.06);
}

.sr-chip[aria-pressed='true'],
.sr-chip.is-active {
  color: var(--color-white);
  border-color: var(--accent);
  background: rgba(var(--rgb-accent), 0.18);
  box-shadow: 0 0 16px -4px rgba(var(--rgb-accent), 0.4);
}

/* Secondary toolbar: Sort & Active filters */
.sr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

.sr-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.sr-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.65rem;
  background: rgba(var(--rgb-accent), 0.12);
  border: 1px solid rgba(var(--rgb-accent), 0.35);
  font-size: var(--ms-caption);
  color: var(--ci-paper);
}

.sr-active-tag__btn {
  background: none;
  border: none;
  color: var(--on-bg-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  line-height: 1;
}

.sr-active-tag__btn:hover {
  color: var(--color-white);
}

.sr-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.sr-sort-label {
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}

.sr-sort-select {
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--on-bg);
  padding: 0.45rem 1.75rem 0.45rem 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--ms-small);
  letter-spacing: 0.04em;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b9c4e2' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  transition: border-color var(--dur-sm) var(--ease-out);
}

.sr-sort-select:focus {
  border-color: var(--accent);
}

/* ------------------------------- Results Grid ------------------------------- */

.sr-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 680px) {
  .sr-results {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .sr-results {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------- Property Card ------------------------------- */

.sr-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--outline);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--lift-1);
  transition: transform var(--dur-md) var(--ease-out),
              border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}

.sr-card:hover,
.sr-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--outline-strong);
  box-shadow: var(--lift-2), 0 0 25px -8px rgba(var(--rgb-accent), 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .sr-card:hover,
  .sr-card:focus-visible {
    transform: none;
  }
}

/* Card Media */
.sr-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background: var(--color-black);
}

.sr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-card:hover .sr-card__media img,
.sr-card:focus-visible .sr-card__media img {
  transform: scale(1.06);
}

/* Dark gradient vignette over photo */
.sr-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--rgb-bg), 0.3) 0%, rgba(var(--rgb-bg), 0) 40%, rgba(var(--rgb-bg), 0.75) 100%);
  pointer-events: none;
}

/* Badges on card media */
.sr-card__badges {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sr-card__dev-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: rgba(var(--rgb-bg), 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--rgb-muted), 0.2);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ci-paper);
}

.sr-card__wm {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  right: 0.85rem;
  height: 24px;
  aspect-ratio: 500 / 840;
  background: var(--ci-paper);
  opacity: 0.55;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(var(--rgb-shadow), 0.8));
  transition: opacity var(--dur-sm) var(--ease-out);
}

.sr-card:hover .sr-card__wm {
  opacity: 0.85;
}

.sr-card__loc-tag {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(var(--rgb-shadow), 0.8);
}

.sr-card__loc-tag svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

/* Card Body */
.sr-card__body {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.55rem;
}

.sr-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--on-bg);
  margin: 0;
  transition: color var(--dur-sm) var(--ease-out);
}

.sr-card:hover .sr-card__name {
  color: var(--color-white);
}

.sr-card__tagline {
  font-family: var(--font-sans);
  font-size: var(--ms-small);
  line-height: 1.55;
  color: var(--on-bg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.sr-card__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--rgb-muted), 0.08);
  font-size: 0.8125rem;
  color: var(--on-bg-muted);
}

.sr-card__fact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sr-card__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--on-bg-faint);
  opacity: 0.5;
}

/* Price & Action footer */
.sr-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.sr-card__price-box {
  display: flex;
  flex-direction: column;
}

.sr-card__price-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}

.sr-card__price {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent); /* Refined luxury champagne gold */
  text-shadow: 0 0 16px rgba(var(--rgb-accent), 0.2);
}

.sr-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-bg-muted);
  transition: transform var(--dur-sm) var(--ease-out),
              color var(--dur-sm) var(--ease-out);
}

.sr-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-sm) var(--ease-out);
}

.sr-card:hover .sr-card__cta {
  color: var(--ci-paper);
}

.sr-card:hover .sr-card__cta svg {
  transform: translateX(4px);
}

/* ------------------------------- Empty State ------------------------------- */

.sr-empty {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--outline);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.sr-empty__glyph {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  color: var(--accent);
  opacity: 0.8;
}

.sr-empty h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-bg);
  margin: 0;
}

.sr-empty p {
  margin-top: 0.85rem;
  color: var(--on-bg-muted);
  font-size: var(--ms-body);
  line-height: 1.6;
}

.sr-empty__try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 2rem;
}

.sr-empty__try-label {
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
  margin-right: 0.35rem;
}

/* ------------------------------- Recommendations ------------------------------- */

.sr-recs {
  padding-top: 2rem;
  padding-bottom: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--outline);
}

.sr-recs__head {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}

.sr-recs__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .sr-recs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sr-recs__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sr-rec {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--outline);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: var(--lift-1);
  transition: transform var(--dur-md) var(--ease-out),
              border-color var(--dur-md) var(--ease-out);
}

.sr-rec:hover {
  transform: translateY(-3px);
  border-color: var(--outline-strong);
}

.sr-rec__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.sr-rec__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-lg) var(--ease-out);
}

.sr-rec:hover .sr-rec__media img {
  transform: scale(1.05);
}

.sr-rec__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.sr-rec__index {
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}

.sr-rec__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-bg);
}

.sr-rec__meta {
  font-size: var(--ms-small);
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* ------------------------- Concierge Banner ------------------------- */

.sr-concierge-banner {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.sr-concierge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(80% 160% at 10% 0%, rgba(var(--rgb-charcoal-light), 0.45) 0%, rgba(var(--rgb-bg), 0) 70%),
    var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--lift-2);
}

.sr-concierge-content {
  max-width: 60ch;
}

.sr-concierge-content .label {
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sr-concierge-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--on-bg);
  margin-bottom: 0.75rem;
}

.sr-concierge-content p {
  font-size: var(--ms-small);
  line-height: 1.6;
  color: var(--on-bg-muted);
}

.sr-concierge-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all var(--dur-sm) var(--ease-out);
  text-align: center;
  white-space: nowrap;
}

.sr-btn--solid {
  background: var(--accent-fill);
  color: var(--ci-paper);
}

.sr-btn--solid:hover {
  background: var(--accent-fill-hi);
  box-shadow: var(--glow-accent);
}

.sr-btn--ghost {
  background: transparent;
  color: var(--on-bg);
  border: 1px solid var(--outline-strong);
}

.sr-btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 860px) {
  .sr-concierge-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .sr-concierge-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sr-btn {
    flex: 1 1 auto;
  }
}

[hidden] {
  display: none !important;
}


/* ===== detail.css ===== */
/* =========================================================================
   RESURE LUX - Residence Detail
   Luxury architectural editorial layout.
   Tokens, masthead, footer, and base typography come from main.css.
   ========================================================================= */

/* -------------------------------- Hero -------------------------------- */

.rd-hero {
  position: relative;
  min-height: clamp(34rem, 82svh, 54rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg);
}

.rd-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Lightened cinematic scrim: allows architectural photography to shine
   with true luminosity and color while guaranteeing text legibility. */
.rd-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(var(--rgb-bg), 0.88) 0%,
      rgba(var(--rgb-bg), 0.62) 28%,
      rgba(var(--rgb-bg), 0.22) 58%,
      rgba(var(--rgb-bg), 0.04) 82%,
      rgba(var(--rgb-bg), 0.35) 100%),
    linear-gradient(to right,
      rgba(var(--rgb-bg), 0.72) 0%,
      rgba(var(--rgb-bg), 0.32) 42%,
      rgba(var(--rgb-bg), 0) 75%);
}

.rd-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--masthead-h, 5.75rem) + 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.rd-crumb {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(var(--masthead-h, 5.75rem) + 0.85rem);
  font-size: var(--ms-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.rd-crumb a {
  position: relative;
  display: inline-block;
  color: var(--ci-paper);
  opacity: 0.78;
  text-decoration: none;
  transition: opacity var(--dur-sm) var(--ease-out);
}

.rd-crumb a::after {
  content: '';
  position: absolute;
  inset: -12px -8px;
}

.rd-crumb a:hover {
  opacity: 1;
}

.rd-crumb span {
  color: var(--ci-paper);
  opacity: 0.45;
}

.rd-hero__kicker-row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.85rem;
  background: rgba(var(--rgb-surface), 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--outline);
  margin-bottom: 0.85rem;
}

.rd-hero__tag {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.rd-hero__sep {
  color: var(--outline-strong);
  font-size: 0.75rem;
}

.rd-hero__index {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-bg-muted);
}

.rd-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ci-paper);
  text-shadow: 0 4px 30px rgba(var(--rgb-shadow), 0.85);
}

.rd-hero__th {
  margin: 0.4rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.8;
  color: var(--on-bg-muted);
}

.rd-hero__tagline {
  max-width: 55ch;
  margin: 1.25rem 0 0;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ci-paper);
  opacity: 0.9;
  text-shadow: 0 2px 16px rgba(var(--rgb-shadow), 0.8);
}

/* Glassmorphic Action Bar in Hero */
.rd-hero__action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2rem;
}

.rd-hero__price-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1.4rem;
  background: rgba(var(--rgb-surface), 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--rgb-muted), 0.22);
  box-shadow: 0 8px 32px rgba(var(--rgb-shadow), 0.5);
}

.rd-hero__price-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}

.rd-hero__price {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  color: var(--color-white);
  letter-spacing: 0.05em;
}

.rd-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 1.85rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--on-bg);
  border: 1px solid var(--on-bg);
  transition: background var(--dur-sm) var(--ease-out),
              color var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out),
              transform var(--dur-sm) var(--ease-out);
}

.rd-hero__cta:hover {
  background: var(--color-white);
  box-shadow: 0 0 24px rgba(var(--rgb-text), 0.4);
  transform: translateY(-1px);
}

.rd-hero__cta:active {
  transform: translateY(0);
}

.rd-attrib {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--on-bg-faint);
  max-width: 65ch;
}

.rd-attrib b {
  color: var(--on-bg-muted);
}

.rd-wm {
  position: absolute;
  z-index: 2;
  top: calc(var(--masthead-h, 5.75rem) + 0.85rem);
  right: clamp(1rem, 2.6vw, 2.25rem);
  height: clamp(22px, 4.5vh, 40px);
  aspect-ratio: 500 / 840;
  background: var(--ci-paper);
  opacity: 0.55;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(var(--rgb-shadow), 0.75));
  pointer-events: none;
}

/* --------------------------- In-Page Subnav --------------------------- */

.rd-subnav {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(var(--rgb-bg), 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--outline);
  transition: border-color var(--dur-sm) var(--ease-out);
}

.rd-subnav__shell {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.85rem;
}

.rd-subnav__shell::-webkit-scrollbar {
  display: none;
}

.rd-subnav__link {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-bg-muted);
  text-decoration: none;
  transition: color var(--dur-sm) var(--ease-out);
}

.rd-subnav__link:hover {
  color: var(--ci-paper);
}

/* ------------------------------ Sections ------------------------------ */

.rd-section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  position: relative;
}

.rd-section + .rd-section {
  border-top: 1px solid var(--outline);
}

.rd-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rd-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.35rem;
  color: var(--on-bg);
}

/* -------------------------- Overview & Facts -------------------------- */

/* Stat Highlights Ribbon */
.rd-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--lift-1);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .rd-stats-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rd-stat-card {
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  position: relative;
  transition: background var(--dur-sm) var(--ease-out);
}

.rd-stat-card + .rd-stat-card {
  border-left: 1px solid var(--outline);
}

@media (max-width: 767px) {
  .rd-stat-card:nth-child(2n + 1) {
    border-left: none;
  }
  .rd-stat-card:nth-child(n + 3) {
    border-top: 1px solid var(--outline);
  }
}

.rd-stat-card:hover {
  background: var(--surface-raised);
}

.rd-stat-card__val {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  font-weight: 500;
  color: var(--ci-paper);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.rd-stat-card__lbl {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}

/* Dossier Layout: Story + Architectural Specifications */
.rd-dossier {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 980px) {
  .rd-dossier {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.rd-dossier__narrative .rd-story__lead {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ci-paper);
  margin-bottom: 1.5rem;
}

.rd-dossier__narrative .rd-story__body {
  color: var(--on-bg-muted);
  max-width: 68ch;
}

.rd-dossier__narrative .rd-story__body p + p {
  margin-top: 1.25rem;
}

.rd-dossier__narrative .rd-story__note {
  font-size: 0.8125rem;
  color: var(--on-bg-muted);
  line-height: 1.75;
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  margin-top: 2rem !important;
  background: rgba(var(--rgb-surface-raised), 0.4);
  padding-block: 0.75rem;
}

/* Specification Card */
.rd-spec-card {
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--lift-1);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}

.rd-spec-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-accent), 0.6), transparent);
}

.rd-spec-card__head {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--outline);
}

.rd-spec-card__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.rd-spec-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 400;
  color: var(--on-bg);
}

.rd-spec-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.rd-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid rgba(var(--rgb-muted), 0.08);
}

.rd-spec-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rd-spec-row dt {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--on-bg-faint);
  flex-shrink: 0;
}

.rd-spec-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--on-bg);
  text-align: right;
  word-break: break-word;
}

/* -------------------------- Living Spaces (Units) -------------------------- */

.rd-head--split {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 768px) {
  .rd-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.rd-head__caption {
  margin: 0;
  max-width: 45ch;
  font-size: var(--ms-small);
  color: var(--on-bg-muted);
  line-height: 1.6;
}

.rd-units {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .rd-units {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1120px) {
  .rd-units {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rd-unit {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--lift-1);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out),
              transform var(--dur-md) var(--ease-out);
}

.rd-unit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-accent), 0.45), transparent);
}

.rd-unit:hover {
  border-color: rgba(var(--rgb-accent), 0.45);
  box-shadow: var(--lift-2), 0 10px 30px -10px rgba(var(--rgb-accent), 0.15);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .rd-unit:hover {
    transform: none;
  }
}

.rd-unit__top {
  margin-bottom: 1.25rem;
}

.rd-unit__kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.rd-unit__badge {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.rd-unit__status {
  font-size: 0.6875rem;
  color: var(--on-bg-faint);
}

.rd-unit__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ci-paper);
}

.rd-unit__metrics {
  background: rgba(var(--rgb-bg), 0.7);
  border: 1px solid var(--outline);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.rd-unit__area-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rd-unit__area-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}

.rd-unit__area-display {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.rd-unit__area-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ci-paper);
}

.rd-unit__area-unit {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
}

.rd-unit__area-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--on-bg-muted);
}

.rd-unit__land-box {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rd-unit__land-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-bg-faint);
}

.rd-unit__land-val {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--on-bg-muted);
}

.rd-unit__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.rd-unit__spec {
  background: rgba(var(--rgb-surface-raised), 0.55);
  border: 1px solid var(--outline);
  padding: 0.65rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  transition: background var(--dur-sm) var(--ease-out);
}

.rd-unit__spec:hover {
  background: var(--surface-raised);
}

.rd-unit__spec--full {
  grid-column: 1 / -1;
  padding-block: 0.85rem;
}

.rd-unit__spec-num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ci-paper);
}

.rd-unit__spec-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--on-bg-faint);
}

.rd-unit__footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--outline);
}

.rd-unit__enquire-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border: 1px solid var(--outline);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ci-paper);
  text-decoration: none;
  transition: all var(--dur-sm) var(--ease-out);
}

.rd-unit__enquire-btn:hover {
  background: rgba(var(--rgb-accent), 0.12);
  border-color: rgba(var(--rgb-accent), 0.6);
  color: var(--color-white);
}

.rd-unit__arrow {
  transition: transform var(--dur-sm) var(--ease-out);
}

.rd-unit__enquire-btn:hover .rd-unit__arrow {
  transform: translateX(4px);
}

/* ----------------------------- Gallery Grid ----------------------------- */

.rd-gallery-grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr;
}

@media (min-width: 580px) {
  .rd-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .rd-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Architectural feature rhythm: 1st photo anchors the layout with 2 spans */
  .rd-gallery-item--featured {
    grid-column: span 2;
    aspect-ratio: 21 / 10;
  }
}

.rd-gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--lift-1);
  aspect-ratio: 16 / 9;
  cursor: zoom-in;
  transition: border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}

.rd-gallery-item:hover {
  border-color: rgba(var(--rgb-accent), 0.45);
  box-shadow: var(--lift-2);
}

.rd-gallery-item picture,
.rd-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}

.rd-gallery-item:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .rd-gallery-item:hover img {
    transform: none;
  }
}

/* ----------------------- Amenities & Surroundings ----------------------- */

.rd-cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 920px) {
  .rd-cols {
    grid-template-columns: 1fr 1fr;
  }
}

.rd-subhead {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--on-bg);
}

.rd-list--facil {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.rd-list--facil li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--outline);
  font-size: var(--ms-small);
  color: var(--on-bg);
}

.rd-list--facil li::before {
  content: '';
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--accent);
  flex-shrink: 0;
}

.rd-list {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.rd-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--outline);
  font-size: var(--ms-small);
}

.rd-list li:first-child {
  border-top: 1px solid var(--outline);
}

.rd-list b {
  font-weight: 400;
  color: var(--on-bg);
}

.rd-list span {
  color: var(--on-bg-muted);
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--ms-caption);
  letter-spacing: 0.1em;
}

/* --------------------- VIP Viewing Invitation (CTA) --------------------- */

.rd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid rgba(var(--rgb-accent), 0.35);
  background:
    radial-gradient(80% 120% at 10% 0%, rgba(var(--rgb-accent), 0.08) 0%, rgba(var(--rgb-bg), 0) 70%),
    var(--surface);
  box-shadow: var(--lift-2);
}

.rd-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ci-paper);
}

.rd-cta p {
  margin-top: 0.65rem;
  color: var(--on-bg-muted);
  font-size: var(--ms-small);
  line-height: 1.65;
  max-width: 48ch;
}

.rd-cta__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: 1.85rem;
  font-family: var(--font-body);
  font-size: var(--ms-caption);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-sm) var(--ease-out),
              color var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out);
}

.rd-btn--solid {
  background: var(--on-bg);
  color: var(--bg);
  border: 1px solid var(--on-bg);
}

.rd-btn--solid:hover {
  background: var(--color-white);
  box-shadow: 0 0 20px rgba(var(--rgb-text), 0.35);
}

.rd-btn--ghost {
  background: transparent;
  color: var(--on-bg);
  border: 1px solid var(--outline-strong);
}

.rd-btn--ghost:hover {
  border-color: var(--accent);
  color: var(--color-white);
  background: rgba(var(--rgb-accent), 0.08);
}

/* ------------------------------- Lightbox ------------------------------- */

html.lb-open, html.lb-open body {
  overflow: hidden;
}

.lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--on-bg);
  overflow: hidden;
}

.lb::backdrop {
  background: var(--bg);
}

.lb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(3.5rem, env(safe-area-inset-top) + 3rem) 1rem
           max(4.5rem, env(safe-area-inset-bottom) + 3.5rem);
}

.lb__pic {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lb__nav, .lb__close {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--rgb-surface), 0.65);
  color: var(--on-bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease;
}

.lb__nav svg, .lb__close svg {
  width: 1.35rem;
  height: 1.35rem;
}

.lb__nav:hover, .lb__close:hover {
  background: rgba(var(--rgb-surface-raised), 0.95);
}

.lb__nav:focus-visible, .lb__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lb__nav--prev {
  left: max(0.75rem, env(safe-area-inset-left));
  top: 50%;
  margin-top: -1.5rem;
}

.lb__nav--next {
  right: max(0.75rem, env(safe-area-inset-right));
  top: 50%;
  margin-top: -1.5rem;
}

.lb__close {
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
}

.lb__nav[hidden] {
  display: none;
}

.lb__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  margin: 0;
  padding: 0 4.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  font: 400 0.8rem/1.45 "Inter", system-ui, sans-serif;
  pointer-events: none;
}

.lb__count {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--rgb-text), 0.55);
}

.lb__caption {
  color: rgba(var(--rgb-text), 0.88);
  max-width: 46rem;
  text-wrap: balance;
}

.lb__caption[hidden] {
  display: none;
}

@media (max-width: 33rem) {
  .lb__nav {
    top: auto;
    margin-top: 0;
    bottom: max(2.6rem, env(safe-area-inset-bottom) + 1.8rem);
  }
  .lb__bar {
    padding: 0 4.75rem;
    bottom: max(3.4rem, env(safe-area-inset-bottom) + 2.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb__nav, .lb__close {
    transition: none;
  }
}

/* ---------------------------------- FAQ ---------------------------------- */

.rd-faq__head {
  margin: 0 0 1.5rem;
  font-family: var(--font-display, inherit);
  font-size: var(--ms-h2);
  font-weight: 400;
  line-height: 1.6;
}

.rd-faq__list {
  border-top: 1px solid var(--outline);
}

.rd-faq__item {
  border-bottom: 1px solid var(--outline);
}

.rd-faq__item summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}

.rd-faq__item summary::-webkit-details-marker {
  display: none;
}

.rd-faq__item summary:focus-visible {
  outline: 2px solid var(--outline-strong);
  outline-offset: 3px;
}

.rd-faq__item summary h3 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;
  color: var(--on-bg);
}

.rd-faq__item summary::after {
  content: '+';
  flex: none;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--on-bg-muted);
  transition: transform 200ms ease;
}

.rd-faq__item[open] summary::after {
  content: '\2212';
}

.rd-faq__item p {
  margin: 0 0 1.3rem;
  padding-right: 2rem;
  line-height: 1.9;
  color: var(--on-bg-muted);
}

@media (prefers-reduced-motion: reduce) {
  .rd-faq__item summary::after {
    transition: none;
  }
}

/* ---------------------------- Related Projects ---------------------------- */

.rd-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.rd-more__grid .coll__card {
  min-height: 13rem;
}

@media (min-width: 64rem) {
  .rd-more__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------- Responsive ------------------------------- */

@media (max-width: 720px) {
  .rd-hero {
    min-height: 30rem;
    padding-top: calc(var(--masthead-h, 10.5rem) + 4rem);
  }
  .rd-crumb {
    top: calc(var(--masthead-h, 10.5rem) + 0.5rem);
  }
  .rd-hero__action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .rd-hero__cta {
    width: 100%;
  }
  .rd-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .rd-cta__actions {
    width: 100%;
  }
  .rd-btn {
    flex: 1 1 auto;
  }
}


/* ===== enquire.css ===== */
/* =========================================================================
   RESURE LUX — enquiry
   Loaded after main.css. A form page: no snap, no full-height sections.

   Fields are hairline-ruled rather than boxed, to stay in the same language as
   the search field in the bar. The one thing that is NOT quiet is an error —
   an error has to interrupt.
   ========================================================================= */

.eq-page { padding-top: calc(var(--masthead-h, 5.75rem) + clamp(1.5rem, 4vw, 3rem)); }

.eq-head { padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.eq-head h1 {
  margin-top: .5rem;
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
}
.eq-head p { margin-top: 1rem; max-width: 56ch; color: var(--on-bg-muted); font-size: var(--ms-small); }

/* --------------------------- the two columns --------------------------- */

.eq-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr;
  padding-bottom: clamp(3rem, 7vw, 6rem); }
@media (min-width: 940px) { .eq-layout { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* ------------------------------- fields ------------------------------- */

.eq-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .eq-grid { grid-template-columns: 1fr 1fr; } }
.eq-field--wide { grid-column: 1 / -1; }

.eq-field { display: flex; flex-direction: column; gap: .5rem; }
.eq-field label {
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-bg-muted);
}
/* "Optional" is marked, not "required" — most fields here are required, so
   marking the exception is the shorter and less anxious label. */
.eq-field label span {
  font-family: var(--font-body);
  letter-spacing: .04em; text-transform: none;
  color: var(--on-bg-faint);
}

.eq-input {
  width: 100%;
  min-height: 48px;
  padding: .6rem .25rem;
  background: none;
  border: 0; border-bottom: 1px solid var(--outline-strong);
  color: var(--on-bg);
  font-size: var(--ms-body);
  transition: border-color var(--dur-md) var(--ease-out);
}
textarea.eq-input { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }
.eq-input::placeholder { color: rgba(var(--rgb-muted), .55); }
.eq-input:hover { border-bottom-color: rgba(var(--rgb-muted), .5); }
.eq-input:focus { outline: none; border-bottom-color: var(--accent); }

/* the native select arrow is the one control that will not take the theme */
select.eq-input {
  appearance: none; -webkit-appearance: none;
  padding-right: 2rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--on-bg-muted) 50%),
    linear-gradient(135deg, var(--on-bg-muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.eq-input option { background: var(--surface); color: var(--on-bg); }

/* ------------------------------- errors ------------------------------- */

.eq-input[aria-invalid='true'] { border-bottom-color: var(--error-border); }
/* The rule under the field carries two things at once — validity by colour and
   focus by colour — and validity wins, because it is declared later at the same
   specificity. So a field that is invalid AND focused showed no focus at all:
   .eq-input:focus had already removed the global ring with outline:none, and its
   accent never landed. That is precisely the moment a keyboard user is hunting
   for the field to fix. Give the ring back when both states are true; the red
   rule stays, so the field still reads as wrong as well as focused. */
.eq-input[aria-invalid='true']:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.eq-error {
  display: none;
  font-size: var(--ms-caption);
  color: var(--error-text);
  letter-spacing: .02em;
}
.eq-error.is-on { display: block; }

/* The summary is what a screen reader lands on after a failed submit, so it
   carries the same wording as the inline messages — not a vague "check the
   form above". */
.eq-summary {
  display: none;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid rgba(var(--rgb-error), .45);
  background: rgba(var(--rgb-error), .07);
}
.eq-summary.is-on { display: block; }
.eq-summary h2 {
  font-size: var(--ms-body); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--font-display);
}
.eq-summary ul { margin-top: .75rem; display: grid; gap: .4rem; }
.eq-summary a {
  position: relative; display: inline-block;
  color: var(--error-text-soft); font-size: var(--ms-small);
}
/* Grown, not padded: 44px of target without pushing the list apart. */
.eq-summary a::after { content: ''; position: absolute; inset: -13px -8px; }

/* ------------------------------- consent ------------------------------- */

.eq-consent { display: flex; align-items: flex-start; gap: .85rem; }
.eq-consent input {
  flex: none;
  width: 24px; height: 24px; margin-top: 1px;   /* WCAG 2.2 target minimum */
  accent-color: var(--accent-fill);
  cursor: pointer;
}
.eq-consent label {
  font-family: var(--font-body);
  font-size: var(--ms-small); letter-spacing: 0; text-transform: none;
  color: var(--on-bg-muted); line-height: 1.6; cursor: pointer;
}
.eq-privacy {
  margin-top: .65rem;
  font-size: var(--ms-caption);
  color: var(--on-bg-faint);
  line-height: 1.5;
}
.eq-privacy a {
  color: var(--on-bg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.eq-privacy a:hover {
  color: var(--accent);
}

/* ------------------------------- actions ------------------------------- */

.eq-actions {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}
.eq-submit {
  min-height: 54px; padding-inline: 2.25rem;
  background: var(--accent-fill); color: var(--ci-paper);
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  transition: background var(--dur-sm) var(--ease-out);
}
.eq-submit:hover { background: var(--accent-fill-hi); box-shadow: var(--glow-accent); }
.eq-submit[disabled] { opacity: .55; cursor: not-allowed; }
.eq-note { font-size: var(--ms-caption); color: var(--on-bg-faint); max-width: 34ch; }

/* ------------------------------- success ------------------------------- */

.eq-done {
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--outline);
  background:
    radial-gradient(80% 160% at 12% 0%, rgba(var(--rgb-charcoal-light), .5) 0%, rgba(var(--rgb-bg), 0) 70%),
    var(--surface);
  box-shadow: var(--lift-2);
}
.eq-done h2 {
  font-size: clamp(1.35rem, 2.8vw, 2.25rem);
  font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
}
.eq-done p { margin-top: 1rem; max-width: 52ch; color: var(--on-bg-muted); font-size: var(--ms-small); }
.eq-done dl { margin-top: 1.75rem; display: grid; gap: 0; }
.eq-done dl > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: .75rem; border-bottom: 1px solid var(--outline);
  font-size: var(--ms-small);
}
.eq-done dl > div:first-child { border-top: 1px solid var(--outline); }
.eq-done dt { color: var(--on-bg-faint); font-family: var(--font-display);
  font-size: var(--ms-caption); letter-spacing: .16em; text-transform: uppercase; }
.eq-done dd { margin: 0; text-align: right; }

/* ------------------------------- the aside ------------------------------- */

.eq-aside { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.eq-card {
  border: 1px solid var(--outline);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  box-shadow: var(--lift-1);
  transition: border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}
.eq-card:hover { border-color: var(--outline-strong); box-shadow: var(--lift-2); }
.eq-card h2 {
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--on-bg-muted);
}
.eq-card p, .eq-card address {
  margin-top: .85rem; font-style: normal;
  font-size: var(--ms-small); color: var(--on-bg-muted); line-height: 1.7;
}
.eq-card a, .eq-note a {
  position: relative; display: inline-block;
  color: var(--on-bg); text-decoration: none;
  border-bottom: 1px solid var(--outline-strong);
}
.eq-card a::after, .eq-note a::after { content: ''; position: absolute; inset: -14px -8px; }
.eq-card a:hover, .eq-note a:hover { border-bottom-color: var(--accent); }

[hidden] { display: none !important; }


/* ===== not-found.css ===== */
/* Shared 404 components. */

  /* Absolute paths, not relative: this page is served for a URL at any depth,
     so ../ would resolve differently every time. */
  .nf {
    min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: clamp(1.5rem, 5vw, 4rem);
    gap: clamp(1rem, 2.4vw, 1.75rem);
  }
  .nf__mark { width: clamp(34px, 4vw, 52px); color: var(--ci-mist); }
  .nf h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  }
  .nf p { max-width: 46ch; color: var(--on-bg-muted); font-size: var(--ms-small); }
  .nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .75rem; }
  .nf__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 50px; padding-inline: 1.75rem;
    font-family: var(--font-display);
    font-size: var(--ms-caption); font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    text-decoration: none;
    transition: background var(--dur-sm) var(--ease-out),
                border-color var(--dur-sm) var(--ease-out);
  }
  .nf__btn--solid { background: var(--accent-fill); color: var(--ci-paper); }
  .nf__btn--solid:hover { background: var(--accent-fill-hi); }
  .nf__btn--ghost { border: 1px solid var(--outline-strong); color: var(--on-bg); }
  .nf__btn--ghost:hover { border-color: var(--accent); background: rgba(var(--rgb-accent), .14); }


/* ===== editorial-home.css ===== */
/* Homepage editorial system: architecture, readable facts, restrained surfaces. */
.editorial-home {
  --masthead-h:100px;
  scroll-padding-top:calc(var(--masthead-h) + 20px);
}
.editorial-home body { background:var(--bg); }
.editorial-home .bg-decor::before { display:none; }
.editorial-home .masthead { padding-block:var(--space-2-5); background:rgba(var(--rgb-bg),.96); border-bottom:1px solid var(--outline); }
.editorial-home .label { letter-spacing:.12em; text-transform:none; }
.editorial-home .film { height:auto; padding-top:var(--masthead-h); }
/* Match the two source cuts and the same viewport query used by main.js. */
.editorial-home .film .stage { height:auto; }
.editorial-home .film .stage__frame { height:auto; aspect-ratio:4/5; width:min(100%,max(160px,calc((100svh - var(--masthead-h) - 380px) * .8))); margin-inline:auto; }
.editorial-home .film__video { object-fit:contain; }
@media(min-aspect-ratio:6/5) {
  .editorial-home .film .stage__frame { aspect-ratio:16/9; width:min(100%,max(240px,calc((100svh - var(--masthead-h) - 420px) * 16 / 9))); }
}
@media(max-height:650px) {
  .editorial-home .film .stage__frame { width:min(100%,320px); }
  .editorial-home .film { display:flex; flex-direction:column; }
  .editorial-home .film__content { order:-1; }
  .editorial-home .film__content { padding-block:var(--space-5) var(--space-6); }
}
.editorial-home .film__veil { background:linear-gradient(transparent 70%,rgba(var(--rgb-bg),.3)); }
.editorial-home .film__content { position:relative; inset:auto; display:block; padding-block:var(--space-8) var(--space-10); }
.editorial-home .film__body { max-width:65ch; }
.editorial-home .film__sound-toggle { position:absolute; right:20px; bottom:20px; z-index:3; }
.editorial-home .film .scroll-cue { display:none; }
.editorial-home .film__title,.editorial-home .film__meta { text-transform:none; text-shadow:none; }
.editorial-home .film__title { max-width:18ch; font-size:clamp(2rem,4.8vw,4.5rem); line-height:1.35; letter-spacing:0; text-wrap:balance; }
.editorial-home.is-en .film__title { max-width:28ch; font-size:clamp(2rem,3.5vw,3.5rem); }
@media(min-width:1100px) and (min-aspect-ratio:6/5) {
  .editorial-home .film { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--space-10); align-items:center; min-height:100svh; padding-inline:var(--space-10); padding-bottom:var(--space-8); }
  .editorial-home .film .stage__frame { width:100%; }
  .editorial-home .film__content { padding-block:var(--space-6); }
  .editorial-home .film__content.shell { width:100%; margin:0; padding:0; }
  .editorial-home .film__title { font-size:clamp(2rem,3.2vw,3.5rem); }
}
.editorial-home .film__meta { max-width:42ch; letter-spacing:0; font-size:1rem; line-height:1.7; }
.editorial-entry { display:inline-flex; align-items:center; min-height:var(--control-size); margin-top:var(--space-4); padding:var(--space-2-5) var(--space-4); background:var(--on-bg); color:var(--bg); text-decoration:none; font-size:1rem; letter-spacing:0; }
.editorial-home .projects { height:auto; padding-block:var(--space-16); }
.editorial-home .projects__shell { height:auto; padding-top:0; }
.editorial-home .section-head h2 { font-size:clamp(1.8rem,3.5vw,3.5rem); line-height:1.4; letter-spacing:0; text-transform:none; }
.editorial-home .section-head > p { max-width:48ch; font-size:1rem; color:var(--on-bg-muted); }
.editorial-home .pf__viewport { flex:none; min-height:0; }
.editorial-home .pf__track, .editorial-home .pf__slide { height:auto; align-items:stretch; }
.editorial-home .pf__link { height:100%; aspect-ratio:auto; display:flex; flex-direction:column; box-shadow:none; }
.editorial-home .pf__link > picture { display:block; position:relative; aspect-ratio:2/1; overflow:hidden; }
.editorial-home .pf__img { position:relative; height:100%; transform:none; }
.editorial-home .pf__link:hover .pf__img { transform:scale(1.02); }
.editorial-home .pf__wm { display:none; }
.editorial-home .pf__caption { position:relative; inset:auto; max-width:none; padding:var(--space-7); display:grid; grid-template-columns:1fr 1fr; column-gap:var(--space-12); row-gap:var(--space-3); text-shadow:none; }
.editorial-home .pf__caption::before { display:none; }
.editorial-home .pf__index { grid-column:1/-1; color:var(--accent); letter-spacing:.08em; text-transform:none; }
.editorial-home .pf__name { grid-row:2/5; font-size:clamp(1.5rem,2.8vw,2.6rem); line-height:1.4; letter-spacing:0; text-transform:none; text-shadow:none; }
.pf__name-secondary,.coll__name-secondary { display:block; font-family:var(--font-body); font-size:.875rem; line-height:1.6; margin-top:var(--space-1-5); color:var(--on-bg-muted); }
.editorial-home .pf__tagline { max-width:60ch; font-size:1rem; line-height:1.8; color:var(--on-bg-muted); opacity:1; text-shadow:none; }
.editorial-home .pf__facts { text-shadow:none; gap:var(--space-3); font-size:1rem; }
.editorial-date { font-size:.8rem; color:var(--on-bg-muted); }
.editorial-detail { color:var(--accent); font-size:.95rem; }
.editorial-home .pf__bar { position:relative; inset:auto; margin-top:var(--space-5); width:100%; }
.editorial-home .pf__thumbs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; gap:var(--space-3); }
.editorial-home .pf__thumb { width:auto; }
.editorial-home .pf__thumb-label { font-family:var(--font-body); font-size:.8rem; letter-spacing:0; text-transform:none; text-shadow:none; }
.editorial-home .pf__thumb-label span:last-child { position:static; width:auto; height:auto; margin:0; clip-path:none; overflow:visible; white-space:normal; }
.editorial-home .coll { padding-top:var(--space-10); }
html.editorial-home .coll__th { display:block !important; margin:var(--space-4) 0 var(--space-7); padding:0; border:0; background:none; }
.editorial-home .coll__th-note { font-size:.875rem; line-height:1.8; color:var(--on-bg-muted); max-width:85ch; }
.editorial-browse { display:inline-flex; align-items:center; min-height:var(--control-size); color:var(--accent); text-underline-offset:5px; }
.editorial-home .coll__name { font-size:clamp(1.125rem,1.8vw,1.6rem); line-height:1.5; letter-spacing:0; }
.editorial-home .coll__card--big .coll__name { font-size:clamp(1.25rem,2.2vw,1.8rem); }
.editorial-home .coll__facts { gap:var(--space-2) var(--space-5); margin-top:var(--space-3-5); align-items:baseline; font-size:.875rem; }
.editorial-home .coll__price { font-size:1rem; font-variant-numeric:tabular-nums; }
.editorial-home .coll__reel-bar { background:var(--accent); box-shadow:none; }
.editorial-home .coll__card--reel.is-playing { border-color:var(--accent); box-shadow:none; }
.editorial-home .ac { background:var(--surface-raised); }
.editorial-home .ac__opt.is-active { background:rgba(var(--rgb-accent),.12); }
.editorial-currency { display:none; }
@media(max-width:900px) {
  .editorial-home { --masthead-h:112px; }
  .editorial-home .masthead { padding-block:var(--space-1-5); }
  .editorial-home .masthead__shell { row-gap:0; }
  .editorial-home .nav ul { flex-wrap:nowrap; justify-content:space-between; gap:var(--space-1-5); }
  .editorial-home .nav ul > li:first-child { display:none; }
  .editorial-home .nav a { font-size:.8rem; letter-spacing:0; min-height:var(--control-size); }
  .editorial-home .cur-switch { display:none; }
  .editorial-currency { display:block; min-height:var(--control-size); width:64px; background:var(--surface); border:1px solid var(--outline); padding:var(--space-1); font-size:.75rem; }
  .editorial-home .lang-switch { min-height:var(--control-size); padding:0 var(--space-1); }
  .editorial-home .projects { padding-block:var(--space-10); }
  .editorial-home .pf__caption { padding:var(--space-5); column-gap:var(--space-6); }
  .editorial-home .pf__thumbs { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .editorial-home .film__title { font-size:2rem; max-width:17ch; }
  .editorial-home .film__meta { font-size:.875rem; max-width:29ch; }
  .editorial-home .pf__link > picture { aspect-ratio:4/3; }
  .editorial-home .pf__caption { display:flex; padding:var(--space-5) var(--space-4); gap:var(--space-3); }
  .editorial-home .pf__name { font-size:1.5rem; }
  .editorial-home .pf__thumb-label { font-size:.75rem; }
  .editorial-home .section-head { gap:var(--space-4); }
  .editorial-home .coll__body { padding:var(--space-4); }
  .editorial-home .coll__media,.editorial-home .coll__card--big .coll__media { min-height:0; flex:none; aspect-ratio:4/3; }
}
@media(prefers-reduced-motion:reduce) {
  .editorial-home .pf__img,.editorial-home .pf__track { transition:none !important; }
  .editorial-home .pf__link:hover .pf__img,.editorial-home .pf__link:focus-visible .pf__img { transform:none !important; }
}


/* ===== review-refinement.css ===== */
/* Shared catalogue refinements; preserve media and existing interactions. */
/* All pages inherit their colour roles from main.css :root. */
.catalog-refined .bg-decor::before { display:none; }
.catalog-refined .masthead { background:rgba(var(--rgb-bg),.97); }
.catalog-refined .nav a.lang-switch__btn,
.catalog-refined .lang-switch__btn,
.catalog-refined .cur-switch__btn {
  min-height:var(--control-size) !important; height:auto; min-width:var(--control-size);
}
.catalog-refined .lang-switch, .catalog-refined .cur-switch { min-height:var(--control-size); }
.coll__location { display:block; margin:var(--space-2-5) 0 var(--space-1-5); color:var(--on-bg-muted); font-size:.9375rem; line-height:1.6; }
.catalog-refined .rd-hero { display:block; min-height:0; padding-top:calc(var(--masthead-h,100px) + var(--space-15)); }
.catalog-refined .rd-hero > picture { display:block; }
.catalog-refined .rd-hero__img { position:static; display:block; width:100%; height:auto; object-fit:contain; }
.catalog-refined .rd-hero__scrim { display:none; }
.catalog-refined .rd-hero__body { padding:var(--space-6) 0 var(--space-10); }
.catalog-refined .rd-hero h1 { text-shadow:none; text-transform:none; line-height:1.4; letter-spacing:0; }
.catalog-refined .rd-hero__tagline { max-width:65ch; }
.catalog-refined .rd-hero__kicker-row { background:var(--surface); }
.catalog-refined .rd-hero__tag { color:var(--accent); }
.catalog-refined .sr-card__name { text-transform:none; line-height:1.5; letter-spacing:0; }
.catalog-refined .sr-card__price { font-size:1rem; }
.catalog-refined .sr-hero__title { text-shadow:none; }
.catalog-refined :focus-visible { outline:var(--focus-width) solid var(--accent); outline-offset:var(--focus-offset); }
.catalog-refined h1, .catalog-refined h2, .catalog-refined h3,
.catalog-refined .rd-hero__th, .catalog-refined .coll__name,
.catalog-refined .sr-card__name { overflow-wrap:anywhere; }
.catalog-refined .rd-subnav__link { min-height:var(--control-size); display:inline-flex; align-items:center; }


/* ===== brand.css ===== */
/* Internal brand specimen; selectors scoped to this page. */

  html.brand-specimen {--line:var(--outline);--mist:var(--on-bg-muted);--paper:var(--on-bg);--plum:var(--ci-plum);--violet:var(--accent);--faint:rgba(var(--rgb-muted),.66);--display:var(--font-display);--body:var(--font-body);}
  html.brand-specimen *, html.brand-specimen *::before, html.brand-specimen *::after {box-sizing:border-box}
  html.brand-specimen body {margin:0;background:var(--bg);color:var(--paper);font:300 16px/1.7 var(--body);
       -webkit-font-smoothing:antialiased}
  html.brand-specimen .shell {max-width:1080px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem)}
  html.brand-specimen h1 {font:400 clamp(1.75rem,4vw,3rem)/1.1 var(--display);letter-spacing:.1em;text-transform:uppercase;margin:0}
  html.brand-specimen h2 {font:400 clamp(1.1rem,2.2vw,1.6rem)/1.2 var(--display);letter-spacing:.12em;
     text-transform:uppercase;margin:0 0 .35rem}
  html.brand-specimen .eyebrow {font:500 .75rem/1 var(--display);letter-spacing:.44em;text-transform:uppercase;
           color:var(--mist);margin:0 0 .9rem}
  html.brand-specimen section {padding-block:clamp(2rem,5vw,3.5rem);border-top:1px solid var(--line)}
  html.brand-specimen section>p {max-width:64ch;color:var(--faint);font-size:.9375rem;margin:.25rem 0 1.75rem}
  html.brand-specimen .grid {display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  html.brand-specimen .panel {background:var(--surface);border:1px solid var(--line);padding:1.5rem;
         display:flex;flex-direction:column;gap:1rem}
  html.brand-specimen .panel--light {background:var(--paper);color:var(--plum)}
  html.brand-specimen .panel--plum {background:var(--plum)}
  html.brand-specimen .cap {font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  html.brand-specimen .panel--light .cap {color:var(--accent-fill)}
  html.brand-specimen .stage {display:grid;place-items:center;min-height:110px}
  html.brand-specimen svg {display:block;overflow:visible}
  html.brand-specimen .logo {color:var(--mist)}
  html.brand-specimen .panel--light .logo {color:var(--plum)}
  html.brand-specimen table {width:100%;border-collapse:collapse;font-size:.875rem}
  html.brand-specimen th, html.brand-specimen td {text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
  html.brand-specimen th {font:500 .75rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
  html.brand-specimen td code {font:400 .8125rem ui-monospace,monospace;color:var(--paper)}
  html.brand-specimen .swatch {display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:.5rem;
          border:1px solid var(--line)}
  html.brand-specimen .rule-note {color:var(--faint);font-size:.875rem}
  html.brand-specimen .dont .panel {border-color:rgba(var(--rgb-error-strong),.35)}
  html.brand-specimen .badge {display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;letter-spacing:.14em;
         text-transform:uppercase}
  html.brand-specimen .badge svg {width:13px;height:13px}
  html.brand-specimen .no {color:var(--error-text)}html.brand-specimen .yes {color:var(--success-text)}
  html.brand-specimen .photo {position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line)}
  html.brand-specimen .photo img {width:100%;height:100%;object-fit:cover;display:block}
  html.brand-specimen .photo .wm {position:absolute;top:14px;right:14px;height:34px;aspect-ratio:500/840;
             background:var(--paper);opacity:.58;
             -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
             filter:drop-shadow(0 1px 3px rgba(var(--rgb-shadow),.75))}
  html.brand-specimen .clearbox {position:relative;display:inline-block;padding:23px;outline:1px dashed rgba(var(--rgb-muted),.4)}
  html.brand-specimen .clearbox::before {content:"";position:absolute;inset:23px;outline:1px solid rgba(var(--rgb-accent),.5)}
  html.brand-specimen footer {border-top:1px solid var(--line);padding-block:2rem;color:var(--faint);font-size:.8125rem;
         letter-spacing:.14em;text-transform:uppercase}

html.brand-specimen .stage { width:auto; margin-inline:0; }


/* ===== airea-editorial.css ===== */
/* Shared architecture-led editorial layout; palette comes from tokens.css. */

.catalog-refined body { background:var(--bg); color:var(--on-bg); font-weight:400; }
.catalog-refined button,.catalog-refined .nav a { font-weight:500; }
.editorial-home .film__video { opacity:1; filter:none; }
.editorial-home .stage__frame::before,.editorial-home .stage__frame::after { display:none; }
.editorial-home .pf__thumb-img img { filter:none; }
.catalog-refined .page::before,.catalog-refined .page::after,
.catalog-refined .bg-decor,.catalog-refined .masthead::after { display:none; }
.catalog-refined .masthead { background:rgba(var(--rgb-surface),.97); border-bottom:1px solid var(--outline); box-shadow:none; }
.catalog-refined .wordmark { color:var(--accent); }
.catalog-refined .nav a { color:var(--on-bg-muted); font-family:var(--font-body); letter-spacing:0; text-transform:none; }
.catalog-refined .nav a:hover,.catalog-refined .nav a.is-active { color:var(--accent); }
.catalog-refined .lang-switch,.catalog-refined .cur-switch { background:var(--bg); border-color:var(--outline); box-shadow:none; }
.catalog-refined .lang-switch__btn,.catalog-refined .cur-switch__btn { color:var(--on-bg-muted) !important; }
.catalog-refined .lang-switch__btn.is-active,.catalog-refined .cur-switch__btn.is-active { background:var(--accent-fill); color:var(--color-white) !important; border-color:var(--accent); box-shadow:none; }
.catalog-refined .search { background:var(--surface-raised); border:1px solid var(--outline); border-radius:var(--radius-control); padding-inline:12px; }
.catalog-refined input::placeholder,.catalog-refined textarea::placeholder { color:var(--on-bg-muted); opacity:1; }
.catalog-refined .ac { background:var(--surface); border-color:var(--outline); border-radius:var(--radius-card); box-shadow:var(--lift-2); }
.catalog-refined .label,.catalog-refined .pf__index { font-family:var(--font-body); font-size:.75rem; font-weight:600; color:var(--accent); letter-spacing:.08em; }
.catalog-refined .foot { position:relative; background:var(--surface); border-top:1px solid var(--outline); color:var(--on-bg-muted); margin-top:64px; }
.editorial-home .film { min-height:0; padding-bottom:64px; }
.editorial-home .film .stage__frame { border-radius:var(--radius-card); overflow:hidden; background:var(--surface-raised); box-shadow:none; }
.editorial-home .film__content { padding-block:32px; }
.editorial-home .film__title { color:var(--on-bg); font-weight:500; }
.editorial-home .film__kicker { color:var(--accent); }
.editorial-home .film__meta { color:var(--on-bg-muted); }
.editorial-home .film__veil { display:none; }
.editorial-home .film__sound-toggle { background:rgba(var(--rgb-surface),.94); color:var(--on-bg); border:1px solid var(--outline); border-radius:var(--radius-control); }
.editorial-entry,.editorial-browse { border-radius:var(--radius-control); min-height:48px; font-family:var(--font-body); font-weight:600; }
.editorial-entry { background:var(--accent-fill); color:var(--color-white); padding:14px 22px; }
.editorial-entry:hover { background:var(--accent-fill-hi); }
.editorial-home .projects { padding-block:64px; }
.editorial-home .pf__link { background:var(--surface); border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--outline); }
.editorial-home .pf__link > picture { aspect-ratio:16/9; }
.editorial-home .pf__caption { padding:32px; gap:24px 40px; }
.editorial-home .pf__thumb { border-radius:var(--radius-control); overflow:hidden; }
.editorial-home .pf__thumb-label { background:var(--surface); color:var(--on-bg); text-shadow:none; padding:8px; }
.catalog-refined .coll__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 28px; align-items:start; }
.catalog-refined .coll__card { background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius-card); overflow:hidden; box-shadow:none; }
.catalog-refined .coll__card:hover { box-shadow:var(--lift-2); border-color:var(--outline-strong); }
.catalog-refined .coll__card--big,.catalog-refined .coll__card--wide { grid-column:auto; grid-row:auto; }
.editorial-home .coll__card:first-child { grid-column:span 2; }
.catalog-refined .coll__media,.catalog-refined .coll__card--big .coll__media { aspect-ratio:4/3; min-height:0; flex:none; }
.editorial-home .coll__card:first-child .coll__media { aspect-ratio:16/9; }
.catalog-refined .coll__body { padding:24px; }
.catalog-refined .coll__name { color:var(--on-bg); font-size:1.25rem; line-height:1.5; }
.catalog-refined .coll__price,.catalog-refined .pf__price { color:var(--accent); font-weight:700; }
.catalog-refined .coll__name-secondary { color:var(--on-bg-muted); font-size:.8rem; }
.catalog-refined .sr-hero { padding-bottom:40px; }
.catalog-refined .sr-hero__title { font-size:clamp(2.5rem,5vw,4.5rem); color:var(--on-bg); }
.catalog-refined .sr-hero__title em { color:var(--on-bg); font-style:normal; }
.catalog-refined .sr-hero__search { border-radius:var(--radius-control); box-shadow:none; background:var(--surface); }
.catalog-refined .sr-search,.catalog-refined .sr-sort { background:var(--surface); border-color:var(--outline); border-radius:var(--radius-control); box-shadow:none; }
.catalog-refined .sr-chip { background:var(--surface); border-color:var(--outline); border-radius:var(--radius-control); min-height:44px; color:var(--on-bg-muted); }
.catalog-refined .sr-chip.is-active { background:var(--surface-raised); color:var(--accent); border-color:var(--accent); box-shadow:none; }
.catalog-refined .sr-card { background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius-card); overflow:hidden; box-shadow:none; }
.catalog-refined .sr-card:hover { box-shadow:var(--lift-2); }
.catalog-refined .sr-card__media { aspect-ratio:4/3; }
.catalog-refined .sr-card__media::after,.catalog-refined .sr-card__media::before { display:none; }
.catalog-refined .sr-card__media img { opacity:1; filter:none; }
.catalog-refined .sr-card__body { padding:24px; }
.catalog-refined .sr-card__price { color:var(--accent); font-weight:700; }
.catalog-refined .sr-card__dev-badge,.catalog-refined .sr-card__loc-tag { background:rgba(var(--rgb-surface),.94); color:var(--on-bg); border-color:var(--outline); backdrop-filter:none; }
.catalog-refined .rd-hero { padding-inline:var(--gutter); max-width:var(--shell); margin-inline:auto; }
.catalog-refined .rd-hero > picture { border-radius:24px; overflow:hidden; }
.catalog-refined .rd-hero__img { width:100%; max-height:75svh; object-fit:contain; background:var(--surface-raised); }
.catalog-refined .rd-hero__body > .shell { width:100%; padding:0; }
.catalog-refined .rd-hero__body { padding-block:40px; }
.catalog-refined .rd-hero__tagline,.catalog-refined .rd-hero__th { text-shadow:none; }
.catalog-refined .rd-hero__cta,.catalog-refined .eq-submit { font-family:var(--font-body); font-weight:600; letter-spacing:0; text-transform:none; }
.catalog-refined .rd-hero__kicker-row { background:var(--surface-raised); border:0; border-radius:var(--radius-control); }
.catalog-refined .rd-hero__price-card { background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius-control); box-shadow:none; }
.catalog-refined .rd-hero__price { color:var(--accent); }
.catalog-refined .rd-hero__cta,.catalog-refined .rd-enquire__btn,.catalog-refined .eq-submit,.catalog-refined .nf__btn--solid { background:var(--accent-fill); color:var(--color-white); border-color:var(--accent); border-radius:var(--radius-control); box-shadow:none; }
.catalog-refined .rd-subnav { background:var(--surface); border-block:1px solid var(--outline); }
.catalog-refined .rd-head h2 { color:var(--on-bg); text-transform:none; letter-spacing:0; }
.catalog-refined .rd-stat-card,.catalog-refined .rd-house-card,.catalog-refined .rd-unit,.catalog-refined .rd-enquire { background:var(--surface); border-color:var(--outline); border-radius:var(--radius-card); box-shadow:var(--lift-1); }
.catalog-refined .rd-enquire { background:var(--surface-raised); }
.catalog-refined .rd-gallery__item { border-radius:var(--radius-control); overflow:hidden; }
.catalog-refined .eq-head { max-width:800px; padding-block:32px 48px; }
.catalog-refined .eq-head h1 { color:var(--on-bg); text-transform:none; letter-spacing:0; }
.catalog-refined .eq-form { background:var(--surface); border:1px solid var(--outline); border-radius:24px; padding:32px; box-shadow:var(--lift-1); }
.catalog-refined form#eqForm { background:var(--surface); border:1px solid var(--outline); border-radius:24px; padding:32px; box-shadow:var(--lift-1); }
.catalog-refined .eq-card { background:var(--surface); border-radius:var(--radius-card); border-color:var(--outline); box-shadow:none; }
.catalog-refined .eq-input { background:var(--bg); border:1px solid var(--outline); border-radius:var(--radius-control); padding:12px 16px; min-height:48px; }
.catalog-refined .eq-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--rgb-accent),.10); }
.catalog-refined .eq-done { background:var(--surface-raised); border-radius:var(--radius-card); }
.catalog-refined .sr-control-panel { background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius-card); padding:24px; margin-bottom:32px; }
.catalog-refined .sr-sort-select { background:var(--surface); color:var(--on-bg); border:1px solid var(--outline); border-radius:var(--radius-control); }
.catalog-refined .sr-concierge-banner { background:var(--surface-raised); border:1px solid var(--outline); border-radius:var(--radius-card); }
.catalog-refined .rd-unit__metrics,.catalog-refined .rd-dossier__spec { background:var(--surface-raised); border-radius:var(--radius-control); }
.catalog-refined .rd-enquire__button,.catalog-refined .rd-enquire__primary { background:var(--accent-fill); color:var(--color-white); border-color:var(--accent); }
.catalog-refined .pf__thumb-label span,.catalog-refined .pf__thumb-label { opacity:1; }
.catalog-refined .sr-hero__title,.catalog-refined .eq-head h1 { font-weight:500; }
.catalog-refined .sr-card__wm { color:var(--color-white); }
.catalog-refined .rd-gallery { gap:20px; }
@media(min-width:1200px) {
  .catalog-refined .sr-page > .shell { display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; align-items:start; }
  .catalog-refined .sr-hero { grid-column:1/-1; padding-bottom:0; }
  .catalog-refined .sr-control-panel { grid-column:1; margin:0; position:sticky; top:calc(var(--masthead-h) + 24px); }
  .catalog-refined .sr-filter-group { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
  .catalog-refined .sr-filter-chips { gap:8px; }
  .catalog-refined .sr-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:16px; }
  .catalog-refined .sr-results { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
  .catalog-refined .sr-empty,.catalog-refined .sr-recs { grid-column:2; }
  .catalog-refined .sr-concierge-banner { grid-column:1/-1; }
  .catalog-refined .eq-layout { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; }
  .catalog-refined .eq-aside { align-content:start; position:sticky; top:calc(var(--masthead-h) + 24px); }
}
.catalog-refined .nf { background:var(--bg); }
@media(min-width:1100px) and (min-aspect-ratio:6/5) {
  .editorial-home .film { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; align-items:center; padding-top:calc(var(--masthead-h) + 32px); }
  .editorial-home .film .stage__frame { aspect-ratio:16/9; }
}
@media(max-width:900px) {
  html.catalog-refined { --masthead-h:112px; }
  .catalog-refined .masthead { padding-block:6px; }
  .catalog-refined .masthead__shell { row-gap:0; }
  .catalog-refined .nav ul { flex-wrap:nowrap; justify-content:space-between; gap:6px; }
  .catalog-refined .nav ul > li:first-child { display:none; }
  .catalog-refined .cur-switch { display:none; }
  .catalog-refined .editorial-currency { display:block; width:64px; min-height:44px; border:1px solid var(--outline); border-radius:var(--radius-control); background:var(--surface-raised); color:var(--accent); padding:4px; font-size:.75rem; }
  .catalog-refined .lang-switch { min-height:44px; padding:0 4px; }
  .catalog-refined .coll__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .catalog-refined .rd-hero { padding-top:calc(var(--masthead-h) + 56px); }
}
@media(max-width:600px) {
  .catalog-refined .sr-concierge-actions { display:flex; flex-direction:column; align-items:stretch; min-width:0; }
  .catalog-refined .sr-concierge-actions a { width:100%; min-width:0; white-space:normal; text-align:center; }
  .catalog-refined .coll__grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .editorial-home .coll__card:first-child { grid-column:auto; }
  .editorial-home .coll__card:first-child .coll__media { aspect-ratio:4/3; }
  .catalog-refined .coll__body,.catalog-refined .sr-card__body { padding:20px; }
  .editorial-home .pf__caption { padding:20px; }
  .catalog-refined .eq-form,.catalog-refined form#eqForm { padding:20px; }
  .catalog-refined .rd-hero__body { padding-block:24px; }
  .catalog-refined .foot { margin-top:40px; }
}

/* Full-screen opening film; the introduction follows below the first viewport. */
.editorial-home .film {
  display:block; height:auto; min-height:0; padding:0; margin:0;
}
.editorial-home .film .stage {
  display:block; width:100%; height:100svh; margin:0;
}
.editorial-home .film .stage__frame {
  width:100%; height:100%; min-height:0; aspect-ratio:auto;
  margin:0; border:0; border-radius:0; box-shadow:none;
}
.editorial-home .film__video {
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.editorial-home .film__content.shell {
  position:relative; inset:auto; order:0; display:block;
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding:var(--space-12) var(--gutter); pointer-events:auto;
}
.editorial-home .film__sound-toggle {
  right:var(--space-6); bottom:var(--space-6);
}