/* ══════════════════════════════════════════════════════════════════════════
   PRESTIGE SWISS REAL ESTATE — v4 "Blanc, cartes, verre sur photo"
   A white page; on it, flat rounded cards with real air between them (Rhode).
   The header lives inside the hero (three links, the mark, three links); the
   glass pill only appears when the visitor scrolls back up. One sans (Geist),
   sentence case. No dark veils anywhere: text sits on quiet parts of quiet
   photographs, or on white. Glass is spent where it can be seen — over the
   photographs: the hero search bar, the plates on the listings and the
   service tiles, the counters strip, the pill. Their crimson is the only
   strong colour; in the footer it goes smoky behind the links.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --white:#FFFFFF; --ice:#F2F4F7; --ice-2:#E7EAEF; --photo:#1B2028; --sky:#D9E1EB;
  --ink:#111318; --ink-2:#3A3F47; --pewter:#5B6168; --mist:#A9AFB8; --slate:#3A4149; --anthra:#2B2F36;
  --red:#A0171F; --red-2:#731116; --red-glow:rgba(160,23,31,.30);
  --rule:rgba(17,19,24,.09); --rule-2:rgba(17,19,24,.06);

  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.40));
  --glass-rim:inset 0 1px 1px rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55);
  --metal:linear-gradient(135deg,#FFFFFF 0%,#D7DBE1 28%,#FFFFFF 52%,#C9CED6 78%,#FFFFFF 100%);

  --ui:var(--font-geist-sans),"Geist",-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --t1:clamp(42px,4.9vw,74px); --t2:clamp(32px,3.5vw,52px); --t3:clamp(22px,2vw,30px);
  --t4:20px; --t5:17px; --t6:15px; --t7:13px; --t8:12px;

  --r:16px; --gut:clamp(18px,2.8vw,40px); --side:clamp(16px,3vw,44px);
  --pad:clamp(26px,4.4vw,64px); --sec:clamp(48px,6.5vw,96px);
  --e:cubic-bezier(.16,1,.3,1); --e-soft:cubic-bezier(.4,0,.2,1);
  --d1:180ms; --d2:320ms; --d3:520ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--t6)/1.55 var(--ui);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--ui);text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--red);color:var(--white)}
:where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── type ─────────────────────────────────────────────────────────────── */
.h1{font-size:var(--t1);font-weight:600;line-height:.98;letter-spacing:-.035em}
.h2{font-size:var(--t2);font-weight:600;line-height:1.04;letter-spacing:-.03em}
.h3{font-size:var(--t3);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.h1 em,.h2 em{font-style:normal;color:var(--pewter)}
.eyebrow{font:600 var(--t8)/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--pewter)}
.lede{font-size:var(--t5);line-height:1.5;color:var(--ink-2);max-width:44ch}
.cap{font-size:var(--t7);line-height:1.55;color:var(--pewter);max-width:52ch}
.num{font-variant-numeric:tabular-nums}
.mask{display:block;overflow:hidden}.mask>span{display:block}
.wd{display:inline-block;overflow:hidden;vertical-align:top}.wd>span{display:inline-block}

/* ── the page: white, and a stack of cards with air ───────────────────── */
.strip{display:block;margin:18px var(--side) 0;padding:11px 20px;border-radius:var(--r);
  background:var(--ice);text-align:center;font:600 var(--t8)/1.3 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);transition:background-color var(--d2) var(--e-soft)}
.strip b{color:var(--red);font-weight:600}
@media (hover:hover){.strip:hover{background:var(--ice-2)}}
.stack{display:grid;gap:var(--sec);padding:18px var(--side) var(--side)}
.sec{display:grid;gap:var(--gut)}
.sec__h{display:grid;gap:14px;justify-items:center;text-align:center;max-width:62ch;margin:0 auto;
  padding:clamp(6px,1.4vw,18px) 0 2px}
.sec__h .lede{max-width:52ch}
.card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ice)}
.card--sky{background:var(--sky);color:var(--ink)}
.card__in{position:relative;z-index:2;padding:var(--pad)}
.row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px}

/* ── glass ──────────────────────────────────────────────────────────────
   .glass    a real backdrop surface (frost; refraction on Chromium for the
             one carrying .lg-live): the pill and the hero search bar.
   .glass-v  a real backdrop surface that only filters while on screen (.on).
   .plate    pre-baked frost over a photograph: a blurred copy of the same
             photograph sits inside the plate, aligned to the card. Free. */
.glass,.glass-v{position:relative;border-radius:22px;background:var(--glass-bg);
  box-shadow:0 20px 50px -22px rgba(17,19,24,.32),var(--glass-rim)}
.glass{backdrop-filter:blur(18px) saturate(1.6) brightness(1.04);
  -webkit-backdrop-filter:blur(18px) saturate(1.6) brightness(1.04)}
html.lg .glass.lg-live{backdrop-filter:url(#lg) blur(4px) saturate(1.6) brightness(1.05)}
.glass-v.on{backdrop-filter:blur(20px) saturate(1.6) brightness(1.04);
  -webkit-backdrop-filter:blur(20px) saturate(1.6) brightness(1.04)}
.glass::before,.glass-v::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.9),rgba(255,255,255,0) 46%);
  -webkit-mask-image:radial-gradient(140% 100% at var(--mx,14%) var(--my,0%),#000 0%,transparent 62%);
          mask-image:radial-gradient(140% 100% at var(--mx,14%) var(--my,0%),#000 0%,transparent 62%);
  opacity:.9}
.glass::after,.glass-v::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--metal);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}
.plate{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;border-radius:14px;overflow:hidden;
  color:#4A525C;background:rgba(255,255,255,.82);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6)}
.plate__bg{position:absolute;left:-12px;bottom:-12px;width:calc(100% + 24px);height:auto;aspect-ratio:4/5;
  object-fit:cover;filter:blur(30px) saturate(1.4) brightness(1.08);transform:scale(1.1);
  transform-origin:50% 100%;pointer-events:none;z-index:0}
.plate::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at var(--mx,12%) var(--my,0%),rgba(255,255,255,.9),rgba(255,255,255,0) 55%),
             linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.26))}
.plate::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;
  background:var(--metal);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5}
.plate__in{position:relative;z-index:2;padding:16px 18px;display:grid;gap:8px}
/* small type on frosted glass is set in full ink: the plate stays translucent, the words stay readable */
.plate h3{color:#4A525C;font-weight:500}
.plate b{color:var(--ink)}
.plate .prop__meta,.plate .prop__price span,.plate p{color:#4A525C}
.plate .prop__price{border-top-color:rgba(74,82,92,.14)}
.person--photo .plate h3{color:#4A525C}.person--photo .plate p,.person--photo .plate a{color:#4A525C}
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-v,.glass-v.on{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.96)}
  .glass::before,.glass-v::before{display:none}
  .plate{background:rgba(255,255,255,.96)}.plate__bg{display:none}}

/* ── buttons, chips ───────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 24px;border-radius:999px;font:600 var(--t7)/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;overflow:hidden;white-space:nowrap;
  transition:transform var(--d1) var(--e),color var(--d2) var(--e-soft),background-color var(--d2) var(--e-soft),
  box-shadow var(--d2) var(--e-soft)}
.btn span{position:relative;z-index:2}
.btn--red{background:var(--red);color:var(--white);box-shadow:0 16px 36px -14px var(--red-glow),
  inset 0 1px 0 rgba(255,255,255,.26)}
.btn--red::after{content:"";position:absolute;inset:0;background:var(--red-2);transform:scaleY(0);
  transform-origin:50% 100%;transition:transform var(--d2) var(--e);z-index:1}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--white{color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.btn--frost{color:var(--ink);background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.6),0 10px 30px -14px rgba(17,19,24,.35)}
@media (hover:hover){.btn--red:hover::after{transform:scaleY(1)}
  .btn--line:hover{background:var(--ink);color:var(--white)}
  .btn--white:hover{background:var(--white);color:var(--ink)}
  .btn--frost:hover{background:rgba(255,255,255,.8)}
  .btn--ink:hover{background:#000}}
.btn:active{transform:scale(.98)}
.link{display:inline-flex;align-items:center;gap:8px;font:600 var(--t7)/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:5px}
.link i{display:block;font-style:normal;transition:transform var(--d2) var(--e)}
@media (hover:hover){.link:hover i{transform:translateX(5px)}}
.chip{padding:11px 16px;border-radius:999px;font:600 var(--t8)/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule);
  transition:background-color var(--d2) var(--e-soft),color var(--d2) var(--e-soft),box-shadow var(--d2) var(--e-soft)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:none}
@media (hover:hover){.chip:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}}
.tag{display:inline-block;padding:8px 12px;border-radius:999px;font:600 11px/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;background:rgba(255,255,255,.8);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.tag--red{background:var(--red);color:var(--white);box-shadow:none}

/* ── loader — the mark writes itself, on white ────────────────────────── */
.enter{position:fixed;inset:0;z-index:300;background:var(--white);display:grid;place-items:center;overflow:hidden}
.enter__mark{position:relative;z-index:2;width:min(64vw,560px)}
.enter__mark path{fill:var(--red);fill-opacity:0;stroke:var(--red);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.enter__rule{position:absolute;z-index:2;left:50%;bottom:34%;width:min(64vw,560px);height:1px;
  transform:translateX(-50%) scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--red),transparent)}
.enter__tag{position:absolute;z-index:2;left:50%;bottom:calc(34% - 34px);transform:translateX(-50%);
  font:600 var(--t8)/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pewter);
  opacity:0;white-space:nowrap}
.enter__half{position:absolute;left:0;right:0;height:50%;background:var(--white)}
.enter__half--t{top:0}.enter__half--b{bottom:0}
@media (prefers-reduced-motion:reduce){.enter{display:none}}

/* ── the pill: hidden while the hero's own header is on screen, and while
   scrolling down; it slides in, glass and all, when the visitor scrolls up ── */
.nav{position:fixed;top:14px;left:0;right:0;z-index:80;display:flex;justify-content:center;
  padding-inline:var(--side);pointer-events:none;transform:translateY(-140%);opacity:0;
  transition:transform .55s var(--e),opacity .3s var(--e-soft)}
.nav.is-on{transform:none;opacity:1}
.nav__pill{pointer-events:auto;display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);
  padding:12px 12px 12px 24px;border-radius:999px;max-width:920px;width:100%;min-height:66px}
.nav__mark{display:flex;align-items:center;flex:0 0 auto}
.nav__mark svg{height:18px;width:auto}
.nav__mark svg path{fill:var(--red)}
.nav__links{display:flex;gap:clamp(10px,1.4vw,22px);margin-left:auto;
  font:600 var(--t8)/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.nav__links a{position:relative;padding:10px 2px;transition:color var(--d1) var(--e-soft)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d2) var(--e)}
@media (hover:hover){.nav__links a:hover{color:var(--ink)}.nav__links a:hover::after{transform:scaleX(1)}}
.nav__lang{display:flex;gap:2px;font:600 11px/1 var(--ui);letter-spacing:.06em;color:var(--pewter)}
.nav__lang b{padding:9px 8px;border-radius:999px;font-weight:600}
.nav__lang b.on{background:var(--ink);color:var(--white)}
.burger{display:none;width:42px;height:42px;border-radius:999px;place-items:center}
.burger i,.burger i::before,.burger i::after{display:block;width:15px;height:1px;background:var(--ink)}
.burger i{position:relative}.burger i::before,.burger i::after{content:"";position:absolute;left:0}
.burger i::before{top:-5px}.burger i::after{top:5px}
.navsheet{position:fixed;top:92px;left:var(--side);right:var(--side);z-index:79;border-radius:22px;padding:10px;
  background:rgba(255,255,255,.94);box-shadow:0 30px 60px -24px rgba(17,19,24,.35),var(--glass-rim)}
.navsheet a{display:block;padding:15px 16px;border-radius:14px;font:600 var(--t7)/1 var(--ui);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* ── 1 · hero card: the plateau at first light, the header in it (Rhode) ── */
.hero{min-height:clamp(620px,96svh,980px)}
/* the chalet is an object in the flow, below the title, never behind it */
/* dusk at the top for the white word, light at the bottom for the chalet */
.hero{background:radial-gradient(58% 40% at 50% 84%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#48566A 0%,#8794A4 36%,#C3CCD7 62%,#F3F5F8 100%)}
.hero__obj{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;min-height:0;padding:clamp(48px,9vh,110px) 0 0;
  --giant:clamp(34px,6.2vw,110px)}
.hero__fig{position:relative;display:flex;flex-direction:column;align-items:center;max-width:100%}
.hero__fig img{position:relative;z-index:2;max-width:min(78%,980px)}
.hero__obj img{width:auto;height:auto;max-height:100%;max-width:min(86%,1080px);object-fit:contain;
  filter:drop-shadow(0 34px 44px rgba(17,19,24,.14))}
.hero__in{position:relative;z-index:2;min-height:inherit;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:16px var(--pad) clamp(20px,3vw,40px)}
.hero__nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:56px;padding-top:0}
.hero__links{display:flex;gap:clamp(28px,3.6vw,64px);font:600 14px/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:#FFFFFF}
.hero__links--r{justify-content:flex-end}
.hero__links a{position:relative;padding:10px 0}
.hero__links a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:#FFFFFF;
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d2) var(--e)}
@media (hover:hover){.hero__links a:hover::after{transform:scaleX(1)}}
.hero__mark{display:flex;justify-content:center}
.hero__mark svg{height:30px;width:auto}
.hero__mark svg path{fill:#FFFFFF}
.burger--hero{justify-self:end;background:rgba(255,255,255,.85)}
/* the hero says one thing, centred on the morning sky, the way Apple opens a page */
.hero__t{align-self:start;justify-self:center;text-align:center;width:100%;
  padding:clamp(26px,6vh,64px) 0 clamp(14px,3vh,30px)}
/* the giant word: fitted to the card's width by the script, slate gradient; a white ghost of it
   sits above the chalet and shows through the wood (overlay blend) */
.giant{display:block;font:700 var(--giant)/.92 var(--ui);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;
  text-align:center;margin:0;position:relative;z-index:1;margin-bottom:calc(var(--g2,var(--giant)) * -.86)}
.giant__l1{display:block;font-size:var(--g1,var(--giant));line-height:.96}
.giant__l2{display:block;font-size:var(--g2,var(--giant));line-height:.86;letter-spacing:-.04em}
.giant .mask>span,.giant--ghost>span{display:block}
.giant .mask>span{background:linear-gradient(180deg,#FFFFFF 0%,#FFF8EE 55%,rgba(255,255,255,.55) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* the outline that shows through the chalet: over the white letters it coincides with their edge */
/* the ghost is masked by the chalet itself, so the outline exists only where the chalet covers the letters */
.giant--ghost{position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;pointer-events:none;margin:0;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.9);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center bottom;mask-position:center bottom}
.hero .search{margin-top:-64px;position:relative;z-index:3}
/* the measure is set on the title itself: a ch on the wrapper is a 15 px ch */
.hero .h1{font-size:clamp(34px,3.7vw,54px);letter-spacing:-.03em;line-height:1.02;max-width:22ch;margin:0 auto;color:var(--slate)}
.search{display:grid;grid-template-columns:auto auto 1fr 1fr 1fr auto;gap:6px;align-items:center;
  padding:8px;border-radius:22px}
.search__lbl{padding:0 10px 0 14px;font:600 var(--t8)/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap}
.seg{display:flex;padding:4px;border-radius:999px;background:rgba(17,19,24,.07)}
.seg button{padding:12px 18px;border-radius:999px;font:600 var(--t8)/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);transition:background-color var(--d2) var(--e-soft),
  color var(--d2) var(--e-soft)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.fld{display:grid;gap:3px;padding:10px 16px;border-radius:14px;min-width:0;
  transition:background-color var(--d1) var(--e-soft)}
.fld span{font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.fld select,.fld input{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
  width:100%;font:500 var(--t6)/1.4 var(--ui);color:var(--ink)}
@media (hover:hover){.fld:hover{background:rgba(255,255,255,.55)}}

/* ── 2 · listings: photo cards, frosted plate on each ─────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.prop{position:relative;border-radius:var(--r);overflow:hidden;background:var(--photo);aspect-ratio:4/5;
  isolation:isolate;transition:transform var(--d3) var(--e),box-shadow var(--d3) var(--e)}
.prop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--e)}
.prop .tag{position:absolute;top:14px;left:14px;z-index:3}
.prop h3{font:600 var(--t4)/1.15 var(--ui);letter-spacing:-.02em}
.prop__meta{display:flex;flex-wrap:wrap;gap:4px 12px;font:600 11px/1.4 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.prop__price{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:8px;
  border-top:1px solid var(--rule)}
.prop__price b{font:600 var(--t5)/1 var(--ui);letter-spacing:-.01em}
.prop__price span{font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .prop:hover{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(17,19,24,.4)}
  .prop:hover .prop__img{transform:scale(1.05)}}

/* ── 3 · the five poles: Rhode's product cards ────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.pole{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ice);aspect-ratio:4/5;
  padding:clamp(22px,2.4vw,32px);display:grid;grid-template-rows:auto 1fr auto;gap:18px;isolation:isolate}
.pole svg.pole__n{position:absolute;top:14px;left:18px;z-index:3;width:clamp(110px,10.5vw,150px);height:auto;overflow:visible;stroke-width:1.3}
svg.pole__n text{font:200 74px var(--ui);letter-spacing:-.04em;fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.3;
  stroke-dasharray:700;stroke-dashoffset:700;stroke-linejoin:round}
.pole--cta .pole__n{font:600 var(--t8)/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pole h3{font:600 clamp(28px,2.6vw,38px)/1.04 var(--ui);letter-spacing:-.03em}
.pole p{font-size:var(--t6);line-height:1.5;color:var(--ink-2);max-width:32ch}
.pole svg{width:38px;height:38px;stroke:var(--ink);fill:none;stroke-width:1.3;stroke-linecap:round;
  stroke-linejoin:round;align-self:center;justify-self:center}
.pole__body{display:grid;gap:10px;align-content:end}
.pole--photo{background:var(--photo);padding:0;display:block}
.pole--photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pole--photo .plate h3{font:600 clamp(24px,2.2vw,30px)/1.04 var(--ui);letter-spacing:-.03em}
.pole--photo .plate p{font-size:var(--t7);color:#4A525C;max-width:none}
.pole--cta{background:var(--ink);color:var(--white)}
.pole--cta .pole__n,.pole--cta p{color:rgba(255,255,255,.72)}
.pole--cta svg{stroke:var(--white)}

/* ── 4 · the reference card: a framed photograph, the counters strip on it ── */
.frame{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:21/9;background:var(--photo);
  margin-top:clamp(22px,3vw,40px)}
.frame>img{position:absolute;left:0;right:0;top:-14%;width:100%;height:128%;object-fit:cover;object-position:50% 55%;
  will-change:transform}
.frame .strip-g{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.56))}
.strip-g{display:grid;grid-template-columns:repeat(4,1fr);border-radius:22px;padding:8px}
.counter{padding:18px 22px;display:grid;gap:6px;border-left:1px solid rgba(17,19,24,.12)}
.counter:first-child{border-left:0}
.counter b{font:600 clamp(30px,3.2vw,44px)/1 var(--ui);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.counter>span{font:600 11px/1.5 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* ── 5 · estimation: an ice card, a white form ────────────────────────── */
.est-card{min-height:clamp(560px,78svh,760px)}
.est__img{position:absolute;inset:0}
.est__img img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.est{position:relative;z-index:2;min-height:inherit;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(28px,5vw,80px);align-items:start;padding:var(--pad)}
.est__t{display:grid;gap:20px;max-width:560px;color:var(--ink);position:relative;z-index:1}
.est::before{content:"";position:absolute;left:0;top:0;width:58%;height:78%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 32% 32%,rgba(255,255,255,.82),rgba(255,255,255,0) 72%)}
.est__t .h2{color:var(--ink)}.est__t .eyebrow{color:var(--slate)}
.est__t .h2 em{color:#5B6470}
.est__t .lede{color:var(--ink);font-size:18px}
.ticks{display:grid;gap:10px}
.tick{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:var(--t6);color:var(--ink-2)}
.tick i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--rule);margin-top:2px}
.tick i::after{content:"";width:7px;height:4px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:translateY(-1px) rotate(-45deg)}
.est__form{padding:10px;border-radius:24px;display:grid;gap:6px;color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.26))}
.est__row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.est__fld{padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.56);display:grid;gap:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.est__fld span{font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.est__fld input,.est__fld select{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
  width:100%;font:500 var(--t5)/1.4 var(--ui);color:var(--ink)}
.est__out{padding:20px 22px;border-radius:16px;display:grid;gap:8px;background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(160,23,31,.18)}
.est__out b{font:600 clamp(28px,3vw,42px)/1 var(--ui);letter-spacing:-.035em;color:var(--red-2)}
.est__out>span{font:600 11px/1.5 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}

/* ── 6 · team: three cards on white ───────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.person{padding:clamp(24px,2.6vw,34px);border-radius:var(--r);background:var(--ice);display:grid;gap:16px;
  min-width:0;align-content:start}
.person--photo{grid-column:span 2;padding:0;position:relative;overflow:hidden;background:var(--photo);min-height:540px;isolation:isolate}
.person--photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.person--photo .plate p,.person--photo .plate a,.person--photo .plate h3{color:var(--anthra)}
.person--photo .plate{left:14px;right:auto;bottom:14px;max-width:min(560px,calc(100% - 28px))}
.person--photo .plate__bg{aspect-ratio:auto;height:calc(100% + 28px);width:auto;min-width:calc(100% + 28px)}
.person--photo .plate__in{gap:10px}
.person--photo .plate h3{font:600 var(--t4)/1.15 var(--ui);letter-spacing:-.02em}
.person--photo .plate p{font:600 11px/1.55 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.person--photo .plate a{font:500 var(--t7)/1.55 var(--ui);display:block}
.person__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.person__ini{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  font:600 20px/1 var(--ui);letter-spacing:-.02em;color:var(--white);
  background:linear-gradient(160deg,#2C3037,#111318);box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.person h3{font:600 var(--t4)/1.15 var(--ui);letter-spacing:-.02em}
.person p{font:600 11px/1.55 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.person a{font:500 var(--t7)/1.55 var(--ui);color:var(--ink-2);display:block;overflow-wrap:anywhere}
.langs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.langs span{padding:9px 13px;border-radius:999px;font:600 11px/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-2)}

/* ── 7 · network card ─────────────────────────────────────────────────── */
.net{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px);align-items:center}
.map{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--white)}
.map svg{width:100%;height:100%}
.map .dot{fill:var(--ink);opacity:.85}
.map .dot--home{fill:var(--red)}
.map .halo{fill:none;stroke:var(--red);stroke-width:.6;opacity:0}
.map .arc{fill:none;stroke:rgba(17,19,24,.28);stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.map .lbl{font:600 2.7px var(--ui);letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-2)}
.map .lbl--home{fill:var(--ink);font-weight:700}
.markets{display:flex;flex-wrap:wrap;gap:6px}
.markets span{padding:10px 14px;border-radius:999px;font:600 11px/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);background:var(--white)}

/* ── 8 · contact card, footer card ────────────────────────────────────── */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.hours{display:grid;border-top:1px solid var(--rule)}
.hours div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);
  font:500 var(--t7)/1.4 var(--ui);color:var(--pewter)}
.hours div b{color:var(--ink);font-weight:500}
.addr{display:grid;gap:4px;font-size:var(--t6);color:var(--ink-2)}
.addr a{color:var(--ink)}
/* the mark is the footer's ground: huge, smoky, behind the links, cut by the card's edge (realtis) */
.foot{position:relative;padding:clamp(28px,4vw,56px) var(--pad) clamp(96px,11vw,160px);overflow:hidden}
.foot__mark{position:absolute;left:50%;bottom:-4%;width:88%;transform:translateX(-50%);z-index:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 45%,rgba(0,0,0,.55) 80%,transparent 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 45%,rgba(0,0,0,.55) 80%,transparent 100%)}
.foot__mark svg{width:100%;height:auto}
.foot__mark svg path{fill:rgba(160,23,31,.30)}
.foot__in{position:relative;z-index:1}
.foot__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,2.6vw,44px);
  padding:0 0 clamp(28px,3.4vw,44px)}
.foot__g b{display:block;font:600 var(--t8)/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--pewter);margin-bottom:12px}
.foot__g li{padding:5px 0;font-size:var(--t6);color:var(--ink-2)}
@media (hover:hover){.foot__g a:hover{color:var(--ink)}}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:18px;border-top:1px solid var(--rule);
  font:500 var(--t8)/1.5 var(--ui);color:var(--pewter)}

/* ── reveal states ─────────────────────────────────────────────────────── */
html.js .rv:not(.in){opacity:0}
/* (the old [data-view]{display:block} rule lived here: it came after .stack and
   silently turned the grid back into a block — every gap between the big cards
   was lost since v2. Never again.) */

@media (max-width:1100px){
  .nav__links,.hero__links{display:none}.burger{display:grid}
  .hero__nav{grid-template-columns:1fr auto 1fr}
  .hero__nav>.hero__mark{grid-column:2}
  .nav__pill{max-width:none;min-height:60px;padding:9px 9px 9px 18px}
  .search{grid-template-columns:1fr 1fr}
  .search__lbl,.search .seg,.search .btn{grid-column:1/-1}
  .grid,.bento,.people{grid-template-columns:repeat(2,1fr)}
  .est{grid-template-columns:1fr}.est-card{min-height:0}
  .net,.contact{grid-template-columns:1fr}
  .strip-g{grid-template-columns:repeat(2,1fr)}
  .counter:nth-child(3){border-left:0}
  .frame{aspect-ratio:4/3}
}
@media (max-width:640px){
  :root{--r:14px}
  .strip{padding:11px 16px;font-size:11px}
  .grid,.bento,.people{grid-template-columns:1fr}
  .person--photo{grid-column:auto;min-height:360px}.person__pair{grid-template-columns:1fr}
  .search{grid-template-columns:1fr}
  .est__row{grid-template-columns:1fr}.est{padding:22px}.est__form{padding:8px}.est__img img{object-position:50% 100%}
  .hero{min-height:clamp(520px,86svh,760px)}
  .hero__in{padding:14px 18px 18px}
  /* on a phone the photo fills only the top two thirds, so the chalet stays above the search bar */
  .hero{min-height:0}
  .hero__obj{padding:24px 0 0;min-height:0;--giant:11.4vw}
  .hero__fig img{max-width:100%;max-height:none}
  .hero .search{margin-top:-24px}
  .giant{margin-bottom:calc(var(--g2) * -.8)}
  .hero__t{padding:40px 0 40px}
  .hero__mark svg{height:26px}
  .frame{aspect-ratio:4/5}
  .strip-g{grid-template-columns:repeat(2,1fr);padding:6px}
  .counter{padding:14px 14px}.counter b{font-size:26px}
  .foot{padding-bottom:88px}.foot__mark{width:96%}
}
@media (pointer:coarse){
  .chip,.seg button{min-height:46px}.nav__links a,.hero__links a{padding:14px 2px}
  .link{min-height:44px;padding-block:12px}.peek{display:none}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv:not(.in){opacity:1}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── second motion layer ─────────────────────────────────────────────── */
.gl{display:inline-block}
.lens-host{position:relative}
.lens{position:absolute;left:0;top:0;width:240px;height:240px;border-radius:50%;z-index:6;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%);will-change:transform;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.06));
  box-shadow:0 30px 70px -30px rgba(17,19,24,.5),inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55)}
.lens::before{opacity:.6}
.langs--marq{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);max-width:100%;width:100%}
.marq{display:flex;width:max-content;animation:marq var(--t,20s) linear infinite}
.marq__g{display:flex;gap:6px;padding-right:6px;flex:0 0 auto}
@keyframes marq{to{transform:translate3d(calc(-1 * var(--w,600px)),0,0)}}
.strip{position:relative;overflow:hidden}
.strip::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation:shine 9s ease-in-out infinite}
@keyframes shine{0%,12%{left:-40%}40%,100%{left:120%}}
@media (prefers-reduced-motion:reduce){.marq{animation:none}.strip::after{animation:none}}

/* ── v7 motion hooks ─────────────────────────────────────────────────── */
.strip__roll{display:block;position:relative;height:1.3em;overflow:hidden}
.strip__roll>span{position:absolute;left:0;right:0;top:0;display:block;transform:translateY(110%);opacity:0}
.strip__roll>span.on{transform:none;opacity:1}
.filters{position:relative;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding-top:6px}
.filters__ind{position:absolute;top:6px;left:0;height:calc(100% - 6px);width:0;border-radius:999px;background:var(--ink);z-index:0;opacity:0}
.filters .chip{position:relative;z-index:1;transition:color .35s var(--e-soft),box-shadow .35s var(--e-soft)}
/* the active chip keeps its own ink ground, but only once the indicator has slid under it */
.filters .chip{transition:background-color 0s linear 0s,color .3s var(--e-soft),box-shadow .3s var(--e-soft)}
.filters .chip[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:none;transition-delay:.5s,0s,0s}
.peaks{width:min(440px,70%);height:auto;margin:0 auto 4px;stroke:var(--pewter);fill:none;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.peaks path{stroke-dasharray:1;stroke-dashoffset:1}
.counter{position:relative}
.ring{position:absolute;left:6px;top:8px;width:132px;height:60px;pointer-events:none;stroke:var(--red);fill:none;stroke-width:1.4;stroke-linecap:round}
.ring path{stroke-dasharray:1;stroke-dashoffset:1}
.odo{display:inline-flex;overflow:hidden;height:1em;line-height:1;vertical-align:top}
.odo__d{display:inline-block;position:relative;height:1em;width:.62em;text-align:center}
.odo__d>i{display:block;height:1em;font-style:normal}
.map .dot{transform-box:fill-box;transform-origin:center}
.prop__img,.person--photo>img,.pole--photo>img{will-change:clip-path}

.person--photo .plate h3,.person--photo .plate p,.person--photo .plate a{color:#4A525C}

@media (max-width:640px){.strip__roll{height:2.6em}}

/* ── v8 drawn-motion hooks ─────────────────────────────────────────────── */
.eb-line{display:block;height:1px;width:0;background:var(--red);opacity:.8;margin:12px auto 0}
.card__in .eb-line,.est__t .eb-line,.net .eb-line,.contact .eb-line{margin-left:0}
.plate__draw{position:absolute;inset:0;z-index:4;pointer-events:none;fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.2;overflow:visible}
.plate__draw rect{stroke-dasharray:1;stroke-dashoffset:1}
.person__ini{position:relative}
.ini-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);fill:none;stroke:var(--red);stroke-width:1.2;overflow:visible}
.ini-ring circle{stroke-dasharray:1;stroke-dashoffset:1}
.tick i{position:relative}.tick i::after{display:none}
.tick__svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tick__svg polyline{stroke-dasharray:1;stroke-dashoffset:1}
.out-line{display:block;height:2px;width:0;background:var(--red);margin-top:8px;border-radius:2px}
.nav__pill{position:relative;overflow:hidden}
.nav__prog{position:absolute;left:28px;right:28px;bottom:5px;height:2px;border-radius:2px;background:var(--red);opacity:.85;
  transform:scaleX(0);transform-origin:0 50%}
.swoosh-host{position:relative;display:inline-block}
.swoosh{position:absolute;left:0;bottom:-10px;width:100%;height:16px;fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;overflow:visible}
.swoosh path{stroke-dasharray:1;stroke-dashoffset:1}
.frame>img{will-change:clip-path}
@media (hover:hover){.prop:hover .prop__price span{color:var(--red)}}

/* the ghost is the title's clone: strip the gradient fill so only the stroke remains */
.giant--ghost .gl,.giant--ghost .mask>span{color:transparent;-webkit-text-stroke:inherit;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.giant--ghost .mask{overflow:visible}

/* ── v9 ──────────────────────────────────────────────────────────────── */
.eb-line,.swoosh,.ring,.nav__prog,.out-line,.ini-ring,.plate__draw{display:none!important}
.sec__h--tight{gap:8px}.sec__h--tight .peaks{margin-bottom:10px}.sec__h--tight .lede{margin-top:6px}
/* glass chips for the filters */
.filters .chip{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,243,247,.7));color:var(--ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(17,19,24,.06),0 8px 22px -14px rgba(17,19,24,.25)}
.filters .chip[aria-pressed="true"]{background:var(--ink);color:var(--white)}
/* listing cards: a landscape photograph, the facts beneath */
.prop{aspect-ratio:auto;background:var(--ice);display:grid;grid-template-rows:auto 1fr}
.prop__ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--photo)}
.prop__ph .prop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prop .tag{top:14px;left:14px}
.prop__body{padding:22px 24px 24px;display:grid;gap:10px;align-content:start}
.prop__body h3{font:500 var(--t4)/1.2 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.prop__body .prop__meta{color:var(--pewter)}
.prop__body .prop__price{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.prop__body .prop__price b{color:var(--ink);font-weight:600}
.prop__body .prop__price span{color:var(--pewter)}
@media (hover:hover) and (pointer:fine){.prop:hover .prop__price span{color:var(--ink)}}
/* the five services stack as you scroll */
.stackx{position:relative}
.scard{position:sticky;top:calc(var(--gut) + 56px + var(--i) * 12px);height:min(62vh,560px);margin-bottom:var(--gut);
  border-radius:var(--r);background:var(--ice);overflow:hidden;isolation:isolate;
  box-shadow:0 -12px 40px -28px rgba(17,19,24,.35);will-change:transform}
.scard:last-child{margin-bottom:0}
.scard--white{background:var(--white);box-shadow:0 -12px 40px -28px rgba(17,19,24,.35),inset 0 0 0 1px var(--rule)}
.scard--sky{background:var(--sky)}
.scard--dusk{background:linear-gradient(180deg,#48566A 0%,#68758A 100%);color:#fff}
.scard--dusk .eyebrow,.scard--dusk p{color:rgba(255,255,255,.82)}.scard--dusk h3{color:#fff}
.scard__n{position:absolute;right:-.04em;bottom:-.26em;z-index:0;font:700 clamp(180px,26vw,380px)/1 var(--ui);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(58,65,73,.22);pointer-events:none;user-select:none}
.scard--dusk .scard__n{-webkit-text-stroke:1.5px rgba(255,255,255,.28)}
.scard__in{position:relative;z-index:1;height:100%;display:grid;align-content:end;gap:14px;max-width:660px;padding:clamp(26px,4vw,56px)}
.scard__in h3{font:600 clamp(26px,3vw,44px)/1.06 var(--ui);letter-spacing:-.03em;color:var(--ink)}
.scard__in p{font-size:var(--t5);line-height:1.5;color:var(--ink-2);max-width:52ch}
.scard__tags{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.scard__tags span{padding:9px 13px;border-radius:999px;font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(17,19,24,.08);color:var(--ink-2)}
.scard--dusk .scard__tags span{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* the team: three portraits */
.person--card{padding:0;overflow:hidden;background:var(--ice)}
.person__ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ice-2)}
.person__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.02)}
.person__body{padding:22px 24px 26px;display:grid;gap:10px}
.person__body h3{font:600 var(--t4)/1.2 var(--ui);letter-spacing:-.02em}
.person__body p{font:600 11px/1.5 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.person__c{display:grid;gap:2px;padding-top:6px;border-top:1px solid var(--rule)}
.person__c a{font:500 var(--t7)/1.7 var(--ui);color:var(--ink-2);overflow-wrap:anywhere}
/* sub-menus in glass */
.mi{position:relative;display:inline-block}
.dd{position:absolute;top:calc(100% + 6px);left:-12px;min-width:240px;padding:8px;border-radius:16px;z-index:90;
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s var(--e-soft),transform .35s var(--e);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.78));color:var(--ink);text-align:left}
.mi:hover .dd,.mi:focus-within .dd{opacity:1;transform:none;pointer-events:auto}
.dd a{display:block;padding:10px 12px;border-radius:10px;font:600 12px/1.2 var(--ui);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;transition:background-color .2s}
.dd a:hover{background:rgba(17,19,24,.06)}
.hero__links .mi>a,.nav__links .mi>a{display:inline-block}
.hero__links--r .mi .dd{left:auto;right:-12px}
.nav__links .mi:nth-last-child(-n+3) .dd{left:auto;right:-12px}
.navsheet b{display:block;padding:12px 16px 4px;font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--pewter)}
@media (max-width:1100px){.scard{height:auto;min-height:56vh}.scard__n{font-size:clamp(140px,30vw,260px)}}
@media (max-width:640px){.scard{top:calc(var(--gut) + 8px + var(--i) * 10px)}.scard__in{padding:24px}.prop__body{padding:18px 20px 20px}}

/* v9 fixes: a dropdown only filters while open; the dusk card's type stays white */
.dd.glass{backdrop-filter:none;-webkit-backdrop-filter:none}
.mi:hover .dd.glass,.mi:focus-within .dd.glass{backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.scard--dusk .scard__in p{color:#FFFFFF}
.scard--dusk .scard__in .eyebrow{color:rgba(255,255,255,.9)}
.scard--dusk .scard__tags span{background:rgba(17,19,24,.30);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* ── v10 ─────────────────────────────────────────────────────────────── */
/* the listing card's body is glass where it bites the photograph */
.prop{overflow:visible;background:none;transform-style:preserve-3d}
.prop__ph{border-radius:var(--r) var(--r) 0 0;z-index:0}
.prop__body{position:relative;overflow:hidden;z-index:1;margin-top:-46px;border-radius:14px 14px var(--r) var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.58) 0,rgba(255,255,255,.86) 46px,var(--ice) 46px,var(--ice) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 18px 40px -22px rgba(17,19,24,.35)}
.prop__blur{position:absolute;left:0;width:100%;height:auto;aspect-ratio:3/2;bottom:calc(100% - 46px);object-fit:cover;
  filter:blur(22px) saturate(1.4) brightness(1.06);transform:scale(1.06);transform-origin:50% 100%;z-index:0;pointer-events:none}
.prop__body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 60% at var(--mx,20%) var(--my,0%),rgba(255,255,255,.75),rgba(255,255,255,0) 60%)}
.prop__body::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:0;pointer-events:none;
  background:var(--metal);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
.prop__body>*:not(.prop__blur){position:relative;z-index:1}
.prop__price span{display:inline-flex;align-items:center;gap:6px;transition:color .3s var(--e-soft)}
.prop__price span i{display:inline-block;font-style:normal;transition:transform .45s var(--e)}
.prop:hover .prop__price span{color:var(--ink)}.prop:hover .prop__price span i{transform:translateX(6px)}
.prop__ph .prop__img{transition:transform 1.1s var(--e)}
/* the services: frosted glass over a landscape, the covered cards stop filtering */
.stackx__bg{position:sticky;top:var(--gut);height:calc(100vh - var(--gut) * 2);margin-bottom:calc(-100vh + var(--gut) * 2);
  border-radius:var(--r);overflow:hidden;z-index:0}
.stackx__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.scard{z-index:1;height:auto;min-height:min(62vh,560px);
  background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.50));
  box-shadow:0 -12px 40px -28px rgba(17,19,24,.35),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55)}
.scard.on{backdrop-filter:blur(22px) saturate(1.5) brightness(1.03);-webkit-backdrop-filter:blur(22px) saturate(1.5) brightness(1.03)}
.scard--white{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66))}
.scard--sky{background:linear-gradient(180deg,rgba(217,225,235,.72),rgba(217,225,235,.56))}
.scard--dusk{background:linear-gradient(180deg,rgba(72,86,106,.94),rgba(104,117,138,.94))}
.scard__n{-webkit-text-stroke:1.5px rgba(58,65,73,.3)}
.scard__tags span{background:rgba(255,255,255,.62)}
@media (max-width:640px){.stackx__bg{display:none}.scard{background:var(--ice)}.scard--white{background:var(--white)}.scard--sky{background:var(--sky)}}

.scard--dusk .scard__in h3{color:#FFFFFF}
/* the landscape behind the stack covers the stacked area only, not the strip below the last card */
.stackx__bg{height:calc(min(62vh,560px) + 120px);margin-bottom:calc(-1 * (min(62vh,560px) + 120px))}

/* ── v11 ─────────────────────────────────────────────────────────────── */
/* listing cards: the clean card again (photo, ice body); the tilt and the arrow stay */
.prop{overflow:hidden;background:var(--ice)}
.prop__ph{border-radius:0}
.prop__body{margin-top:0;border-radius:0;background:var(--ice);box-shadow:none;overflow:visible}
.prop__blur,.prop__body::before,.prop__body::after{display:none}
/* the stack: five identical glass cards over a soft gradient, a drawn pictogram on each */
.stackx__bg{background:linear-gradient(180deg,#DDE4EC 0%,#EEF1F5 55%,#F7F8FA 100%)}
.scard{height:min(62vh,560px);min-height:0}
.scard__pic{position:absolute;right:clamp(28px,7vw,110px);top:50%;transform:translateY(-52%);width:clamp(170px,19vw,250px);height:auto;z-index:1;
  fill:none;stroke:rgba(58,65,73,.72);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.scard__pic path,.scard__pic circle{stroke-dasharray:1;stroke-dashoffset:1}
.scard__pic text{fill:rgba(58,65,73,.75);stroke:none;font:600 20px var(--ui);letter-spacing:.04em;opacity:0}
.scard--dusk .scard__pic{stroke:rgba(255,255,255,.88)}.scard--dusk .scard__pic text{fill:rgba(255,255,255,.9)}
.scard__pic [data-key],.scard__pic [data-bell]{transform-box:fill-box;transform-origin:center}
.scard__in{max-width:min(620px,58%)}
@media (max-width:1100px){.scard__in{max-width:min(620px,64%)}.scard__pic{width:clamp(140px,22vw,200px);right:24px}}
@media (max-width:640px){.scard{height:auto;min-height:56vh}.scard__in{max-width:none;padding-top:150px}
  .scard__pic{top:22px;right:22px;transform:none;width:110px}}

/* ── v12 ─────────────────────────────────────────────────────────────── */
.stackx__bg{display:none}
.stackx{padding-bottom:34vh}                 /* the last card sticks as long as the others did */
.scard__pic{display:none}
.scard__in{max-width:min(560px,46%)}
.scard{background:linear-gradient(180deg,rgba(242,244,247,.96),rgba(236,239,243,.96))}
.scard--white{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,249,251,.98))}
.scard.on{backdrop-filter:none;-webkit-backdrop-filter:none}   /* nothing behind the stack to blur any more */
/* the vignette: between the text and the number */
.vig{position:absolute;left:50%;top:50%;transform:translate(0,-56%);width:clamp(200px,19vw,268px);height:auto;z-index:1;overflow:visible}
.vig .st{fill:none;stroke:rgba(58,65,73,.78);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vig .dsh{stroke-dasharray:1;stroke-dashoffset:1}
.vig .d{fill:rgba(58,65,73,.55)}
.vig text{font:600 12px var(--ui);fill:rgba(58,65,73,.85);letter-spacing:.04em}
.vig .win{fill:#D9A441;opacity:0}
.vig .tag{transform-box:fill-box;transform-origin:center;opacity:0}
.vig .pin{transform-box:fill-box;transform-origin:50% 100%;opacity:0}
.vig .md{opacity:.16}.vig .md.on{opacity:.16}
.vig .pillbg{fill:rgba(255,255,255,.9);stroke:rgba(58,65,73,.25)}.vig .pill{opacity:0}
.vig .wd{font-size:11px;fill:rgba(58,65,73,.6)}
.vig .cd{opacity:.35}
.vig .bar{fill:rgba(58,65,73,.12);transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.vig .key{transform-box:fill-box;transform-origin:center}
.vig .tile{fill:rgba(58,65,73,.16);transform-box:fill-box;transform-origin:center}
.vig .rl{fill:rgba(58,65,73,.7)}.vig .roller{transform-box:fill-box;transform-origin:center}
.vig .bub{fill:rgba(58,65,73,.75)}
.vig .ld{opacity:0;transform-box:fill-box;transform-origin:center}.vig .ll{opacity:0}
.vig .bell{transform-box:fill-box;transform-origin:50% 100%}
.vig .spark{fill:rgba(160,23,31,.9)}.vig .orbit{transform-box:fill-box;transform-origin:160px 172px;opacity:0}
.scard--dusk .vig .st{stroke:rgba(255,255,255,.88)}.scard--dusk .vig .d{fill:rgba(255,255,255,.8)}
.scard--dusk .vig text{fill:rgba(255,255,255,.92)}.scard--dusk .vig .wd{fill:rgba(255,255,255,.7)}
@media (max-width:1100px){.vig{width:clamp(170px,22vw,220px);left:54%}}
@media (max-width:640px){.scard__in{max-width:none;padding-top:200px}.vig{left:auto;right:16px;top:16px;transform:none;width:170px}}

.scard--dusk{background:linear-gradient(180deg,rgba(72,86,106,.98),rgba(104,117,138,.98))}

.scard{background:linear-gradient(180deg,#F2F4F7,#ECEFF3)}
.scard--white{background:linear-gradient(180deg,#FFFFFF,#F8F9FB)}
.scard--dusk{background:linear-gradient(180deg,#48566A,#68758A)}
.vig{width:clamp(230px,22vw,310px);left:49%;transform:translate(0,-55%)}
.vig .key{transform-box:fill-box;transform-origin:center}
.vig .tag text{fill:#fff}
@media (max-width:1100px){.vig{width:clamp(180px,24vw,240px)}}

.stackx{padding-bottom:20vh}

@media (max-width:640px){.vig{left:auto;right:16px;top:14px;transform:none;width:160px}.scard__in{padding-top:190px}}

/* ── v13 · listings: a white card that really tilts ──────────────────── */
.grid{gap:calc(var(--gut) + 4px)}
.prop{overflow:visible;isolation:auto;background:var(--white);border-radius:var(--r);aspect-ratio:auto;
  transform-style:preserve-3d;will-change:transform;
  box-shadow:0 0 0 1px var(--rule),0 14px 34px -22px rgba(17,19,24,.22);
  transition:box-shadow .55s var(--e-soft)}
.prop.is-tilt{box-shadow:0 0 0 1px rgba(17,19,24,.06),0 44px 70px -30px rgba(17,19,24,.38),0 12px 24px -16px rgba(17,19,24,.16)}
@media (hover:hover) and (pointer:fine){.prop:hover{transform:none;box-shadow:0 0 0 1px rgba(17,19,24,.06),0 44px 70px -30px rgba(17,19,24,.38),0 12px 24px -16px rgba(17,19,24,.16)}
  .prop:hover .prop__img{transform:none}}
.prop__ph{border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--ice);aspect-ratio:3/2;z-index:0}
.prop__ph .prop__img{transition:none;will-change:transform}
.prop__glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(60% 70% at var(--gx,50%) var(--gy,40%),rgba(255,255,255,.34),rgba(255,255,255,0) 70%)}
.prop .tag{z-index:3}
.prop__body{position:relative;z-index:1;margin-top:0;padding:22px 24px 24px;border-radius:0 0 var(--r) var(--r);
  background:none;box-shadow:none;overflow:visible;transform-style:preserve-3d;gap:10px}
.prop__body>*{position:relative;will-change:transform}
.prop__body h3{font:500 var(--t4)/1.25 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.prop__body .prop__meta{color:var(--pewter)}
.prop__body .prop__price{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.prop__body .prop__price b{color:var(--ink)}
.prop__body .prop__price span{color:var(--pewter);position:relative;padding-bottom:3px}
.prop__body .prop__price span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--e)}
.prop.is-tilt .prop__price span{color:var(--ink)}.prop.is-tilt .prop__price span::after{transform:scaleX(1)}
.prop.is-tilt .prop__price span i{transform:translateX(6px)}
@media (max-width:640px){.prop__body{padding:18px 20px 20px}}

/* ── v13 · services: taller cards, two columns, the object between text and number ── */
.vig{display:none}
.stackx{padding-bottom:26vh}
.scard{height:auto;min-height:clamp(560px,74vh,720px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;overflow:hidden}
.scard__in{height:auto;max-width:none;align-content:center;gap:16px;padding:clamp(28px,4.4vw,64px)}
.scard__in h3{font-size:clamp(28px,3.1vw,46px)}
.scard__in p{max-width:44ch}
.scard__fig{position:relative;z-index:1;margin:0;height:100%;display:grid;align-items:center;justify-items:start;
  padding:clamp(20px,3vw,44px) 0 clamp(20px,3vw,44px) clamp(0px,1vw,16px)}
.scard__fig img{display:block;width:min(100%,clamp(300px,34vw,500px));height:auto;will-change:transform;
  transform-style:preserve-3d}
.scard__n{z-index:0}
@media (max-width:1100px){.scard__fig img{width:min(100%,clamp(240px,36vw,380px))}}
@media (max-width:760px){.scard{grid-template-columns:1fr;min-height:0}
  .scard__fig{height:auto;justify-items:center;padding:8px 24px 0;order:-1}.scard__fig img{width:min(62vw,300px)}
  .scard__in{padding:8px 24px 28px}.scard__n{font-size:clamp(120px,30vw,200px)}}

/* ── v14 · listings: an ice band under white cards, the price as frosted glass on the photo ── */
.sec--band{background:linear-gradient(180deg,#ECF0F5 0%,#F4F6F9 100%);border-radius:var(--r);
  padding:clamp(40px,5.5vw,80px) var(--pad) clamp(32px,4vw,56px);box-shadow:inset 0 0 0 1px rgba(17,19,24,.035)}
.prop{box-shadow:0 0 0 1px rgba(17,19,24,.05),inset 0 1px 0 #FFFFFF,0 24px 48px -30px rgba(17,19,24,.30)}
.prop.is-tilt{box-shadow:0 0 0 1px rgba(17,19,24,.05),inset 0 1px 0 #FFFFFF,0 56px 84px -36px rgba(17,19,24,.44),0 12px 24px -16px rgba(17,19,24,.14)}
@media (hover:hover) and (pointer:fine){.prop:hover{box-shadow:0 0 0 1px rgba(17,19,24,.05),inset 0 1px 0 #FFFFFF,0 56px 84px -36px rgba(17,19,24,.44),0 12px 24px -16px rgba(17,19,24,.14)}}
.prop__ph{container-type:inline-size}
.prop__price-g{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;padding:11px 15px;border-radius:999px;
  overflow:hidden;isolation:isolate;color:var(--ink);font:600 15px/1 var(--ui);letter-spacing:-.01em;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.46));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px -10px rgba(17,19,24,.4)}
.prop__price-g .prop__blur{display:block;position:absolute;left:-14px;bottom:-14px;width:100cqw;height:calc(100cqw * 2 / 3);object-fit:cover;
  transform:scale(1.04);z-index:-1;opacity:1;aspect-ratio:auto;filter:none}
.prop__price-g b{position:relative;z-index:1;font-weight:600}
.prop__body .prop__price{justify-content:space-between}
.prop__kind{font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
@media (max-width:640px){.sec--band{padding:32px 18px 28px;border-radius:14px}}

/* ── v14 · services: the object rig ─────────────────────────────────── */
.scard__fig{transform-style:preserve-3d;will-change:transform}
.scard__obj{position:relative;width:min(100%,clamp(300px,34vw,500px));transform-style:preserve-3d;will-change:transform}
.scard__obj img{display:block;width:100%;height:auto;position:relative;z-index:1;will-change:transform}
.scard__fig img{width:100%}
.scard__shadow{position:absolute;left:8%;right:8%;bottom:1%;height:18%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(17,19,24,.30),rgba(17,19,24,0) 72%)}
.scard--dusk .scard__shadow{background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 72%)}
@media (max-width:1100px){.scard__obj{width:min(100%,clamp(240px,36vw,380px))}}
@media (max-width:760px){.scard__obj{width:min(62vw,300px)}}

/* ── v14 · estimation: the photo is placed by estFit(), the peaks at 66 % ── */
.est__img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;object-position:50% 50%;max-width:none}

/* ── v14 · the languages: a dropdown in the pill, a row in the sheet ── */
.nav__lang{display:none}
.mi--lang{margin-left:4px}
.lang__btn{display:inline-flex;align-items:center;gap:7px;padding:9px 11px 9px 13px;border-radius:999px;border:0;cursor:pointer;
  background:var(--ink);color:#FFFFFF;font:600 11px/1 var(--ui);letter-spacing:.06em}
.lang__btn i{display:block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-1.5px) rotate(45deg);transition:transform .35s var(--e)}
.mi--lang.open .lang__btn i,.mi--lang:hover .lang__btn i{transform:translateY(1.5px) rotate(225deg)}
.dd--lang{left:auto;right:-4px;min-width:172px}
.dd--lang a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
.dd--lang a[aria-current="true"]{background:rgba(17,19,24,.06);font-weight:600}
.dd--lang a[aria-current="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.mi--lang.open .dd{opacity:1;transform:none;pointer-events:auto}
.mi--lang.open .dd.glass{backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.sheet__lang{display:flex;gap:6px;padding:6px 8px 10px}
.navsheet .sheet__lang a{display:inline-block;padding:11px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule)}
.navsheet .sheet__lang a[aria-current="true"]{background:var(--ink);color:#FFFFFF;box-shadow:none}
.prop__price-g .prop__blur{max-width:none;max-height:none}   /* the host reset caps img at 100 % of the pill: the copy must span the photo */
/* the pill's dropdowns were clipped by the pill itself: the glass is already rounded by border-radius, overflow can stay visible */
.nav__pill{overflow:visible;clip-path:none}
/* the tray is a wide, flat object: it needs more width to weigh as much as the others */
.scard--dusk .scard__obj{width:min(100%,clamp(340px,40vw,600px))}
@media (max-width:1100px){.scard--dusk .scard__obj{width:min(100%,clamp(280px,42vw,440px))}}
/* phone: the float lifts the object 10 px, the card clips at its edge — give it room */
@media (max-width:760px){.scard__fig{padding-top:22px}.scard--dusk .scard__obj{width:min(72vw,340px)}}

/* ── v15 · the entrance: the mark alone, « depuis 1996 » under it ────── */
.enter__rule{display:none}
.enter__tag{bottom:auto;top:calc(50% + min(7vw,64px));transform:translate(-50%,8px);color:var(--pewter);font:600 12px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;opacity:0}

/* ── v15 · the price on the photo: clear glass, white type ───────────── */
.prop__price-g{color:#FFFFFF;padding:11px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.18) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.25),0 10px 24px -10px rgba(17,19,24,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.42),0 0 16px rgba(0,0,0,.25)}

/* ── v15 · the objects: the WebGL quad over the image ────────────────── */
.scard__obj.has-gl img{opacity:0}
.scard__gl{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;will-change:transform}

/* ── v15 · the property page ─────────────────────────────────────────── */
.stack.is-page>section:not(.pv){display:none}
.nav.is-page{transform:none;opacity:1}
.pv{display:grid;gap:clamp(28px,4vw,56px);padding-top:clamp(84px,9vw,104px)}
.pv__in{display:grid;gap:clamp(30px,4.2vw,60px)}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.crumbs a{color:var(--pewter);text-decoration:none}.crumbs a:hover{color:var(--ink)}.crumbs span{color:var(--ink)}.crumbs i{font-style:normal;opacity:.5}
.crumbs__back{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--ink)!important;padding:10px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule)}
.crumbs__back i{opacity:1;transition:transform .35s var(--e)}.crumbs__back:hover i{transform:translateX(-4px)}
.pv__head{display:grid;gap:16px;max-width:72ch}
.pv__title{font:600 clamp(30px,4.2vw,58px)/1.04 var(--ui);letter-spacing:-.035em;color:var(--ink);text-wrap:balance;margin:0}
.pv__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
.pv__price b{font:600 clamp(24px,2.6vw,34px)/1 var(--ui);letter-spacing:-.03em;color:var(--ink)}
.pv__price span{font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.pvg{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;height:clamp(360px,54vw,680px)}
.pvg__ph{position:relative;overflow:hidden;border-radius:var(--r);border:0;padding:0;background:var(--ice);cursor:zoom-in;display:block;width:100%;height:100%;min-height:0}
.pvg__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--e)}
.pvg__ph:hover img{transform:scale(1.04)}
.pvg__ph--0{grid-row:1/3}
.pvg__ph--3,.pvg__ph--4{display:none}
.pvg--n1{grid-template-columns:1fr}.pvg--n2 .pvg__ph--1{grid-row:1/3}
.pvg__all{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border-radius:999px;border:0;cursor:pointer;
  font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 24px -12px rgba(17,19,24,.45)}
.pvg__all i{position:relative;width:14px;height:11px;border:1.5px solid currentColor;border-radius:2px}
.pvg__all i::after{content:"";position:absolute;left:2px;top:2px;width:3px;height:3px;border-radius:50%;background:currentColor}
.pv__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.62fr);gap:clamp(28px,4vw,64px);align-items:start}
.pv__main{display:grid;gap:clamp(34px,4vw,56px)}
.pv__desc,.pv__facts{display:grid;gap:14px}
.pv__lede{font:500 clamp(19px,1.7vw,24px)/1.42 var(--ui);letter-spacing:-.015em;color:var(--ink);max-width:56ch;margin:0}
.pv__facts dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.pv__facts dl>div{padding:16px 18px;border-radius:14px;background:var(--ice);display:grid;gap:6px}
.pv__facts dt{font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.pv__facts dd{margin:0;font:600 var(--t4)/1.2 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.pv__map{min-height:320px;background:var(--ice);display:grid;align-items:end}
.pv__mapin{position:absolute;inset:0}.pv__mapin svg{width:100%;height:100%}
.pv__mapcap{position:relative;z-index:1;padding:24px;display:grid;gap:6px}.pv__mapcap h3{font:600 var(--t3)/1.1 var(--ui);letter-spacing:-.02em;margin:0}
.pv__side{position:sticky;top:calc(var(--gut) + 84px)}
.pv__contact{padding:14px;border-radius:24px;display:grid;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(240,243,247,.62));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 26px 60px -30px rgba(17,19,24,.3)}
.pv__agent{display:flex;gap:14px;align-items:center;padding:8px 6px 2px}
.pv__agent img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.pv__agent b{display:block;font:600 var(--t5)/1.2 var(--ui)}.pv__agent span{font:500 12px/1.4 var(--ui);color:var(--pewter)}
.pv__form{display:grid;gap:6px}
.pv__form .btn{width:100%}
.btn--ghost{background:rgba(255,255,255,.75);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.pv__contact .cap{padding:2px 8px 6px;margin:0}.pv__contact .cap a{color:var(--ink)}
.pv__more{display:grid;gap:var(--gut)}
.pv__fly{position:fixed;left:0;top:0;z-index:200;object-fit:cover;pointer-events:none;will-change:left,top,width,height;border-radius:16px}
.rv2{opacity:1}
/* the lightbox — white, on-brand */
.lb{position:fixed;inset:0;z-index:300;background:rgba(246,247,249,.94);display:grid;place-items:center;padding:40px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.lb-open{overflow:hidden}
.lb__fig{margin:0;max-width:min(92vw,1400px);display:grid;gap:14px;justify-items:center}
.lb__fig img{max-width:100%;max-height:78vh;border-radius:14px;object-fit:contain;box-shadow:0 40px 90px -40px rgba(17,19,24,.45)}
.lb__fig figcaption{font:600 12px/1 var(--ui);letter-spacing:.08em;color:var(--pewter)}
.lb__x{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:0;background:var(--white);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer}
.lb__x::before,.lb__x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.lb__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:var(--white);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;display:grid;place-items:center}
.lb__nav--p{left:18px}.lb__nav--n{right:18px}
.lb__nav i{display:block;width:10px;height:10px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateX(-2px) rotate(-45deg)}
.lb__nav--p i{transform:translateX(2px) rotate(135deg)}
@media (max-width:900px){.pv__grid{grid-template-columns:1fr}.pv__side{position:static}
  .pvg{height:auto;grid-template-columns:1fr;grid-template-rows:auto}.pvg__ph--0{grid-row:auto;aspect-ratio:4/3}.pvg__ph--1,.pvg__ph--2{display:none}
  .pv__facts dl{grid-template-columns:1fr 1fr}.crumbs__back{margin-left:0;width:100%;justify-content:center}
  .lb{padding:16px}.lb__nav{width:44px;height:44px;top:auto;bottom:18px;transform:none}.lb__nav--p{left:18px}.lb__nav--n{right:18px}}

body.is-page .strip{display:none}   /* the announcement strip has no place above a property page */
/* v15 · the objects size to their own shape: a portrait object (the key cabinet) is capped in height, a wide one in width */
.scard__obj,.scard--dusk .scard__obj{width:auto;max-width:min(100%,clamp(300px,34vw,500px))}
.scard__obj img{width:auto;height:auto;max-width:100%;max-height:min(58vh,520px)}
@media (max-width:1100px){.scard__obj,.scard--dusk .scard__obj{max-width:min(100%,clamp(240px,36vw,380px))}.scard__obj img{max-height:min(50vh,400px)}}
@media (max-width:760px){.scard__obj,.scard--dusk .scard__obj{max-width:min(62vw,300px)}.scard__obj img{max-height:36vh}}

.prop__price-g{background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 40%,rgba(17,19,24,.16) 100%)}

/* ── v16 · the price: white liquid glass — a bright frost over the photo, a rim that catches light, a reflection that moves ── */
.prop__price-g{color:var(--ink-2);text-shadow:none;padding:11px 16px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 48%,rgba(255,255,255,.74) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1.5px 0 #FFFFFF,inset 0 -1px 0 rgba(255,255,255,.55),
    0 1px 2px rgba(17,19,24,.06),0 12px 28px -12px rgba(17,19,24,.35)}
.prop__price-g .prop__blur{opacity:.9}
.prop__shine{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.95) 46%,rgba(255,255,255,0) 60%);
  transform:translateX(-120%);transition:transform 1.1s var(--e)}
.prop.is-tilt .prop__shine{transform:translateX(120%)}
.prop__price-g b{color:var(--ink);font-weight:600}

/* v17 · the price type is ice: cool white letters, a faint inner light, a soft cool halo for the edge */
.prop__price-g b{color:#F6FAFF;-webkit-text-fill-color:#F6FAFF;background:none;
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 0 1px rgba(40,56,76,.9),0 2px 8px rgba(30,44,62,.45)}

/* v18 · the price type: white, bold, no relief — the frost is lighter so the white reads on the photo's tones */
.prop__price-g{background:linear-gradient(165deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.48) 100%)}
.prop__price-g b{color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;font-weight:700;text-shadow:0 1px 2px rgba(20,30,45,.28)}

/* v19 · the price pill, lighter: more white in the veil, a luminous blur underneath */
.prop__price-g{background:linear-gradient(165deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.50) 50%,rgba(255,255,255,.60) 100%)}
.prop__price-g b{text-shadow:0 1px 2px rgba(20,30,45,.34),0 0 1px rgba(20,30,45,.25)}

/* ── v20 ─────────────────────────────────────────────────────────────── */
.hero__mark svg path{fill:var(--red)}
.peaks{stroke:var(--red);opacity:1}
.contact__side{display:grid;gap:14px;align-content:start;padding:clamp(20px,2.6vw,32px);border-radius:16px;background:var(--ice)}
.contact__side .addr{display:grid;gap:6px}
.contact__side .cap{margin:0}
.lb{padding:clamp(12px,2vw,28px)}
.lb__fig{max-width:96vw;width:100%;gap:10px}
.lb__fig img{max-width:96vw;max-height:calc(100vh - 72px);width:auto;height:auto;border-radius:12px}
@media (max-width:900px){.lb__fig img{max-height:calc(100vh - 110px)}}
/* v20 · the lightbox photo fills the screen's height (or its width when the photo is wider), never its native size */
.lb__fig img{height:calc(100vh - 72px);width:auto;max-width:96vw;max-height:none}
@media (max-width:900px){.lb__fig img{height:auto;width:96vw;max-height:calc(100vh - 110px)}}

.lb__fig img{height:auto;width:auto;max-width:none;max-height:none}   /* sized by fitLb() */

/* ── v21 · the trade cards: words left, a photograph filling the right half, the number over it ── */
.scard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.scard__in{padding:clamp(28px,4.4vw,64px) clamp(28px,4.4vw,64px)}
.scard__ph{position:relative;margin:0;height:100%;min-height:100%;overflow:hidden;z-index:0}
.scard__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;will-change:transform}
.scard__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(242,244,247,.55) 0%,rgba(242,244,247,0) 18%)}
.scard--white .scard__ph::after{background:linear-gradient(90deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 18%)}
.scard--dusk .scard__ph::after{background:linear-gradient(90deg,rgba(72,86,106,.6) 0%,rgba(72,86,106,0) 18%)}
.scard__n{z-index:2;right:.02em;bottom:-.18em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.scard--dusk .scard__n{-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
@media (max-width:760px){.scard{grid-template-columns:1fr;min-height:0}
  .scard__ph{order:-1;height:auto;min-height:0;aspect-ratio:4/3}.scard__n{font-size:clamp(120px,30vw,200px);bottom:auto;top:calc(75vw - .9em)}
  .scard__in{padding:24px 24px 28px}}

@media (max-width:760px){.scard__ph img{will-change:auto;transform:none!important}}

/* ── v22 · square portraits; the hero mark in red with a hairline of light so it reads on the dusk ── */
.person__ph{aspect-ratio:1/1}
.person__ph img{object-position:50% 50%}
.hero__mark svg path{fill:var(--red);stroke:rgba(255,255,255,.55);stroke-width:.6px;paint-order:stroke fill}
.hero__mark svg{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
/* v23 · the hero mark: plain brand red, no outline, no halo */
.hero__mark svg path{stroke:none;stroke-width:0;paint-order:normal}
.hero__mark svg{filter:none}
/* v24 · the photo half clips itself with the card's own corners: a transformed image inside a sticky card
   escaped the rounded clip in Chromium, so the figure becomes the clipping layer */
.scard__ph{border-radius:0 var(--r) var(--r) 0;isolation:isolate;transform:translateZ(0)}
@media (max-width:760px){.scard__ph{border-radius:var(--r) var(--r) 0 0}}

/* ── v25 ─────────────────────────────────────────────────────────────── */
.hero__mark svg path{fill:#FFFFFF}
/* the search bar: typed fields, glass panels */
.search{grid-template-columns:auto auto 1.2fr 1fr 1.1fr .9fr auto;overflow:visible}
.fld{position:relative;cursor:text}
.fld--pick,.fld--range{cursor:pointer}
.fld input::placeholder{color:var(--mist)}
.fld__val{display:block;width:100%;text-align:left;border:0;background:none;padding:0;font:500 var(--t6)/1.4 var(--ui);color:var(--ink);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-right:18px}
.fld__val::after{content:"";position:absolute;right:4px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--pewter);border-bottom:1.5px solid var(--pewter);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e)}
.fld.is-open .fld__val::after{transform:translateY(-30%) rotate(225deg)}
.fld.is-open{background:rgba(255,255,255,.7)}
.pop{position:absolute;left:0;top:calc(100% + 8px);z-index:60;min-width:100%;padding:8px;border-radius:16px;cursor:default;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 24px 56px -22px rgba(17,19,24,.45),0 2px 6px rgba(17,19,24,.06);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.pop--list{display:grid;gap:2px;max-height:300px;overflow:auto}
.pop__it{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 12px;border-radius:10px;font:500 14px/1.2 var(--ui);color:var(--ink);cursor:pointer;white-space:nowrap}
.pop__it b{font-weight:700;color:var(--red)}
.pop__it:hover,.pop__it:focus-visible{background:rgba(17,19,24,.06);outline:none}
.pop__it[aria-selected="true"]{background:var(--ink);color:#fff}
.pop--range{min-width:320px;display:grid;gap:8px;padding:10px}
.pop__row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pop__row label{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--ice);cursor:text;position:relative}
.pop__row label span{font:600 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--pewter)}
.pop__row label i{position:absolute;left:12px;bottom:11px;font:500 14px/1.2 var(--ui);color:var(--pewter);font-style:normal}
.pop__row label i + input{padding-left:32px}
.pop__row input{border:0;background:none;padding:0;width:100%;font:500 15px/1.2 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.pop__row input:focus{outline:none}
.pop__presets{display:flex;gap:6px;flex-wrap:wrap}
.pop__presets button{padding:9px 12px;border-radius:999px;border:0;background:rgba(17,19,24,.06);font:600 11px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.pop__presets button:hover{background:rgba(17,19,24,.1)}
.pop__ok{width:100%;padding:12px}
.fld__val.is-set{color:var(--ink);font-weight:600}
@media (max-width:1100px){.search{grid-template-columns:auto auto 1fr 1fr;} .search .fld--range{grid-column:span 2}.search .btn{grid-column:1/-1}}
@media (max-width:640px){.search{grid-template-columns:1fr 1fr}.search .fld--range{grid-column:span 1}.pop--range{min-width:calc(100vw - 2*var(--side) - 24px);max-width:calc(100vw - 2*var(--side) - 24px)}
  .fld--range:last-of-type .pop{left:auto;right:0}}

/* v25 · the hero scene: wider than the object was, pulled up by its sky band (22 % of its height = 10.7 % of its width)
   so the title meets the roof where it met the chalet before; the trees flank the title */
.hero__fig img{max-width:min(94%,1240px);margin-top:calc(min(94%,1240px) * -.107)}
@media (max-width:640px){.hero__fig img{max-width:100%;margin-top:calc(100% * -.107)}}
/* v25 · on a phone the scene is narrow: no pull-up, and the title only just meets the roof */
@media (max-width:640px){.hero__fig img{margin-top:0}.giant{margin-bottom:calc(var(--g2) * -.42)}}
/* v26 · three counters since the client count left: three equal columns, centred */
.strip-g{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.strip-g{grid-template-columns:repeat(3,1fr)}.counter{padding:14px 10px}}

/* v26 · the panoramic scene spans the whole card; its sky band (roof at 22 % of its height = 8.3 % of its width) pulls it up under the title.
   On a phone the scene is shown wider than the card so the chalet keeps its size; the card clips the sides. */
.hero__fig{width:100%}
.hero__fig img{max-width:100%;width:100%;margin-top:calc(100% * -.083)}
@media (max-width:640px){.hero__fig img{width:190%;max-width:none;margin-left:-45%;margin-top:calc(190% * -.083)}.giant{margin-bottom:calc(var(--g2) * -.55)}}

/* ── v27 · the hero photograph fills the card; the title sits in the sky, the roof meets it ── */
.hero{background:linear-gradient(180deg,rgb(69,81,107) 0%,rgb(117,125,148) 100%)}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__bg img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block;will-change:transform}
.hero__obj{align-items:center;padding:0}
.giant{margin-bottom:0}
.hero__fig{width:100%}
.hero__fig img{display:none}
.hero .search{margin-top:0}
@media (max-width:640px){.hero__obj{padding:0}.giant{margin-bottom:0}.hero .search{margin-top:0}}

@media (max-width:640px){.hero{min-height:clamp(560px,82svh,760px)}}

.search .fld span{color:var(--ink-2)}   /* the field labels sit on snow now: a darker ink */

/* v30 · the locality placeholder must read on the snow */
.search .fld input::placeholder{color:var(--pewter);opacity:1}
.hero__fig{will-change:transform}

/* ══ raccords Realtis ══ */
/* la copie floutée du prix était cuite au build chez le studio ; côté CRM c'est la même photo, floutée en CSS */
.prop__price-g .prop__blur{filter:blur(16px) saturate(1.15);transform:scale(1.2)}
/* photo du hero remplacée par l'agence : les masques découpés dans la photo d'origine ne valent plus rien, on retombe sur un titre blanc plein */
.ps-hero-libre .giant--ghost{display:none}
.ps-hero-libre .giant{-webkit-mask-image:none!important;mask-image:none!important}
/* le rideau d'entrée ne doit jamais rester en travers si le script ne se charge pas : c'est le script qui l'autorise */
.enter{display:none}
html.ps-enter .enter{display:grid}

/* ── Realtis · les sous-menus se laissent atteindre ──────────────────────
   Le sous-menu est posé 6 px SOUS son élément (top: calc(100% + 6px)). En
   descendant vers lui, la souris traversait cet interstice, qui n'appartient
   ni à l'élément ni au sous-menu : le survol se perdait, le sous-menu repassait
   aussitôt en pointer-events:none, et il s'évanouissait sous le curseur. On ne
   pouvait donc jamais cliquer un sous-menu.
   1. Un PONT invisible comble l'interstice. Il fait partie du sous-menu, donc
      de l'élément survolé : le survol ne se rompt plus en chemin.
   2. Un court DÉLAI DE GRÂCE avant la fermeture, pour les trajets en diagonale
      qui mordent un instant hors de la zone. La fermeture passe par
      visibility, qui se retarde, et non par pointer-events, qui ne le peut
      pas. Pendant ce délai le sous-menu reste atteignable, et le rejoindre le
      rouvre. */
.dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd{visibility:hidden;pointer-events:auto;
  transition:opacity .25s var(--e-soft) .12s,transform .35s var(--e) .12s,visibility 0s linear .47s}
.mi:hover .dd,.mi:focus-within .dd,.mi--lang.open .dd{visibility:visible;transition-delay:0s,0s,0s}