/* ============================================================
   La Corte della Risaia — "Luce della Risaia"
   Tema chiaro: lino/paglia + terracotta toscana + verde risaia + ottone
   ============================================================ */
:root{
  --bg:#f2efe4; --bg-2:#e9e7d8; --mist:#e6ebe0; --paper:#faf8f0;
  --ink:#221f18; --ink-soft:#5b5545; --ink-faint:#8a8471;
  --terra:#b04e28; --terra-deep:#8c3c1c; --terra-tint:#d98b5f;
  --paddy:#5e6f49; --paddy-deep:#404e2e; --paddy-tint:#8a9a70;
  --brass:#ad8a45; --brass-lite:#c9a962;
  --plaque:#151310; --plaque-soft:#1e1b16;
  --line:rgba(34,31,24,.14); --line-2:rgba(34,31,24,.08);
  --shadow:0 22px 60px -28px rgba(58,40,20,.5);
  --shadow-sm:0 10px 30px -18px rgba(58,40,20,.45);
  --r:18px; --r-lg:26px; --maxw:1200px;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --body:"Spectral",Georgia,serif;
  --ui:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:hidden; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.05vw,18px); line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
[hidden]{display:none!important}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:.004em}
h1,h2,h3,h4,p,span,a,li{overflow-wrap:break-word}
p{margin:0}
::selection{background:var(--terra); color:#fff}
:focus-visible{outline:2.5px solid var(--terra); outline-offset:3px; border-radius:4px}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.eyebrow{font-family:var(--ui); font-weight:700; font-size:.74rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--terra-deep); display:inline-flex; align-items:center; gap:.6em}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--brass); display:inline-block}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:""; width:26px; height:1.5px; background:var(--brass); display:inline-block}
.sec{padding:clamp(64px,9vw,120px) 0; position:relative}
.sec-head{max-width:720px; margin-bottom:clamp(30px,4vw,52px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-t{font-size:clamp(2.1rem,5.2vw,3.7rem); margin-top:.32em; color:var(--ink)}
.sec-lead{margin-top:1em; color:var(--ink-soft); font-size:1.08rem}
.accent{color:var(--terra)}
.serif-i{font-style:italic}

/* ---------- Buttons ---------- */
.btn{font-family:var(--ui); font-weight:700; font-size:.92rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.92em 1.7em; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s; white-space:nowrap}
.btn svg{width:1.05em; height:1.05em}
.btn-primary{background:var(--terra); color:#fdf6ee; box-shadow:0 14px 30px -14px rgba(176,78,40,.75)}
.btn-primary:hover{transform:translateY(-3px); background:var(--terra-deep); box-shadow:0 20px 40px -14px rgba(176,78,40,.8)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--terra); color:var(--terra); transform:translateY(-3px)}
.btn-dark{background:var(--plaque); color:#f3ede1}
.btn-dark:hover{transform:translateY(-3px); background:var(--paddy-deep)}
.btn-lg{padding:1.05em 2.1em; font-size:1rem}

/* ---------- Intro / preloader ---------- */
#intro{position:fixed; inset:0; z-index:2000; background:
  radial-gradient(120% 90% at 50% 8%, #f6f3e9 0%, #e9e6d7 55%, #dfe4d6 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:transform 1s cubic-bezier(.76,0,.24,1), opacity .6s ease .35s}
#intro.done{transform:translateY(-102%); opacity:0; pointer-events:none}
.intro-plaque{background:var(--plaque); border:1.5px solid rgba(173,138,69,.55);
  border-radius:22px; padding:30px 40px 26px; box-shadow:var(--shadow);
  opacity:0; transform:scale(.9) translateY(10px); animation:introLogo 1.5s cubic-bezier(.2,.8,.2,1) .15s forwards}
.intro-plaque img{width:min(64vw,260px); height:auto}
@keyframes introLogo{0%{opacity:0; transform:scale(.9) translateY(10px)}
  60%{opacity:1} 100%{opacity:1; transform:scale(1) translateY(0)}}
.intro-water{width:min(72vw,320px); height:34px; position:relative; overflow:hidden; opacity:.9}
.intro-water i{position:absolute; left:0; right:0; height:1.5px; background:
  linear-gradient(90deg,transparent,var(--paddy-tint),transparent); top:50%;
  transform:translateY(-50%); animation:ripple 2.4s ease-in-out infinite}
.intro-water i:nth-child(2){animation-delay:.4s; opacity:.6}
.intro-water i:nth-child(3){animation-delay:.8s; opacity:.35}
@keyframes ripple{0%,100%{transform:translateY(-50%) scaleX(.6); opacity:.2}
  50%{transform:translateY(-50%) scaleX(1); opacity:.9}}
.intro-cap{font-family:var(--ui); text-transform:uppercase; letter-spacing:.32em;
  font-size:.7rem; color:var(--paddy-deep); opacity:0; animation:fadeUp .8s ease .7s forwards}
@keyframes fadeUp{to{opacity:1}}

/* ---------- Header ---------- */
#header{position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .4s, box-shadow .4s, padding .35s; padding:14px 0}
#header.scrolled{background:rgba(242,239,228,.9); backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -24px rgba(58,40,20,.5)}
.hd{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:0; flex-shrink:0; z-index:2}
.brand .plaque{background:var(--plaque); border:1px solid rgba(173,138,69,.4);
  border-radius:13px; padding:8px 14px; display:flex; align-items:center;
  box-shadow:var(--shadow-sm); transition:transform .3s}
.brand:hover .plaque{transform:translateY(-2px)}
.brand img{height:52px; width:auto}
.nav{display:flex; align-items:center; gap:clamp(4px,1vw,14px)}
.nav a{font-family:var(--ui); font-weight:600; font-size:.92rem; color:var(--ink);
  padding:.5em .2em; position:relative; transition:color .25s; white-space:nowrap}
#header:not(.scrolled) .nav a, #header:not(.scrolled) .lang-btn, #header:not(.scrolled) .burger{color:#f6efe2}
.nav a::after{content:""; position:absolute; left:.2em; right:.2em; bottom:.15em; height:1.5px;
  background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.nav a:hover::after, .nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--terra)}
#header:not(.scrolled) .nav a.active{color:#fff}
.hd-right{display:flex; align-items:center; gap:10px}
.lang-btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--ui); font-weight:600;
  font-size:.86rem; color:var(--ink); background:rgba(255,255,255,.35); border:1px solid var(--line);
  padding:.5em .8em; border-radius:999px; cursor:pointer; transition:.25s}
#header:not(.scrolled) .lang-btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28)}
.lang-btn:hover{border-color:var(--terra); color:var(--terra)}
.lang-btn svg{width:1.05em; height:1.05em}
.hd-cta{display:inline-flex}
.burger{display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.35); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{width:20px; height:2px; background:currentColor; border-radius:2px; transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
#drawer{position:fixed; inset:0; z-index:1500; background:rgba(21,19,16,.6);
  opacity:0; pointer-events:none; transition:opacity .35s}
#drawer.open{opacity:1; pointer-events:auto}
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(86vw,360px);
  background:var(--bg); box-shadow:-20px 0 60px -20px rgba(0,0,0,.5); padding:26px 26px calc(26px + env(safe-area-inset-bottom));
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto}
#drawer.open .drawer-panel{transform:translateX(0)}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.drawer-top .plaque{background:var(--plaque); border-radius:11px; padding:7px 12px}
.drawer-top .plaque img{height:40px}
.drawer-x{width:42px; height:42px; border:1px solid var(--line); border-radius:11px; background:none; cursor:pointer; font-size:1.3rem; color:var(--ink)}
.drawer-panel nav{display:flex; flex-direction:column; margin-top:6px}
.drawer-panel nav a{font-family:var(--serif); font-size:1.5rem; color:var(--ink); padding:.5em 0; border-bottom:1px solid var(--line-2)}
.drawer-panel nav a:hover{color:var(--terra); padding-left:.3em}
.drawer-foot{margin-top:auto; padding-top:22px; font-family:var(--ui); font-size:.9rem; color:var(--ink-soft)}
.drawer-foot a{color:var(--terra); font-weight:600}
.drawer-cta{margin-top:16px}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--plaque)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero-photo{position:absolute; inset:0; background-size:cover; background-position:center 40%; opacity:.34; mix-blend-mode:luminosity}
.hero::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(21,19,16,.5) 0%, rgba(21,19,16,.12) 32%, rgba(21,19,16,.28) 62%, rgba(21,19,16,.82) 100%)}
.hero-inner{position:relative; z-index:3; width:100%; padding-bottom:clamp(52px,9vh,110px); padding-top:120px}
.hero-kicker{font-family:var(--ui); text-transform:uppercase; letter-spacing:.3em; font-size:.78rem;
  color:var(--brass-lite); font-weight:700; display:flex; align-items:center; gap:.7em}
.hero-kicker::before{content:""; width:34px; height:1.5px; background:var(--brass); display:inline-block}
.hero h1{color:#fbf5ea; font-size:clamp(3rem,10vw,7.2rem); line-height:.92; margin:.24em 0 .1em;
  text-shadow:0 12px 40px rgba(0,0,0,.35)}
.hero h1 .r2{display:block; color:var(--brass-lite); font-style:italic; font-size:.82em; margin-top:-.02em}
.hero-sub{color:#eadfce; max-width:600px; font-size:clamp(1.02rem,1.5vw,1.22rem); margin-top:.4em}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:2em}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:2em; font-family:var(--ui);
  font-size:.86rem; color:#dcd2c0; font-weight:600}
.hero-badges span{display:inline-flex; align-items:center; gap:.5em}
.hero-badges .dot{width:7px; height:7px; border-radius:50%; background:var(--terra-tint)}
.scroll-hint{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:4;
  font-family:var(--ui); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:#cdbfa8;
  display:flex; flex-direction:column; align-items:center; gap:8px}
.scroll-hint i{width:1px; height:32px; background:linear-gradient(var(--brass-lite),transparent); animation:scrolly 2s ease-in-out infinite}
@keyframes scrolly{0%,100%{transform:scaleY(.4); opacity:.4} 50%{transform:scaleY(1); opacity:1}}

/* page hero (interior pages) */
.phero{position:relative; padding:150px 0 clamp(46px,7vw,84px); background:var(--plaque); overflow:hidden}
.phero canvas{position:absolute; inset:0; width:100%; height:100%}
.phero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(21,19,16,.55),rgba(21,19,16,.8))}
.phero .wrap{position:relative; z-index:3}
.phero .eyebrow{color:var(--brass-lite)}
.phero .eyebrow::before{background:var(--brass)}
.phero h1{color:#fbf5ea; font-size:clamp(2.6rem,7vw,5rem); margin:.2em 0 .18em}
.phero p{color:#e4dccb; max-width:640px}
.crumbs{font-family:var(--ui); font-size:.8rem; color:#b9ad97; margin-bottom:6px; letter-spacing:.02em}
.crumbs a:hover{color:var(--brass-lite)}

/* ---------- Section: pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.pillar{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:28px 24px 26px;
  position:relative; overflow:hidden; transition:transform .35s, box-shadow .35s}
.pillar:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.pillar .pn{font-family:var(--ui); font-size:.72rem; font-weight:800; letter-spacing:.2em; color:var(--brass)}
.pillar .pi{width:44px; height:44px; margin:8px 0 14px; color:var(--terra)}
.pillar h3{font-size:1.4rem; margin-bottom:.35em}
.pillar p{font-size:.98rem; color:var(--ink-soft)}
.pillar::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--terra); transition:width .4s}
.pillar:hover::after{width:100%}

/* ---------- Story split ---------- */
.story{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center}
.story-media{position:relative}
.story-media .fig{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5}
.story-media .fig img{width:100%; height:100%; object-fit:cover}
.story-media .stamp{position:absolute; bottom:-22px; left:-22px; background:var(--plaque); color:#f2ecdf;
  border:1.5px solid rgba(173,138,69,.5); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow);
  font-family:var(--ui); max-width:210px}
.story-media .stamp b{font-family:var(--serif); font-size:1.5rem; display:block; color:var(--brass-lite)}
.story-media .stamp span{font-size:.8rem; color:#cabfa9; letter-spacing:.04em}
.story-body p{margin-top:1.1em; color:var(--ink-soft)}
.story-body p:first-of-type{margin-top:1.3em}
.story-body p .lead{color:var(--ink)}
.sign{margin-top:1.6em; font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--terra)}

/* ---------- Signature dishes (asymmetric) ---------- */
.dishes{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px}
.dish{position:relative; overflow:hidden; border-radius:var(--r); box-shadow:var(--shadow-sm); cursor:default}
.dish img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.dish:hover img{transform:scale(1.07)}
.dish::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(21,19,16,.82))}
.dish .cap{position:absolute; left:18px; right:18px; bottom:15px; z-index:2; color:#fbf5ea}
.dish .cap b{font-family:var(--serif); font-size:1.35rem; display:block; line-height:1.05}
.dish .cap span{font-family:var(--ui); font-size:.78rem; color:#e2d8c6; letter-spacing:.02em}
.dish.big{grid-column:span 2; grid-row:span 2}
.dish.tall{grid-row:span 2}
.dish.wide{grid-column:span 2}

/* ---------- Menu ---------- */
.menu-tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px}
.menu-tab{font-family:var(--ui); font-weight:700; font-size:.9rem; padding:.7em 1.3em; border-radius:999px;
  border:1.5px solid var(--line); background:var(--paper); cursor:pointer; transition:.25s; color:var(--ink-soft)}
.menu-tab:hover{border-color:var(--terra); color:var(--terra)}
.menu-tab.active{background:var(--terra); border-color:var(--terra); color:#fdf6ee}
.menu-panel{display:none}
.menu-panel.active{display:block; animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.menu-cols{columns:2; column-gap:clamp(30px,5vw,64px)}
.mitem{break-inside:avoid; padding:16px 0; border-bottom:1px dotted var(--line); display:block}
.mitem-top{display:flex; align-items:baseline; gap:12px}
.mitem .nm{font-family:var(--serif); font-size:1.3rem; color:var(--ink); flex:1; line-height:1.15}
.mitem .dots{flex:1; border-bottom:1.5px dotted var(--line); transform:translateY(-5px); min-width:20px}
.mitem .pr{font-family:var(--ui); font-weight:800; color:var(--terra); white-space:nowrap; font-size:.98rem}
.mitem .ds{color:var(--ink-soft); font-size:.94rem; margin-top:.25em; font-style:italic}
.mtag{display:inline-block; font-family:var(--ui); font-weight:700; font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.28em .6em; border-radius:6px; margin-left:8px; vertical-align:middle;
  background:var(--mist); color:var(--paddy-deep); border:1px solid var(--line-2)}
.mtag.km0{background:rgba(94,111,73,.14); color:var(--paddy-deep)}
.mtag.casa{background:rgba(176,78,40,.12); color:var(--terra-deep)}
.mtag.top{background:var(--terra); color:#fff}
.menu-note{margin-top:24px; font-size:.9rem; color:var(--ink-faint); font-style:italic}
.menu-note::before{content:"✳ "; color:var(--brass)}
.range-chip{font-family:var(--ui); font-weight:700; font-size:.82rem; color:var(--paddy-deep);
  background:var(--mist); border:1px solid var(--line); padding:.4em 1em; border-radius:999px}

/* ---------- Enoteca wine lists ---------- */
.wine-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px)}
.wine-block h3{font-size:1.7rem; color:var(--ink); margin-bottom:6px; display:flex; align-items:center; gap:.5em}
.wine-block h3 .ic{width:24px; height:24px; color:var(--terra)}
.wine-list{margin-top:14px}
.wrow{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px dotted var(--line)}
.wrow .wn{font-family:var(--body); font-weight:600; color:var(--ink); font-size:1.02rem}
.wrow .wd{display:block; font-size:.86rem; color:var(--ink-faint); font-style:italic; margin-top:2px}
.wrow .wc{flex:1}
.wrow .wp{font-family:var(--ui); font-weight:800; color:var(--terra); white-space:nowrap; font-size:.94rem}
.calice-card{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--paddy);
  border-radius:var(--r); padding:22px 24px; margin-bottom:14px}
.calice-card .wn{font-size:1.12rem}

/* ---------- Events ---------- */
.events{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
.event{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s, box-shadow .35s}
.event:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.event .ph{aspect-ratio:16/10; overflow:hidden; position:relative}
.event .ph img{width:100%; height:100%; object-fit:cover; transition:transform .7s}
.event:hover .ph img{transform:scale(1.06)}
.event .when{position:absolute; top:12px; left:12px; background:var(--plaque); color:var(--brass-lite);
  font-family:var(--ui); font-weight:700; font-size:.72rem; letter-spacing:.06em; padding:.5em .9em; border-radius:999px}
.event .bd{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.event h3{font-size:1.5rem; margin-bottom:.3em}
.event p{color:var(--ink-soft); font-size:.96rem; flex:1}
.event .pr{margin-top:16px; font-family:var(--ui); font-weight:800; color:var(--terra); font-size:1.05rem}

/* ---------- Reviews marquee ---------- */
.reviews{background:var(--paddy-deep); color:#f2ede0; overflow:hidden}
.reviews .sec-head{margin-inline:auto; text-align:center}
.reviews .eyebrow{color:var(--brass-lite)} .reviews .eyebrow::before,.reviews .eyebrow::after{background:var(--brass-lite)}
.reviews .sec-t{color:#fbf5ea} .reviews .sec-lead{color:#d7cdba}
.rating-badge{display:inline-flex; align-items:center; gap:14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:.7em 1.4em; margin-top:22px; font-family:var(--ui)}
.rating-badge b{font-size:1.7rem; font-family:var(--serif); color:var(--brass-lite)}
.rating-badge .st{color:#e9c96a; letter-spacing:2px}
.rating-badge small{color:#c9bfac; font-size:.8rem}
.marquee{margin-top:44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex; gap:20px; width:max-content; animation:marq 60s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.rcard{width:360px; flex:0 0 360px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:24px 26px; white-space:normal}
.rcard .st{color:#e9c96a; letter-spacing:2px; font-size:.95rem}
.rcard p{margin-top:12px; font-size:1rem; color:#ece4d4; font-style:italic; line-height:1.6}
.rcard .who{margin-top:16px; font-family:var(--ui); font-weight:700; font-size:.9rem; color:#fff; display:flex; align-items:center; justify-content:space-between}
.rcard .who span{color:var(--brass-lite); font-weight:600; font-size:.78rem}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 44px 22px 0;
  font-family:var(--serif); font-size:1.28rem; color:var(--ink); position:relative}
.qa button::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--ui); font-size:1.5rem; color:var(--terra); transition:transform .3s}
.qa.open button::after{content:"–"}
.qa .ans{max-height:0; overflow:hidden; transition:max-height .4s ease}
.qa .ans p{padding:0 40px 22px 0; color:var(--ink-soft)}

/* ---------- Contact ---------- */
.contact{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,4vw,56px); align-items:start}
.info-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); box-shadow:var(--shadow-sm)}
.info-row{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-2)}
.info-row:last-child{border-bottom:0}
.info-row .ic{flex-shrink:0; width:40px; height:40px; border-radius:11px; background:var(--mist); color:var(--terra);
  display:flex; align-items:center; justify-content:center}
.info-row .ic svg{width:20px; height:20px}
.info-row .lb{font-family:var(--ui); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}
.info-row .vv{font-size:1.05rem; color:var(--ink); margin-top:2px}
.info-row .vv a:hover{color:var(--terra)}
.info-row .vv small{display:block; color:var(--ink-soft); font-size:.9rem}
.socials{display:flex; gap:10px; margin-top:6px}
.socials a{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.25s}
.socials a:hover{background:var(--terra); color:#fff; border-color:var(--terra); transform:translateY(-3px)}
.socials svg{width:19px; height:19px}
.map-wrap{margin-top:22px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10}
.map-wrap iframe{width:100%; height:100%; border:0; display:block}
.form-card{background:var(--plaque); color:#efe8db; border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow)}
.form-card h3{color:#fbf5ea; font-size:1.9rem; margin-bottom:.5em}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--ui); font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#b6ab96}
.field input,.field textarea{font-family:var(--body); font-size:1rem; padding:.8em .9em; border-radius:11px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fbf5ea; transition:.25s}
.field input::placeholder,.field textarea::placeholder{color:#8a7f6c}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brass); background:rgba(255,255,255,.09)}
.field textarea{resize:vertical; min-height:96px}
.form-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.form-note{font-family:var(--ui); font-size:.78rem; color:#8f8571; margin-top:14px; line-height:1.5}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--terra-deep),var(--terra)); color:#fdf3e9; text-align:center; border-radius:var(--r-lg); padding:clamp(40px,6vw,72px); position:relative; overflow:hidden}
.cta-band h2{color:#fff; font-size:clamp(2rem,5vw,3.4rem)}
.cta-band p{margin:.8em auto 0; max-width:560px; color:#f6ddca}
.cta-band .hero-cta{justify-content:center; margin-top:2em}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.08)}
.cta-band .btn-ghost:hover{background:#fff; color:var(--terra-deep)}

/* ---------- Footer ---------- */
footer{background:var(--plaque); color:#d8cebc; padding:clamp(52px,7vw,84px) 0 30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px}
.foot-brand .plaque{background:rgba(255,255,255,.04); border:1px solid rgba(173,138,69,.3); border-radius:13px; padding:12px 16px; display:inline-flex}
.foot-brand .plaque img{height:56px}
.foot-brand p{margin-top:16px; color:#a89e8b; font-size:.96rem; max-width:300px}
.foot-col h4{font-family:var(--ui); font-weight:800; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-lite); margin-bottom:14px}
.foot-col a,.foot-col p{display:block; color:#c3b9a6; font-size:.96rem; padding:5px 0; transition:.2s}
.foot-col a:hover{color:#fff; padding-left:4px}
.foot-bot{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-family:var(--ui); font-size:.82rem; color:#8f8571}
.foot-bot a:hover{color:var(--brass-lite)}

/* back to top */
#toTop{position:fixed; right:20px; bottom:20px; z-index:900; width:48px; height:48px; border-radius:50%;
  background:var(--terra); color:#fff; border:0; cursor:pointer; box-shadow:var(--shadow); opacity:0;
  transform:translateY(20px) scale(.8); transition:.35s; display:flex; align-items:center; justify-content:center}
#toTop.show{opacity:1; transform:none}
#toTop svg{width:20px; height:20px}

/* ---------- Language dialog ---------- */
#langModal{position:fixed; inset:0; z-index:2200; display:flex; align-items:center; justify-content:center; padding:20px}
#langModal .backdrop{position:absolute; inset:0; background:rgba(21,19,16,.55); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s}
#langModal .lm-panel{position:relative; z-index:2; width:min(94vw,460px); max-height:82vh; background:var(--bg);
  border-radius:var(--r-lg); box-shadow:0 40px 100px -30px rgba(0,0,0,.6); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden; transform:scale(.92); opacity:0; transition:transform .35s cubic-bezier(.2,.9,.2,1), opacity .3s}
#langModal.open{pointer-events:auto}
#langModal.open .backdrop{opacity:1}
#langModal.open .lm-panel{transform:scale(1); opacity:1}
.lm-head{padding:22px 24px 14px; border-bottom:1px solid var(--line)}
.lm-head .lm-top{display:flex; align-items:center; justify-content:space-between}
.lm-head h3{font-size:1.5rem}
.lm-x{width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:none; cursor:pointer; font-size:1.2rem; color:var(--ink)}
.lm-search{margin-top:14px; width:100%; font-family:var(--body); font-size:1rem; padding:.7em .9em; border-radius:11px; border:1px solid var(--line); background:var(--paper); color:var(--ink)}
.lm-search:focus{outline:none; border-color:var(--terra)}
.lm-list{overflow-y:auto; padding:10px 14px 16px}
.lm-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:.7em .8em; border-radius:12px; font-family:var(--ui); font-size:1rem; color:var(--ink); transition:background .2s}
.lm-item:hover{background:var(--mist)}
.lm-item .fl{font-size:1.3rem; line-height:1}
.lm-item .nm{flex:1; font-weight:600}
.lm-item .en{font-size:.8rem; color:var(--ink-faint)}
.lm-item .ck{color:var(--terra); opacity:0}
.lm-item.active{background:var(--mist)} .lm-item.active .ck{opacity:1}
.lm-empty{padding:24px; text-align:center; color:var(--ink-faint); font-family:var(--ui); font-size:.94rem}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .nav, .hd-cta{display:none}
  .burger{display:flex}
  .brand img{height:48px}
}
@media(max-width:900px){
  .story{grid-template-columns:1fr; gap:40px}
  .story-media .fig{aspect-ratio:16/11}
  .contact{grid-template-columns:1fr}
  .wine-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
  .dishes{grid-auto-rows:170px}
}
@media(max-width:640px){
  html{scroll-padding-top:76px}
  .menu-cols{columns:1}
  .pillars{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr; gap:26px}
  .dishes{grid-template-columns:1fr 1fr; grid-auto-rows:150px}
  .dish.big{grid-column:span 2; grid-row:span 1}
  .dish.wide,.dish.tall{grid-column:span 1; grid-row:span 1}
  .rcard{width:80vw; flex-basis:80vw}
  .story-media .stamp{left:12px; bottom:-16px; padding:12px 15px}
  .hero-badges{gap:8px 16px}
  .rating-badge{flex-wrap:wrap; justify-content:center}
}
@media(max-width:380px){
  .brand img{height:42px}
  .brand .plaque{padding:6px 10px}
  .hero h1{font-size:clamp(2.6rem,13vw,3.4rem)}
}

/* reduced motion — marquee resta in movimento (regola K) */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1!important; transform:none!important}
  #intro{transition:none}
  .mtrack{animation:marq 60s linear infinite!important}
  .hero .scroll-hint i, .intro-water i{animation:none!important}
}