/* ========== Numeroquattro — shared styles ========== */
:root{
  --bg:#f4f1e8; --bg-warm:#ece6d6; --ink:#1f2a26; --ink-soft:#5b6661;
  --paper:#fbfaf4; --line:#d9d2bf;
  --light-blue:#bcd4d8; --light-blue-2:#6f9aa5;
  --light-green:#c4cdb0; --light-green-2:#7e8b62;
  --terracotta:#b87a5b; --gold:#a48344;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --label:"Italiana","Cormorant Garamond",serif;
  --sans:"Outfit",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ease-cinema:cubic-bezier(.2,.7,.1,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --ease-quart:cubic-bezier(.165,.84,.44,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --shadow-soft:0 30px 60px -30px rgba(31,42,38,.25),0 8px 20px -10px rgba(31,42,38,.18);
  --shadow-deep:0 60px 120px -40px rgba(31,42,38,.35);
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ background:var(--bg); color:var(--ink); }
body{ font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.62; letter-spacing:.01em; overflow-x:clip; }
::selection{ background:var(--ink); color:var(--paper); }
img{ max-width:100%; display:block; }

.eyebrow{ font-family:var(--label); letter-spacing:.34em; text-transform:uppercase; font-size:.95rem; color:var(--ink); font-weight:500; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.12; }
h1{ font-size:clamp(3rem,7.4vw,7.4rem); font-weight:300; line-height:1.06; }
h2{ font-size:clamp(2.2rem,4.6vw,4.4rem); font-weight:300; }
h3{ font-size:clamp(1.6rem,2.4vw,2.4rem); line-height:1.2; }
h4{ font-size:1.4rem; line-height:1.25; }
.italic{ font-style:italic; font-weight:300; }
p{ color:var(--ink-soft); max-width:62ch; }
.lead-serif{ font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.5; color:var(--ink); font-weight:300; max-width:34ch; }
a{ color:inherit; text-decoration:none; }

/* Nav */
.nav-wrap{ position:fixed; inset:0 0 auto 0; z-index:50; padding:18px 0;
  transition:padding .8s var(--ease-cinema),background .8s var(--ease-cinema),color .6s var(--ease-cinema);
  color:var(--paper); }
.nav-wrap.scrolled, .nav-wrap.solid{ padding:10px 0; background:rgba(244,241,232,.92); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); color:var(--ink); border-bottom:1px solid rgba(31,42,38,.08); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ height:62px; width:auto; transition:filter .6s var(--ease-cinema), height .6s var(--ease-cinema); filter:invert(1) brightness(2); }
.brand-mono{ display:none; }            /* compact n4 monogram — shown only on small screens */
.nav-wrap.scrolled .brand img{ height:48px; }
.nav-wrap.scrolled .brand img, .nav-wrap.solid .brand img{ filter:none; }
.brand-text{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.2rem; letter-spacing:.02em; line-height:1; display:none; }
.brand small{ display:block; font-family:var(--label); font-size:.55rem; letter-spacing:.4em; opacity:.7; margin-top:2px; font-style:normal; }
.nav-links{ display:flex; gap:26px; align-items:center; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; }
.nav-links a{ position:relative; padding:6px 0; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-cinema); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.btn-pill{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; border:1px solid currentColor; transition:background .5s var(--ease-cinema),color .5s var(--ease-cinema),transform .6s var(--ease-cinema); cursor:pointer; white-space:nowrap; }
.btn-pill:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-1px); }
.nav-wrap:not(.scrolled):not(.solid) .btn-pill:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.nav-toggle{ display:none; }
/* Large row gutters (g-4 / g-5) have negative margins (-18px / -24px) wider than the
   full-width container's 12px padding, so they overflow horizontally on every viewport
   below the container max-width (~1200px). Cap the row gutter so its half never exceeds
   the container padding. Above 1200px the container gains side margins that absorb it. */
@media(max-width:1199.98px){
  .row{ --bs-gutter-x:1.5rem; }
}

/* Mobile niceties */
@media(max-width:768px){
  body{ font-size:16px; line-height:1.65; }
  /* swap the full wordmark for the compact n4 monogram on small screens */
  .brand-mark{ display:none; }
  .brand-mono{ display:inline-block; }
  .brand img, .nav-wrap.scrolled .brand img{ height:46px; }
  .nav-row .btn-pill{ display:none; }
  .nav-row{ gap:12px; }
  .hero-meta{ gap:18px 22px; font-size:.62rem; letter-spacing:.22em; padding-top:16px; }
  .hero-meta span b{ font-size:.95rem; }
  .hero-eyebrow{ font-size:.62rem; letter-spacing:.32em; }
  .hero h1{ font-size:clamp(2.4rem,11vw,3.6rem); }
  .hero h1 .sub{ letter-spacing:.26em; font-size:.22em; }
  .hero p.tag{ font-size:.98rem; }
  .scroll-cue{ display:none; }
  .nq-nav-lang{ font-size:.58rem !important; padding:5px 9px !important; }
  .booking-cta{ min-width:auto; font-size:.74rem; padding:18px 24px; }
  .booking-card{ padding:18px; }
  .booking-note{ gap:14px 22px; font-size:.62rem; }
  .nav-mobile a{ font-size:1.6rem; padding:8px 0; }
}
.nav-mobile{ position:fixed; inset:0; background:var(--bg); z-index:60; padding:90px 8vw 40px; display:none; flex-direction:column; gap:10px; }
.nav-mobile.open{ display:flex; }
.nav-mobile a{ font-family:var(--serif); font-size:2rem; padding:10px 0; border-bottom:1px solid var(--line); }
.nav-mobile .close{ position:absolute; top:24px; right:24px; background:transparent; border:1px solid var(--ink); border-radius:999px; width:46px; height:46px; cursor:pointer; }
@media(max-width:1099px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; padding:10px 12px; border:1px solid currentColor; border-radius:999px; background:transparent; cursor:pointer; color:inherit; }
  .nav-toggle span{ width:18px; height:1px; background:currentColor; display:block; }
}
@media(min-width:1100px){
  .nav-mobile{ display:none !important; }
}

/* Hero */
.hero{ position:relative; height:100vh; min-height:680px; overflow:hidden; color:var(--paper); background:#0a0e0c; }
.hero.short{ height:64vh; min-height:480px; }
.hero .layer{ position:absolute; inset:0; }
.hero .l-bg{ background-size:cover; background-position:center; transform:scale(1.08) translateZ(0); animation:kenburns 40s var(--ease-cinema) infinite alternate; will-change:transform; }
@keyframes kenburns{ 0%{ transform:scale(1.08) translate3d(-1%,-.6%,0); } 100%{ transform:scale(1.14) translate3d(1.2%,1%,0); } }
.hero .l-grade{ background:
  linear-gradient(110deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.05) 60%, rgba(0,0,0,0) 80%),
  linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.72) 100%); }
.hero .l-leaves{ background-size:140% auto; background-position:-10% 110%; background-repeat:no-repeat; opacity:.18; filter:saturate(.5) brightness(.6);
  -webkit-mask-image:radial-gradient(50% 35% at 0% 100%,#000,transparent 70%); mask-image:radial-gradient(50% 35% at 0% 100%,#000,transparent 70%); }
.hero-inner{ position:relative; z-index:5; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:8vh; }
.hero-eyebrow{ font-family:var(--label); letter-spacing:.42em; text-transform:uppercase; font-size:.72rem; opacity:.95; text-shadow:0 1px 14px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); }
.hero h1{ font-style:italic; font-weight:300; margin:10px 0 14px; line-height:.95; text-shadow:0 2px 28px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.4); font-size:clamp(2.6rem,6vw,5.8rem); }
.hero h1 .num{ display:block; font-style:normal; letter-spacing:-.02em; font-size:.42em; opacity:.9; line-height:1; margin-bottom:6px; }
.hero h1 .italic{ display:block; line-height:.95; }
.hero h1 .sub{ display:block; font-size:.2em; letter-spacing:.34em; text-transform:uppercase; font-style:normal; font-family:var(--label); margin-top:14px; opacity:.85; line-height:1; }
.hero p.tag{ color:rgba(251,250,244,.95); max-width:42ch; font-size:1.05rem; text-shadow:0 1px 16px rgba(0,0,0,.7); }
.hero-meta{ display:flex; gap:32px 40px; flex-wrap:wrap; font-family:var(--label); letter-spacing:.28em; text-transform:uppercase; font-size:.7rem; margin-top:32px; opacity:.92; border-top:1px solid rgba(255,255,255,.22); padding-top:22px; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.hero-meta span b{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; text-transform:none; font-size:1.05rem; margin-right:6px; }
.scroll-cue{ position:absolute; right:36px; bottom:38px; z-index:6; display:flex; align-items:center; gap:14px; font-family:var(--label); font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; }
.scroll-cue .line{ width:60px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.2); transform:translateX(-100%); animation:cueLine 2.4s var(--ease-cinema) infinite; }
@keyframes cueLine{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(100%); } }

/* Page hero (inner pages) */
.page-hero{ position:relative; height:64vh; min-height:480px; overflow:hidden; color:var(--paper); background:#0a0e0c; }
.page-hero.tall{ height:88vh; min-height:680px; }
@media(max-width:768px){ .page-hero.tall{ height:80vh; min-height:560px; } }
.page-hero .layer{ position:absolute; inset:0; }
.page-hero .l-bg{ background-size:cover; background-position:center; transform:scale(1.06) translateZ(0); animation:kenburns 40s var(--ease-cinema) infinite alternate; will-change:transform; }
.page-hero .l-grade{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 35%,rgba(0,0,0,.78) 100%); }
.page-hero h1, .page-hero .crumb, .page-hero .tag{ text-shadow:0 2px 24px rgba(0,0,0,.5); }
.page-hero .tag{ color:rgba(251,250,244,.95) !important; font-size:1.15rem !important; max-width:46ch; font-weight:300; }
.page-hero-inner{ position:relative; z-index:5; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:6vh; }
.crumb{ font-family:var(--label); letter-spacing:.4em; text-transform:uppercase; font-size:.7rem; opacity:.85; }
.crumb a{ opacity:.7; }
.crumb a:hover{ opacity:1; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1.1s var(--ease-cinema),transform 1.1s var(--ease-cinema); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d2{ transition-delay:.12s; }
.reveal-d3{ transition-delay:.24s; }
.reveal-d4{ transition-delay:.36s; }
.reveal-mask{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 0%); mask-image:linear-gradient(180deg,transparent 0%,#000 0%);
  -webkit-mask-size:100% 200%; mask-size:100% 200%; -webkit-mask-position:0 100%; mask-position:0 100%;
  transition:-webkit-mask-position 1.6s var(--ease-cinema),mask-position 1.6s var(--ease-cinema); }
.reveal-mask.in{ -webkit-mask-position:0 0; mask-position:0 0; }

/* Sections */
section{ position:relative; }
.sec-pad{ padding:140px 0; }
@media(max-width:768px){ .sec-pad{ padding:90px 0; } }
.divider-line{ height:1px; background:var(--line); }

/* Intro */
.intro{ background:var(--bg); }
.intro .num-mark{ font-family:var(--serif); font-style:italic; font-size:clamp(8rem,16vw,16rem); line-height:.85; color:transparent; -webkit-text-stroke:1px rgba(31,42,38,.18); letter-spacing:-.05em; }

/* Booking */
.booking{ position:relative; background:linear-gradient(180deg, var(--ink) 0%, #2a3531 100%); color:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.booking::before{ content:""; position:absolute; inset:0; background-image:url("img/giardino-mediterraneo.jpeg"); background-size:cover; background-position:center; opacity:.18; mix-blend-mode:luminosity; }
.booking::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,42,38,.55), rgba(31,42,38,.85)); }
.booking > *{ position:relative; z-index:2; }
.booking .eyebrow{ color:rgba(251,250,244,.7); }
.booking h2{ color:var(--paper); }
.booking p{ color:rgba(251,250,244,.78); }
.booking-card{ background:var(--paper); border:1px solid rgba(255,255,255,.1); padding:32px; display:grid; grid-template-columns:1.4fr 1.4fr 1fr 1fr auto; gap:0; align-items:stretch; box-shadow:0 60px 120px -40px rgba(0,0,0,.6), 0 20px 40px -20px rgba(0,0,0,.4); }
.booking-field{ position:relative; padding:10px 26px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.booking-field:first-child{ padding-left:10px; }
.booking-field:last-of-type{ border-right:none; }
.booking-field label{ font-family:var(--label); font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.booking-field input,.booking-field select{ border:0; background:transparent; outline:none; font-family:var(--serif); font-size:1.4rem; color:var(--ink); padding:0; font-weight:400; }
.booking-cta{ background:var(--terracotta); color:var(--paper); border:none; padding:22px 36px; min-width:260px; font-family:var(--sans); font-weight:500; letter-spacing:.22em; text-transform:uppercase; font-size:.82rem; display:flex; align-items:center; justify-content:center; gap:12px; transition:background .5s var(--ease-cinema),letter-spacing .6s var(--ease-cinema); cursor:pointer; }
.booking-cta:hover{ background:var(--ink); letter-spacing:.26em; }
.booking-note{ font-family:var(--label); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(251,250,244,.65); display:flex; gap:32px; margin-top:24px; flex-wrap:wrap; }
.booking-note span::before{ content:"·"; margin-right:10px; opacity:.6; }
@media(max-width:992px){ .booking-card{ grid-template-columns:1fr 1fr; } .booking-field{ border-right:none; border-bottom:1px solid var(--line); padding:14px 8px; } .booking-cta{ grid-column:1/-1; } }

/* InReception variant — 6 fields + cta */
.booking-card.inr{ grid-template-columns:repeat(3,1fr); padding:24px 28px; gap:0; }
.booking-card.inr .booking-field{ padding:14px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.booking-card.inr .booking-field:nth-child(3n){ border-right:none; }
.booking-card.inr .booking-field:nth-last-of-type(-n+3){ border-bottom:none; }
.booking-card.inr .booking-field input{ font-size:1.2rem; width:100%; }
.booking-card.inr .booking-field input[type=number]{ -moz-appearance:textfield; }
.booking-card.inr .booking-field input[type=number]::-webkit-outer-spin-button,
.booking-card.inr .booking-field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.booking-card.inr .booking-cta{ grid-column:1/-1; margin-top:18px; }

/* Home widget — live availability result (data from api/availability.php → InReception iCal) */
.book-result{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.book-result .br-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--paper); border-left:3px solid var(--line); padding:14px 20px; box-shadow:0 18px 40px -24px rgba(0,0,0,.5); }
.book-result .br-row.ok{ border-left-color:#5a8a63; }
.book-result .br-row.no{ border-left-color:#b5705f; }
.book-result .br-apt{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--ink); flex:1; min-width:130px; }
.book-result .br-state{ font-family:var(--label); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.book-result .br-row.ok .br-state{ color:#3f7d5a; font-weight:600; }
.book-result .br-book{ background:var(--terracotta); color:var(--paper); padding:11px 20px; font-family:var(--label); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; transition:background .4s var(--ease-cinema); }
.book-result .br-book:hover{ background:var(--ink); }
.book-result .br-msg{ justify-content:center; color:var(--ink-soft); font-family:var(--serif); font-style:italic; font-size:1.05rem; }
.book-result .br-msg a{ color:var(--terracotta); border-bottom:1px solid currentColor; }

/* flatpickr booking calendar — brand palette + clearly-blocked booked dates (high specificity to beat flatpickr's CDN css) */
.flatpickr-calendar{ font-family:var(--sans); border-radius:4px; box-shadow:0 28px 64px -22px rgba(31,42,38,.45); }
.flatpickr-calendar .flatpickr-day.selected,.flatpickr-calendar .flatpickr-day.startRange,.flatpickr-calendar .flatpickr-day.endRange{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.flatpickr-calendar .flatpickr-day.today{ border-color:var(--terracotta); }
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover{ color:#c4bdae; text-decoration:line-through; background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(31,42,38,.07) 4px,rgba(31,42,38,.07) 8px); cursor:not-allowed; }
@media(max-width:992px){
  .booking-card.inr{ grid-template-columns:1fr 1fr; padding:18px; }
  .booking-card.inr .booking-field{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 14px; }
  .booking-card.inr .booking-field:nth-child(2n){ border-right:none; }
  .booking-card.inr .booking-field:nth-last-of-type(-n+2){ border-bottom:none; }
}
@media(max-width:560px){
  .booking-card.inr{ grid-template-columns:1fr; }
  .booking-card.inr .booking-field{ border-right:none !important; border-bottom:1px solid var(--line) !important; padding:12px 8px; }
  .booking-card.inr .booking-field:last-of-type{ border-bottom:none !important; }
}

/* Tour sectioned gallery */
.tour-section{ margin-bottom:96px; }
.tour-section:last-of-type{ margin-bottom:0; }
.tour-head{ display:flex; gap:32px; align-items:flex-start; margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.tour-head .num{ font-family:var(--display); font-size:3.4rem; line-height:1; color:var(--terracotta); flex-shrink:0; font-style:italic; }
.tour-head h3{ font-family:var(--serif); font-size:clamp(1.6rem, 2.4vw, 2.4rem); font-weight:300; margin:0 0 8px; letter-spacing:-.01em; }
.tour-head p{ margin:0; color:var(--ink-soft); max-width:62ch; }
@media(max-width:640px){ .tour-head{ gap:18px; } .tour-head .num{ font-size:2.4rem; } .tour-section{ margin-bottom:64px; } }

/* Two-up */
.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
@media(max-width:992px){ .two-up{ grid-template-columns:1fr; gap:50px; } }
.frame{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bg-warm); cursor:zoom-in; }
.frame .ph{ position:absolute; inset:-8%; background-size:cover; background-position:center; transition:transform 6s var(--ease-cinema); will-change:transform; }
.frame.tall{ aspect-ratio:3/4.4; }
.frame.wide{ aspect-ratio:5/3; }
.frame:hover .ph{ transform:scale(1.05); }

/* Apartments */
.apartments{ background:var(--bg); }
.apt-card{ position:relative; overflow:hidden; display:grid; grid-template-rows:1fr auto; background:var(--paper); transition:transform 1.1s var(--ease-cinema),box-shadow 1.1s var(--ease-cinema); }
.apt-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.apt-card .media{ position:relative; aspect-ratio:5/4; overflow:hidden; cursor:zoom-in; }
.apt-card .media .img{ position:absolute; inset:-6%; background-size:cover; background-position:center; transition:transform 1.6s var(--ease-cinema),filter 1.2s var(--ease-cinema); }
.apt-card:hover .media .img{ transform:scale(1.06); }
.apt-card .swatch{ position:absolute; left:24px; top:24px; z-index:2; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.6); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.apt-card .badge-name{ position:absolute; left:24px; bottom:24px; z-index:2; color:var(--paper); font-family:var(--label); letter-spacing:.4em; text-transform:uppercase; font-size:.72rem; }
.apt-card .body{ padding:34px 36px 38px; }
.apt-card .body h3{ margin-bottom:14px; }
.apt-card .body .meta{ font-family:var(--label); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); display:flex; gap:22px; flex-wrap:wrap; margin-bottom:18px; }
.apt-card .body p{ margin-bottom:22px; }
.apt-card .body .more{ display:inline-flex; align-items:center; gap:14px; font-family:var(--label); letter-spacing:.34em; text-transform:uppercase; font-size:.74rem; border-bottom:1px solid var(--ink); padding-bottom:6px; transition:gap .5s var(--ease-cinema); }
.apt-card .body .more:hover{ gap:22px; }
.tone-blue .swatch{ background:var(--light-blue); }
.tone-green .swatch{ background:var(--light-green); }
.tone-blue .body h3 .accent{ color:var(--light-blue-2); }
.tone-green .body h3 .accent{ color:var(--light-green-2); }

/* Cinematic strip */
.cine{ height:88vh; min-height:560px; position:relative; overflow:hidden; background:#0c1311; color:var(--paper); }
.cine.medium{ height:78vh; min-height:520px; }
.cine .img{ position:absolute; inset:-6%; background-size:cover; background-position:center; filter:brightness(.78) saturate(1.05); will-change:transform; }
.cine .grade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%); }
.cine .label{ position:absolute; left:6vw; bottom:8vh; z-index:3; }
.cine .label .eyebrow{ color:rgba(251,250,244,.78); }
.cine .label h2{ color:var(--paper); max-width:18ch; margin-top:14px; font-style:italic; font-weight:300; }

/* Gallery rail */
.gallery-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(320px,36vw); gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 6vw 80px; scrollbar-width:thin; }
.gallery-rail::-webkit-scrollbar{ height:6px; }
.gallery-rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.gallery-rail .gi{ scroll-snap-align:start; position:relative; aspect-ratio:4/5; overflow:hidden; cursor:zoom-in; }
.gallery-rail .gi:nth-child(odd){ aspect-ratio:5/6; transform:translateY(28px); }
.gallery-rail .gi .img{ position:absolute; inset:-10%; background-size:cover; background-position:center; transition:transform 1.6s var(--ease-cinema); }
.gallery-rail .gi:hover .img{ transform:scale(1.05); }
.gallery-rail .gi .cap{ position:absolute; left:14px; bottom:14px; color:var(--paper); font-family:var(--label); letter-spacing:.32em; text-transform:uppercase; font-size:.66rem; text-shadow:0 2px 12px rgba(0,0,0,.4); }

/* Gallery grid (full page) */
.gal-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.gal-grid .gi{ position:relative; overflow:hidden; cursor:zoom-in; aspect-ratio:1/1; }
.gal-grid .gi .img{ position:absolute; inset:-6%; background-size:cover; background-position:center; transition:transform 1.6s var(--ease-cinema); }
.gal-grid .gi:hover .img{ transform:scale(1.06); }
.gal-grid .gi .cap{ position:absolute; left:14px; bottom:14px; color:var(--paper); font-family:var(--label); letter-spacing:.32em; text-transform:uppercase; font-size:.66rem; text-shadow:0 2px 12px rgba(0,0,0,.4); z-index:2; }
.gal-grid .gi.span-6{ grid-column:span 6; aspect-ratio:5/4; }
.gal-grid .gi.span-4{ grid-column:span 4; aspect-ratio:4/5; }
.gal-grid .gi.span-3{ grid-column:span 3; aspect-ratio:3/4; }
.gal-grid .gi.span-8{ grid-column:span 8; aspect-ratio:5/3; }
.gal-grid .gi.span-12{ grid-column:span 12; aspect-ratio:21/9; }
@media(max-width:992px){ .gal-grid .gi.span-6,.gal-grid .gi.span-4,.gal-grid .gi.span-3,.gal-grid .gi.span-8{ grid-column:span 6; } .gal-grid .gi.span-12{ grid-column:span 12; } }
@media(max-width:600px){ .gal-grid .gi{ grid-column:span 12 !important; } }

/* Services */
.services{ background:var(--bg-warm); }
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
@media(max-width:992px){ .svc-grid{ grid-template-columns:1fr; gap:50px; } }
.svc-list{ list-style:none; padding:0; margin:0; }
.svc-list li{ display:grid; grid-template-columns:38px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid rgba(31,42,38,.12); font-size:.98rem; color:var(--ink); align-items:start; }
.svc-list li .num{ font-family:var(--label); font-size:.72rem; letter-spacing:.2em; color:var(--ink-soft); padding-top:4px; }

/* Contacts */
.contacts{ background:var(--paper); }
.map-frame{ position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); background:#dbe3d4; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(.95); }
.contact-card{ background:var(--bg); padding:38px; border:1px solid var(--line); }
.contact-card .row-info{ display:grid; grid-template-columns:48px 1fr; gap:18px; align-items:start; padding:14px 0; border-bottom:1px solid var(--line); }
.contact-card .row-info:last-child{ border-bottom:none; }
.contact-card .row-info .ico{ width:40px; height:40px; border:1px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic; }
.contact-card .row-info b{ font-family:var(--serif); font-weight:400; font-size:1.15rem; display:block; margin-bottom:2px; color:var(--ink); }
.contact-card .row-info span{ color:var(--ink-soft); font-size:.92rem; }

/* Quartiere */
.quartiere{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.quartiere .veil{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; filter:grayscale(.4); -webkit-mask-image:radial-gradient(80% 80% at 80% 50%,#000,transparent 70%); mask-image:radial-gradient(80% 80% at 80% 50%,#000,transparent 70%); will-change:transform; }
.quartiere h2{ color:var(--paper); }
.quartiere p{ color:rgba(251,250,244,.78); max-width:54ch; }
.quartiere .pull{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.42; max-width:22ch; color:var(--paper); }

/* Zone */
.zone .col-cat{ border-top:1px solid var(--line); padding-top:24px; }
.zone .col-cat h4{ font-family:var(--serif); font-style:italic; font-weight:400; margin-bottom:12px; }
.zone .col-cat ul{ list-style:none; padding:0; margin:0; }
.zone .col-cat li{ padding:8px 0; border-bottom:1px dashed rgba(31,42,38,.14); display:flex; justify-content:space-between; gap:14px; font-size:.95rem; }
.zone .col-cat li b{ font-weight:500; color:var(--ink); }
.zone .col-cat li span{ color:var(--ink-soft); font-family:var(--label); letter-spacing:.18em; text-transform:uppercase; font-size:.7rem; align-self:center; }

/* Apt-detail layout */
.apt-feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:768px){ .apt-feature-grid{ grid-template-columns:repeat(2,1fr); } }
.apt-feature{ padding:26px 0; border-top:1px solid var(--line); }
.apt-feature .n{ font-family:var(--label); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }
.apt-feature .v{ font-family:var(--serif); font-style:italic; font-size:1.6rem; margin-top:4px; color:var(--ink); }
.apt-feature .d{ font-size:.88rem; margin-top:4px; color:var(--ink-soft); }

.amenities{ list-style:none; padding:0; margin:0; columns:2; column-gap:60px; }
@media(max-width:768px){ .amenities{ columns:1; } }
.amenities li{ padding:10px 0 10px 24px; position:relative; font-size:.95rem; color:var(--ink); border-bottom:1px solid rgba(31,42,38,.08); break-inside:avoid; }
.amenities li::before{ content:"·"; position:absolute; left:0; top:8px; font-size:1.4rem; color:var(--terracotta); }

/* Footer */
footer{ background:var(--bg-warm); color:var(--ink); border-top:1px solid var(--line); }
footer .brand img{ filter:none; height:72px; }
footer .eyebrow{ font-size:1rem; letter-spacing:.32em; color:var(--ink); font-weight:500; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
footer .credit{ font-style:italic; font-family:var(--serif); letter-spacing:0; text-transform:none; }
footer .credit a{ color:var(--terracotta); border-bottom:1px solid currentColor; }
footer a:hover{ color:var(--terracotta); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:60px; }
@media(max-width:992px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .foot-grid{ grid-template-columns:1fr; gap:36px; } }

/* Misc */
.parallax{ will-change:transform; }
.hide-scroll::-webkit-scrollbar{ display:none; }
.hide-scroll{ scrollbar-width:none; }
.cta-arrow{ display:inline-flex; align-items:center; gap:14px; font-family:var(--label); letter-spacing:.32em; text-transform:uppercase; font-size:.78rem; }
.cta-arrow .arrow{ display:inline-block; width:48px; height:1px; background:currentColor; position:relative; transition:width .6s var(--ease-cinema); }
.cta-arrow:hover .arrow{ width:72px; }
.cta-arrow .arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }

.float-1{ animation:floatY 9s var(--ease-cinema) infinite alternate; }
.float-2{ animation:floatY 12s var(--ease-cinema) infinite alternate-reverse; }
@keyframes floatY{ from{ transform:translateY(-8px); } to{ transform:translateY(8px); } }

/* ============ LIGHTBOX ============ */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(10,14,12,.96); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .6s var(--ease-cinema); }
.lb.open{ opacity:1; pointer-events:auto; }
.lb .stage{ position:relative; max-width:92vw; max-height:88vh; }
.lb .stage img{ max-width:92vw; max-height:88vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); transition:opacity .4s var(--ease-cinema), transform 1s var(--ease-cinema); }
.lb .stage img.swap{ opacity:0; transform:scale(.98); }
.lb .cap{ position:absolute; left:0; right:0; top:100%; padding-top:18px; color:rgba(251,250,244,.85); text-align:center; font-family:var(--label); letter-spacing:.32em; text-transform:uppercase; font-size:.72rem; }
.lb .ctrl{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.2); color:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .4s var(--ease-cinema), border-color .4s var(--ease-cinema); font-family:var(--serif); font-size:1.3rem; }
.lb .ctrl:hover{ background:rgba(255,255,255,.1); border-color:var(--paper); }
.lb .prev{ left:3vw; }
.lb .next{ right:3vw; }
.lb .close{ position:absolute; top:24px; right:24px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.2); color:var(--paper); cursor:pointer; }
.lb .count{ position:absolute; top:30px; left:30px; color:rgba(251,250,244,.65); font-family:var(--label); letter-spacing:.32em; text-transform:uppercase; font-size:.7rem; }
@media(max-width:768px){ .lb .ctrl{ width:42px; height:42px; } .lb .prev{ left:1vw; } .lb .next{ right:1vw; } }

/* ============ PERFORMANCE & A11Y ============ */
/* Lazy-paint off-screen heavy sections */
.cine, .quartiere, .gallery-rail, .gal-grid, .booking, .services, .zone, .tour, .contacts{ content-visibility:auto; contain-intrinsic-size: 800px; }

/* Disable mouse-tilt / hover effects on touch devices (no real hover) */
@media (hover: none){
  .parallax-tilt{ transform:none !important; }
  .frame:hover .ph, .apt-card:hover .media .img, .gallery-rail .gi:hover .img, .gal-grid .gi:hover .img{ transform:none !important; }
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero .l-bg, .page-hero .l-bg{ animation:none !important; transform:scale(1.04) !important; }
  .scroll-cue{ display:none; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .reveal-mask{ -webkit-mask-image:none !important; mask-image:none !important; }
  .parallax{ transform:none !important; }
}

/* Skip-link a11y */
.skip-link{ position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:9999; }
.skip-link:focus{ left:8px; }

/* ============ LEGAL MODALS ============ */
.nq-modal .modal-content{ background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-deep); }
.nq-modal .modal-header{ border-bottom:1px solid var(--line); padding:24px 32px 18px; align-items:flex-start; }
.nq-modal .modal-title{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,2.4vw,2.2rem); font-weight:400; line-height:1.1; color:var(--ink); }
.nq-modal .modal-body{ padding:24px 32px 32px; font-family:var(--sans); font-size:.98rem; line-height:1.65; color:var(--ink); }
.nq-modal .modal-body h6{ font-family:var(--label); letter-spacing:.32em; text-transform:uppercase; font-size:.7rem; color:var(--ink-soft); margin:24px 0 8px; font-weight:500; }
.nq-modal .modal-body h6:first-child{ margin-top:0; }
.nq-modal .modal-body p{ color:var(--ink); max-width:none; margin-bottom:12px; }
.nq-modal .modal-body ul{ padding-left:20px; margin-bottom:14px; }
.nq-modal .modal-body li{ margin-bottom:4px; color:var(--ink); }
.nq-modal .modal-body a{ color:var(--terracotta); border-bottom:1px solid currentColor; }
.nq-modal .modal-body a:hover{ color:var(--ink); }
.nq-modal .btn-close{ margin-top:6px; }
@media(max-width:768px){
  .nq-modal .modal-header{ padding:18px 22px 14px; }
  .nq-modal .modal-body{ padding:18px 22px 24px; font-size:.95rem; }
}

.legal-links{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.legal-links a{ cursor:pointer; transition:color .3s var(--ease-cinema); }
.legal-links a:hover{ color:var(--terracotta); }

/* ============ OTA BADGES (footer) ============ */
.ota-row{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.ota-row .ota-label{ display:block; font-family:var(--label); letter-spacing:.32em; text-transform:uppercase; font-size:.7rem; color:var(--ink-soft); margin-bottom:14px; }
.ota-row .ota-badges{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.ota{ display:inline-flex; align-items:center; padding:10px 18px; border:1px solid var(--line); background:var(--paper); border-radius:8px; transition:transform .4s var(--ease-cinema), border-color .4s, box-shadow .4s; height:48px; }
.ota:hover{ transform:translateY(-1px); border-color:var(--ink); box-shadow:var(--shadow-soft); }
.ota img{ height:22px; width:auto; display:block; }
.ota-airbnb img{ height:26px; }

/* ============ APT SWITCH (Prenota page) ============ */
.apt-switch{ display:flex; gap:0; margin-bottom:24px; background:var(--paper); border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.apt-switch .apt-pick{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:22px 28px; background:transparent; border:0; border-right:1px solid var(--line); cursor:pointer; transition:background .4s var(--ease-cinema); text-align:left; }
.apt-switch .apt-pick:last-child{ border-right:none; }
.apt-switch .apt-pick:hover{ background:rgba(31,42,38,.04); }
.apt-switch .apt-pick.active{ background:var(--ink); color:var(--paper); }
.apt-switch .apt-pick .dot{ width:12px; height:12px; border-radius:50%; }
.apt-switch .apt-pick .lbl{ font-family:var(--label); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; }
.apt-switch .apt-pick .lbl b{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; text-transform:none; font-size:1.1rem; margin-right:8px; }
.apt-switch .apt-pick .hint{ font-family:var(--sans); font-size:.78rem; letter-spacing:.06em; opacity:.65; text-transform:none; }
.tone-blue-bg{ background:var(--light-blue); }
.tone-green-bg{ background:var(--light-green); }
@media(max-width:560px){
  .apt-switch{ flex-direction:column; }
  .apt-switch .apt-pick{ border-right:none; border-bottom:1px solid var(--line); }
  .apt-switch .apt-pick:last-child{ border-bottom:none; }
}

.booking-hint{display:block;font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);margin-top:4px}