/* ============================================================
   VILLA LUISA — Design System
   Palette da brand guidelines · Tipografia editoriale
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap');

/* Sostituire con il file licenziato del font di brand "Balkind":
   @font-face { font-family:'Balkind'; src:url('../fonts/Balkind.woff2') format('woff2');
                font-weight:400; font-display:swap; }
   È già primo nello stack di --font-display. */

/* Cabinet Grotesk (Fontshare, licenza libera anche per uso commerciale).
   Ospitato in locale invece che dal CDN: una richiesta esterna in meno,
   nessun indirizzo IP dei visitatori inviato a terzi. */
@font-face{
  font-family:'Cabinet Grotesk'; src:url('../fonts/CabinetGrotesk-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --green:      #50563F;
  --green-dark: #363A2A;
  --green-lite: #A1AA82;
  --lite-2:     #CBD2AF;   /* variante schiarita: testo piccolo su verde */
  --ink:        #020D10;
  --white:      #FFFFFF;

  /* Neutri caldi derivati (per far respirare la fotografia) */
  --bone:   #F2EEE6;
  --bone-2: #E8E2D6;
  --sand:   #CFC6B4;

  /* Ruoli */
  --bg:        var(--bone);
  --fg:        var(--ink);
  --muted:     #5C5F55;
  --accent:    #5C5F55;
  --hairline:  rgba(2,13,16,.16);
  --hairline-i:rgba(255,255,255,.22);

  /* Tipografia */
  --font-display: 'Balkind','Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-hero:  clamp(3.1rem, 11.5vw, 12.5rem);
  --fs-d1:    clamp(2.6rem, 7.4vw, 7.4rem);
  --fs-d2:    clamp(2.1rem, 4.6vw, 4.4rem);
  --fs-d3:    clamp(1.6rem, 2.6vw, 2.5rem);
  --fs-body:  clamp(1rem, .55vw + .88rem, 1.125rem);
  --fs-sm:    .8125rem;
  --fs-xs:    .6875rem;

  /* Spazio */
  --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --sec:    clamp(5rem, 11vh + 4vw, 11rem);
  --maxw:   1680px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 320ms;

  /* Z-scale */
  --z-nav: 50; --z-overlay: 60; --z-top: 70;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-ui); font-weight:300; font-size:var(--fs-body);
  line-height:1.7; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; background:var(--bone-2); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul{ list-style:none; padding:0; }
::selection{ background:var(--green); color:var(--white); }

:focus-visible{ outline:2px solid var(--green-lite); outline-offset:3px; border-radius:2px; }
.on-dark :focus-visible, .is-dark :focus-visible{ outline-color:var(--green-lite); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:var(--z-top);
  background:var(--green); color:#fff; padding:.9rem 1.4rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- Tipografia ---------- */
.display{
  font-family:var(--font-display); font-weight:300;
  line-height:.92; letter-spacing:.01em; text-transform:uppercase;
  text-wrap:balance;
}
h1,h2,h3,h4{ font-weight:300; }
.h-hero{ font-size:var(--fs-hero); letter-spacing:.035em; }
.h1{ font-size:var(--fs-d1); }
.h2{ font-size:var(--fs-d2); }
.h3{ font-size:var(--fs-d3); }
.serif-lede{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.35rem,2.1vw,2.05rem); line-height:1.34;
  letter-spacing:.005em; text-transform:none;
}
.eyebrow{
  font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.24em; color:var(--accent);
}
.prose{ max-width:62ch; color:var(--muted); }
.prose p + p{ margin-top:1.15em; }
.num{ font-variant-numeric:lining-nums tabular-nums; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec); }
.is-dark{ background:var(--green); color:var(--white); }
.is-darker{ background:var(--green-dark); color:var(--white); }
.is-ink{ background:var(--ink); color:var(--white); }
.hairline{ border-top:1px solid var(--hairline); }

/* Un solo punto di verita': su fondo scuro cambiano i ruoli, non i componenti. */
.is-dark, .is-darker, .is-ink, .on-dark, .menu, .site-footer{
  --muted:    rgba(255,255,255,.82);
  --accent:   var(--lite-2);
  --hairline: var(--hairline-i);
  --btn-fg-hover: var(--green-dark);
}
.is-ink, .site-footer{ --btn-fg-hover: var(--ink); }

/* Fascia meta editoriale (firma del layout) */
.meta-row{
  display:grid; grid-template-columns:1fr 1.4fr .9fr; gap:1.5rem;
  padding-block:1.1rem; border-bottom:1px solid var(--hairline);
  font-size:var(--fs-xs); font-weight:500; text-transform:uppercase; letter-spacing:.18em;
}
.meta-row .c2{ justify-self:center; text-align:center; }
.meta-row .c3{ grid-column:3; justify-self:end; text-align:right; color:var(--muted); }
@media (max-width:780px){
  .meta-row{ grid-template-columns:1fr 1fr; gap:.5rem 1rem; letter-spacing:.14em; }
  .meta-row .c3{ grid-column:1/-1; justify-self:start; text-align:left; }
}

/* ---------- Bottoni ---------- */
.btn{
  --bc:currentColor; --bfg:currentColor;
  display:inline-flex; align-items:center; gap:.85rem;
  min-height:48px; padding:.85rem 1.9rem;
  border:1px solid var(--bc); border-radius:999px; color:var(--bfg);
  font-size:var(--fs-xs); font-weight:500; text-transform:uppercase; letter-spacing:.2em;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--bc);
  transform:scaleX(0); transform-origin:right; transition:transform 420ms var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:scaleX(1); transform-origin:left; }
.btn:hover,.btn:focus-visible{ color:var(--btn-fg-hover, var(--bone)); }
.btn .arw{ transition:transform 420ms var(--ease-out); }
.btn:hover .arw{ transform:translateX(5px); }
.btn--solid{ background:var(--green); border-color:var(--green); color:var(--white); --bc:var(--ink); --btn-fg-hover:var(--bone); }
.btn--light{ --bc:#fff; --bfg:#fff; --btn-fg-hover:var(--green-dark); }

.link-u{
  display:inline-block; font-size:var(--fs-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; padding-bottom:.35rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size 380ms var(--ease-out);
}
.link-u:hover{ background-size:28% 1px; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:var(--z-nav);
  color:var(--white);
  transition:background 420ms var(--ease), color 420ms var(--ease), border-color 420ms var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; min-height:74px;
}
.brand{
  font-family:var(--font-display); font-size:clamp(.95rem,1.15vw,1.15rem);
  text-transform:uppercase; letter-spacing:.42em; text-indent:.42em; white-space:nowrap;
}
.nav-side{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.6rem); }
.nav-side.right{ justify-content:flex-end; }
.nav-lbl{
  font-size:var(--fs-xs); font-weight:500; text-transform:uppercase; letter-spacing:.2em;
  min-height:44px; display:inline-flex; align-items:center; gap:.6rem;
  opacity:.92; transition:opacity var(--dur) var(--ease);
}
.nav-lbl:hover{ opacity:1; }
.site-header.solid{ background:var(--bone); color:var(--ink); border-bottom-color:var(--hairline); }
.site-header.hide{ transform:translateY(-100%); transition:transform 400ms var(--ease); }
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:26px; }
.burger i{ display:block; height:1px; background:currentColor; transition:transform 320ms var(--ease), opacity 220ms; }
.burger i:nth-child(2){ width:70%; }
.nav-lbl:hover .burger i:nth-child(2){ width:100%; }
@media (max-width:900px){ .nav-side .hide-sm{ display:none; } }

/* ---------- Menu overlay ---------- */
.menu{
  position:fixed; inset:0; z-index:var(--z-overlay); background:var(--green);
  color:var(--white); display:grid; grid-template-rows:auto 1fr auto;
  clip-path:inset(0 0 100% 0); transition:clip-path 720ms var(--ease-out);
  visibility:hidden;
}
.menu[data-open="true"]{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu .bar{ display:flex; align-items:center; justify-content:space-between; min-height:74px; }
.menu-list{ display:flex; flex-direction:column; justify-content:center; gap:.1rem; padding-block:2rem; }
.menu-list a{
  font-family:var(--font-display); font-weight:300; text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,5.5rem); line-height:1.06; letter-spacing:.02em;
  display:flex; align-items:baseline; gap:1.2rem; width:max-content; max-width:100%;
  opacity:0; transform:translateY(28px);
  transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out), color 260ms;
}
.menu[data-open="true"] .menu-list a{ opacity:1; transform:none; }
.menu-list a span{ font-family:var(--font-ui); font-size:var(--fs-xs); letter-spacing:.2em; opacity:.72; }
.menu-list a:hover{ color:var(--green-lite); }
.menu-foot{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; padding-block:2rem; font-size:var(--fs-sm); }
.menu-foot span{ opacity:.6; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-start; color:var(--white); overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; animation:heroZoom 14s var(--ease-out) forwards; }
@keyframes heroZoom{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,13,16,.58) 0%, rgba(2,13,16,.16) 30%, rgba(2,13,16,.42) 58%, rgba(2,13,16,.86) 100%);
}
.hero-inner{ position:relative; padding-block:clamp(9rem,30vh,18rem) 0; text-align:center; }
.hero .h-hero{ font-size:min(90px,12vw); margin-bottom:clamp(.8rem,1.6vw,1.3rem); }
.hero-sub{
  margin-inline:auto;
  /* Cabinet Grotesk per nome e non var(--font-ui): è una scelta di questo
     sottotitolo, non del resto dell'interfaccia. */
  font-family:'Cabinet Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:clamp(1.1rem,1.55vw,1.4rem); font-weight:300;
  line-height:1.55; letter-spacing:.05em; color:rgba(255,255,255,.9);
  text-shadow:0 1px 18px rgba(2,13,16,.6);
}
.hero-cap{
  max-width:64ch; margin-inline:auto; margin-top:clamp(1.8rem,4vw,3rem);
  font-size:var(--fs-sm); line-height:1.65; color:rgba(255,255,255,.9); text-shadow:0 1px 18px rgba(2,13,16,.6);
}
.scrollcue{ position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%); display:flex; justify-content:center; }
.scrollcue i{ display:block; width:1px; height:54px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.scrollcue i::after{ content:''; position:absolute; inset:0; background:#fff; animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* Barra richiesta disponibilità */
.enquiry{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:center;
  gap:0; max-width:1020px; margin-inline:auto;
  border:1px solid rgba(255,255,255,.34); border-radius:999px;
  background:rgba(2,13,16,.24); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:.4rem .4rem .4rem 0;
}
.enquiry .f{ position:relative; padding:.35rem 1.4rem; border-right:1px solid rgba(255,255,255,.22); text-align:left; }
.enquiry .f:first-child{ padding-left:1.9rem; }
.enquiry label{ display:block; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.enquiry input::placeholder{ color:rgba(255,255,255,.62); }
.enquiry input,.enquiry select{
  width:100%; min-height:34px; background:transparent; border:0; color:#fff;
  font-size:.95rem; letter-spacing:.02em; cursor:pointer;
}
.enquiry select option{ color:var(--ink); }
.enquiry input::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.6; cursor:pointer; }
.enquiry .btn{ margin-left:1rem; white-space:nowrap; }
@media (max-width:900px){
  .enquiry{ grid-template-columns:1fr 1fr; border-radius:20px; padding:.6rem; gap:.4rem; }
  .enquiry .f{ border-right:0; border-bottom:1px solid rgba(255,255,255,.18); padding:.5rem .9rem; }
  .enquiry .f:first-child{ padding-left:.9rem; }
  .enquiry .btn{ grid-column:1/-1; margin:.4rem 0 0; justify-content:center; }
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:110ms } .reveal[data-d="2"]{ transition-delay:220ms }
.reveal[data-d="3"]{ transition-delay:330ms } .reveal[data-d="4"]{ transition-delay:440ms }
.mask{ display:block; overflow:hidden; }
.mask > *{ display:block; transform:translateY(105%); transition:transform 1100ms var(--ease-out); }
.mask.in > *{ transform:none; }

/* ---------- Intro storytelling ---------- */
.intro-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,7rem); align-items:start; }
.intro-grid .figs{ position:relative; }
.figure{ position:relative; }
.figure figcaption{ margin-top:.85rem; font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.figure--offset{ margin-top:clamp(2rem,7vw,6.5rem); }
.stack-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,2rem); }
@media (max-width:900px){ .intro-grid{ grid-template-columns:1fr; } }

.thread{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.thread path{ fill:none; stroke:var(--sand); stroke-width:1; stroke-dasharray:1600; stroke-dashoffset:1600; }
.thread.in path{ transition:stroke-dashoffset 2.4s var(--ease-out); stroke-dashoffset:0; }
:is(.is-dark,.is-darker,.is-ink) .thread path{ stroke:rgba(255,255,255,.28); }

/* ---------- Carosello spazi ---------- */
.rail{
  display:flex; gap:clamp(1.5rem,4vw,4.5rem); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:max(var(--gutter), calc(50vw - 26rem)); padding-block:1rem 2.5rem;
  scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth;
}
.rail::-webkit-scrollbar{ display:none; }
.rail-item{ flex:0 0 min(52rem,86vw); scroll-snap-align:center; position:relative; }
.rail-item .shot{ position:relative; aspect-ratio:4/3.1; overflow:hidden; }
.rail-item .shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease-out), filter 700ms; transform:scale(1.02); }
.rail-item:hover .shot img{ transform:scale(1.07); }
.rail-item .ttl{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:max-content; max-width:120%; color:#fff; text-align:center; pointer-events:none;
  font-size:clamp(2rem,5.2vw,4.6rem); text-shadow:0 2px 40px rgba(2,13,16,.45);
}
.rail-item .meta{ display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:1.4rem; }
.rail-item .meta p{ max-width:42ch; font-size:var(--fs-sm); color:var(--muted); }
.rail-item[aria-hidden="true"]{ opacity:.42; }
.rail-nav{ display:flex; align-items:center; gap:1.2rem; }
.rail-nav button{
  width:52px; height:52px; border:1px solid var(--hairline); border-radius:50%;
  display:grid; place-items:center; transition:background var(--dur), color var(--dur), border-color var(--dur);
}
.rail-nav button:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.rail-nav button[disabled]{ opacity:.3; cursor:not-allowed; }
:is(.is-dark,.is-darker,.is-ink) .rail-nav button:hover{ background:#fff; color:var(--green-dark); border-color:#fff; }
.counter{ font-size:var(--fs-xs); letter-spacing:.2em; }

/* ---------- Slider suite ---------- */
.suite{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.suite-media{ position:relative; aspect-ratio:5/5.4; overflow:hidden; }
.suite-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity 900ms var(--ease-out), transform 1.6s var(--ease-out);
}
.suite-media img.on{ opacity:1; transform:none; }
.suite-body{ position:relative; }
.suite-title{ position:relative; margin-left:clamp(-9rem,-7vw,0rem); }
.suite-title .h1{ text-shadow:0 2px 30px rgba(2,13,16,.28); }
.suite-specs{ display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:clamp(1.6rem,3vw,2.6rem); }
.suite-specs ul li{ font-size:var(--fs-sm); letter-spacing:.06em; padding-left:1rem; position:relative; }
.suite-specs ul li::before{ content:''; position:absolute; left:0; top:.72em; width:4px; height:4px; border-radius:50%; background:var(--green-lite); }
.suite-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:clamp(2rem,4vw,3.4rem); }
.pill{
  display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1.6rem;
  border:1px solid var(--hairline); border-radius:999px;
  font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
}
.fade-swap{ transition:opacity 260ms var(--ease); }
.fade-swap.out{ opacity:0; }
@media (max-width:900px){ .suite{ grid-template-columns:1fr; } .suite-title{ margin-left:0; } .suite-media{ aspect-ratio:4/3; } }

/* ---------- Griglie generiche ---------- */
.grid{ display:grid; gap:clamp(1.6rem,3.4vw,3.2rem); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.split--wide-l{ grid-template-columns:1.25fr 1fr; }
@media (max-width:900px){ .split,.split--wide-l{ grid-template-columns:1fr; } }

.stat{ border-top:1px solid var(--hairline); padding-top:1.4rem; }
.stat b{ display:block; font-family:var(--font-display); font-weight:300; font-variant-numeric:lining-nums tabular-nums; font-size:clamp(2.6rem,4.6vw,4.2rem); line-height:1; }
.stat span{ display:block; margin-top:.7rem; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* Card servizio / formato evento */
.card{ border-top:1px solid var(--hairline); padding-top:1.5rem; }
.card .idx{ font-size:var(--fs-xs); letter-spacing:.2em; color:var(--accent); }
.card h3{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.3rem,1.9vw,1.75rem); letter-spacing:.04em; margin:.9rem 0 .8rem; }
.card p{ font-size:var(--fs-sm); color:var(--muted); }

.card-img{ position:relative; overflow:hidden; display:block; }
.card-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.card-img:hover img{ transform:scale(1.05); }
.card-img .cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem;
  color:#fff; background:linear-gradient(transparent,rgba(2,13,16,.66));
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(1.15rem,1.8vw,1.6rem);
}

/* Quote */
.quote{ text-align:center; }
.quote blockquote{ max-width:15em; margin-inline:auto; }
.quote blockquote{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.6rem,3.4vw,3rem); line-height:1.24; }
.quote cite{ display:block; margin-top:1.8rem; font-family:var(--font-ui); font-style:normal; font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }

/* Timeline / processo */
.steps{ counter-reset:s; display:grid; gap:0; }
.steps li{ counter-increment:s; display:grid; grid-template-columns:5rem 1fr; gap:clamp(1rem,3vw,3rem); padding-block:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--hairline); }
.steps li::before{ content:'0' counter(s); font-size:var(--fs-xs); letter-spacing:.2em; color:var(--muted); padding-top:.55rem; color:var(--accent); }
.steps h3{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.25rem,2.2vw,2rem); letter-spacing:.04em; margin-bottom:.5rem; }
.steps p{ font-size:var(--fs-sm); color:var(--muted); max-width:62ch; }
@media (max-width:620px){ .steps li{ grid-template-columns:1fr; gap:.4rem; } }

/* Tabella capienze */
.table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table th,.table td{ text-align:left; padding:1.1rem .6rem; border-bottom:1px solid var(--hairline); }
.table th{ font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--accent); }
.table td:first-child{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:1.15rem; }
.table-scroll{ overflow-x:auto; }

/* ---------- Galleria ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filters button{
  min-height:44px; padding:.55rem 1.35rem; border:1px solid var(--hairline); border-radius:999px;
  font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
  transition:background var(--dur), color var(--dur), border-color var(--dur);
}
.filters button:hover{ border-color:var(--green); }
.filters button[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#fff; }
.masonry{ columns:3; column-gap:clamp(1rem,2vw,1.8rem); }
.masonry figure{ break-inside:avoid; margin-bottom:clamp(1rem,2vw,1.8rem); }
.masonry img{ width:100%; cursor:zoom-in; transition:opacity 320ms var(--ease), transform 900ms var(--ease-out); }
.masonry figure:hover img{ opacity:.88; }
.masonry figure[hidden]{ display:none; }
@media (max-width:1000px){ .masonry{ columns:2; } }
@media (max-width:600px){ .masonry{ columns:1; } }

.lightbox{
  position:fixed; inset:0; z-index:var(--z-top); background:rgba(2,13,16,.94);
  display:grid; place-items:center; padding:clamp(1rem,5vw,4rem);
  opacity:0; visibility:hidden; transition:opacity 380ms var(--ease), visibility 380ms;
}
.lightbox[data-open="true"]{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:84svh; object-fit:contain; }
.lightbox .x{ position:absolute; top:1.4rem; right:1.6rem; color:#fff; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; min-height:44px; padding:0 .6rem; }
.lightbox figcaption{ margin-top:1.2rem; text-align:center; color:rgba(255,255,255,.7); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; }

/* ---------- Form ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,2.6vw,2.4rem); }
.field{ position:relative; }
.field.full{ grid-column:1/-1; }
.field > label{ display:block; font-size:var(--fs-xs); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:.85rem 0; background:transparent;
  border:0; border-bottom:1px solid var(--hairline); border-radius:0;
  font-size:1.02rem; transition:border-color var(--dur) var(--ease);
}
.field select option{ color:var(--ink); }
.field textarea{ min-height:132px; padding-top:.5rem; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--green); }
:is(.is-dark,.is-darker,.is-ink) .field :is(input,select,textarea):focus{ border-bottom-color:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:var(--sand); }
.field .err{ display:block; min-height:1.35rem; margin-top:.45rem; font-size:var(--fs-xs); letter-spacing:.1em; color:#8E3B2F; }
:is(.is-dark,.is-darker,.is-ink) .field .err{ color:#F2B8AC; }
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{ border-bottom-color:#8E3B2F; }
:is(.is-dark,.is-darker,.is-ink) .field[data-invalid="true"] :is(input,select,textarea){ border-bottom-color:#F2B8AC; }
.choices{ display:flex; flex-wrap:wrap; gap:.6rem; }
.choices input{ position:absolute; opacity:0; width:0; height:0; }
.choices label{
  display:inline-flex; align-items:center; min-height:44px; padding:.55rem 1.3rem;
  border:1px solid var(--hairline); border-radius:999px; cursor:pointer;
  font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
  transition:background var(--dur), color var(--dur), border-color var(--dur);
}
.choices input:checked + label{ background:#fff; color:var(--green-dark); border-color:#fff; }
.choices input:focus-visible + label{ outline:2px solid var(--green-lite); outline-offset:3px; }
.form-note{ font-size:var(--fs-xs); line-height:1.75; color:rgba(255,255,255,.7); max-width:56ch; }
.form-status{ font-size:var(--fs-sm); letter-spacing:.06em; min-height:1.5rem; }
@media (max-width:680px){ .form-grid{ grid-template-columns:1fr; } }

.aside-card{ border:1px solid var(--hairline); padding:clamp(1.6rem,3vw,2.4rem); }
.aside-card dl{ display:grid; gap:1.1rem; margin:0; }
.aside-card dt{ font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.aside-card dd{ margin:.3rem 0 0; font-size:var(--fs-sm); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.78); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(2rem,4vw,4rem); padding-block:clamp(3.5rem,7vw,6rem); }
.site-footer h4{ font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4rem; }
.site-footer a:hover{ color:#fff; }
.site-footer li + li{ margin-top:.7rem; }
.site-footer .fbrand{ font-family:var(--font-display); font-size:clamp(1.8rem,3.2vw,2.6rem); text-transform:uppercase; letter-spacing:.16em; color:#fff; }
.footer-bot{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; padding-block:1.8rem; border-top:1px solid rgba(255,255,255,.12); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- Page hero interne ---------- */
.pagehead{ position:relative; min-height:clamp(60svh,68svh,78svh); display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.pagehead .hero-media::after{ background:linear-gradient(180deg,rgba(2,13,16,.58),rgba(2,13,16,.24) 38%,rgba(2,13,16,.82)); }
.pagehead .inner{ position:relative; padding-block:8rem 3.4rem; }
.crumb{ font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:1.4rem; }

/* ---------- Utility ---------- */
.mt-1{margin-top:.8rem}.mt-2{margin-top:1.6rem}.mt-3{margin-top:2.4rem}.mt-4{margin-top:3.4rem}.mt-6{margin-top:clamp(3rem,6vw,5.5rem)}
.center{ text-align:center; } .flex-between{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; } .mask > *{ transform:none; }
  .thread path{ stroke-dashoffset:0; }
}
@media print{ .site-header,.menu,.scrollcue,.rail-nav{ display:none } body{ background:#fff } }

/* Ritratto: riempie la colonna nelle sezioni split */
.figure--tall img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
@media (max-width:900px){ .figure--tall img{ aspect-ratio:4/3; } }

/* Ritmo della galleria */
.masonry img{ aspect-ratio:16/9; object-fit:cover; }
.masonry .tall img{ aspect-ratio:3/4; }
.masonry .sq img{ aspect-ratio:1/1; }
.menu-list a[aria-current="page"]{ color:var(--lite-2); }

/* Leggibilita' del testo sovrapposto alla fotografia */
.pagehead .inner .display,.pagehead .crumb,.hero .h-hero{ text-shadow:0 2px 34px rgba(2,13,16,.55); }
.pagehead .crumb{ color:rgba(255,255,255,.86); }

/* Header: la firma non deve stringere i lati sui telefoni piccoli */
@media (max-width:480px){
  .brand{ font-size:.85rem; letter-spacing:.24em; text-indent:.24em; }
  .site-header .bar{ min-height:64px; }
}

/* ---------- Prenotazione diretta (versione dimostrativa Tundem) ---------- */
.book{ display:grid; grid-template-columns:1.1fr 1fr; background:var(--bone); min-height:min(760px,100vh); }
.book-img{ position:relative; overflow:hidden; }
.book-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.book-panel{ padding:clamp(3rem,7vw,6.5rem) clamp(1.5rem,6vw,6rem); display:flex; flex-direction:column; justify-content:center; }
.book-panel > div{ max-width:460px; width:100%; }
.book-title{ font-size:clamp(2.6rem,4.4vw,3.8rem); line-height:1.02; text-transform:none; letter-spacing:0; }
.book-lede{ margin-top:1rem; color:var(--muted); }
.book-form{ margin-top:2.2rem; }
.book-box{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--hairline); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.35); }
.bf{ display:block; min-width:0; padding:.95rem 1.2rem; cursor:pointer; }
.bf + .bf{ border-left:1px solid var(--hairline); }
.bf.wide{ grid-column:1/-1; border-left:0; border-top:1px solid var(--hairline); }
.bf span{ display:block; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.bf input,.bf select{ width:100%; margin-top:.25rem; border:0; background:transparent; font-family:var(--font-display); font-size:1.4rem; color:var(--ink); padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; min-height:1.9rem; min-width:0; max-width:100%; }
.bf input::-webkit-calendar-picker-indicator{ opacity:.45; cursor:pointer; }
.bf:focus-within{ background:rgba(255,255,255,.6); }
.book-sum{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1.4rem; color:var(--muted); font-size:.95rem; }
.book-sum b{ font-family:var(--font-display); font-weight:400; font-size:2rem; color:var(--ink); }
.book-go,.book-pick{ display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; margin-top:1rem; padding:1.15rem; border:0; border-radius:999px;
  background:var(--green); color:#fff; font-family:var(--font-ui); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:background .3s; }
.book-go:hover,.book-pick:hover{ background:var(--green-dark); }
.book-back{ border:0; background:none; padding:0; font-family:var(--font-ui); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); cursor:pointer; }
.book-when{ margin-top:1rem; font-family:var(--font-display); font-size:1.7rem; line-height:1.15; }
.book-list{ margin-top:1.4rem; display:grid; gap:.6rem; }
.book-row{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:1rem; align-items:center; padding:.6rem; border:1px solid var(--hairline); border-radius:12px; background:rgba(255,255,255,.35); }
.book-row img{ width:64px; height:64px; object-fit:cover; border-radius:8px; display:block; }
.book-row h3{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; line-height:1.1; }
.book-when{ line-height:1.15; }
.book-row p{ font-size:var(--fs-xs); letter-spacing:.06em; color:var(--muted); margin-top:.2rem; }
.book-row .tot{ text-align:right; }
.book-row .tot b{ display:block; font-family:var(--font-display); font-weight:400; font-size:1.35rem; }
.book-row .tot button{ margin-top:.3rem; border:1px solid var(--green); background:none; color:var(--green); border-radius:999px; padding:.45rem 1rem; font-family:var(--font-ui); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; }
.book-row .tot button:hover{ background:var(--green); color:#fff; }
.book-ok{ margin-top:1.4rem; padding:1.6rem; border:1px solid var(--hairline); border-radius:14px; background:rgba(255,255,255,.4); }
.book-ok .ck{ width:44px; height:44px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:1.3rem; }
.book-ok h3{ font-family:var(--font-display); font-weight:400; font-size:1.9rem; line-height:1.1; margin-top:1rem; }
.book-ok p{ margin-top:.5rem; color:var(--muted); font-size:.95rem; }
.book-ok .note{ font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; margin-top:1.2rem; }
@media (max-width:900px){
  .book{ grid-template-columns:1fr; min-height:0; }
  .book-img{ height:300px; }
  .book-panel > div{ max-width:none; }
  .book-panel{ padding:2.6rem 1.25rem 3.2rem; }
  .bf{ padding:.85rem 1rem; }
  .bf input,.bf select{ font-size:1.2rem; }
  .book-row{ grid-template-columns:52px minmax(0,1fr) auto; gap:.7rem; }
  .book-row img{ width:52px; height:52px; }
}