/* ==========================================================
   PROPERHOST · Hospitality — Luxury edition
   Riferimenti generali del settore: brand boutique mediterranei
   Palette : Teal profondo + Avorio caldo + Oro antico
   Typography: Cormorant Garamond (display serif) + Inter (body)
   ========================================================== */

:root{
  /* Palette */
  --primary:#0b6b5e;
  --primary-dark:#053e36;
  --primary-soft:#022823;
  --accent:#b89968;
  --accent-soft:#d8c19a;
  --accent-deep:#8a6f43;

  --bg:#f6f1e8;
  --bg-2:#efe7d6;
  --bg-3:#e7dcc6;
  --bg-warm:#fbf7ef;
  --white:#ffffff;

  --text:#1c2826;
  --text-2:#3f504c;
  --muted:#7a857f;
  --muted-2:#b8b0a0;

  --line:rgba(28,40,38,.10);
  --line-strong:rgba(28,40,38,.22);
  --overlay-dark:rgba(5,30,28,.60);

  /* Spacing system */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:80px;
  --space-2xl:120px;
  
  /* Section spacing */
  --section-padding:80px;
  --section-padding-mobile:48px;

  /* Nav height reference */
  --nav-height:100px;

  --max:1320px;
  --max-text:680px;
  --shadow-sm:0 2px 4px rgba(28,40,38,.04),0 4px 12px rgba(28,40,38,.06);
  --shadow-md:0 4px 8px rgba(28,40,38,.06),0 12px 24px rgba(28,40,38,.08);
  --shadow-lg:0 8px 16px rgba(28,40,38,.08),0 24px 48px rgba(28,40,38,.12);
  --shadow-xl:0 12px 24px rgba(28,40,38,.1),0 32px 64px rgba(28,40,38,.14);
  --shadow-card:0 2px 8px rgba(28,40,38,.04),0 8px 24px rgba(28,40,38,.08),0 16px 48px rgba(28,40,38,.06);
  --shadow-elevated:0 4px 12px rgba(28,40,38,.08),0 16px 32px rgba(28,40,38,.12),0 24px 56px rgba(28,40,38,.1);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-full:9999px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-display:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
}


/* =================== CUSTOM CURSOR =================== */
@media (hover: none), (pointer: coarse){
  .custom-cursor, .custom-cursor-text{ display: none !important; }
}
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s var(--ease);
  mix-blend-mode: difference;
  opacity: 1;
}
.custom-cursor.hover {
  width: 48px;
  height: 48px;
  background: rgba(184, 153, 104, 0.15);
  border-color: var(--accent);
}
.custom-cursor.hidden {
  opacity: 0;
}
.custom-cursor-text {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  pointer-events: none;
  z-index: 10000;
  transform: translate(24px, 24px);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.custom-cursor-text.visible {
  opacity: 1;
}

/* =================== RESET =================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-weight:400;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px dotted var(--accent);
  outline-offset: 4px;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10001;
  background: var(--primary);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(2, 40, 35, 0.28);
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:color .25s var(--ease)}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent);color:#fff}

.container{
  width:min(calc(100% - 48px), var(--max));
  margin-inline:auto;
}

/* =================== TIPOGRAFIA =================== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.005em;
  color:var(--text);
}
h1{font-size:clamp(44px,7vw,96px);font-weight:300;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.6vw,64px);font-weight:300}
h3{font-size:clamp(24px,2.4vw,38px);font-weight:400}
h4{font-size:clamp(18px,1.6vw,22px);font-weight:500}
h5{font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.32em;color:var(--text)}
p{font-size:16px;line-height:1.85;color:var(--text-2);font-weight:400}
em{font-style:italic;color:var(--accent-deep)}

.eyebrow,.section-tag,.small{
  display:inline-block;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.36em;
  color:var(--accent-deep);
  margin-bottom:22px;
}
.section-tag::before,.eyebrow::before{
  content:'';
  display:inline-block;
  width:28px;height:1px;
  background:var(--accent);
  vertical-align:middle;
  margin-right:14px;
  transform:translateY(-2px);
}
.section-title{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(34px,4.6vw,62px);
  line-height:1.05;
  margin-bottom:28px;
  color:var(--text);
  letter-spacing:-.012em;
}
.section-title em{font-style:italic;font-weight:400;color:var(--accent-deep)}
.section-text{font-size:17px;line-height:1.85;color:var(--text-2);max-width:var(--max-text)}

.list{margin-top:32px;display:flex;flex-direction:column;gap:18px}
.list li{
  position:relative;padding-left:34px;
  font-size:15.5px;color:var(--text-2);line-height:1.75;
  font-family:var(--font-body);
}
.list li::before{content:'';position:absolute;left:0;top:14px;width:20px;height:1px;background:var(--accent)}

/* =================== TOPBAR (split: nav | logo centered | nav) =================== */
.topbar{
  position:absolute;
  inset:0 0 auto 0;
  z-index:50;
  padding:36px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.topbar.scrolled{
  position:fixed;
  background:rgba(246,241,232,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:18px 0;
  box-shadow:0 1px 0 var(--line);
}

/* Layout split: nav-left | logo center | nav-right */
.nav-wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:50px;
  color:#fff;
}

/* LEFT NAV */
.nav-left{justify-self:end}
.nav-right{justify-self:start}
.nav{display:flex;align-items:center;gap:42px}

.nav a{
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:#fff;
  position:relative;
  padding:8px 0;
  transition:color .2s var(--ease);
}
.nav a:hover,.nav a.active{color:var(--accent-soft)}
.nav a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--accent-soft);
  transition:width .3s var(--ease);
}
.nav a.active::after,.nav a:hover::after{width:100%}

.topbar.scrolled .nav a{color:var(--text)}
.topbar.scrolled .nav a:hover,.topbar.scrolled .nav a.active{color:var(--accent-deep)}
.topbar.scrolled .brand-main{color:var(--text)}
.topbar.scrolled .brand-sub{color:var(--muted)}

/* CENTERED BRAND — wordmark tipografico (PNG nascosto, lettering in evidenza) */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  text-decoration:none;
  line-height:1;
}
.brand img{display:none}
.brand-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1;
}
.brand-main{
  font-family:var(--font-display);
  font-size:clamp(40px, 4.6vw, 58px);
  font-weight:500;
  font-style:italic;
  letter-spacing:.002em;
  color:#fff;
  text-transform:capitalize;
  line-height:1;
  transition:font-size .25s var(--ease);
}
.topbar.scrolled .brand-main{font-size:clamp(28px, 3vw, 36px)}
.brand-sub{
  font-family:var(--font-body);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.46em;
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
  margin-top:14px;
}

/* Mobile toggle (nascosto su desktop split) */
.nav-toggle{display:none}
.nav-mobile{display:none}

@media (max-width: 980px){
  .nav-left,.nav-right{display:none}
  .nav-wrap{grid-template-columns:auto auto;justify-content:space-between;gap:20px}
  .brand{align-items:flex-start;flex-direction:row;gap:12px}
  .brand-text{align-items:flex-start;text-align:left}
  .brand-main{font-size:22px}
  .brand-sub{font-size:8.5px;margin-top:4px}
  .brand img{height:42px}
  .nav-toggle{
    display:inline-flex;
    width:42px;height:42px;
    position:relative;
    align-items:center;
    justify-content:center;
    z-index:60;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{
    display:block;
    width:26px;height:1px;
    background:#fff;
    position:absolute;
    transition:transform .25s var(--ease), top .25s var(--ease), opacity .2s var(--ease);
  }
  .nav-toggle span{top:50%}
  .nav-toggle span::before{content:'';top:-8px;left:0}
  .nav-toggle span::after{content:'';top:8px;left:0}
  .nav-toggle[aria-expanded="true"] span{opacity:0;transform:none}
  .nav-toggle[aria-expanded="true"] span::before{top:50%;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{top:50%;transform:rotate(-45deg)}
  .topbar.scrolled .nav-toggle span,
  .topbar.scrolled .nav-toggle span::before,
  .topbar.scrolled .nav-toggle span::after{background:var(--text)}

  .nav-mobile{
    position:fixed;
    inset:0 0 0 auto;
    width:100%;max-width:380px;
    background:var(--bg);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    padding:110px 32px 40px;
    transform:translateX(100%);
    transition:transform .35s var(--ease), opacity .35s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.18);
    z-index:40;
    display:flex !important;
    opacity:0;
  }
  .nav-mobile.open{transform:translateX(0);opacity:1}
  .nav-mobile::before{
    content:'';
    position:fixed;
    inset:0;
    width:calc(100% - 380px);
    background:rgba(5,30,28,.4);
    opacity:0;
    transition:opacity .35s var(--ease);
  }
  .nav-mobile.open::before{opacity:1}
  .nav-mobile a{
    color:var(--text);
    font-size:16px;
    padding:18px 0;
    width:100%;
    border-bottom:1px solid var(--line);
    letter-spacing:.22em;
  }
  .nav-mobile a:last-child{border-bottom:none}
  .nav-mobile a::after{display:none}
}

/* =================== BACK TO TOP =================== */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  box-shadow: var(--shadow-md);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* =================== BUTTONS =================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  padding:18px 36px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:all .3s var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .3s var(--ease);
  z-index:-1;
}
.btn:hover::before{transform:translateY(0)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);border-radius:var(--radius-sm)}
.btn-primary:hover{border-color:var(--accent);color:#fff}
.btn-outline{background:transparent;color:var(--text);border-color:var(--text);border-radius:var(--radius-sm)}
.btn-outline:hover{border-color:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);border-radius:var(--radius-sm)}
.btn-ghost:hover{border-color:var(--accent);color:#fff}
.btn-gold{background:transparent;color:var(--accent-deep);border-color:var(--accent);letter-spacing:.3em;padding:14px 26px;font-size:10px;border-radius:var(--radius-sm)}
.btn-gold:hover{border-color:var(--accent);color:#fff}

/* =================== HERO CINEMA (full-screen video) =================== */
.hero{
  position:relative;
  min-height:100vh;
  color:#fff;
  overflow:hidden;
  background-color:#0a0a0a;
}

/* Hero - enhanced scroll animations */
.hero[data-scrolled="true"] .hero-video-overlay{
  opacity:.7;
  transition:opacity .5s var(--ease)
}
.hero[data-scrolled="true"] .hero-cinema-content{
  opacity:.4;
  transform:translateY(60px);
  transition:opacity .4s var(--ease), transform .6s var(--ease)
}
.hero[data-scrolled="true"] .hero-discover{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .4s var(--ease), transform .4s var(--ease)
}
.hero-video-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.32) 50%, rgba(0,0,0,.55) 100%);
  z-index:1;
}

/* Hero text entrance - enhanced */
.hero-cinema-text{
  max-width:480px;
  text-align:right;
}
.hero-cinema-text p{
  color:rgba(255,255,255,.95);
  font-family:var(--font-display);
  font-size:21px;
  line-height:1.55;
  margin:0;
  font-weight:400;
  letter-spacing:.002em;
  /* Enhanced text animations */
  opacity:0;
  transform:translateY(30px) scale(.96);
  animation:heroTextReveal 1.4s var(--ease) .2s forwards
}
@keyframes heroTextReveal{
  to{
    opacity:1;
    transform:translateY(0) scale(1)
  }
}

/* Hero discover button - enhanced */
.hero-discover{
  min-width:180px;
  padding:22px 44px;
  border-radius:var(--radius-full);
  background:#fff;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.36em;
  transition:all .45s var(--ease);
  z-index:4;
  flex-shrink:0;
  box-shadow:var(--shadow-md);
  /* Button entrance animation */
  opacity:0;
  transform:translateY(20px) scale(.95);
  animation:heroBtnReveal 1s var(--ease) .6s forwards
}
@keyframes heroBtnReveal{
  to{
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
.hero-discover:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,.24);
}

/* Hero per pagine interne (con bg image fissa) */
.hero.page-hero{
  min-height:78vh;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  padding:160px 0 90px;
}
.hero.page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(2,40,35,.45) 0%, rgba(2,40,35,.65) 100%);
  z-index:1;
}
.hero.page-hero > .container{position:relative;z-index:2}
.hero-grid{
  display:grid;
  grid-template-columns:1.5fr .85fr;
  
gap:var(--space-xl);
  align-items:end;
}
.hero .eyebrow{color:rgba(255,255,255,.95);margin-bottom:28px;font-size:11px;letter-spacing:.42em}
.hero .eyebrow::before{background:var(--accent);width:38px}
.hero h1{
  color:#fff;
  font-family:var(--font-display);
  font-weight:300;
  margin-bottom:30px;
  letter-spacing:-.018em;
  max-width:14ch;
  line-height:1.02;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--accent-soft)}
.hero p{color:rgba(255,255,255,.86);font-size:18px;line-height:1.75;margin-bottom:40px;max-width:46ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-card{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);
  padding:40px 34px;
  color:#fff;
  max-width:400px;
  position:relative;
}
.hero-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:60px;height:1px;
  background:var(--accent);
}
.hero-card .small{color:rgba(255,255,255,.95);margin-bottom:18px;font-size:10px;letter-spacing:.4em}
.hero-card .small::before{display:none}
.hero-card h3{font-family:var(--font-display);font-size:26px;font-weight:400;color:#fff;margin-bottom:18px;line-height:1.25}
.hero-card p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.75;margin-bottom:28px}
.hero-card .btn{padding:14px 26px;font-size:10px}

/* Scroll indicator (linea verticale) */
.hero-scroll{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  width:1px;height:70px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.55) 100%);
  z-index:2;
}

/* =================== SECTIONS =================== */
.section,.intro,.villas,.concierge,.services{padding:var(--section-padding) 0;background:var(--bg)}
.section.alt,.intro,.concierge{background:var(--bg-2)}
.section-alt{background:var(--bg-3)}

@media (max-width:768px){
  .section,.intro,.villas,.concierge,.services{padding:var(--section-padding-mobile) 0}
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:var(--space-xl);
  flex-wrap:wrap;
  padding-bottom:36px;
  border-bottom:1px solid var(--line);
}

.intro-grid,.grid-2,.concierge-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

/* ========== Editorial intro layout (titolone + colonne testo + pill CTA) ========== */
.intro-editorial{background:var(--bg-2);padding:var(--section-padding) 0}
.intro-editorial-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:var(--space-xl);
  align-items:start;
}
.intro-editorial-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-lg);
}
.intro-editorial-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(40px, 4.6vw, 64px);
  line-height:1.04;
  letter-spacing:-.012em;
  color:var(--primary);
  margin:0;
}
.intro-editorial-title em{
  font-style:italic;
  color:var(--accent-deep);
  font-weight:500;
}
.intro-editorial-col{
  padding-top:14px;
}
.intro-editorial-col p{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.95;
  color:var(--text-2);
  font-weight:400;
  margin:0;
}

/* Pill CTA — palette brand (teal) */
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:200px;
  padding:20px 44px;
  border-radius:var(--radius-full);
  background:var(--primary);
  color:#fff;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.34em;
  border:1px solid var(--primary);
  transition:all .3s var(--ease);
  box-shadow:var(--shadow-sm)
}
.btn-pill:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:var(--shadow-md)
}
.btn-pill:active{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

.btn-pill.btn-pill-outline{
  background:transparent;
  color:var(--primary);
  border-color:var(--primary);
}
.btn-pill.btn-pill-outline:hover{
  background:var(--primary);
  color:#fff;
}

@media (max-width: 1100px){
  .intro-editorial-grid{grid-template-columns:1fr 1fr;gap:50px}
  .intro-editorial-left{grid-column:1 / -1}
}
@media (max-width: 760px){
  /* Mobile optimizations */
  html{
    font-size:15px;
    -webkit-text-size-adjust:100%
  }
  
  body{
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch
  }
  
  .container{
    width:calc(100% - 24px);
    padding-left:12px;
    padding-right:12px;
  }
  
  .topbar{
    padding:16px 0
  }
  .topbar.scrolled{
    padding:12px 0
  }
  
  /* Hero mobile */
  .hero{
    min-height:100svh;
    min-height:100vh
  }
  .hero-cinema-content{
    padding:120px 16px 60px;
    inset:auto 0 0 0
  }
  .hero-cinema-inner{
    gap:20px;
    align-items:center;
    text-align:center
  }
  .hero-cinema-text{
    max-width:100%;
    text-align:center
  }
  .hero-cinema-text p{
    font-size:17px;
    line-height:1.5
  }
  .hero-discover{
    min-width:160px;
    padding:16px 32px;
    font-size:11px
  }
  
  /* Intro mobile */
  .intro-editorial{
    padding:var(--section-padding-mobile) 0
  }
  .intro-editorial-grid{
    grid-template-columns:1fr;
    gap:32px
  }
  .intro-editorial-left{
    gap:20px
  }
  .intro-editorial-title{
    font-size:28px
  }
  
  /* Buttons mobile */
  .btn-pill{
    min-width:160px;
    padding:14px 28px;
    font-size:10px;
    letter-spacing:.2em
  }
  
  /* Cards mobile */
  .cards{
    grid-template-columns:1fr;
    gap:24px
  }
  .service-grid{
    grid-template-columns:1fr;
    gap:16px
  }
  
  /* Footer mobile */
  .footer{
    padding:48px 0 24px
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:32px
  }
  .footer-wrap{
    flex-direction:column;
    gap:12px;
    text-align:center
  }
  
  /* Touch-friendly targets */
  .nav-toggle,
  a,
  button{
    min-height:44px;
    min-width:44px
  }
  
  /* Service cards mobile */
  .service-card{
    padding:24px 20px
  }
  
  /* CTA mobile */
  .cta{
    padding:60px 0;
    background-attachment:scroll
  }
  .cta h2{
    font-size:28px
  }
  
  /* Villa slider mobile */
  .villa-slider{
    min-height:80vh
  }
  
  /* Horizontal-scroll guard solo su body/html, non sull'universale (rompeva drawer/toast/overlay) */
  img{
    max-width:100%;
    height:auto
  }
}

.intro-image,.image-panel,.concierge-image{position:relative;overflow:hidden}
.intro-image::before,.image-panel::before,.concierge-image::before{
  content:'';
  position:absolute;
  top:24px;left:-24px;
  width:100%;height:100%;
  border:1px solid var(--accent);
  z-index:0;
  transition:transform .5s var(--ease);
}
.intro-image:hover::before,.image-panel:hover::before,.concierge-image:hover::before{transform:translate(8px,-8px)}
.intro-image img,.image-panel img,.concierge-image img{
  width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;
  position:relative;z-index:1;
  transition:transform .7s var(--ease);
}
.intro-image:hover img,.image-panel:hover img,.concierge-image:hover img{transform:scale(1.04)}

/* =================== VILLA SLIDER (full-bleed) =================== */
.villa-slider{
  position:relative;
  width:100%;
  height:100vh;
  min-height:600px;
  overflow:hidden;
  background:#0a0a0a;
}
.villa-slider-track{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.villa-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1.2s var(--ease);
  pointer-events:none;
}
.villa-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
.villa-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform 8s linear;
}
.villa-slide.is-active img{transform:scale(1)}

.villa-slider-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.45) 100%);
  z-index:2;
  pointer-events:none;
}

.villa-slider-content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  pointer-events:none;
  padding:0 80px;
}
.villa-slider-title{
  font-family:var(--font-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(56px, 8vw, 120px);
  color:#fff;
  text-align:center;
  letter-spacing:-.005em;
  line-height:1;
  text-shadow:0 4px 30px rgba(0,0,0,.35);
  transition:opacity .5s var(--ease), transform .8s var(--ease);
}
.villa-slider-title.is-changing{opacity:0;transform:translateY(10px)}

/* Frecce di navigazione */
.villa-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,107,94,.85);
  border:none;
  color:#fff;
  cursor:pointer;
  z-index:5;
  opacity:0;
  border-radius:50%;
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.villa-nav:hover{opacity:1;background:var(--primary);transform:translateY(-50%) scale(1.1)}
.villa-nav-prev{left:max(40px, calc((100vw - var(--max))/2))}
.villa-nav-next{right:max(40px, calc((100vw - var(--max))/2))}
.villa-nav-prev:hover{transform:translateY(-50%) translateX(-4px)}
.villa-nav-next:hover{transform:translateY(-50%) translateX(4px)}

/* CTA "Esplora" — pillola outline bianca in basso */
.villa-explore{
  position:absolute;
  bottom:50px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:18px 42px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:999px;
  color:#fff;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.34em;
  background:transparent;
  transition:all .3s var(--ease);
  z-index:5;
}
.villa-explore:hover{
  background:#fff;
  color:var(--primary);
  border-color:#fff;
}

@media (max-width: 760px){
  .villa-slider{height:80vh;min-height:500px}
  .villa-nav{display:none}
  .villa-nav-prev{left:16px}
  .villa-nav-next{right:16px}
  .villa-nav svg{width:28px;height:10px}
  .villa-explore{bottom:30px;min-width:150px;padding:14px 28px;font-size:10px}
  .villa-slider-content{padding:0 70px}
}

/* =================== CARDS =================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl) var(--space-lg)}
.card{
  display:flex;flex-direction:column;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-radius .6s var(--ease)
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-radius:var(--radius-xl)}
.card-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--bg-3);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.07)}
.card-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(2,40,35,.35) 100%);
  pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
}
.card:hover .card-media::after{opacity:1}
.card-tag{
  position:absolute;top:24px;left:24px;
  background:rgba(255,255,255,.96);
  color:var(--accent-deep);
  font-family:var(--font-body);
  font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.3em;
  padding:9px 16px;z-index:2;
}
.card-body{padding:30px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.card-body .meta{
  font-family:var(--font-body);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.3em;color:var(--muted);
}
.card-body h3{font-family:var(--font-display);font-size:30px;font-weight:400;color:var(--text);line-height:1.15}
.card-body p{font-size:15px;line-height:1.75;color:var(--text-2)}
.card-body .btn{margin-top:10px}

/* =================== FEATURES =================== */
.features{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:36px 50px}
.feature{border-top:1px solid var(--line-strong);padding-top:24px;position:relative}
.feature::before{content:'';position:absolute;top:-1px;left:0;width:30px;height:1px;background:var(--accent)}
.feature strong{
  display:block;
  font-family:var(--font-display);
  font-size:22px;font-weight:400;
  color:var(--text);margin-bottom:10px;line-height:1.2;
}
.feature span{font-size:14.5px;line-height:1.75;color:var(--text-2);font-family:var(--font-body)}

/* =================== SERVICES =================== */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-top:var(--space-xl);border-top:1px solid var(--line-strong);padding-top:var(--space-sm)}
.service{padding:54px 38px 54px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.service:nth-child(3n){border-right:none}
.service:hover{background:var(--bg-warm)}
.service-number{
  display:inline-block;
  font-family:var(--font-display);
  font-size:18px;font-style:italic;font-weight:400;
  color:var(--accent-deep);
  margin-bottom:24px;padding-left:42px;position:relative;
}
.service-number::before{content:'';position:absolute;left:0;top:50%;width:30px;height:1px;background:var(--accent)}
.service h4{font-family:var(--font-display);font-size:24px;font-weight:400;color:var(--text);margin:0 0 14px 42px;line-height:1.25}
.service p{margin-left:42px;font-size:15px;line-height:1.75;color:var(--text-2);font-family:var(--font-body)}

.service-card{padding:42px 32px;border:1px solid var(--line);background:var(--bg-warm);border-radius:var(--radius-lg);transition:all .5s var(--ease)}
.service-card:hover{border-color:var(--accent);background:#fff;transform:translateY(-6px);box-shadow:var(--shadow-md)}
.service-card .service-icon{font-size:36px;margin-bottom:22px;display:block}
.service-card h3{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--text);margin-bottom:14px}
.service-card p{font-size:14.5px;line-height:1.75;color:var(--text-2);font-family:var(--font-body)}

/* =================== CTA SECTION =================== */
.cta{
  position:relative;
  padding:160px 0;
  text-align:center;
  color:#fff;
  background-color:var(--primary-dark);
  background-image:var(--cta-image);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  overflow:hidden;
}
.cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,107,94,.78) 0%, rgba(2,40,35,.92) 100%);
}
.cta > .container{position:relative;z-index:2}
.cta .section-tag{color:var(--accent-soft);margin-bottom:28px}
.cta .section-tag::before{background:var(--accent-soft)}
.cta h2{
  color:#fff;font-family:var(--font-display);font-weight:300;
  margin-bottom:24px;max-width:20ch;
  margin-left:auto;margin-right:auto;
  font-size:clamp(36px,5vw,64px);
}
.cta h2 em{font-style:italic;font-weight:400;color:var(--accent-soft)}
.cta p{color:rgba(255,255,255,.88);font-size:18px;margin-bottom:42px;max-width:580px;margin-left:auto;margin-right:auto}

/* =================== FOOTER =================== */
.footer{background:var(--primary-soft);color:#fff;padding:110px 0 44px;position:relative}
.footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(184,153,104,.45) 50%, transparent);
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
gap:var(--space-xl);margin-bottom:70px}
.footer-col h5{font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.32em;color:var(--accent-soft);margin-bottom:28px}
.footer-col a{display:block;color:rgba(255,255,255,.72);font-size:14.5px;line-height:2.1;font-family:var(--font-body)}
.footer-col a:hover{color:var(--accent-soft)}
.footer-col p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.85}
.footer-brand{font-family:var(--font-display);display:flex;flex-direction:column;margin-bottom:22px;line-height:1}
.footer-brand .brand-main{font-size:34px;font-weight:400;color:#fff;text-transform:lowercase;font-style:italic}
.footer-brand .brand-sub{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.42em;color:rgba(255,255,255,.78);text-transform:uppercase;margin-top:8px}
.footer .lead{margin-bottom:22px;max-width:34ch;font-size:15px}
.footer-wrap{display:flex;justify-content:space-between;align-items:center;padding-top:34px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:rgba(255,255,255,.55);font-family:var(--font-body);text-transform:uppercase;letter-spacing:.28em}

/* =================== CONTACT FORM =================== */
.contact-layout{display:grid;grid-template-columns:.9fr 1.3fr;
gap:var(--space-xl);align-items:start}
.contact-info{position:sticky;top:130px}
.contact-list{margin-top:46px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-strong)}
.contact-list li{padding:26px 0;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line)}
.contact-label{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:6px}
.contact-list a,.contact-list span{color:var(--text);font-size:16.5px;font-family:var(--font-display)}
.contact-list a:hover{color:var(--accent-deep)}

.contact-card{background:var(--white);border:1px solid var(--line);padding:60px 50px;position:relative;box-shadow:var(--shadow-sm);border-radius:var(--radius-lg)}
.contact-card::before{content:'';position:absolute;top:0;left:0;width:80px;height:2px;background:var(--accent);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.contact-card h3{font-family:var(--font-display);font-size:36px;font-weight:400;color:var(--text);margin-bottom:10px;line-height:1.2}
.contact-sub{color:var(--muted);margin-bottom:42px;font-size:15px}

.contact-form{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:34px}
.field{display:flex;flex-direction:column;gap:10px}
.field-full{grid-column:1 / -1}
.field label{font-family:var(--font-body);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.32em;color:var(--muted)}
.field input,.field textarea,.field select{
  font-family:var(--font-body);font-size:16px;
  padding:14px 0;border:none;
  border-bottom:1px solid var(--line-strong);
  background:transparent;color:var(--text);
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field textarea{resize:vertical;min-height:130px;line-height:1.65}
.checkbox-wrap{display:flex !important;align-items:flex-start !important;gap:14px !important;flex-direction:row !important;text-transform:none !important;letter-spacing:0 !important;font-size:13px !important;color:var(--text-2) !important;cursor:pointer;font-weight:400 !important;font-family:var(--font-body) !important}
.checkbox-wrap input{width:16px;height:16px;margin-top:3px;padding:0;border-radius:0;accent-color:var(--accent);flex-shrink:0}
.contact-form .btn{min-width:240px;margin-top:8px}

/* =================== REVEAL =================== */
.reveal{opacity:1;transform:none;transition:opacity .4s var(--ease), transform .6s var(--ease), filter .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.in .reveal-inner{animation:revealSlideUp 1s var(--ease) forwards}
.reveal .reveal-inner{opacity:1;transform:none}

@keyframes revealSlideUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes revealFadeScale{
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}

@keyframes revealStaggerUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* Reveal variants */
.reveal-scale{transform:scale(.96)}
.reveal-scale.in{animation:revealFadeScale 1s var(--ease) forwards}

.reveal-left{transform:translateX(-40px)}
.reveal-right{transform:translateX(40px)}
.reveal-left.in,.reveal-right.in{transform:none}

.reveal-blur{filter:blur(8px)}
.reveal-blur.in{filter:blur(0)}

/* Stagger delays for children */
.reveal-stagger > *{opacity:1;transform:none;transition:opacity .5s var(--ease), transform .5s var(--ease)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.0s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.1s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.2s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.3s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.4s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.5s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.6s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.7s}

/* Micro-interactions */
.btn,.service-card,.card,.villa-nav,.nav a,.footer a,.nav-mobile a{
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease)
}

.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

.service-card:hover,.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.villa-nav:hover{transform:scale(1.08)}
.villa-nav:active{transform:scale(.96)}

.nav a::after{transition:width .4s var(--ease), background .4s var(--ease)}

.footer a,.nav-mobile a{position:relative}
.footer a::before,.nav-mobile a::before{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width .35s var(--ease)
}
.footer a:hover::before,.nav-mobile a:hover::before{width:100%}

/* Smooth page transitions */
html{scroll-behavior:smooth}

/* Hero text animation */
.hero-cinema-text p{
  opacity:0;transform:translateY(30px);
  animation:heroTextIn 1.2s var(--ease) .3s forwards
}
@keyframes heroTextIn{
  to{opacity:1;transform:translateY(0)}
}

.hero-discover{
  opacity:0;transform:translateY(20px);
  animation:heroBtnIn 1s var(--ease) .8s forwards
}
@keyframes heroBtnIn{
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .reveal > *{opacity:1;transform:none}
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1100px){
  .hero-grid{grid-template-columns:1fr;gap:50px;align-items:start}
  .hero-card{justify-self:start;max-width:100%}
  .intro-grid,.grid-2,.concierge-grid{grid-template-columns:1fr;gap:50px}
  .intro-image::before,.image-panel::before,.concierge-image::before{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .service:nth-child(3n){border-right:1px solid var(--line)}
  .service:nth-child(2n){border-right:none}
}

@media (max-width: 760px){
  .container{width:calc(100% - 32px)}
  .topbar{padding:22px 0}
  .topbar.scrolled{padding:14px 0}
  .hero-cinema-content{padding-bottom:50px;padding-top:140px}
  .hero-cinema-inner{align-items:flex-start;gap:24px}
  .hero-cinema-text{text-align:left;max-width:100%}
  .hero-cinema-text p{font-size:19px;line-height:1.5}
  .hero-discover{min-width:160px;padding:18px 36px;font-size:11px;align-self:flex-end}
  .hero{min-height:auto}
  .hero.page-hero{min-height:60vh;padding:140px 0 70px}
  .hero p{font-size:16px}
  .hero-card{width:100%;padding:30px 24px}
  .hero h1{max-width:none}
  .section,.intro,.villas,.concierge,.services{padding:90px 0}
  .cta{padding:100px 0;background-attachment:scroll}
  .section-head{flex-direction:column;align-items:flex-start;margin-bottom:50px}
  .cards,.service-grid,.features{grid-template-columns:1fr}
  .service{border-right:none !important;padding:40px 0}
  .footer{padding:70px 0 32px}
  .footer-grid{grid-template-columns:1fr;gap:48px;margin-bottom:48px}
  .footer-wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .contact-layout{grid-template-columns:1fr;gap:60px}
  .contact-info{position:static}
  .contact-card{padding:36px 26px}
  .form-grid{grid-template-columns:1fr;gap:20px}
  .field-full{grid-column:auto}
  .contact-form .btn{width:100%}
}

/* Page hero overrides */
.hero.page-hero h1{max-width:18ch}
.hero.page-hero .hero-card{background:rgba(255,255,255,.08)}

/* ============================================================
   POLISH PASS — Task 07-14
   Task 07: testi mai sui bordi · Task 08: transizioni più veloci
   Task 09: hero text position · Task 10: slider buttons polish
   Task 11: spaziatura sezioni · Task 12: whitespace fill content
   Task 13: bg image reveals · Task 14: ville cards premium
   ============================================================ */

/* --- Task 07: safe padding/spacing globale --- */
:root{
  --container-pad: clamp(20px, 4vw, 48px);
  --section-pad: clamp(72px, 9vw, 140px);
  --section-pad-tight: clamp(56px, 7vw, 96px);
}
.container{
  width:min(100%, var(--max));
  padding-inline: var(--container-pad);
  margin-inline:auto;
}
.section,.intro,.villas,.concierge,.services{
  padding-block: var(--section-pad);
}
.section.alt,.intro,.concierge{padding-block: var(--section-pad)}
.cta{padding-block: clamp(96px, 12vw, 180px)}
.section-text{padding-right: 12px}
.hero-cinema-text p{padding-inline: 4px}
.cta h2,.cta p{padding-inline: clamp(16px, 4vw, 32px)}

/* Mobile: nessun testo deve toccare i bordi del container */
@media (max-width:760px){
  .container{padding-inline: 20px}
  .section-text,.hero-cinema-text p,
  .intro-editorial-col p,.concierge-panel-col p{
    padding-inline: 4px;
  }
  .section-title,.intro-editorial-title,.concierge-panel-title{
    padding-inline: 0;
  }
  /* Centered text che diventa storto su mobile: forza left-align quando non è davvero centrato */
  .hero-cinema-text{text-align:left}
  .hero-cinema-text p{text-align:left;line-height:1.55}
  .hero-cinema-inner{align-items:flex-start !important}
  .hero-discover{align-self:flex-start !important;margin-top:8px}
}

/* --- Task 08: transitions più veloci (150-400ms / 500-700ms) --- */
.card{
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-radius .35s var(--ease) !important;
}
.card:hover{transform:translateY(-6px)}
.card-media img{transition: transform .5s var(--ease) !important}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{transition: opacity .3s var(--ease) !important}

.intro-image img,.image-panel img,.concierge-image img,
.intro-image::before,.image-panel::before,.concierge-image::before{
  transition: transform .45s var(--ease) !important;
}

.service-card{transition: border-color .3s var(--ease), background .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease) !important}
.service-card:hover{transform:translateY(-4px)}

.villa-slider-title{transition: opacity .3s var(--ease), transform .5s var(--ease) !important}
.villa-nav{transition: opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease) !important}


.btn-pill,.btn,.btn-primary,.btn-outline,.btn-ghost,.btn-gold{
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}

.reveal{transition: opacity .5s var(--ease), transform .55s var(--ease), filter .5s var(--ease) !important}

/* Hero entrate più rapide e con delay ridotti */
.hero-cinema-text p{
  animation: heroTextReveal .9s var(--ease) .15s forwards !important;
}
.hero-discover{
  animation: heroBtnReveal .7s var(--ease) .45s forwards !important;
}

/* --- Task 09: Hero text position fix --- */
.hero-cinema-content{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding: var(--nav-height) max(32px, calc((100vw - var(--max))/2 + 28px)) 88px;
  pointer-events:none;
}
.hero-cinema-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:32px;
  pointer-events:auto;
  max-width:520px;
  width:100%;
}
.hero-cinema-text{
  max-width:100%;
}
@media (max-width:1100px){
  .hero-cinema-content{
    padding-right: clamp(24px, 5vw, 48px);
    padding-left: clamp(24px, 5vw, 48px);
    padding-bottom: 72px;
  }
}
@media (max-width:760px){
  .hero-cinema-content{
    padding: calc(var(--nav-height) + 24px) 22px 56px;
    align-items:flex-end;
    justify-content:flex-start;
  }
  .hero-cinema-inner{
    align-items:flex-start;
    max-width:100%;
    gap:22px;
  }
}

/* --- Task 10: Slider magnetic cursor buttons polish --- */
.villa-nav{
  width:56px;
  height:56px;
  background: rgba(11,107,94,.78);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.05) inset;
}
.villa-nav svg{
  width:22px;
  height:22px;
  stroke-width:1.4;
}
.villa-nav:hover{
  background: var(--primary);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 10px 30px rgba(0,0,0,.36), 0 1px 0 rgba(255,255,255,.08) inset;
}
@media (hover:none){.villa-nav{display:none !important}}

/* --- Task 11: spaziatura ritmica tra sezioni --- */
.villa-slider{margin-block: 0}
.concierge-panel{padding-block: clamp(96px, 11vw, 160px)}
.concierge-panel-section{padding-block: 0}
.concierge-fixed-bg{
  height: clamp(360px, 56vw, 560px);
  margin-block: 0;
  position:relative;
}
.concierge-fixed-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,40,35,.30) 0%, rgba(2,40,35,.10) 50%, rgba(2,40,35,.45) 100%);
  pointer-events:none;
}
.intro-editorial,.services{padding-block: var(--section-pad)}
.cta{margin-block: 0}
@media (max-width:760px){
  .concierge-fixed-bg{
    background-attachment: scroll !important;
    height: clamp(280px, 60vw, 380px);
  }
}

/* --- Task 12: editorial fill components --- */
.editorial-quote{
  background: var(--bg-warm);
  padding-block: var(--section-pad-tight);
  position:relative;
  overflow:hidden;
}
.editorial-quote::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:80px; height:1px;
  background: var(--accent);
}
.editorial-quote .container{
  max-width:880px;
  text-align:center;
}
.editorial-quote blockquote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.35;
  color: var(--primary);
  letter-spacing: -.005em;
  margin: 0 auto 32px;
  max-width: 22ch;
}
.editorial-quote blockquote em{color: var(--accent-deep); font-weight:500}
.editorial-quote cite{
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--muted);
}
.editorial-quote cite::before{
  content:"";
  display:inline-block;
  width:24px; height:1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 14px;
  transform: translateY(-2px);
}

.numbers-strip{
  background: var(--bg-2);
  padding-block: var(--section-pad-tight);
  border-block: 1px solid var(--line);
}
.numbers-strip .container{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items:start;
}
.numbers-strip .number{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  padding-left: 18px;
}
.numbers-strip .number::before{
  content:"";
  position:absolute;
  left:0; top:14px;
  width:8px; height:1px;
  background: var(--accent);
}
.numbers-strip .number strong{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 58px);
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.01em;
}
.numbers-strip .number span{
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 1024px){
  .numbers-strip .container{grid-template-columns: repeat(2, 1fr); gap: 36px}
}
@media (max-width: 480px){
  .numbers-strip .container{grid-template-columns: 1fr; gap: 28px}
}

/* --- Task 13: parallax / reveal background image strip --- */
.bg-strip{
  position:relative;
  min-height: clamp(360px, 60vw, 560px);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding-block: clamp(80px, 10vw, 160px);
  overflow:hidden;
}
.bg-strip::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,40,35,.55) 0%, rgba(11,107,94,.55) 60%, rgba(2,40,35,.78) 100%);
  z-index:1;
}
.bg-strip .container{position:relative; z-index:2; max-width: 760px}
.bg-strip .section-tag{color: var(--accent-soft)}
.bg-strip .section-tag::before{background: var(--accent-soft)}
.bg-strip h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 60px);
  color:#fff;
  line-height:1.1;
  margin-bottom: 22px;
}
.bg-strip h2 em{font-style:italic; color:var(--accent-soft); font-weight:400}
.bg-strip p{
  color: rgba(255,255,255,.86);
  font-size: 17px;
  line-height: 1.75;
  max-width: 56ch;
  margin: 0 auto;
}
@media (max-width: 768px){
  .bg-strip{
    background-attachment: scroll;
    min-height: clamp(280px, 70vw, 420px);
  }
}

/* --- Task 14: Ville page premium polish --- */
.cards.cards--ville{
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin-top: 48px;
}
.cards--ville .card{
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.cards--ville .card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--accent-soft);
}
.cards--ville .card-media{
  aspect-ratio: 4/5;
  border-radius: 0;
}
.cards--ville .card-body{
  padding: 28px 28px 32px;
  gap: 12px;
}
.cards--ville .card-body h3{font-size: 28px}
.cards--ville .card-body .meta{
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .3em;
}
.cards--ville .card-body p{font-size: 14.5px; line-height: 1.7; color: var(--text-2); margin-top: 4px}
.cards--ville .card-tag{
  background: rgba(11,107,94,.95);
  color:#fff;
  letter-spacing: .28em;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 9.5px;
  top: 18px;
  left: 18px;
}
.villa-highlights{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 14px;
  padding: 14px 0 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-2);
}
.villa-highlights span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.villa-highlights span svg{
  width:14px;
  height:14px;
  stroke: var(--accent-deep);
  stroke-width: 1.4;
  fill: none;
}
.cards--ville .card-body .btn-gold{
  align-self:flex-start;
  margin-top: 14px;
  border-radius: var(--radius-full);
  padding: 12px 22px;
  letter-spacing: .26em;
  border-color: var(--accent);
  color: var(--accent-deep);
  background: transparent;
}
.cards--ville .card-body .btn-gold:hover{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}
@media (max-width:1100px){
  .cards.cards--ville{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width:680px){
  .cards.cards--ville{grid-template-columns: 1fr; gap: 28px}
  .cards--ville .card-body{padding: 24px 22px 28px}
}

/* --- Task 52: language switcher IT/EN --- */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 12px;
  padding: 4px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lang-switch a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  letter-spacing: .22em;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang-switch a.is-active{
  background: var(--accent);
  color: #fff;
  cursor: default;
}
.lang-switch a:not(.is-active):hover{
  color: #fff;
  background: rgba(255,255,255,.14);
}
.lang-switch a::after{display:none !important}

.topbar.scrolled .lang-switch{
  background: rgba(11,107,94,.08);
  border-color: var(--line-strong);
}
.topbar.scrolled .lang-switch a{color: var(--text-2)}
.topbar.scrolled .lang-switch a.is-active{color:#fff; background: var(--primary)}
.topbar.scrolled .lang-switch a:not(.is-active):hover{background: var(--bg-2); color: var(--text)}

@media (max-width: 980px){
  .lang-switch{display:none}
  .nav-mobile .lang-switch--mobile{
    display:inline-flex;
    margin: 24px 0 0;
    background: var(--bg-2);
    border-color: var(--line-strong);
  }
  .nav-mobile .lang-switch--mobile a{color: var(--text-2)}
  .nav-mobile .lang-switch--mobile a.is-active{background: var(--primary); color:#fff}
}

/* --- Section dividers naturali --- */
.section-divider{
  display:block;
  width:100%;
  height: clamp(60px, 8vw, 120px);
  margin-top: -1px;
  position:relative;
  z-index:1;
  pointer-events:none;
}
.section-divider svg{display:block; width:100%; height:100%}

/* --- Reduced motion: rispetta sempre --- */
@media (prefers-reduced-motion: reduce){
  .villa-slide.is-active img{transform:none !important}
  .hero-cinema-text p,.hero-discover{animation:none !important; opacity:1 !important; transform:none !important}
  .bg-strip,.cta,.concierge-fixed-bg{background-attachment: scroll !important}
}

/* ============================================================
   Task 34 — FAQ accordion
   ============================================================ */
.faq{
  background: var(--primary-dark);
  color:#fff;
  padding-block: clamp(96px, 11vw, 140px);
}
.faq .container{max-width: 900px}
.faq__header{text-align:center; margin-bottom: 56px}
.faq__header .section-tag{color: var(--accent-soft)}
.faq__header .section-tag::before{background: var(--accent-soft)}
.faq__header h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 60px);
  color:#fff;
  line-height:1.1;
  margin-bottom:18px;
}
.faq__header h2 em{font-style:italic; color:var(--accent-soft); font-weight:400}
.faq__header p{
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto;
}
.faq-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.faq-item{
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.faq-item__q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 26px 4px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  color: #fff;
  transition: color .2s var(--ease);
}
.faq-item__q:hover{color: var(--accent-soft)}
.faq-item__q-text{flex: 1; padding-right: 24px}
.faq-item__icon{
  flex-shrink: 0;
  width: 28px; height: 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 400;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.faq-item.is-open .faq-item__icon{
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
}
.faq-item__a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}
.faq-item.is-open .faq-item__a{
  max-height: 80vh;
}
.faq-item__a-inner{
  padding: 4px 4px 28px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.75;
  max-width: 70ch;
}

/* ============================================================
   Task 39 — Villa detail page
   ============================================================ */
.villa-detail__intro{
  padding-block: clamp(72px, 9vw, 130px);
  background: var(--bg);
}
.villa-detail__grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.villa-detail__copy h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--primary);
}
.villa-detail__copy h2 em{font-style: italic; color: var(--accent-deep); font-weight: 400}
.villa-detail__copy p{font-size: 16px; line-height: 1.85; color: var(--text-2); margin-bottom: 18px}
.villa-detail__meta{
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.villa-detail__meta span{
  position: relative;
  padding-left: 18px;
}
.villa-detail__meta span::before{
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 10px; height: 1px;
  background: var(--accent);
}
.villa-detail__image{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.villa-detail__image::before{
  content: '';
  position: absolute;
  top: 24px; left: -24px;
  width: 100%; height: 100%;
  border: 1px solid var(--accent);
  z-index: 0;
  border-radius: var(--radius-lg);
}
.villa-detail__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.villa-detail__features{
  background: var(--bg-2);
  padding-block: clamp(80px, 9vw, 130px);
}
.villa-detail__features-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.villa-feature{
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.villa-feature:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
}
.villa-feature svg{
  width: 28px; height: 28px;
  stroke: var(--accent-deep);
  stroke-width: 1.4;
  fill: none;
}
.villa-feature h4{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  line-height: 1.25;
  margin: 0;
}
.villa-feature p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
}

.villa-detail__related{
  padding-block: clamp(72px, 9vw, 120px);
  background: var(--bg);
}
.villa-detail__related-head{
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 48px;
}
.villa-detail__related-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (max-width: 980px){
  .villa-detail__grid{grid-template-columns: 1fr; gap: 48px}
  .villa-detail__features-grid{grid-template-columns: repeat(2, 1fr)}
  .villa-detail__related-cards{grid-template-columns: 1fr}
  .villa-detail__image::before{display: none}
}
@media (max-width: 480px){
  .villa-detail__features-grid{grid-template-columns: 1fr}
  .villa-detail__meta{flex-wrap: wrap; gap: 12px}
}

/* ============================================================
   Task 51 — Audit card: padding, margin, ritmo verticale
   Normalizza tutte le card per evitare testi ai bordi e ritmi
   incoerenti tra .card / .service / .service-card / .villa-feature /
   .hero-card / .contact-card.
   ============================================================ */

/* Container generic .card (about valori, ville cards, related) */
.card{
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card .card-body{
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.card .card-body .meta{
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.card .card-body h3{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}
.card .card-body p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
  max-width: 42ch;
}
.card .card-body .btn,
.card .card-body .btn-gold{
  margin-top: 8px;
}

/* Card senza media (es. about valori) — più aria interna */
.card:not(:has(.card-media)) .card-body{
  padding: 38px 32px 36px;
  gap: 14px;
}
.card:not(:has(.card-media)) .card-body h3{font-size: 28px}

/* Service basic (concierge: numero + titolo + paragrafo) */
.service{
  padding: 48px 36px 48px 0;
}
.service:nth-child(2),
.service:nth-child(5){
  padding-left: 36px;
  padding-right: 36px;
}
.service h4{
  margin: 0 0 12px 42px;
  letter-spacing: -.005em;
}
.service p{
  margin: 0 0 0 42px;
  max-width: 42ch;
}

/* Service-card (contatti: emoji + titolo + paragrafo) */
.service-card{
  padding: 36px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: var(--radius-lg);
}
.service-card .service-icon{
  margin: 0;
  font-size: 32px;
  line-height: 1;
}
.service-card h3{
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
.service-card p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 38ch;
}

/* Villa-feature (pagine villa singola) — già OK ma uniformo */
.villa-feature{
  padding: 30px 28px 32px;
  gap: 12px;
}
.villa-feature h4{
  font-size: 21px;
  margin: 0;
}
.villa-feature p{
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  max-width: 36ch;
}

/* Cards--ville: card grandi con media + body */
.cards--ville .card-body{
  padding: 26px 28px 30px;
  gap: 10px;
}
.cards--ville .card-body p{margin-top: 4px}
.cards--ville .villa-highlights{
  margin-top: 6px;
  padding-top: 4px;
  padding-bottom: 0;
}
.cards--ville .card-body .btn-gold{
  margin-top: 16px;
}

/* Hero card (laterale nelle page-hero) — più aria */
.hero-card{
  padding: 36px 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-card .small{margin: 0}
.hero-card h3{margin: 0; line-height: 1.25}
.hero-card p{margin: 0; max-width: 38ch}
.hero-card .btn,
.hero-card .btn-gold{
  margin-top: 6px;
  align-self: flex-start;
}

/* Contact-card (form lato destro contatti) */
.contact-card{
  padding: 56px 48px 52px;
}
.contact-card h3{
  margin: 0 0 8px;
  line-height: 1.2;
}
.contact-card .contact-sub{
  margin: 0 0 36px;
  max-width: 46ch;
}

/* Mobile: padding ridotti ma sempre rispettosi dei bordi */
@media (max-width: 760px){
  .card .card-body,
  .cards--ville .card-body{
    padding: 22px 22px 26px;
  }
  .card:not(:has(.card-media)) .card-body{
    padding: 28px 24px 28px;
  }
  .service{padding: 32px 0 32px 0}
  .service h4,.service p{margin-left: 36px}
  .service-card{padding: 26px 22px}
  .villa-feature{padding: 24px 22px 26px}
  .hero-card{padding: 28px 24px}
  .contact-card{padding: 30px 22px 30px}
}

.field.has-error input,
.field.has-error textarea {
  border-bottom-color: #c00 !important;
}
.form-error {
  animation: fadeIn 0.3s ease;
}

/* ============================================================
   UNIFIED RESPONSIVE NAVBAR
   Single source of truth: layout flex, no-wrap, drawer mobile.
   Override globale per garantire navbar identica su tutte le pagine.
   ============================================================ */
.topbar{ padding: 24px 0; }
.topbar.scrolled{ padding: 14px 0; }

.nav-wrap{
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between;
  gap: clamp(14px, 1.8vw, 28px);
  flex-wrap: nowrap;
  min-width: 0;
}

/* BRAND — logo + wordmark sempre a sinistra, su una riga */
.brand{
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.brand img{
  display: block !important;
  height: 40px;
  width: auto;
  flex-shrink: 0;
}
.brand-text{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  line-height: 1;
  white-space: nowrap;
}
.brand-main{
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}
.topbar.scrolled .brand-main{ color: var(--text); }
.brand-sub{
  font-family: var(--font-body);
  font-size: 8.5px !important;
  font-weight: 500;
  letter-spacing: .36em !important;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  margin-top: 4px !important;
  white-space: nowrap;
}
.topbar.scrolled .brand-sub{ color: var(--muted); }

/* MAIN NAV — flex no-wrap, centro */
.nav#mainNav{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 26px) !important;
  flex-wrap: nowrap;
  min-width: 0;
}
.nav#mainNav a{ white-space: nowrap; }

/* LANG — destra, mai a capo */
.lang-switch{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* TOGGLE — flex item ben fissato (visibile solo mobile) */
.nav-toggle{ flex: 0 0 auto; }

/* MEDIUM viewport (≤1180px): nasconde sub-titolo brand per evitare sovraffollamento */
@media (max-width: 1180px){
  .brand-sub{ display: none !important; }
  .nav#mainNav{ gap: 16px !important; }
  .lang-switch{ margin-left: 6px !important; }
}

/* TABLET narrow (≤1024px): font nav un po' più piccolo */
@media (max-width: 1024px){
  .nav#mainNav a{ font-size: 11px !important; letter-spacing: .22em !important; }
}

/* MOBILE (≤980px): drawer dal lato destro */
@media (max-width: 980px){
  .topbar{ padding: 18px 0; }
  .topbar.scrolled{ padding: 12px 0; }
  .nav-wrap{ gap: 12px; justify-content: space-between; }
  .brand-main{ font-size: 18px !important; }
  .brand img{ height: 34px; }

  .nav#mainNav{
    position: fixed;
    inset: 0 0 0 auto;
    width: 100%;
    max-width: 360px;
    background: var(--bg);
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 110px 32px 40px;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.18);
    z-index: 40;
  }
  .nav#mainNav.open{ transform: translateX(0); }
  .nav#mainNav a{
    color: var(--text);
    font-size: 15px;
    padding: 18px 0;
    width: 100%;
    border-bottom: 1px solid var(--line);
    letter-spacing: .22em;
  }
  .nav#mainNav a:last-of-type{ border-bottom: none; }
  .nav#mainNav a::after{ display: none !important; }

  .lang-switch:not(.lang-switch--mobile){ display: none !important; }
  .nav-toggle{ display: inline-flex !important; }
}

@media (max-width: 480px){
  .brand-main{ font-size: 16px !important; }
  .nav-wrap{ gap: 8px; }
}

/* ============================================================
   Task 54 — niente sotto-titolo sotto al logo (uniforme su tutte le pagine)
   ============================================================ */
.brand-sub{ display: none !important; }

/* ============================================================
   Task 55 — testo hero sempre allineato a destra su ogni viewport
   ============================================================ */
.hero-cinema-content{
  align-items: flex-end !important;
  justify-content: flex-end !important;
  text-align: right;
}
.hero-cinema-inner{
  align-items: flex-end !important;
  text-align: right !important;
  margin-left: auto;
}
.hero-cinema-text{
  text-align: right !important;
  margin-left: auto;
}
.hero-cinema-text p{ text-align: right !important; }
.hero-discover{ align-self: flex-end; }

@media (max-width: 760px){
  .hero-cinema-content{
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding-right: clamp(20px, 5vw, 32px);
    padding-left: clamp(20px, 5vw, 32px);
  }
  .hero-cinema-inner{
    align-items: flex-end !important;
    text-align: right !important;
    max-width: 100%;
  }
  .hero-cinema-text,
  .hero-cinema-text p{ text-align: right !important; }
}

/* ============================================================
   Task 56a — spaziatura tra titolo / bottone / descrizioni in
   sezione Private Concierge (dare aria editoriale)
   ============================================================ */
/* ============================================================
   FIX (cont. Task 56) — Concierge panel: grid mancante + spaziatura simmetrica
   La regola .concierge-panel-grid { display: grid } NON era mai stata
   definita: la sezione collassava in 1 colonna con titolo+bottone+paragrafi
   tutti impilati e spaziatura visivamente sbilanciata.
   ============================================================ */
.concierge-panel-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(40px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 1100px){
  .concierge-panel-grid{
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 60px);
  }
  .concierge-panel-grid > .concierge-panel-left{ grid-column: 1 / -1; }
}
@media (max-width: 760px){
  .concierge-panel-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.concierge-panel-left{
  display: flex;
  flex-direction: column;
  /* GAP unico = spaziatura uguale tra title, paragrafo, bottone */
  gap: clamp(24px, 2.6vw, 36px);
}
.concierge-panel-left .section-tag{ margin: 0 !important; }
.concierge-panel-left .concierge-panel-title{ margin: 0 !important; }
.concierge-panel-left .btn-pill,
.concierge-panel-left .btn-pill-on-dark{
  align-self: flex-start;
  /* niente margin-top extra: lo spacing è del flex gap parent */
  margin: 0 !important;
}
.concierge-panel-grid > .concierge-panel-col{
  margin: 0 !important;
}
.concierge-panel-col p{ margin: 0 !important; }

/* ============================================================
   Task 56b — icone SVG line-art sui servizi (Our Services)
   per dare appoggio visivo sotto alla descrizione
   ============================================================ */
.service{
  display: flex;
  flex-direction: column;
}
.service-icon{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 56px;
  height: 56px;
  margin: 28px 0 0 42px;
  color: var(--accent-deep);
  opacity: .9;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.service-icon svg{
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service:hover .service-icon{
  color: var(--accent);
  transform: translateX(6px);
}
@media (max-width: 760px){
  .service-icon{ margin: 22px 0 0 0; width: 48px; height: 48px; }
}

/* ============================================================
   Task 54 — NAVBAR SiciLife-style
   Pattern: nav-left | BRAND wordmark center | nav-right TUTTI sullo
   stesso baseline. CTA + lang switcher in .topbar-aside absolute,
   fuori dalla grid (per non sbilanciarla).
   ============================================================ */
body .topbar.topbar--split{
  padding: 30px 0 !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 50;
}
body .topbar.topbar--split.scrolled{
  padding: 16px 0 !important;
  position: fixed !important;
}

/* GRID 1fr auto 1fr — nav | brand | nav, allineati perfettamente */
.topbar--split .nav-wrap.nav-wrap--split{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(20px, 3vw, 60px) !important;
  position: static !important;
  flex-wrap: nowrap !important;
  flex: none !important;
  min-width: 0;
}

/* SINISTRA — voci nav allineate verso il logo */
.topbar--split .nav-wrap--split .nav--left{
  grid-column: 1 !important;
  justify-self: end !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(20px, 2.6vw, 44px) !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* CENTRO — wordmark Properhost + sub allineati con la nav */
.topbar--split .nav-wrap--split .brand.brand--center{
  grid-column: 2 !important;
  justify-self: center !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}
/* Wordmark "Properhost" — italic Cormorant grande ma non eccessivo */
.topbar--split .nav-wrap--split .brand.brand--center .brand-main{
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-transform: capitalize !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1 !important;
  letter-spacing: .002em !important;
  display: block !important;
}
/* Subtitle "Villas · Concierge · Services" — small caps gold */
.topbar--split .nav-wrap--split .brand.brand--center .brand-sub{
  font-family: var(--font-body) !important;
  font-size: clamp(8.5px, .65vw, 10px) !important;
  font-weight: 500 !important;
  letter-spacing: .42em !important;
  color: rgba(255,255,255,.78) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: block !important;
}

/* DESTRA — voci nav (CTA e lang sono in .topbar-aside absolute) */
.topbar--split .nav-wrap--split .nav--right{
  grid-column: 3 !important;
  justify-self: start !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(20px, 2.6vw, 44px) !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* Stile voci nav — coerente sinistra/destra */
.topbar--split .nav-wrap--split .nav--left a,
.topbar--split .nav-wrap--split .nav--right a{
  font-family: var(--font-body);
  font-size: clamp(11px, .9vw, 12.5px) !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em !important;
  color: #fff !important;
  position: relative;
  padding: 8px 0 !important;
  white-space: nowrap;
  border: none !important;
  background: transparent !important;
  width: auto !important;
  transition: color .2s var(--ease);
}
.topbar--split .nav-wrap--split .nav--left a:hover,
.topbar--split .nav-wrap--split .nav--right a:hover,
.topbar--split .nav-wrap--split .nav--left a.active,
.topbar--split .nav-wrap--split .nav--right a.active{
  color: var(--accent-soft) !important;
}
.topbar--split .nav-wrap--split .nav--left a::after,
.topbar--split .nav-wrap--split .nav--right a::after{
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1px;
  background: var(--accent-soft);
  transition: width .3s var(--ease);
}
.topbar--split .nav-wrap--split .nav--left a:hover::after,
.topbar--split .nav-wrap--split .nav--right a:hover::after,
.topbar--split .nav-wrap--split .nav--left a.active::after,
.topbar--split .nav-wrap--split .nav--right a.active::after{
  width: 100%;
}

/* Scrolled — testi scuri su sfondo cream */
.topbar.topbar--split.scrolled{
  background: rgba(246,241,232,.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.topbar.topbar--split.scrolled .nav-wrap--split .nav--left a,
.topbar.topbar--split.scrolled .nav-wrap--split .nav--right a{
  color: var(--text) !important;
}
.topbar.topbar--split.scrolled .nav-wrap--split .nav--left a:hover,
.topbar.topbar--split.scrolled .nav-wrap--split .nav--right a:hover,
.topbar.topbar--split.scrolled .nav-wrap--split .nav--left a.active,
.topbar.topbar--split.scrolled .nav-wrap--split .nav--right a.active{
  color: var(--accent-deep) !important;
}
.topbar.topbar--split.scrolled .nav-wrap--split .brand.brand--center .brand-main{
  color: var(--text) !important;
}
.topbar.topbar--split.scrolled .nav-wrap--split .brand.brand--center .brand-sub{
  color: var(--muted) !important;
}

/* ASIDE — wrapper absolute top-right per lang switcher
   (lo styling visivo del lang-switch resta quello originale del sito) */
.topbar--split .topbar-aside{
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 3;
}

/* TOGGLE — nascosto su desktop */
.topbar--split .nav-toggle{ display: none !important; }

/* Tablet (<1180px): font + gap ridotti, brand più piccolo */
@media (max-width: 1180px){
  .topbar--split .nav-wrap--split{ gap: clamp(14px, 2vw, 28px) !important; }
  .topbar--split .nav-wrap--split .nav--left,
  .topbar--split .nav-wrap--split .nav--right{
    gap: clamp(14px, 2vw, 26px) !important;
  }
  .topbar--split .nav-wrap--split .brand.brand--center .brand-main{
    font-size: clamp(24px, 2.4vw, 30px) !important;
  }
  .topbar--split .nav-wrap--split .brand.brand--center .brand-sub{
    font-size: 8.5px !important;
    letter-spacing: .36em !important;
  }
  .topbar--split .topbar-aside{ gap: 10px; }
}

/* Mobile (≤980px): collasso → brand sx + hamburger dx, drawer */
@media (max-width: 980px){
  body .topbar.topbar--split{ padding: 18px 0 !important; }
  body .topbar.topbar--split.scrolled{ padding: 12px 0 !important; }

  .topbar--split .nav-wrap.nav-wrap--split{
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Brand a sinistra in formato compatto */
  .topbar--split .nav-wrap--split .brand.brand--center{
    align-items: flex-start !important;
    justify-self: start !important;
    margin-right: auto !important;
    gap: 2px !important;
  }
  .topbar--split .nav-wrap--split .brand.brand--center .brand-main{
    font-size: 22px !important;
    text-align: left !important;
  }
  .topbar--split .nav-wrap--split .brand.brand--center .brand-sub{
    font-size: 7.5px !important;
    letter-spacing: .36em !important;
    text-align: left !important;
  }

  /* Nav-left e nav-right diventano DRAWER — entrambe sotto #mainNav */
  .topbar--split .nav-wrap--split .nav--left,
  .topbar--split .nav-wrap--split .nav--right{
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
    background: var(--bg) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 110px 32px 40px !important;
    transform: translateX(100%) !important;
    transition: transform .35s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.18);
    z-index: 40 !important;
  }
  /* Solo .nav--left ha id=mainNav: si apre col toggle.
     .nav--right viene mostrato sotto al .nav--left dentro lo stesso drawer.
     Per semplicità: nascondiamo .nav--right separato e duplicato i suoi link nel drawer di nav--left via display contents mobile. */
  .topbar--split .nav-wrap--split .nav--right{
    position: static !important;
    flex-direction: column !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    align-items: flex-start !important;
    display: none !important; /* nascosto: i link sono solo nel drawer left tramite duplicazione manuale */
  }
  /* Quando il drawer è aperto, mostra anche nav--right come parte del contenuto */
  .topbar--split .nav-wrap--split .nav--left.open ~ .nav--right{
    display: flex !important;
    position: fixed !important;
    inset: auto 0 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
    background: var(--bg) !important;
    padding: 0 32px 40px !important;
    z-index: 41 !important;
    top: 380px;
    transform: translateX(0) !important;
  }

  .topbar--split .nav-wrap--split .nav--left.open{
    transform: translateX(0) !important;
  }
  .topbar--split .nav-wrap--split .nav--left a,
  .topbar--split .nav-wrap--split .nav--right a{
    color: var(--text) !important;
    font-size: 15px !important;
    padding: 18px 0 !important;
    width: 100% !important;
    border-bottom: 1px solid var(--line) !important;
    letter-spacing: .22em !important;
  }
  .topbar--split .nav-wrap--split .nav--left a:last-of-type{ border-bottom: none !important; }
  .topbar--split .nav-wrap--split .nav--left a::after,
  .topbar--split .nav-wrap--split .nav--right a::after{ display: none !important; }

  /* Aside: mantieni lang switch piccolo */
  .topbar--split .topbar-aside{
    position: static;
    transform: none;
    margin-left: auto;
    gap: 8px;
  }

  /* Hamburger toggle visibile */
  .topbar--split .nav-toggle{
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 60;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .topbar--split .nav-toggle span,
  .topbar--split .nav-toggle span::before,
  .topbar--split .nav-toggle span::after{
    display: block;
    width: 26px;
    height: 1.5px;
    background: #fff;
    position: absolute;
    transition: transform .25s var(--ease), top .25s var(--ease), opacity .2s var(--ease);
  }
  .topbar--split .nav-toggle span{ top: 50%; }
  .topbar--split .nav-toggle span::before{ content: ''; top: -8px; left: 0; }
  .topbar--split .nav-toggle span::after{ content: ''; top: 8px; left: 0; }
  .topbar--split .nav-toggle[aria-expanded="true"] span{ opacity: 0; transform: none; }
  .topbar--split .nav-toggle[aria-expanded="true"] span::before{ top: 50%; transform: rotate(45deg); }
  .topbar--split .nav-toggle[aria-expanded="true"] span::after{ top: 50%; transform: rotate(-45deg); }
  .topbar.topbar--split.scrolled .nav-toggle span,
  .topbar.topbar--split.scrolled .nav-toggle span::before,
  .topbar.topbar--split.scrolled .nav-toggle span::after{
    background: var(--text);
  }
}

/* ============================================================
   Task 54 — WORDMARK PROPERHOST CENTRATO SUL VIDEO HERO
   ============================================================ */
.hero-brandmark{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  text-align: center;
  /* lascia spazio per la navbar in alto e il blocco testo+bottone in basso a destra */
  padding: clamp(120px, 14vh, 180px) 24px clamp(160px, 22vh, 280px);
}
.hero-brandmark__name{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 132px);
  color: #fff;
  line-height: 1;
  letter-spacing: -.005em;
  text-shadow: 0 6px 30px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.35);
  /* fade-in a inizio caricamento */
  opacity: 0;
  transform: translateY(14px);
  animation: heroBrandmarkIn 1.2s var(--ease) .2s forwards;
}
.hero-brandmark__tag{
  font-family: var(--font-body);
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-top: clamp(14px, 1.6vw, 22px);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  opacity: 0;
  animation: heroBrandmarkIn 1s var(--ease) .55s forwards;
}
@keyframes heroBrandmarkIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* Quando l'utente scrolla, il wordmark fade-out per lasciare spazio al contenuto */
.hero[data-scrolled="true"] .hero-brandmark{
  opacity: .35;
  transform: translateY(-20px) scale(.96);
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}

/* Mobile: wordmark più contenuto */
@media (max-width: 760px){
  .hero-brandmark{
    padding: 22vh 20px 220px;
    justify-content: flex-start;
  }
  .hero-brandmark__name{
    font-size: clamp(40px, 12vw, 72px);
  }
  .hero-brandmark__tag{
    font-size: 9.5px;
    letter-spacing: .36em;
    margin-top: 12px;
  }
}

/* Reduced motion: wordmark visibile subito senza animazione */
@media (prefers-reduced-motion: reduce){
  .hero-brandmark__name,
  .hero-brandmark__tag{
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ============================================================
   LOGO FULL ProperHost — BIANCO sul video, VERDE TEAL quando scrolled
   Due immagini sovrapposte, cross-fade su .topbar.scrolled
   ============================================================ */
.brand.brand--full{
  display: inline-flex !important;
  align-items: center;
  text-decoration: none;
  gap: 4px;
  position: relative;
}
.brand.brand--full .brand-logo{
  display: block;
  height: clamp(36px, 4vw, 52px);
  width: auto;
  transition: opacity .35s var(--ease);
}
/* Versione bianca: visibile di default (sopra il video) */
.brand.brand--full .brand-logo--light{ opacity: 1; filter: brightness(0) invert(1); }
/* Versione teal: sovrapposta, nascosta di default */
.brand.brand--full .brand-logo--dark{
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  opacity: 0;
  filter: none;
}
/* Stato scrolled (navbar su sfondo cream): cross-fade alla versione verde */
.topbar.scrolled .brand.brand--full .brand-logo--light{ opacity: 0; }
.topbar.scrolled .brand.brand--full .brand-logo--dark{ opacity: 1; filter: brightness(0) saturate(100%) invert(29%) sepia(64%) saturate(436%) hue-rotate(131deg) brightness(91%) contrast(97%); }

@media (max-width: 760px){
  .brand.brand--full .brand-logo{ height: 36px; }
}
@media (max-width: 480px){
  .brand.brand--full .brand-logo{ height: 32px; }
}








/* Wordmark image accanto al logo */

.brand-wordmark-img {
  height: clamp(22px, 2.2vw, 32px);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
  align-self: center;
  transform: translateY(-4px);
}
.topbar.scrolled .brand-wordmark-img {
  filter: none;
}
@media (max-width: 760px) { .brand-wordmark-img { height: 22px; } }
@media (max-width: 480px) { .brand-wordmark-img { height: 19px; } }

/* Footer credit — Realizzato da Mosh (angolo basso-sinistra) */
.footer-credit{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  align-self:flex-start;
  gap:10px;
  width:auto;
  padding-top:20px;
  margin-top:0;
}
.footer-credit__label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
}
.footer-credit__logo{
  display:block;
  height:clamp(30px, 3.6vw, 38px);
  width:auto;
  border-radius:6px;
  opacity:1;
  box-shadow:0 3px 14px rgba(0,0,0,.18);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.footer-credit__link{
  display:inline-flex;
  line-height:0;
  text-decoration:none;
  flex-shrink:0;
}
.footer-credit__link:hover .footer-credit__logo,
.footer-credit:hover .footer-credit__logo{
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(0,0,0,.22);
}
@media (max-width:760px){
  .footer-credit{
    padding-top:16px;
    align-self:flex-start;
    flex-wrap:wrap;
    gap:8px 10px;
  }
  .footer-credit__label{
    font-size:10px;
    letter-spacing:.16em;
  }
  .footer-credit__logo{
    height:32px;
  }
}

/* CTA with longer copy */
.btn--fluid{
  white-space:normal;
  text-align:center;
  line-height:1.35;
  padding-inline:clamp(18px, 3vw, 36px);
  font-size:clamp(13px, 1.05vw, 15px);
  max-width:min(100%, 340px);
}

/* ============================================================
   HERO CTA "RICHIEDI LA TUA STANZA" — glass button al centro del video
   Sostituisce il wordmark .hero-brandmark precedente.
   ============================================================ */
.hero-cta-room{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px clamp(36px, 4vw, 64px);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-style: italic;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  /* Glass effect: bg semi-trasparente con blur */
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  cursor: pointer;
  /* Ingresso elegante */
  opacity: 0;
  animation: heroCtaRoomIn 1.2s var(--ease) .35s forwards;
}
.hero-cta-room:hover,
.hero-cta-room:focus-visible{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.55);
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 16px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.28);
}
.hero-cta-room span{
  display: inline-block;
  letter-spacing: .005em;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
@keyframes heroCtaRoomIn{
  from{ opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
  to{ opacity: 1; transform: translate(-50%, -50%); }
}

/* Mobile: bottone più compatto */
@media (max-width: 760px){
  .hero-cta-room{
    padding: 18px 28px;
    font-size: 18px;
    /* lascia più aria sopra/sotto per non collidere con paragrafo e nav */
    top: 45%;
  }
}
@media (max-width: 480px){
  .hero-cta-room{
    padding: 15px 22px;
    font-size: 16px;
  }
}

/* Reduced motion: niente animazione di ingresso */
@media (prefers-reduced-motion: reduce){
  .hero-cta-room{
    opacity: 1;
    animation: none;
  }
}

/* ============================================================
   Task 56 + 54 — TESTO HERO + BOTTONE "SCOPRI" tutti a DESTRA
   Posizionamento absolute bottom-right del viewport hero.
   Spaziatura simmetrica fra paragrafo e bottone (gap unico flex column).
   ============================================================ */
.hero{ position: relative !important; }

/* Reset: la classe .container del .hero-cinema-content NON deve centrare */
.hero .hero-cinema-content{
  position: absolute !important;
  bottom: clamp(60px, 9vh, 110px) !important;
  right: clamp(24px, 5vw, 80px) !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: min(480px, calc(100vw - 48px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.hero .hero-cinema-inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  text-align: right !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  /* GAP unico tra paragrafo e bottone — spaziatura simmetrica */
  gap: clamp(28px, 4vh, 44px) !important;
}

.hero .hero-cinema-text{
  margin: 0 0 0 auto !important;
  text-align: right !important;
  max-width: 100% !important;
  width: 100% !important;
}
.hero .hero-cinema-text p{
  margin: 0 0 0 auto !important;
  text-align: right !important;
  max-width: 100% !important;
}

.hero .hero-discover{
  margin: 0 0 0 auto !important;
  align-self: flex-end !important;
}

/* Mobile: si sposta in basso-destra ma con padding ridotto */
@media (max-width: 760px){
  .hero .hero-cinema-content{
    bottom: clamp(40px, 6vh, 70px) !important;
    right: clamp(16px, 5vw, 24px) !important;
    left: clamp(16px, 5vw, 24px) !important;
    max-width: none !important;
    width: auto !important;
    padding-bottom: 0 !important;
  }
  .hero .hero-cinema-inner{
    gap: clamp(22px, 4vh, 32px) !important;
    align-items: flex-end !important;
  }
  .hero .hero-cinema-text p{
    font-size: 16.5px;
    line-height: 1.5;
  }
}

/* ============================================================
   Task 55 — VILLA SLIDER NAV: frecce sempre visibili + dots evidenti
   ============================================================ */
.villa-slider .villa-nav,
.villa-slider .villa-nav.villa-nav--visible{
  opacity: 1 !important;
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  z-index: 6;
}
.villa-slider .villa-nav:hover{
  background: var(--accent);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-50%) scale(1.06) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.40);
}
.villa-slider .villa-nav-prev:hover{
  transform: translateY(-50%) translateX(-3px) scale(1.06) !important;
}
.villa-slider .villa-nav-next:hover{
  transform: translateY(-50%) translateX(3px) scale(1.06) !important;
}
.villa-slider .villa-nav svg{
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}

/* Dots evidenti in basso */
.villa-slider .villa-slider-dots{
  bottom: 28px !important;
  gap: 12px !important;
  z-index: 7;
}
.villa-slider .villa-slider-dots span{
  width: 28px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.35) !important;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), width .25s var(--ease) !important;
}
.villa-slider .villa-slider-dots span:hover{
  background: rgba(255,255,255,.7) !important;
}
.villa-slider .villa-slider-dots span.is-active{
  background: var(--accent-soft) !important;
  width: 38px !important;
}

@media (max-width: 760px){
  .villa-slider .villa-nav{
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
  }
  .villa-slider .villa-nav-prev{ left: 12px !important; }
  .villa-slider .villa-nav-next{ right: 12px !important; }
  .villa-slider .villa-nav svg{ width: 18px; height: 18px; }
  .villa-slider .villa-slider-dots{ bottom: 18px !important; }
  .villa-slider .villa-slider-dots span{
    width: 22px !important; height: 3px !important;
  }
}

/* Pulse hint all'apertura — invita a scorrere */
@keyframes villaNavPulse{
  0%,100%{ box-shadow: 0 8px 24px rgba(0,0,0,.30), 0 0 0 0 rgba(255,255,255,.0); }
  40%{ box-shadow: 0 8px 24px rgba(0,0,0,.30), 0 0 0 10px rgba(255,255,255,.06); }
}
.villa-slider .villa-nav{
  animation: villaNavPulse 2.6s ease-in-out 1.5s 2;
}
@media (prefers-reduced-motion: reduce){
  .villa-slider .villa-nav{ animation: none; }
}

/* ============================================================
   Form submission toast — contatti.html success notification
   ============================================================ */
.form-toast{
  position: fixed;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  padding: 18px 22px;
  max-width: 360px;
  width: calc(100% - 40px);
  transform: translateX(120%);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.form-toast[hidden]{ display: none !important; }
.form-toast.is-visible{
  transform: translateX(0);
  opacity: 1;
}
.form-toast-icon{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(11,107,94,.10);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-toast-icon svg{
  width: 20px;
  height: 20px;
}
.form-toast-content{
  flex: 1 1 auto;
  min-width: 0;
}
.form-toast-title{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 4px;
}
.form-toast-text{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.form-toast-close{
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-top: -2px;
  transition: color .25s var(--ease);
}
.form-toast-close:hover{ color: var(--text); }

@media (max-width: 600px){
  .form-toast{
    top: calc(env(safe-area-inset-top, 0px) + 96px);
    right: 16px;
    left: 16px;
    max-width: none;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .form-toast{
    transition: opacity .2s ease;
    transform: none;
  }
}

/* ============================================================
   Responsive UX patches (audit 2026-05)
   - Touch target footer min 44px
   - CTA padding più aderente su mobile
   - contact-info sticky off su tablet/<=1100
   - hero pagina interne: min-height adatta a landscape mobile
   - service-grid: 1col fino a 600px (era 480)
   - villa-detail features: 1col fino a 600px
   - intro-editorial title fluido invece che fisso 28px
   - lang-switch tap target accessibile
   ============================================================ */
@media (max-width: 1100px){
  .contact-info{ position: static !important; top: auto !important; }
}
@media (max-width: 760px){
  .footer-col a{ padding: 6px 0; min-height: 44px; line-height: 1.6; display: flex; align-items: center; }
  .contact-list a, .contact-list span{ min-height: 44px; display: flex; align-items: center; }
  .cta{ padding-block: clamp(64px, 9vw, 100px) !important; }
  .intro-editorial-title{ font-size: clamp(28px, 6.5vw, 40px) !important; }
}
@media (max-width: 600px){
  .service-grid{ grid-template-columns: 1fr !important; }
  .villa-detail__features-grid{ grid-template-columns: 1fr !important; }
  .field label{ font-size: 11px !important; letter-spacing: .24em !important; }
}
@media (orientation: landscape) and (max-height: 500px){
  .hero.page-hero{ min-height: auto !important; padding-block: 110px 56px !important; }
  .hero-brandmark{ padding: 14vh 20px 100px !important; }
}

/* ============================================================
   Touch devices: neutralizza sticky-hover (transform/box-shadow)
   per evitare che pulsanti/card restino "sollevati" dopo il tap
   ============================================================ */
@media (hover: none){
  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-gold:hover,
  .btn-pill:hover,
  .card:hover,
  .service-card:hover,
  .villa-feature:hover,
  .cards--ville .card:hover,
  .villa-nav:hover{
    transform: none;
    box-shadow: none;
  }
  .villa-nav-prev:hover,
  .villa-nav-next:hover{
    transform: translateY(-50%);
  }
  .card-media img,
  .cards--ville .card:hover .card-media img{
    transform: none !important;
  }
}

/* ============================================================
   RESPONSIVE PASS — 2026-05
   Source of truth per breakpoint canonici, scale fluide e
   accessibilità mobile (safe-area, touch targets, focus).
   Additivo: completa i fix 'Task XX' precedenti senza rimuoverli.
   ============================================================ */
:root{
  /* Breakpoint canonici di riferimento (uso interno + leggibilità) */
  --bp-xs: 480px;
  --bp-sm: 760px;
  --bp-md: 980px;
  --bp-lg: 1100px;
  --bp-xl: 1180px;

  /* Z-index scale esplicita: gerarchia ordinata, niente collisioni */
  --z-content: 5;
  --z-nav: 50;
  --z-toggle: 60;
  --z-drawer: 70;
  --z-back-to-top: 80;
  --z-form-toast: 9000;
  --z-preloader: 9999;
  --z-cursor: 10000;
  --z-skip: 10001;

  /* Custom viewport unit: settata da JS via visualViewport.height per
     evitare il salto della barra Safari su iOS quando si usa 100vh.
     Fallback 1vh quando JS non è eseguito. */
  --vh: 1vh;
}

/* Hero full-screen e villa-slider: usa --vh dinamica + dvh dove supportata */
.hero,
.villa-slider{
  min-height: calc(var(--vh, 1vh) * 100);
}
@supports (min-height: 100dvh){
  .hero{ min-height: 100dvh; }
  .villa-slider{ min-height: clamp(500px, 100dvh, 100dvh); }
}

/* --- Drawer mobile: sfondo dark teal distintivo, scroll-lock, backdrop --- */
.nav-close{ display: none; }

@media (max-width: 980px){
  .nav#mainNav{
    max-width: min(380px, 90vw);
    padding-block: clamp(96px, 14vh, 130px) clamp(24px, 4vh, 40px);
    padding-inline: clamp(20px, 6vw, 32px);
    /* Sfondo distintivo: dark teal del footer, NON cream della pagina.
       Garantisce che il drawer sia inequivocabilmente "il suo spazio" e
       non un prolungamento del body. */
    background: var(--primary-soft);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .35);
    border-left: 1px solid rgba(184, 153, 104, .25); /* hairline accent gold */
  }

  /* Pulsante X di chiusura — visibile in alto a destra del drawer.
     Position absolute relativa al drawer (parent fixed) → angolo del drawer. */
  .nav-close{
    display: inline-flex !important;
    position: absolute;
    top: clamp(20px, 3vh, 32px);
    right: clamp(18px, 5vw, 28px);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: rgba(255, 255, 255, .92);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
    z-index: 1;
  }
  .nav-close svg{
    width: 20px;
    height: 20px;
    display: block;
  }
  .nav-close:hover,
  .nav-close:focus-visible{
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: rotate(90deg);
    outline: none;
  }
  .nav-close:active{
    transform: rotate(90deg) scale(.94);
  }
  /* Link drawer: testo chiaro su sfondo scuro */
  .nav#mainNav a{
    color: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(255, 255, 255, .10);
  }
  .nav#mainNav a:hover,
  .nav#mainNav a:focus-visible,
  .nav#mainNav a.active{
    color: var(--accent-soft);
  }

  /* Body scroll lock quando drawer aperto. Classe gestita da JS. */
  body.is-nav-open{ overflow: hidden; touch-action: none; }

  /* Backdrop scuro sopra al body (NON sul drawer ::before — il drawer ha
     transform che su iOS Safari rompe position:fixed dei figli). */
  body.is-nav-open::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(5, 30, 28, .55);
    z-index: 35; /* sotto al drawer (z:40), sopra al resto */
    animation: navBackdropIn .3s var(--ease) forwards;
    pointer-events: none;
  }

  /* Lang-switcher dentro il drawer (spostato dal JS al fondo del .nav#mainNav).
     Specificità più alta della regola legacy display:none → vince in cascade. */
  .nav#mainNav .lang-switch:not(.lang-switch--mobile){
    display: inline-flex !important;
    position: static;
    margin: clamp(20px, 4vh, 36px) auto 0 !important;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    align-self: flex-start;
    width: auto;
    max-width: none;
  }
  /* Reset stile dei link interni — il drawer li avrebbe stylati come voci nav */
  .nav#mainNav .lang-switch a,
  .nav#mainNav .lang-switch span{
    color: rgba(255, 255, 255, .78) !important;
    border: none !important;
    border-bottom: none !important;
    padding: 8px 16px !important;
    width: auto !important;
    min-height: 40px !important;
    min-width: 44px !important;
    font-size: 11px !important;
    letter-spacing: .24em !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .nav#mainNav .lang-switch a::after{ display: none !important; }
  .nav#mainNav .lang-switch span.is-active,
  .nav#mainNav .lang-switch a.is-active{
    color: #fff !important;
    background: var(--accent) !important;
    cursor: default;
  }
  .nav#mainNav .lang-switch a:not(.is-active):hover,
  .nav#mainNav .lang-switch a:not(.is-active):focus-visible{
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
  }
}
@keyframes navBackdropIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* --- Touch targets accessibili (WCAG 2.5.5 — minimo 44x44).
   Solo su mobile/touch — su desktop il lang-switch resta compatto. --- */
@media (max-width: 980px){
  .lang-switch a,
  .lang-switch span.is-active{
    min-height: 40px;
    min-width: 44px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.faq-item__q{
  min-height: 56px;
  padding-block: 22px;
}
.back-to-top{
  z-index: var(--z-back-to-top);
}

/* --- Lang switch: stile span (non-link) per la voce attiva --- */
/* SIMMETRIA: span e a devono avere identico padding + min-width
   altrimenti IT (span attivo) e EN (a) appaiono di larghezze diverse */
.lang-switch span,
.lang-switch a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  letter-spacing: .22em;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
  line-height: 1;
}
.lang-switch span.is-active{
  background: var(--accent);
  color: #fff;
  cursor: default;
}
.lang-switch a:not(.is-active){
  color: rgba(255,255,255,.78);
  background: transparent;
}
.topbar.scrolled .lang-switch span.is-active{
  background: var(--primary);
  color: #fff;
}
.topbar.scrolled .lang-switch a:not(.is-active){
  color: var(--text-2);
}

/* --- Safe-area iOS (notch / home indicator) su elementi fixed --- */
.back-to-top{
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  right: max(20px, env(safe-area-inset-right, 20px));
}
.form-toast{
  top: max(20px, calc(env(safe-area-inset-top, 0px) + 20px));
  right: max(20px, calc(env(safe-area-inset-right, 0px) + 20px));
}
@media (max-width: 600px){
  .form-toast{
    /* override del precedente top:96px hardcoded: ora segue safe-area */
    top: max(20px, calc(env(safe-area-inset-top, 0px) + 80px));
    left: max(16px, env(safe-area-inset-left, 16px));
    right: max(16px, env(safe-area-inset-right, 16px));
  }
}

/* --- Hero brandmark mobile: padding fluido (no 220px hardcoded) --- */
@media (max-width: 760px){
  .hero-brandmark{
    padding-block: clamp(110px, 18vh, 180px) clamp(140px, 22vh, 220px);
    padding-inline: clamp(16px, 5vw, 28px);
    justify-content: center;
  }
  .hero-brandmark__name{
    font-size: clamp(40px, 11vw, 68px);
  }
}
@media (orientation: landscape) and (max-height: 500px){
  .hero-brandmark{
    padding-block: clamp(80px, 14vh, 120px) clamp(80px, 14vh, 120px);
  }
  .hero-brandmark__name{
    font-size: clamp(32px, 8vh, 56px);
  }
}

/* --- Service icon: allineamento mobile (segue h4/p margin-left 36px) --- */
@media (max-width: 760px){
  .service-icon{
    margin: 22px 0 0 36px;
    width: 44px;
    height: 44px;
  }
}

/* --- Form input mobile: previene zoom iOS (font-size ≥ 16px) --- */
@media (max-width: 760px){
  .field input,
  .field textarea,
  .field select{
    font-size: 16px;
  }
}

/* --- Drawer right-nav legacy (.topbar--split): neutralizza top:380px --- */
@media (max-width: 980px){
  .topbar--split .nav-wrap--split .nav--left.open ~ .nav--right{
    top: auto;
  }
}

/* --- Tipografia mobile più riposante --- */
@media (max-width: 760px){
  body{ font-size: 15.5px; line-height: 1.65; }
  p{ line-height: 1.7; }
}
@media (max-width: 380px){
  .villa-detail__meta{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-wrap{ font-size: 10px; }
}

/* --- Perf: will-change mirato sullo slider attivo --- */
.villa-slide{ will-change: auto; }
.villa-slide.is-active{ will-change: opacity; }
.villa-slide.is-active img{ will-change: transform; }

/* --- Cleanup: -webkit-overflow-scrolling deprecato → reset esplicito --- */
@media (max-width: 760px){
  body{ -webkit-overflow-scrolling: auto; }
}

/* --- prefers-reduced-data: stop autoplay video hero --- */
@media (prefers-reduced-data: reduce){
  .hero-video-bg{ display: none; }
  .hero{ background-image: var(--hero-poster, url('assets/hero-home.jpg')); background-size: cover; background-position: center; }
}

/* --- Hover sticky cleanup esteso a span lang-switch --- */
@media (hover: none){
  .lang-switch span.is-active:hover{ background: var(--accent); }
}

/* ============================================================
   FIX DRAWER MOBILE — sempre solido dark green a tutta altezza
   Bug: lo scroll del browser mostrava il contenuto pagina dietro il drawer
   (bleeding semi-trasparente). Fix: fullscreen overlay con bg primary-dark
   solido, z-index 9999, height: 100dvh per iOS dynamic viewport.
   ============================================================ */
@media (max-width: 980px){
  .nav#mainNav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--primary-dark) !important;
    background-color: var(--primary-dark) !important;
    z-index: 9999 !important;
    padding: clamp(80px, 14vw, 110px) clamp(28px, 7vw, 48px) clamp(32px, 7vw, 48px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .nav#mainNav a{
    color: #fff !important;
    font-size: clamp(20px, 5vw, 24px) !important;
    padding: 18px 0 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    letter-spacing: .22em !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  .nav#mainNav a.active{
    color: var(--accent-soft) !important;
  }
  .nav#mainNav a:last-of-type{ border-bottom: none !important; }
  .nav#mainNav a::after{ display: none !important; }
  /* Drawer rimane solido anche con .topbar.scrolled (bug originale) */
  .topbar.scrolled .nav#mainNav{
    background: var(--primary-dark) !important;
    background-color: var(--primary-dark) !important;
  }
  .topbar.scrolled .nav#mainNav a{
    color: #fff !important;
  }
  /* Body scroll lock quando drawer aperto (JS aggiunge .is-nav-open) */
  body.is-nav-open{
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  /* Fallback browser moderni con :has() */
  body:has(.nav#mainNav.open){
    overflow: hidden !important;
  }
}