/* 27 NORTH — design system
   Influenced by rosagroup.es (see design/REFERENCE-SPEC.md), re-cast on a white, airy palette.
   Everything scales in vw on desktop, exactly like the reference. One breakpoint: 1100px portrait. */

:root {
  /* Howard Hanna family: taupe, brown, gold, beige, white, olive. No blue anywhere. */
  --bg: #ffffff;
  --paper: #f5f1ea;          /* warm off-white for alternating sections */
  --cream: #efe8df;
  --ink: #2b2622;            /* warm near-black brown */
  --ink-2: #5a5047;
  --hint: #9a8f85;
  --line: rgba(43,38,34,.12);
  --bronze: #bd894c;         /* accent: matte gold (La Belle Vie rebrand 2026-11-05; built from the Howard Hanna gold, lighter and less mustard) */
  --gold: #bd894c;
  --gold-hi: #d4a468;        /* soft depth: a touch lighter */
  --gold-lo: #a8763f;        /* a touch deeper */
  --gold-depth: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 48%, var(--gold-lo) 100%);
  --sage: #d6dbcf;           /* pale olive */
  --sky: #d8cec2;            /* taupe (replaces the old blue) */
  --sand: #e7dcc8;
  --blush: #e6d9c0;          /* pale gold */
  --stone: #dcd6cc;
  --oak: #d9c3a3;
  --olive: #111111;          /* loader — black (no green anywhere, sellers' rule 2026-11-05) */
  --olive-dark: #111111;     /* footer — black */

  --font-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;  /* headline face: Cormorant Garamond, the font on MariePaceRealtor.com (client match, 2026-11-04) */
  --font-sans:"Outfit",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;  /* body face (user choice 2026-11-03) */

  --expoOut: cubic-bezier(.16, 1, .3, 1);
  --expoInOut: cubic-bezier(.87, 0, .13, 1);
  --vh: 1vh;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: .8333vw; font-weight: 300; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html { overflow-x: clip; }
body { margin: 0; min-height: 100%; line-height: 1; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- layout ---------- */
.container { position: relative; width: 80vw; margin: auto; }
.container.--medium { width: 90vw; }
.container.--wide { width: 100%; }
.component { position: relative; padding: 5vw 0; }
.component.--fullheight { height: calc(var(--vh) * 100); min-height: calc(var(--vh) * 100); padding: 0; }
.component.--paper { background: var(--paper); }

/* ---------- type ---------- */
.title { font-family: var(--font-serif); font-weight: 600; font-size: 3.9vw; line-height: 1.02; color: inherit; letter-spacing: -.025em; font-kerning: normal; }
.title.--large { font-size: 8.75vw; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.title.--display { font-size: 9.9vw; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.title.--medium { font-size: 7.91vw; line-height: .94; text-transform: uppercase; letter-spacing: -.035em; }
.title.--small { font-size: 4.416vw; line-height: .98; }
.title em, .title i { font-style: normal; color: var(--bronze); }
.title em .char, .title em.word, .title i .char { background: var(--gold-depth); -webkit-background-clip: text; background-clip: text; color: transparent; }   /* gold with depth, letter by letter */
.title em .char, .title i .char { padding: .14em .03em .26em; margin: -.14em -.03em -.26em; }   /* the clipped-to-text background only paints inside the box: pad it so descenders (g, y) are not cut off */
.subtitle { font-family: var(--font-sans); font-size: 1.66vw; font-weight: 300; line-height: 1.25; }
.wysiwyg { font-size: .98vw; line-height: 1.55; font-weight: 300; color: var(--ink-2); }
.wysiwyg p + p { margin-top: 1.2em; }
.wysiwyg.--indent .word:first-child, .wysiwyg.--indent > p:first-child { text-indent: 10vw; }
.wysiwyg.--small { font-size: .78vw; }
.label { display: inline-block; font-size: .75vw; font-weight: 500; letter-spacing: .14em; line-height: 1.88; text-transform: uppercase; color: var(--ink); }
.label.--main { color: var(--bronze); background: var(--gold-depth); -webkit-background-clip: text; background-clip: text; color: transparent; }
.link { display: inline-block; font-size: .875vw; font-weight: 500; letter-spacing: .1em; line-height: 1.88; text-transform: uppercase; position: relative; }
.link.--underline { border-bottom: 1px solid currentColor; line-height: 1.4; }
.link.--underline::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--expoOut); }
.link.--underline:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6em; height: 3vw; padding: 0 1.8vw; border-radius: 3vw; background: var(--ink); color: #fff; font-size: .9375vw; font-weight: 500; letter-spacing: .04em; transition: transform .6s var(--expoOut), background-color .4s var(--expoOut), color .4s var(--expoOut); }
@media (hover: hover) { .button:hover { transform: scale(1.06); background: var(--gold-depth); color: #fff; } #bar .button.--contact:hover, .form.--inquiry .button:hover { background: var(--ink); } }   /* gold buttons go black on hover */   /* no sticky copper state after a tap on phones */
.button.--bordered { background: transparent; color: inherit; border: 1px solid currentColor; }
.button.--bordered:hover { background: var(--ink); color: #fff; border-color: transparent; }
.button svg { width: 1em; height: 1em; }

/* split-text helpers */
.split .line { display: block; overflow: visible; }
.split .word { display: inline-block; white-space: nowrap; }
.split .char { display: inline-block; will-change: transform, opacity; }
.split .whitespace { display: inline; white-space: normal; }
.split .word, .split .whitespace, .split .char { text-indent: 0; }
[data-reveal] .char, .title.--display .char { opacity: 0.0001; }
.js .wysiwyg[data-words] .word { opacity: .12; }
.js .label[data-reveal], .js [data-fade] { opacity: 0.0001; }

/* ---------- images ---------- */
.image { position: relative; display: block; overflow: hidden; background: var(--stone); width: 100%; }
.image::before { content: ""; display: block; padding-bottom: var(--ratio, 66.7%); }
.image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image.--cover { position: absolute; inset: 0; height: 100%; }
.image.--cover::before { display: none; }
.image .overlay { position: absolute; inset: 0; background: #000; opacity: .18; pointer-events: none; }
.image .gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.55) 100%); }
.image.--zoom img { transform: scale(1.08); transition: transform 1.4s var(--expoOut); }
.image.--zoom:hover img { transform: scale(1); }

/* ---------- loader: olive screen; grey logo, white fills up, grey fills up over it, repeat 1.5x, fade out ---------- */
#veil { position: fixed; inset: 0; z-index: 260; background: var(--bg); opacity: 0; pointer-events: none; }
html.soft #loader { background: #fff; }
html.soft #loader .logo { display: none; }
#loader { position: fixed; inset: 0; z-index: 300; display: block; background: var(--olive); }
/* pinned to the small viewport height (svh), so the logo does not move when the phone's browser bar collapses on load */
#loader .logo { position: absolute; left: calc(50% - 12vw); top: calc(50svh - 2.01vw); width: 24vw; aspect-ratio: 1241 / 208; will-change: transform, opacity; }   /* fixed box: centred before the image arrives */
#loader .logo img { width: 100%; height: auto; }
#loader .logo img.fill, #loader .logo img.fill2 { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); will-change: clip-path; }   /* wipes left to right: one continuous pass across the wordmark */

/* ---------- header: full header at the top of the page, slim sticky bar once you scroll ---------- */
#header { position: absolute; top: 0; left: 0; width: 100%; height: 6vw; z-index: 80; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); }
#header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
#header nav .menu { display: flex; gap: 2.2vw; width: 36vw; }
#header nav:last-child .menu { justify-content: flex-end; }
#header nav a { font-size: .8vw; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; position: relative; }
#header nav a::after { content: ""; position: absolute; left: 0; bottom: -.5vw; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--expoOut); }
#header nav a:hover::after, #header nav a[aria-current]::after { transform: scaleX(1); transform-origin: 0 50%; }
#header .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 17vw; }
#header .logo img { width: 100%; height: auto; }
#bar { position: fixed; top: 0; left: 0; width: 100%; height: 4.6vw; z-index: 90; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); transform: translateY(-101%); transition: transform .6s var(--expoOut); }
#bar.--on { transform: translateY(0); }
#bar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
#bar .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 14.5vw; }   /* wordmark fills more of the 4.6vw bar */
#bar .logo img { width: 100%; height: auto; }
#bar .trigger { display: flex; align-items: center; gap: .9vw; color: var(--ink); cursor: pointer; padding: 1.4vw 1.6vw; margin: -1.4vw -1.6vw; }  /* generous hit area, same visual position */
#bar .trigger .text { font-size: .8vw; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
#bar .trigger .bars { position: relative; width: 1.5vw; height: .7vw; display: block; }
#bar .trigger .bars span { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; }
#bar .trigger .bars span:first-child { top: 0; }
#bar .trigger .bars span:last-child { bottom: 0; }
#bar .button.--contact { background: var(--gold-depth); color: #fff; height: 2.6vw; padding: 0 1.8vw; border-radius: 2.6vw; font-size: .75vw; letter-spacing: .12em; text-transform: uppercase; }
#bar .button.--contact:hover { background: var(--ink); }
#bar .button.--contact .ico { display: none; width: 1.1em; height: 1.1em; }

/* ---------- menu: full-screen panel with a footer bar and a centred close circle ---------- */
#menu { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
#menu .inner { position: absolute; inset: 0; display: none; transform: translateY(-100%); background: var(--sand); transition: background-color .8s var(--expoOut); pointer-events: none; overflow: hidden; }
#menu .inner.--on { pointer-events: all; }
#menu .inner.--hover .menu li.current a { color: var(--ink); }  /* the copper current-page link must not vanish on the copper hover */
#menu .inner.--dark .menu li.current a, #menu .inner.--dark .menu a, #menu .inner.--dark .menu__foot, #menu .inner.--dark .menu__foot a, #menu .inner.--dark .close { color: var(--cream); border-color: rgba(239,232,223,.6); transition: color .4s var(--expoOut); }
#menu .content { position: absolute; inset: 0 0 7vw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#menu .menu li { overflow: hidden; margin: .5vw 0; }
#menu .menu li.m-only { display: none; }
#menu .menu a { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 3vw; line-height: 1.1; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); transform: translateY(110%); transition: color .4s var(--expoOut); }
#menu .menu a:hover, #menu .menu li.current a { color: var(--bronze); }
#menu .close { position: absolute; z-index: 5; left: 50%; top: 2.4vw; transform: translateX(-50%); width: 3.2vw; height: 3.2vw; border: 1px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0.0001; transition: transform .6s var(--expoOut), background-color .4s, color .4s; }
#menu .close svg { width: 1.1vw; height: 1.1vw; }
#menu .close:hover { transform: translateX(-50%) scale(1.1); background: var(--ink); color: #fff; }
#menu .menu__foot { position: absolute; left: 5vw; right: 5vw; bottom: 0; height: 7vw; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); opacity: 0.0001; }
#menu .menu__foot .l { display: flex; gap: 3vw; }
#menu .menu__foot a, #menu .menu__foot span { font-size: .8vw; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
#menu .menu__foot span { color: var(--hint); }
#menu .bottom { display: none; }

/* ---------- hero ---------- */
.component--hero { padding: 12.5vw 0 0; overflow: clip; background: var(--bg); }   /* 6vw header + 6.5vw gap to the headline */
.component--hero .title { text-align: center; text-transform: none; letter-spacing: -.02em; }
.component--hero .container { position: relative; z-index: 2; }   /* headline stays above the frame while it opens */
.component--hero .clip { position: relative; width: 100vw; height: 360vh; margin: calc(6.5vw - 14vh) 0 -100vh; }   /* the photo's visible top (14vh into the frame) sits 6.5vw under the headline, the same gap as header to headline */
.component--hero .clip .frame { position: sticky; top: 0; cursor: default; width: 100vw; height: 100vh; background: var(--bg); clip-path: inset(14% 22% 14% 22%); will-change: clip-path; overflow: hidden; }
.component--hero .clip .frame .slides { position: absolute; inset: 0; will-change: transform; }
.component--hero .clip .frame .slide { position: absolute; inset: 0; overflow: hidden; will-change: opacity; }
.component--hero .clip .frame .slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.component--hero .clip .frame .gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%); pointer-events: none; }
.component--hero .clip .frame .shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.component--hero .clip .caption { position: absolute; left: 10vw; bottom: 4vw; color: #fff; opacity: 0.0001; }
.component--hero .hero-nav { position: absolute; right: 10vw; bottom: 3.4vw; display: flex; align-items: center; gap: 1.2vw; color: #fff; opacity: 0.0001; }
.component--hero .hero-nav .count { font-size: .75vw; letter-spacing: .14em; font-weight: 500; width: 3.4vw; text-align: center; font-variant-numeric: tabular-nums; }
.component--hero .hero-nav button { width: 3.333vw; height: 3.333vw; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .6s var(--expoOut), background-color .4s; }
.component--hero .hero-nav button:hover { transform: scale(1.12); background: rgba(255,255,255,.15); }
.component--hero .hero-nav button svg { width: 1.1vw; height: 1.1vw; }
.component--intro { position: relative; z-index: 2; background: var(--bg); }

/* ---------- intro (3-image cluster) ---------- */
.component--intro { padding: 10vw 0; }
.component--intro .content { width: 30vw; }
.component--intro .content.--left { margin-bottom: 7.5vw; }
.component--intro .content.--right { margin-left: 50vw; margin-top: 7.5vw; }
.component--intro .content .label { margin-bottom: 2.5vw; }
.component--intro .content .title { margin-bottom: 2.5vw; }
.component--intro .content .wysiwyg { width: 25vw; }
.component--intro .content .link { margin-top: 2.5vw; }
.component--intro .images { position: relative; width: 25vw; height: 30vw; margin: auto; }
.component--intro .images .image.--1 { position: absolute; width: 50vw; height: 55vw; left: 15vw; top: -30vw; }
.component--intro .images .image.--2 { position: relative; width: 25vw; height: 30vw; }
.component--intro .images .image.--3 { position: absolute; width: 20vw; height: 25vw; left: -15vw; top: 20vw; }
.component--intro .images .image::before { display: none; }

/* ---------- stacked cards ---------- */
.component--stack { padding: 0; background: var(--sand); transition: background-color .6s var(--expoOut); }
.component--stack .stack { position: relative; height: 500vh; }
.component--stack .stack__inner { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.component--stack .stack__item { position: absolute; inset: 0; width: 100vw; height: 100vh; transform-origin: 50% 0; }
.component--stack .card { position: absolute; left: 50%; bottom: 0; width: 80vw; height: 35vw; transform: translateX(-50%); transform-origin: 50% 0; overflow: hidden; background: var(--ink); }
.component--stack .card .image { position: absolute; inset: 0; height: 100%; }
.component--stack .card .image::before { display: none; }
.component--stack .card img { opacity: .9; transform: scale(1.08); transition: opacity 1s var(--expoOut); }
.component--stack .card .card__text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; }
.component--stack .card .card__text .title { color: #fff; font-size: 3.4vw; line-height: .95; text-transform: uppercase; letter-spacing: .02em; }
.component--stack .card .card__text .label { color: #fff; margin-top: 1vw; }
.component--stack .card .card__cta { position: absolute; left: 50%; bottom: 2.4vw; transform: translateX(-50%); color: #fff; font-size: .8vw; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding-bottom: .5vw; border-bottom: 2px solid #fff; white-space: nowrap; transition: transform .6s var(--expoOut), opacity .4s; }
.component--stack .card:hover .card__cta { transform: translate(-50%, -.4vw); }

.component--stack .stack__item:nth-child(1) { transform: translateY(0); z-index: 6; }
.component--stack .stack__item:nth-child(2) { transform: translateY(-5vw); z-index: 5; }
.component--stack .stack__item:nth-child(3) { transform: translateY(-10vw); z-index: 4; }
.component--stack .stack__item:nth-child(4) { transform: translateY(-15vw); z-index: 3; }
.component--stack .stack__item:nth-child(5) { transform: translateY(-20vw); z-index: 2; }
.component--stack .stack__item:nth-child(6) { transform: translateY(-25vw); z-index: 1; }
.component--stack .stack__item:nth-child(7) { transform: translateY(-30vw); z-index: 0; }
.component--stack .stack__item:nth-child(2) .card { transform: translateX(-50%) scale(.875); }
.component--stack .stack__item:nth-child(3) .card { transform: translateX(-50%) scale(.75); }
.component--stack .stack__item:nth-child(4) .card { transform: translateX(-50%) scale(.625); opacity: 0.0001; }
.component--stack .stack__item:nth-child(5) .card { transform: translateX(-50%) scale(.5); opacity: 0.0001; }
.component--stack .stack__item:nth-child(n+6) .card { transform: translateX(-50%) scale(.375); opacity: 0.0001; }

/* ---------- features: blush section, centered head, three full-width cards ---------- */
.component--features { padding: 8vw 0 0; background: #f0e8e3; }
.component--features .head { text-align: center; width: 60vw; margin: 0 auto 4vw; }
.component--features .head .label { margin-bottom: 2vw; }
.component--features .head .title { margin-bottom: 3vw; }
.component--features .head .title.--medium { font-size: 5.4vw; }   /* phones override this to 11vw */
.component--features .head .wysiwyg { width: 36vw; margin: auto; font-size: 1.05vw; }
.wysiwyg.--center { text-align: center; }
.component--features .filters { display: flex; justify-content: center; gap: 5vw; margin-bottom: 4vw; }
.component--features .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vw; padding: 0 1vw 1vw; }
.component--features .fcard { position: relative; display: block; height: 42vw; overflow: hidden; background: var(--ink); }
.component--features .fcard .image { position: absolute; inset: 0; height: 100%; }
.component--features .fcard .image::before { display: none; }
.component--features .fcard img { transform: scale(1.04); transition: transform 1.6s var(--expoOut); }
.component--features .fcard:hover img { transform: scale(1.1); }
.component--features .fcard .gradient { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.component--features .fcard__title { position: absolute; left: 1vw; right: 1vw; bottom: 9.5vw; text-align: center; color: #fff; font-family: var(--font-serif); font-size: 2.3vw; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.component--features .circle { position: absolute; left: 50%; bottom: 4.5vw; width: 3.333vw; height: 3.333vw; transform: translateX(-50%); border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .6s var(--expoOut), background-color .4s; }
.component--features .circle svg { width: 1.1vw; height: 1.1vw; }
.component--features .fcard:hover .circle { transform: translateX(-50%) scale(1.12); background: rgba(255,255,255,.15); }

/* ---------- retreat: text | tall image, then wide image | second text (after the sister site's wellness block) ---------- */
.component--retreat { padding: 10vw 0 8vw; }
.component--retreat .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "text tall" "wide text2"; gap: 5vw 6vw; align-items: start; }
.component--retreat .text { grid-area: text; padding-top: 2vw; }
.component--retreat .text .label, .component--retreat .text2 .label { display: block; margin-bottom: 2.5vw; }
.component--retreat .text .title { margin-bottom: 3vw; }
.component--retreat .text .wysiwyg, .component--retreat .text2 .wysiwyg { width: 32vw; font-size: 1.05vw; }
.component--retreat .text .link { margin-top: 2.5vw; }
.component--retreat .image.--tall { grid-area: tall; --ratio: 128%; }
.component--retreat .image.--tall2 { grid-area: wide; --ratio: 128%; }
.component--retreat .text2 { grid-area: text2; align-self: center; }
.component--retreat .text2 .title { margin-bottom: 2.5vw; }

/* ---------- vertical gallery: five fixed frames, bottoms aligned, photos slide inside ---------- */
.component--vertical { padding: 10vw 0 8vw; overflow: hidden; }
.component--vertical .label { display: block; text-align: center; margin-bottom: 2.5vw; }
.component--vertical .title { text-align: center; margin-bottom: 4vw; }
.component--vertical .vnav { display: flex; justify-content: center; gap: 1vw; margin-bottom: 3vw; }
.component--vertical .vnav button { width: 3.333vw; height: 3.333vw; border: 1px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform .6s var(--expoOut), background-color .4s, color .4s; }
.component--vertical .vnav button:hover { transform: scale(1.12); background: var(--ink); color: #fff; }
.component--vertical .vnav button svg { width: 1.1vw; height: 1.1vw; }
.component--vertical .vnav { margin: 1vw 0 3vw; }
.component--vertical .rail { position: relative; width: 100vw; height: 38vw; }
.component--vertical .vitem { position: absolute; left: 0; bottom: 0; width: 28vw; height: 28vw; overflow: hidden; background: var(--stone); will-change: transform, height; cursor: pointer; }
.component--vertical .vitem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; user-select: none; }

/* ---------- stairs (used on inner pages) ---------- */
.component--stairs { padding: 12.5vw 0 15vw; }
.component--stairs .content { width: 50vw; margin-bottom: 5vw; }
.component--stairs .content .label { margin-bottom: 2.5vw; }
.component--stairs .content .title { margin-bottom: 2.5vw; }
.component--stairs .content .wysiwyg { width: 25vw; }
.component--stairs .images { position: relative; width: 85vw; height: 50vw; margin-left: -2.5vw; }
.component--stairs .images .image { position: absolute; width: 25vw; height: 35vw; }
.component--stairs .images .image::before { display: none; }
.component--stairs .images .image.--1 { left: 0; top: 15vw; }
.component--stairs .images .image.--2 { left: 20vw; top: 10vw; }
.component--stairs .images .image.--3 { left: 40vw; top: 5vw; }
.component--stairs .images .image.--4 { left: 60vw; top: 0; }
.component--stairs .images .title { position: absolute; left: 50%; top: 50%; width: 90vw; transform: translate(-50%, -50%); text-align: center; color: #fff; font-style: normal; mix-blend-mode: normal; text-shadow: 0 2px 40px rgba(0,0,0,.25); z-index: 2; }

/* ---------- tour (Matterport + floor plan) ---------- */
.component--tour { padding: 8vw 0 10vw; }
.component--tour .head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3vw; }
.component--tour .head .label { margin-bottom: 1.5vw; display: block; }
.component--tour .head .title { width: 62vw; }   /* two lines in Cormorant; the download button still clears it */
.component--tour .actions { display: flex; gap: 1vw; }
.component--tour .frame { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--stone); overflow: hidden; }
.component--tour .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.component--tour .frame .play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vw; color: #fff; cursor: pointer; }
.component--tour .frame .play .label { color: #fff; }
.component--tour .frame .play .ring { display: flex; align-items: center; justify-content: center; width: 5vw; height: 5vw; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; transition: transform .6s var(--expoOut), background-color .4s; }
.component--tour .frame .play .ring svg { width: 1.6vw; height: 1.6vw; margin-left: .2vw; }
.component--tour .frame .play:hover .ring { transform: scale(1.12); background: rgba(255,255,255,.15); }
.component--tour .plan { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5vw; margin-top: 2.5vw; align-items: center; }
.component--tour .plan .image { --ratio: 70.7%; background: #fff; border: 1px solid var(--line); }
.component--tour .plan .image img { object-fit: contain; padding: 1.5vw; }
.component--tour .plan .meta { padding-left: 2vw; }
.component--tour .plan .meta .label { margin-bottom: 1.5vw; display: block; }
.component--tour .plan .meta .wysiwyg { margin-bottom: 2vw; }

/* ---------- brands marquee ---------- */
.component--brands { padding: 6vw 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.component--brands .label { display: block; text-align: center; margin-bottom: 3vw; }
.component--brands .marquee { display: flex; width: max-content; will-change: transform; }
.component--brands .marquee__group { display: flex; align-items: center; gap: 6vw; padding-right: 6vw; }
.component--brands .brand { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; white-space: nowrap; }
.component--brands .brand img { display: block; width: auto; height: auto; max-height: 2.6vw; max-width: 9.5vw; opacity: .8; }
.component--brands .brand small { display: block; font-family: var(--font-sans); font-size: .65vw; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); margin-top: .9vw; }

.form .error { color: var(--bronze); font-size: .8vw; margin-top: 1vw; }
.form .sig { font-size: 1vw; line-height: 1.6; color: var(--ink-2); margin-top: 1.6vw; }
.form .sig strong { font-weight: 600; color: var(--ink); }
.component--contact .formwrap.--sent { display: flex; flex-direction: column; justify-content: center; }   /* thank-you state sits mid-height beside the photo */

.form .g-recaptcha { margin: 0 auto 1.2vw; display: flex; justify-content: center; }
.form.--inquiry .g-recaptcha { justify-content: flex-start; }

/* ---------- banner ---------- */
.component--banner { color: #fff; overflow: hidden; }
.component--banner .image.--cover img { height: 130%; top: -15%; will-change: transform; }
.component--banner .floating { position: absolute; left: 50%; top: 50%; width: 64vw; transform: translate(-50%, -50%); text-align: center; }
.component--banner .label { color: #fff; margin-bottom: 2.5vw; }
.component--banner .title { color: #fff; margin-bottom: 2.5vw; }
.component--banner .wysiwyg { color: rgba(255,255,255,.9); width: 44vw; margin: auto; }

/* ---------- page hero (inner pages) ---------- */
.component--page { padding: 15vw 0 6vw; }
.component--page .label { margin-bottom: 2vw; display: block; }
.component--page .title.--large { font-size: 7.5vw; }
.component--page .lede { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; margin-top: 4vw; align-items: end; }
.component--page .lede .wysiwyg { font-size: 1.05vw; width: 30vw; }   /* same size as the other intro paragraphs (features, retreat); was 1.4vw */
.component--page .lede .image { --ratio: 62%; }

/* ---------- editorial (two-column text + image) ---------- */
.component--editorial { padding: 8vw 0; }
.component--editorial .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.component--editorial .row + .row { margin-top: 10vw; }
.component--editorial .row.--flip .text { order: 2; }
.component--editorial .text .label { margin-bottom: 2vw; display: block; }
.component--editorial .text .title { margin-bottom: 2vw; }
.component--editorial .text .wysiwyg { width: 30vw; }
.component--editorial .image { --ratio: 125%; }
.component--editorial .image.--wide { --ratio: 66.7%; }

/* ---------- gallery ---------- */
.component--gallery { padding: 12vw 0 8vw; }
.component--gallery .head { margin-bottom: 4vw; }
.component--gallery .head.--center { text-align: center; }
#lightbox img.--locked { opacity: .55; filter: blur(14px); }
#lightbox .lightbox__gate { display: none; position: absolute; left: 50%; top: 50%; width: 38vw; transform: translate(-50%, -50%); background: #fff; padding: 3vw 3vw 2.4vw; text-align: center; box-shadow: 0 2vw 6vw rgba(43,38,34,.15); }
#lightbox.--gated .lightbox__gate { display: block; }
#lightbox.--gated .next { opacity: .3; pointer-events: none; }
#lightbox .lightbox__gate .title { font-size: 2.2vw; margin-bottom: 2vw; }
#lightbox .lightbox__gate .form { width: 100%; }
.component--gallery .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6vw; padding: 0 .6vw; }
.component--gallery .grid .image { --ratio: 66.7%; cursor: zoom-in; }
.component--gallery .grid .image.--tall { --ratio: 133%; grid-row: span 2; }
.component--gallery .grid.--free { margin-bottom: .6vw; }
.component--gallery .locked { position: relative; }
.component--gallery .locked .grid { max-height: 56vw; overflow: hidden; filter: blur(8px); opacity: .55; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%); transition: filter 1s var(--expoOut), opacity 1s var(--expoOut); }
.component--gallery .locked.--open .grid { max-height: none; filter: none; opacity: 1; pointer-events: all; -webkit-mask-image: none; mask-image: none; }
.component--gallery .locked .gate { position: absolute; left: 50%; top: 10vw; width: 38vw; transform: translateX(-50%); background: #fff; padding: 3vw 3vw 2.4vw; text-align: center; box-shadow: 0 2vw 6vw rgba(43,38,34,.12); }
.component--gallery .locked.--open .gate { display: none; }
.component--gallery .gate .title { font-size: 2.2vw; margin-bottom: 2vw; }
.component--gallery .gate .form, #lightbox .form { width: 100%; margin: 0 auto; }
.component--gallery.--area { padding-top: 0; }
#lightbox .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
#lightbox .form input { width: 100%; height: 3.4vw; margin-bottom: 1vw; padding: 0 1.4vw; border: 1px solid var(--line); border-radius: 3.4vw; background: #fff; font: inherit; font-size: 1vw; color: var(--ink); outline: none; }
#lightbox .form .button { width: 100%; height: 3.4vw; }
#lightbox .form .note { font-size: .75vw; color: var(--hint); text-align: center; margin-top: 1vw; }
.component--gallery .more { text-align: center; margin-top: 4vw; }
.component--gallery .gate .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
.component--gallery .gate .form input { width: 100%; height: 3.4vw; margin-bottom: 1vw; padding: 0 1.4vw; border: 1px solid var(--line); border-radius: 3.4vw; background: #fff; font: inherit; font-size: 1vw; color: var(--ink); outline: none; transition: border-color .4s; }
.component--gallery .gate .form input:focus { border-color: var(--ink); }
.component--gallery .gate .form .g-recaptcha, #lightbox .form .g-recaptcha { margin-top: 1vw; }   /* under the button, same breathing room as between the fields */
.component--gallery .gate .form .button { width: 100%; height: 3.4vw; }
.component--gallery .gate .form .note { font-size: .75vw; color: var(--hint); text-align: center; margin-top: 1vw; }
.component--gallery .gate .form .note.error, #lightbox .form .note.error { color: var(--bronze); }   /* refusals (missing captcha, bad email) in the copper accent, like the contact form */
#lightbox { position: fixed; inset: 0; z-index: 250; background: #fff; display: none; align-items: center; justify-content: center; }
#lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; }
#lightbox .close, #lightbox .prev, #lightbox .next { position: absolute; font-size: .875vw; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
#lightbox .lightbox__nav { display: contents; }   /* desktop: prev/next float at the sides as before */
#lightbox .close { top: 3vw; right: 5vw; }
#lightbox .prev { left: 5vw; top: 50%; }
#lightbox .next { right: 5vw; top: 50%; }

/* ---------- footer: dark olive, one logo with the title written over it, lines from the word NORTH ---------- */
/* ---------- other spaces (area pages) ---------- */
.component--spaces { padding: 6vw 0 8vw; }
.component--spaces .head { margin-bottom: 2.5vw; }
.component--spaces .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5vw; }
.component--spaces .scard { display: block; }
.component--spaces .scard .image { --ratio: 75%; margin-bottom: 1vw; }
.component--spaces .scard .image img { transition: transform 1.4s var(--expoOut); }
.component--spaces .scard:hover .image img { transform: scale(1.05); }
.component--spaces .scard .title { display: block; font-size: 1.7vw; margin-bottom: .5vw; }
.component--spaces .scard .link { font-size: .75vw; }

/* ---------- contact: image + inquiry form ---------- */
.component--contact { padding: 8vw 0; background: var(--paper); }
.component--contact .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 6vw; align-items: center; }
.component--contact .image { --ratio: 130%; }
.component--contact .image .plaque { position: absolute; left: 1.6vw; top: 1.6vw; z-index: 2; display: flex; flex-direction: column; gap: .15vw; padding: .9vw 1.3vw; background: rgba(255,255,255,.94); color: var(--ink); }
.component--contact .image .plaque .name { font-family: var(--font-serif); font-weight: 600; font-size: 1.4vw; line-height: 1.1; letter-spacing: -.01em; }
.component--contact .image .plaque .role { font-size: .62vw; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.component--contact .formwrap .label { display: block; margin-bottom: 1.5vw; }
.component--contact .formwrap .title { margin-bottom: 1.2vw; }
.component--contact .formwrap > .wysiwyg { margin-bottom: 2.5vw; }
.form.--inquiry .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
.form.--inquiry input, .form.--inquiry textarea { width: 100%; margin-bottom: 1vw; padding: 1vw 1.4vw; border: 1px solid var(--line); border-radius: 1.6vw; background: #fff; font: inherit; font-size: 1vw; color: var(--ink); outline: none; transition: border-color .4s; }
.form.--inquiry input { height: 3.4vw; padding: 0 1.4vw; border-radius: 3.4vw; }
.form.--inquiry textarea { resize: vertical; min-height: 7vw; }
.form.--inquiry input:focus, .form.--inquiry textarea:focus { border-color: var(--ink); }
.form.--inquiry .actions { display: flex; align-items: center; gap: 1.6vw; flex-wrap: wrap; }
.form.--inquiry .g-recaptcha { margin: 0; min-height: 1px; }
.form.--inquiry .button { height: 3.4vw; padding: 0 2.4vw; background: var(--gold-depth); }
.form.--inquiry .consent { font-size: .75vw; line-height: 1.5; color: var(--hint); margin-top: 1.4vw; max-width: 60ch; }
.form.--inquiry .thanks { font-family: var(--font-serif); font-weight: 600; font-size: 1.8vw; color: var(--ink); }

footer { position: relative; background: var(--olive-dark); color: var(--cream); padding: 5vw 0 3vw; overflow: hidden; }
footer .mark { position: relative; width: 30vw; margin: 0 auto 3.5vw; }
footer .mark__logo { display: block; width: 100%; height: auto; }
footer .mark__title { position: absolute; left: 50%; top: 50%; width: 60vw; transform: translate(-50%, -50%); text-align: center; color: var(--cream); font-size: 2.8vw; line-height: 1.15; }
footer .mark .line { position: absolute; top: 71%; height: 1px; width: 35vw; background: var(--cream); opacity: .45; }
footer .mark .line.--l { right: 100%; }
footer .mark .line.--r { left: 100%; }
footer .columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3vw; align-items: start; }
footer .group .label { margin-bottom: 1.25vw; display: block; }
footer .group .menu li { margin-bottom: .9vw; }
footer .group .menu a { font-size: .875vw; font-weight: 300; line-height: 1.6; transition: opacity .6s var(--expoOut); }
footer .group .menu a:hover { opacity: .5; }
footer .group .wysiwyg { font-size: .875vw; color: var(--cream); opacity: .85; }
footer .agent .name { font-family: var(--font-serif); font-weight: 600; font-size: 2vw; margin-bottom: .4vw; }
footer .brands { display: flex; flex-direction: column; align-items: center; gap: 2.2vw; padding-top: .4vw; }
footer .brands .hh { width: 8.5vw; height: auto; }
footer .legal .short { display: none; }
footer .legal { display: flex; align-items: center; gap: 1.2vw; margin-top: 5vw; padding-top: 2vw; border-top: 1px solid rgba(239,232,227,.15); }
footer .legal .eho { width: 2.4vw; height: 2.4vw; flex: none; color: var(--cream); }
footer .legal .wysiwyg { color: var(--cream); opacity: .7; }
footer .bottom { display: flex; justify-content: space-between; margin-top: 2vw; font-size: .7vw; color: var(--cream); opacity: .6; letter-spacing: .1em; text-transform: uppercase; }
footer .bottom a { border-bottom: 1px solid rgba(239,232,223,.5); transition: opacity .4s; }
footer .bottom a:hover { opacity: .6; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .char, .js .title.--display .char, .js .wysiwyg[data-words] .word, .js .label[data-reveal], .js [data-fade] { opacity: 1 !important; }
  #loader { display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 760px) {
  html { font-size: 3.6vw; }
  .container { width: 88vw; }
  .container.--medium { width: 92vw; }
  .component { padding: 12vw 0; }
  .title { font-size: 9.2vw; line-height: 1.02; }
  .title.--display { font-size: 13.05vw; line-height: .92; letter-spacing: 0; }
  .title.--large { font-size: 10.4vw; line-height: .94; letter-spacing: -.03em; }   /* "BEAUTIFUL LIVING." must fit one line on a 375px phone */
  .title.--medium { font-size: 10.27vw; line-height: .95; }
  .component--features .head .title.--medium { font-size: 9.8vw; width: 92vw; margin-left: -2vw; }
  .component--retreat .text .title, .component--retreat .text2 .title { font-size: 12vw; }
  .title.--small { font-size: 9vw; }
  .subtitle { font-size: 6vw; }
  .wysiwyg { font-size: 4.2vw; line-height: 1.5; }
  .wysiwyg.--indent .word:first-child, .wysiwyg.--indent > p:first-child { text-indent: 16vw; }
  .label { font-size: 3vw; }
  .link { font-size: 3.2vw; }
  .button { height: 12vw; padding: 0 7vw; border-radius: 12vw; font-size: 3.6vw; }

  #loader .logo { width: 70vw; left: calc(50% - 35vw); top: calc(50svh - 5.87vw); }
  #header { display: none; }   /* phones use the slim bar only: logo, menu, contact */
  #bar { height: 14vw; transform: translateY(0); }
  #bar .logo { width: 44vw; }   /* clears Menu and the round Contact button on phones */
  #bar .container { width: 90vw; }
  #bar .trigger { gap: 2.5vw; padding: 4vw 4.5vw; margin: -4vw -4.5vw; }
  #bar .trigger .text { display: none; }   /* phones: burger only */
  #bar .trigger .bars { width: 6vw; height: 3vw; }
  #bar .button.--contact { width: 10vw; height: 10vw; padding: 0; border-radius: 50%; }   /* phones: a gold circle with a phone icon */
  #bar .button.--contact .t { display: none; }
  #bar .button.--contact .ico { display: block; width: 4.6vw; height: 4.6vw; }
  .component--contact .grid { grid-template-columns: 1fr; gap: 8vw; }
  .component--contact .formwrap .label { margin-bottom: 4vw; }
  .component--contact .formwrap .title { font-size: 8vw; line-height: 1.1; margin-bottom: 7vw; text-wrap: balance; }   /* even lines, room above the form */
  .component--contact .image .plaque { left: 4vw; top: 4vw; padding: 3vw 4vw; gap: .6vw; }
  .component--contact .image .plaque .name { font-size: 4.6vw; }
  .component--contact .image .plaque .role { font-size: 2.6vw; }
  .component--spaces .grid { grid-template-columns: 1fr 1fr; gap: 4vw; }
  .component--spaces .scard .title { font-size: 5vw; }
  .component--spaces .scard .link { font-size: 3vw; }
  .form.--inquiry .row { grid-template-columns: 1fr; gap: 0; }
  .form.--inquiry input, .form.--inquiry textarea { font-size: 4vw; margin-bottom: 3vw; padding: 3vw 5vw; border-radius: 5vw; }
  .form.--inquiry input { height: 13vw; padding: 0 5vw; border-radius: 13vw; }
  .form.--inquiry .button { height: 13vw; width: 100%; }
  .form.--inquiry .actions { flex-direction: column; align-items: center; gap: 5vw; }
  .form.--inquiry .g-recaptcha { margin: 0; justify-content: center; }
  .form.--inquiry .consent { font-size: 3vw; line-height: 1.6; }
  .form.--inquiry .consent { margin-top: 5vw; }
  .form .error { font-size: 3.4vw; margin-top: 3vw; }
  .form .sig { font-size: 4vw; margin-top: 5vw; }
  .form.--inquiry .actions { gap: 4vw; align-items: stretch; }
  .form.--inquiry .g-recaptcha { margin: 0; justify-content: flex-start; }
  .form.--inquiry .thanks { font-size: 5.5vw; }
  #menu .menu a { font-size: 8vw; }
  #menu .close { top: 5vw; width: 11vw; height: 11vw; }
  #menu .close svg { width: 4vw; height: 4vw; }
  #menu .content { inset: 0; }
  #menu .menu__foot { display: none; }
  #menu .menu li.m-only { display: block; }

  .component--hero { padding: 22vw 0 0; }
  .component--hero .clip { height: auto; margin: 10vw 0 0; }
  .component--hero .clip .frame { clip-path: none; position: relative; }
  .component--hero .clip .caption { display: none; }

  .component--intro { padding: 10vw 0 10vw; }
  .component--intro .content { width: 88vw; }
  .component--intro .content.--left { margin-bottom: 16vw; }
  .component--intro .content.--right { margin-left: 0; margin-top: 10vw; }
  .component--intro .content .wysiwyg { width: 100%; }
  .component--intro .images { width: 88vw; height: 150vw; }
  .component--intro .images .image.--1 { width: 66vw; height: 80vw; left: 22vw; top: 0; }
  .component--intro .images .image.--2 { position: absolute; width: 52vw; height: 62vw; left: 0; top: 66vw; }
  .component--intro .images .image.--3 { display: none; }

  .component--stack { padding: 12vw 0; }
  .component--stack .stack { height: auto; }
  .component--stack .stack__inner { position: relative; height: auto; overflow: visible; padding: 0; display: flex; flex-direction: column; gap: 4vw; }
  .component--stack .stack__item { position: relative; inset: auto; width: auto; height: auto; transform: none !important; opacity: 1 !important; margin: 0 6vw; z-index: auto; }
  .component--stack .card { display: block; position: relative; left: 0; bottom: auto; width: 100%; height: 110vw; transform: none !important; opacity: 1 !important; }
  .component--stack .card img { transform: none; opacity: .9; }
  .component--stack .card .card__text .title { font-size: 9vw; }
  .component--stack .card .card__text .label { margin-top: 2vw; font-size: 3vw; }

  .component--features { padding-top: 16vw; }
  .component--features .head { width: 88vw; }
  .component--features .head .wysiwyg { width: 100%; font-size: 4.2vw; }
  .component--features .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw 4vw; justify-items: center; width: 70vw; margin: 0 auto 8vw; }
  .component--features .cards { grid-template-columns: 1fr; gap: 3vw; padding: 0 3vw 3vw; }
  .component--features .fcard { height: 110vw; }
  .component--features .fcard__title { font-size: 8vw; bottom: 26vw; }
  .component--features .circle { width: 12vw; height: 12vw; bottom: 10vw; }
  .component--features .circle svg { width: 4vw; height: 4vw; }
  .component--retreat .grid { grid-template-columns: 1fr; grid-template-areas: "text" "tall" "wide" "text2"; gap: 8vw; }
  .component--retreat .text .wysiwyg, .component--retreat .text2 .wysiwyg { width: 100%; font-size: 4.2vw; }
  #lightbox .lightbox__gate { width: 88vw; padding: 8vw 6vw; }
  #lightbox .lightbox__gate .title { font-size: 6.5vw; margin-bottom: 6vw; }
  #lightbox .form input { height: 13vw; font-size: 4vw; padding: 0 5vw; border-radius: 13vw; margin-bottom: 3vw; }
  #lightbox .form .button { height: 13vw; }
  #lightbox .form .note { font-size: 3vw; }

  .component--vertical .vnav { gap: 4vw; margin-bottom: 8vw; }
  .component--vertical .vnav button { width: 12vw; height: 12vw; }
  .component--vertical .vnav button svg { width: 4vw; height: 4vw; }
  .component--vertical .rail { gap: 2vw; }
  .component--vertical .rail { height: 100vw; }
  .component--vertical .vitem { width: 74vw; height: 76vw; }
  .component--stack .card .card__cta { font-size: 3vw; bottom: 7vw; }
  .component--gallery .locked { display: flex; flex-direction: column; }
  .component--gallery .locked .gate { order: -1; position: relative; z-index: 2; left: auto; top: auto; transform: none; width: 100vw; margin-top: -33.5vw; padding: 10vw 6vw 8vw; box-shadow: none; }   /* covers the ninth free tile (one tile = 47.9vw x .667 + .6vw, plus a little of the gap above it) */
  .component--gallery .gate .title { font-size: 6.5vw; margin-bottom: 6vw; }
  .component--gallery .locked .grid { max-height: 160vw; }
  footer .brands { align-items: center; gap: 8vw; padding-top: 4vw; }
  footer .brands .hh { width: 44vw; }
  .component--hero .hero-nav { right: 6vw; bottom: 6vw; gap: 3vw; }
  .component--hero .hero-nav .count { font-size: 3.2vw; width: 14vw; }
  .component--hero .hero-nav button { width: 11vw; height: 11vw; }
  .component--hero .hero-nav button svg { width: 3.6vw; height: 3.6vw; }
  .component--hero .clip .frame { height: 110vw; }
  .component--hero .clip .frame .slide img { transform: none; }

  .component--stairs { padding: 10vw 0 20vw; }
  .component--stairs .content { width: 88vw; }
  .component--stairs .content .wysiwyg { width: 100%; }
  .component--stairs .images { width: 88vw; height: auto; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .component--stairs .images .image { position: relative; width: auto; height: 58vw; left: auto !important; top: auto !important; transform: none !important; }
  .component--stairs .images .title { width: 88vw; font-size: 12vw; }
  .component--stairs .images .image img { width: 100% !important; left: 0 !important; }   /* desktop-only crops (inline width/left) off on phones */

  .component--tour .head { display: block; }
  .component--tour .head .title { width: 100%; margin-bottom: 8vw; }
  .component--tour .actions { display: none; }   /* the Download PDF button under the plan covers it on phones */
  .component--tour .frame { margin-bottom: 14vw; }
  .component--tour .plan { grid-template-columns: 1fr; gap: 8vw; }
  .component--tour .plan .meta { padding: 0; }
  .component--tour .plan .meta .title { margin-bottom: 4vw; }
  .component--tour .plan .meta .wysiwyg { margin-bottom: 6vw; }
  .component--tour .plan .meta .button { background: var(--ink); color: #fff; border-color: var(--ink); }

  .component--brands .brand img { max-height: 8vw; max-width: 30vw; }
  .component--brands .brand small { font-size: 2.6vw; margin-top: 2.5vw; }
  .component--brands .marquee__group { gap: 12vw; padding-right: 12vw; }

  .component--banner .floating { width: 88vw; }
  .component--banner .wysiwyg { width: 100%; }

  .component--page { padding: 34vw 0 10vw; }
  .component--page .title.--large { font-size: 13vw; }
  .component--page .lede { grid-template-columns: 1fr; gap: 8vw; }
  .component--page .lede .wysiwyg { width: 100%; font-size: 4.2vw; }

  .component--editorial .row { grid-template-columns: 1fr; gap: 8vw; }
  .component--editorial .row.--flip .text { order: 0; }
  .component--editorial .text .wysiwyg { width: 100%; }
  .component--editorial .row + .row { margin-top: 20vw; }

  .component--gallery { padding-top: 34vw; }
  .component--gallery .grid { grid-template-columns: 1fr 1fr; gap: 3vw; }
  .component--gallery .gate .form { width: 100%; }
  .component--gallery .gate .form .row { grid-template-columns: 1fr; gap: 0; }
  .component--gallery .gate .form input { height: 13vw; font-size: 4vw; padding: 0 5vw; border-radius: 13vw; margin-bottom: 3vw; }
  .component--gallery .gate .form .button { height: 13vw; }
  .component--gallery .gate .form .note { font-size: 3vw; }
  #lightbox { flex-direction: column; justify-content: center; gap: 6vw; }
  #lightbox img { max-width: 100vw; max-height: 68vh; }
  #lightbox .close { font-size: 3.2vw; top: 5vw; right: 6vw; padding: 3vw 0; }
  #lightbox .lightbox__nav { display: flex; gap: 4vw; order: 2; }   /* under the photo, and under the unlock card when gated */
  #lightbox .prev, #lightbox .next { position: static; font-size: 3.2vw; height: 12vw; padding: 0 8vw; border: 1px solid var(--ink); border-radius: 12vw; }
  #lightbox.--gated img { display: none; }
  #lightbox .lightbox__gate { position: static; width: 100vw; transform: none; box-shadow: none; padding: 6vw 6vw 4vw; }
  #lightbox .form .row { grid-template-columns: 1fr; gap: 0; }
  #lightbox.--gated .lightbox__nav { display: none; }   /* the unlock screen has only Close */
  #lightbox.--gated { justify-content: flex-start; padding: 16vw 0 10vw; overflow-y: auto; -webkit-overflow-scrolling: touch; }   /* card starts under the Close button and can scroll if taller than the screen */
  #lightbox .lightbox__gate .title { padding: 0 2vw; }
  #lightbox .form .note, .component--gallery .gate .form .note { margin-top: 4vw; }
  .component--gallery .gate .form .g-recaptcha, #lightbox .form .g-recaptcha { margin-top: 3vw; }

  footer { padding: 20vw 0 10vw; }
  footer .columns { grid-template-columns: 1fr; gap: 10vw; }
  footer .group .menu a, footer .group .wysiwyg { font-size: 4vw; }
  footer .agent .name { font-size: 7vw; margin: 0 0 2vw; }
  footer .agent .label { margin-bottom: 5vw; }   /* room between the label and her name */
  footer .legal { flex-direction: column; align-items: center; text-align: center; gap: 4vw; margin-top: 12vw; padding-top: 6vw; }
  footer .legal .long { display: none; }
  footer .legal .short { display: inline; }
  footer .legal .eho { width: 9vw; height: 9vw; }
  footer .legal .wysiwyg { font-size: 3.2vw; line-height: 1.6; }
  footer .legal .wysiwyg br { display: none; }
  footer .bottom { justify-content: space-between; align-items: center; font-size: 2.8vw; margin-top: 8vw; }
  .component--tour .frame .play .ring { width: 16vw; height: 16vw; }
  .component--tour .frame .play .ring svg { width: 5vw; height: 5vw; }
}


/* ---------- dark home page (La Belle Vie, 2026-11-06): black where the page was white; coloured sections keep their colour ---------- */
html:has(body.dark) { background: #111111; }
body.dark { --bg: #111111; --paper: #111111; --ink: #f3ede4; --ink-2: #cfc7bc; --hint: #8f877f; --line: rgba(255,255,255,.14); --stone: #1c1c1c; background: #111111; color: var(--ink); }
body.dark #header, body.dark #bar { background: #111111; border-bottom: 1px solid var(--line); color: var(--ink); }
body.dark #header nav a, body.dark #bar .trigger { color: var(--ink); }
body.dark #bar .trigger .bars span { background: var(--ink); }
body.dark .component--hero .clip .frame { background: #111111; }
body.dark .button { background: var(--gold-depth); color: #fff; }
body.dark .component--tour .plan .image { background: #1a1a1a; border-color: var(--line); }
body.dark .form.--inquiry input, body.dark .form.--inquiry textarea { color: #2b2622; }
body.dark .component--contact .image .plaque { color: #2b2622; }
body.dark .component--contact .image .plaque .role { color: #5a5047; }
body.dark .component--features .fcard { background: #1a1a1a; }
body.dark .component--features { background: #111111; }   /* the pale blush band reads as white, so it goes black too */
html.soft body.dark #loader { background: #111111; }