/* ============================================================
   VILLA TERRA — Accueil (Direction "Solana") + mode nuit
   Fluid layout. Day = sun-bleached editorial. Night ("on éteint la
   lumière") = luxe du soir, terracotta incandescent, fenêtres allumées.
   Theme switches on  html.night  via CSS custom properties.
   ============================================================ */

:root{
  /* type */
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"Courier New", ui-monospace, monospace;

  /* layout */
  --gut: clamp(20px, 6vw, 100px);

  /* geo / confidential map */
  --ring:     rgba(96,84,62,.30);
  --geo-base: #ece3d0;
  --geo-glow: rgba(181,86,58,.10);

  /* ---- DAY palette (default) ---- */
  --bg:        #faf6ee;
  --bg-2:      #f3ecdf;
  --surface:   #fffdf8;
  --surface-line:#cabfa6;
  --text:      #2a2620;
  --text-soft: #5f574a;
  --text-mute: #8a8170;
  --line:      #d8cdb6;
  --accent:    #b5563a;
  --accent-soft:#c97a5f;
  --footer-bg: #3c4631;
  --footer-text: rgba(255,255,255,.82);
  --footer-line: rgba(255,255,255,.16);
  --ph-base:   #ece3d2;
  --ph-stripe: rgba(120,108,86,.10);
  --ph-text:   #8a8170;

  /* hero grade */
  --hero-filter: saturate(1.03) contrast(1.01);
  --scrim:       linear-gradient(180deg, rgba(20,16,10,.36) 0%, rgba(20,16,10,.16) 22%, rgba(20,16,10,.46) 32%, rgba(18,14,8,.56) 44%, rgba(16,12,6,.60) 70%, rgba(16,12,6,.66) 100%);
  --grade-op:    0;
  --lamp-op:     0;
  --star-op:     0;
}

html.night{
  --bg:        #14160f;
  --bg-2:      #1a1d14;
  --surface:   rgba(30,33,21,.62);
  --surface-line: rgba(255,255,255,.12);
  --text:      #f4eddd;
  --text-soft: #c8c1ad;
  --text-mute: #8f897a;
  --line:      rgba(255,255,255,.13);
  --accent:    #d9744d;
  --accent-soft:#e29067;
  --footer-bg: #0e100a;
  --footer-text: rgba(255,255,255,.7);
  --footer-line: rgba(255,255,255,.1);
  --ph-base:   #1e2116;
  --ph-stripe: rgba(255,255,255,.05);
  --ph-text:   rgba(255,255,255,.4);

  --ring:     rgba(255,255,255,.15);
  --geo-base: #191c12;
  --geo-glow: rgba(217,116,77,.18);

  --hero-filter: brightness(.52) saturate(1.16) contrast(1.05) sepia(.2);
  --scrim:       radial-gradient(125% 95% at 50% 8%, transparent 34%, rgba(8,8,4,.5) 100%),
                 linear-gradient(180deg, rgba(8,8,4,.5) 0%, transparent 30%, transparent 46%, rgba(8,8,4,.86) 100%);
  --grade-op:    1;
  --lamp-op:     1;
  --star-op:     1;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  transition:background .7s ease, color .7s ease;
}
.home img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; }

/* theme-transition: let big surfaces ease between modes */
.home section, .booking, .booking *, .foot, .fact, .ph, .more, .kicker{
  transition:background .7s ease, color .7s ease, border-color .7s ease;
}

/* ── placeholder for missing 3D renders ───────────────────── */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 11px),
    var(--ph-base);
  display:flex; align-items:flex-end;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ph-text);
  padding:14px 16px; line-height:1.4;
}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:clamp(20px,2.6vw,36px) var(--gut); color:#fff; column-gap:clamp(16px,2vw,32px);
}
.nav-l{ display:flex; gap:clamp(18px,2.4vw,38px); }
.nav-l a{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9); text-decoration:none; font-weight:500; white-space:nowrap; }
.mark{ font-family:var(--serif); font-size:clamp(18px,1.9vw,26px); letter-spacing:.42em; text-transform:uppercase; text-align:center; text-indent:.42em; font-weight:500; color:#fff; text-decoration:none; }
@media (min-width:881px){ .mark{ white-space:nowrap; } }
.nav-r{ display:flex; gap:clamp(14px,1.6vw,22px); justify-content:flex-end; align-items:center; }
.lang{ font-size:12px; letter-spacing:.12em; color:rgba(255,255,255,.7); white-space:nowrap; }
.lang b{ color:#fff; font-weight:600; }
.btn-resa{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.55); padding:11px 20px;
  background:rgba(255,255,255,.06); font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .3s, border-color .3s;
}
.btn-resa:hover{ background:rgba(255,255,255,.16); }

/* nav over a light page (no hero behind it) — follows the theme text colour */
.nav.on-light{ position:relative; color:var(--text); border-bottom:1px solid var(--line); }
.nav.on-light .nav-l a{ color:var(--text); }
.nav.on-light .mark{ color:var(--text); }
.nav.on-light .lang{ color:var(--text-mute); }
.nav.on-light .lang b{ color:var(--text); }
.nav.on-light .lang a{ color:inherit; }
.nav.on-light .btn-resa{ color:var(--text); border-color:var(--surface-line); background:transparent; }
.nav.on-light .btn-resa:hover{ background:rgba(0,0,0,.05); }
.nav.on-light .switch{ color:var(--text); background:transparent; border-color:var(--surface-line); }
.nav.on-light .switch .track{ background:rgba(0,0,0,.18); }
html.night .nav.on-light .switch .track{ background:rgba(217,116,77,.55); }
html.night .nav.on-light .btn-resa:hover{ background:rgba(255,255,255,.12); }

/* nav over a hero, DAY mode — hero photos are bright, so the white nav
   washes out. Dark type + a light scrim behind it restores contrast. */
html:not(.night) .nav:not(.on-light){ color:var(--text); }
html:not(.night) .nav:not(.on-light)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(250,246,238,.95) 0%, rgba(250,246,238,.86) 45%, rgba(250,246,238,.45) 78%, rgba(250,246,238,0) 100%);
}
html:not(.night) .nav:not(.on-light) .nav-l a{ color:var(--text); }
html:not(.night) .nav:not(.on-light) .mark{ color:var(--text); }
html:not(.night) .nav:not(.on-light) .lang{ color:var(--text-soft); }
html:not(.night) .nav:not(.on-light) .lang b{ color:var(--text); }
html:not(.night) .nav:not(.on-light) .btn-resa{ color:var(--text); border-color:rgba(42,38,32,.45); background:rgba(255,255,255,.4); }
html:not(.night) .nav:not(.on-light) .btn-resa:hover{ background:rgba(255,255,255,.75); }
html:not(.night) .nav:not(.on-light) .switch{ color:var(--text); background:rgba(255,255,255,.4); border-color:rgba(42,38,32,.35); }
html:not(.night) .nav:not(.on-light) .switch .track{ background:rgba(42,38,32,.25); }

/* light switch ------------------------------------------------ */
.switch{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; white-space:nowrap;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.4);
  padding:7px 12px 7px 14px; border-radius:30px; color:#fff;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  transition:background .3s, border-color .3s;
}
.switch:hover{ background:rgba(255,255,255,.16); }
.switch .lbl-on{ display:inline; }
.switch .lbl-off{ display:none; }
html.night .switch .lbl-on{ display:none; }
html.night .switch .lbl-off{ display:inline; }
.switch .track{
  position:relative; width:38px; height:20px; border-radius:20px;
  background:rgba(255,255,255,.22); transition:background .4s;
}
.switch .knob{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition:transform .4s cubic-bezier(.5,1.4,.4,1), background .4s;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
html.night .switch .track{ background:rgba(217,116,77,.55); }
html.night .switch .knob{ transform:translateX(18px); background:var(--accent-soft); }

/* ── HERO ─────────────────────────────────────────────────── */
.hero{ position:relative; height:min(92vh,900px); min-height:600px; overflow:hidden; }
.hero .shot{ position:absolute; inset:0; }
.hero .shot img{ width:100%; height:100%; object-fit:cover; filter:var(--hero-filter); transition:filter .8s ease; }
.hero .scrim{ position:absolute; inset:0; background:var(--scrim); transition:background .8s ease; }
.hero .grade{
  position:absolute; inset:0; opacity:var(--grade-op); transition:opacity .8s ease; pointer-events:none;
  background:
    radial-gradient(105% 78% at 50% 92%, rgba(220,120,56,.42), transparent 60%),
    linear-gradient(180deg, rgba(24,16,40,.34) 0%, transparent 34%, rgba(48,22,10,.30) 100%);
  mix-blend-mode:screen;
}
.hero .lamps{
  position:absolute; inset:0; opacity:var(--lamp-op); transition:opacity .9s ease; pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(150px 120px at 90% 45%, rgba(255,188,102,.92), transparent 62%),
    radial-gradient(110px 92px at 95% 50%, rgba(255,172,86,.78), transparent 64%),
    radial-gradient(130px 96px at 33% 45%, rgba(255,202,130,.62), transparent 70%),
    radial-gradient(60% 26% at 52% 72%, rgba(255,150,72,.22), transparent 72%);
}
.hero .copy{ position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(140px,18vh,210px); z-index:6; color:#fff; }
.eyebrow{
  font-size:clamp(11px,1vw,13px); letter-spacing:.32em; text-transform:uppercase; font-weight:600;
  display:flex; align-items:center; gap:14px; margin-bottom:24px; color:rgba(255,255,255,.92);
}
.eyebrow::before{ content:""; width:46px; height:1px; background:var(--accent-soft); }
.hero h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(40px,6.6vw,92px); line-height:1.03;
  margin:0; letter-spacing:-.5px; max-width:14ch; text-shadow:0 1px 34px rgba(12,8,3,.4);
}
.hero h1 em{ font-style:italic; }
.hero .moon{
  position:absolute; top:13%; left:13%; width:clamp(54px,5vw,84px); height:clamp(54px,5vw,84px);
  border-radius:50%; opacity:var(--star-op); transition:opacity 1s ease; z-index:4;
  background:radial-gradient(circle at 38% 36%, #fff7e6 0%, #f1d9a8 44%, #d2af72 100%);
  box-shadow:0 0 90px 30px rgba(248,226,170,.34); pointer-events:none;
}

/* booking bar ------------------------------------------------- */
.booking{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(-46px,-3vw,-40px); z-index:8;
  background:var(--surface); backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -28px rgba(20,14,4,.5); border:1px solid var(--surface-line);
  display:grid; grid-template-columns:1.1fr 1.1fr 1fr auto; align-items:stretch;
}
.booking .f{ padding:clamp(16px,1.6vw,24px) clamp(20px,2vw,30px); border-right:1px solid var(--surface-line); }
.booking .f .k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px; }
.booking .f .v{ font-family:var(--serif); font-size:clamp(17px,1.6vw,22px); color:var(--text); }
.booking .f .v.mut{ color:var(--text-mute); }
.booking .go{
  background:var(--accent); color:#fff; border:none; padding:0 clamp(22px,2.6vw,40px); cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; transition:background .3s;
}
.booking .go:hover{ background:var(--accent-soft); }
.booking .go svg{ width:18px; height:18px; flex:0 0 auto; }

/* ── INTRO ────────────────────────────────────────────────── */
.intro{ display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:clamp(30px,5vw,60px); padding:clamp(120px,16vh,180px) var(--gut) 0; }
.kicker{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.kicker .num{ display:block; font-family:var(--serif); font-size:15px; color:var(--text-mute); margin-top:14px; letter-spacing:.04em; font-weight:400; }
.intro h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,44px); line-height:1.26; margin:0;
  letter-spacing:-.3px; color:var(--text); text-wrap:balance;
}
.intro h2 em{ font-style:italic; color:var(--accent); }

/* ── FACTS ────────────────────────────────────────────────── */
.facts{ display:grid; grid-template-columns:repeat(5,1fr); margin:clamp(60px,9vw,96px) var(--gut) 0; border-top:1px solid var(--line); }
.fact{ padding:clamp(24px,3vw,36px) 22px clamp(24px,3vw,36px) 0; border-right:1px solid var(--line); }
.fact:last-child{ border-right:none; }
.fact .n{ font-family:var(--serif); font-size:clamp(32px,3.6vw,48px); font-weight:400; line-height:1; color:var(--text); }
.fact .l{ font-size:13px; color:var(--text-soft); margin-top:12px; }

/* ── SIGNATURE ROWS ───────────────────────────────────────── */
.sig{ margin-top:clamp(70px,11vw,128px); }
.sig-row{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(420px,52vw,580px); }
.sig-row.flip .ph{ order:2; }
.sig-row .ph{ height:100%; }
.txt{ padding:clamp(48px,7vw,96px) var(--gut); display:flex; flex-direction:column; justify-content:center; }
.txt .idx{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--accent); margin-bottom:22px; }
.txt h3{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.2vw,40px); margin:0 0 20px; letter-spacing:-.3px; color:var(--text); }
.txt p{ font-size:clamp(15px,1.4vw,17px); line-height:1.75; color:var(--text-soft); margin:0; max-width:440px; }
.more{ margin-top:32px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text); font-weight:600; display:inline-flex; align-items:center; gap:12px; cursor:pointer; background:none; border:none; padding:0; font-family:var(--sans); }
.more::after{ content:""; width:30px; height:1px; background:var(--accent); }

/* ── CLOSING ──────────────────────────────────────────────── */
.close{ margin-top:clamp(80px,12vw,130px); padding:clamp(72px,11vw,120px) var(--gut); background:var(--bg-2); text-align:center; }
.close .open{ font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:26px; }
.close h2{ font-family:var(--serif); font-weight:400; font-size:clamp(36px,5vw,60px); margin:0 auto 16px; max-width:18ch; line-height:1.1; letter-spacing:-.4px; color:var(--text); }
.close p{ font-size:clamp(15px,1.5vw,17px); color:var(--text-soft); margin:0 auto 42px; max-width:520px; line-height:1.7; }
.close .cta{ display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.close .cta a{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; padding:17px 34px; text-decoration:none; cursor:pointer; }
.close .cta .p{ background:var(--accent); color:#fff; }
.close .cta .s{ border:1px solid var(--text); color:var(--text); }

/* ── FOOTER ───────────────────────────────────────────────── */
.foot{ background:var(--footer-bg); color:var(--footer-text); padding:clamp(48px,7vw,72px) var(--gut) 44px; }
.foot .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(30px,5vw,50px); padding-bottom:46px; border-bottom:1px solid var(--footer-line); }
.foot .mark{ font-family:var(--serif); font-size:24px; letter-spacing:.4em; text-transform:uppercase; color:#fff; text-indent:.4em; margin-bottom:20px; }
.foot p{ font-size:14px; line-height:1.7; margin:0; max-width:300px; }
.foot h4{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 18px; font-weight:600; }
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.foot ul a{ color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; }
.foot .legal{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:12px; color:rgba(255,255,255,.5); }

/* ── ADRESSE CONFIDENTIELLE ────────────────────────────────── */
.address{ display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(80px,12vw,130px); border-top:1px solid var(--line); }
.a-copy{ padding:clamp(56px,8vw,104px) clamp(34px,4vw,72px) clamp(56px,8vw,104px) var(--gut); display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); }
.a-copy h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.4vw,46px); line-height:1.16; letter-spacing:-.3px; margin:22px 0 0; color:var(--text); text-wrap:balance; }
.a-copy h2 em{ font-style:italic; color:var(--accent); }
.a-copy .lede{ font-size:clamp(15px,1.4vw,17px); line-height:1.75; color:var(--text-soft); margin:24px 0 0; max-width:460px; }
.creds{ margin-top:clamp(28px,3vw,40px); display:flex; flex-direction:column; }
.creds .cr{ display:flex; align-items:center; gap:16px; padding:15px 0; border-top:1px solid var(--line); font-size:14px; letter-spacing:.01em; color:var(--text); }
.creds .cr:last-child{ border-bottom:1px solid var(--line); }
.creds .cr .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto; }

.a-map{ position:relative; min-height:clamp(380px,46vw,560px); overflow:hidden; }
.geo{ position:absolute; inset:0;
  background:
    radial-gradient(circle at 60% 47%, transparent 0 58px, var(--ring) 58px 59px, transparent 59px),
    radial-gradient(circle at 60% 47%, transparent 0 110px, var(--ring) 110px 111px, transparent 111px),
    radial-gradient(circle at 60% 47%, transparent 0 168px, var(--ring) 168px 169px, transparent 169px),
    radial-gradient(circle at 60% 47%, transparent 0 234px, var(--ring) 234px 235px, transparent 235px),
    radial-gradient(circle at 60% 47%, var(--geo-glow) 0 22%, transparent 56%),
    var(--geo-base);
  transition:background .7s ease;
}
.geo .pin{ position:absolute; left:60%; top:47%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); }
.geo .ttl{ position:absolute; top:30px; left:32px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft); }
.geo .approx{ position:absolute; left:60%; top:47%; transform:translate(18px,-30px); font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--text-mute); }
.geo .note{ position:absolute; left:32px; right:32px; bottom:28px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; line-height:1.6; color:var(--text-mute); display:flex; align-items:center; gap:10px; }
.geo .note .k{ width:7px; height:11px; border:1.4px solid var(--text-mute); border-radius:2px; flex:0 0 auto; position:relative; }
.geo .note .k::before{ content:""; position:absolute; left:50%; top:-5px; width:7px; height:7px; border:1.4px solid var(--text-mute); border-bottom:none; border-radius:5px 5px 0 0; transform:translateX(-50%); }

/* ── CONCIERGERIE / L'ART DE RECEVOIR ──────────────────────── */
.concierge{ padding:clamp(72px,10vw,116px) var(--gut); border-top:1px solid var(--line); }
.concierge .head{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,60px); align-items:end; margin-bottom:clamp(40px,5vw,60px); }
.concierge .head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,52px); line-height:1.08; letter-spacing:-.4px; margin:18px 0 0; color:var(--text); max-width:15ch; }
.concierge .head h2 em{ font-style:italic; color:var(--accent); }
.concierge .head .lead{ font-size:clamp(15px,1.4vw,17px); line-height:1.75; color:var(--text-soft); margin:0; max-width:380px; }
.svcs{ display:grid; grid-template-columns:repeat(5,1fr); }
.svc{ border-top:1px solid var(--line); padding:24px 22px 0 0; }
.svc .n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); }
.svc h3{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.9vw,25px); margin:16px 0 12px; line-height:1.1; color:var(--text); }
.svc p{ font-size:13.5px; line-height:1.65; color:var(--text-soft); margin:0; }
.concierge .foot-line{ display:flex; align-items:center; gap:14px; margin-top:clamp(40px,5vw,58px); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text); font-weight:600; }
.concierge .foot-line a{ text-decoration:none; display:inline-flex; align-items:center; gap:14px; }
.concierge .foot-line .ln{ width:46px; height:1px; background:var(--accent); }

/* ── responsive ───────────────────────────────────────────── */
/* below 1240px the switch label is the widest item in the right column and
   forces the 3-column nav to overflow — collapse it to the toggle alone */
/* very small screens: the right cluster (lang + switch + button) can't fit —
   drop the decorative day/night switch and tighten spacing, keep FR/EN + CTA */
@media (max-width:520px){
  .nav{ padding-left:14px; padding-right:14px; column-gap:10px; }
  .btn-resa{ padding:10px 12px; letter-spacing:.08em; }
  .lang{ font-size:11px; }
}
@media (max-width:352px){ .nav .switch{ display:none; } }

/* ── contact direct (conciergerie) ─────────────────────────── */
.cw{ position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:8000; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; }
.cw-btn{ pointer-events:auto; width:56px; height:56px; border-radius:50%; border:1px solid var(--surface-line); background:var(--accent); color:#fff; font-size:22px; cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 26px rgba(20,14,8,.3); transition:transform .3s ease, background .3s ease; }
.cw-btn:hover{ transform:translateY(-2px); }
.cw-btn .c{ display:none; }
.cw.open .cw-btn .o{ display:none; }
.cw.open .cw-btn .c{ display:block; font-size:17px; }
.cw-panel{ width:min(272px,78vw); background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden; box-shadow:0 18px 50px rgba(20,14,8,.22); opacity:0; transform:translateY(10px) scale(.97); transform-origin:bottom right; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.cw.open .cw-panel{ opacity:1; transform:none; pointer-events:auto; }
.cw-head{ padding:15px 17px 13px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; }
.cw-head .t{ font-family:var(--serif); font-size:16.5px; color:var(--text); }
.cw-head .s{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); }
.cw-row{ display:flex; align-items:center; gap:12px; padding:12px 17px; text-decoration:none; border-bottom:1px solid var(--line); transition:background .25s ease; }
.cw-row:last-child{ border-bottom:none; }
.cw-row:hover{ background:rgba(0,0,0,.04); }
html.night .cw-row:hover{ background:rgba(255,255,255,.06); }
.cw-row .ic{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:14px; color:var(--accent); flex:none; }
.cw-row .lb{ display:flex; flex-direction:column; gap:1px; }
.cw-row .lb b{ font-size:13.5px; font-weight:600; color:var(--text); }
.cw-row .lb i{ font-style:normal; font-size:11.5px; color:var(--text-mute); }
@media print{ .cw{ display:none; } }
@media (max-width:1240px){
  .switch .lbl-on, .switch .lbl-off,
  html.night .switch .lbl-on, html.night .switch .lbl-off{ display:none; }
  .switch{ padding:9px 11px; gap:0; }
}
@media (max-width:1060px){
  .nav{ grid-template-columns:auto 1fr; }
  .nav-l{ display:none; }
  .mark{ text-align:left; }
}
@media (max-width:880px){
  .nav{ grid-template-columns:auto 1fr; }
  .nav-l{ display:none; }
  .mark{ text-align:left; }
  .intro{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .fact:nth-child(2n){ border-right:none; }
  .sig-row{ grid-template-columns:1fr; }
  .sig-row .ph{ min-height:300px; order:0 !important; }
  .booking{ grid-template-columns:1fr 1fr; }
  .booking .go{ grid-column:1 / -1; padding:18px; justify-content:center; }
  .foot .top{ grid-template-columns:1fr; }
  .address{ grid-template-columns:1fr; }
  .a-copy{ border-right:none; border-bottom:1px solid var(--line); }
  .a-map{ min-height:340px; }
  .concierge .head{ grid-template-columns:1fr; }
  .svcs{ grid-template-columns:1fr 1fr; }
}