/* Kile Alpine Resort — mockup v2.
   Nebbia di valle (fondo), abete (marchio, dal sito attuale), notte (testo),
   larice (unico accento, dal legno degli interni), salvia (secondario, dal sito attuale).
   Titoli: Montserrat Alternates, lo stesso carattere del sito di oggi. */
:root {
  --fog:#E4E9E6; --snow:#F4F6F4; --pine:#305252; --night:#162423;
  --larch:#B0682A; --sage:#A8A490; --stone:#66706C; --line:#C9D1CD;
  --f-d:"Montserrat Alternates", "Montserrat", sans-serif;
  --f-b:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-m:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--fog); color:var(--night); font:400 1.0625rem/1.65 var(--f-b); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; }
h1, h2 { font-family:var(--f-d); font-weight:500; letter-spacing:-.025em; line-height:1.05; margin:0 0 .5em; text-wrap:balance; }
h1 { font-size:clamp(2.6rem,6.2vw,5.4rem); }
h2 { font-size:clamp(1.7rem,3.2vw,2.6rem); }
p { margin:0 0 1em; max-width:62ch; }
.wrap { max-width:1280px; margin:0 auto; padding-inline:clamp(16px,4vw,48px); }
:focus-visible { outline:2px solid var(--larch); outline-offset:3px; }
.arrow { font-weight:600; text-decoration:none; border-bottom:2px solid var(--larch); padding-bottom:2px; }
.arrow::after { content:" →"; }
.btn, .quick button, .news button { font:600 .95rem var(--f-b); border:0; cursor:pointer; background:var(--larch); color:#fff; padding:1rem 1.6rem; border-radius:2px; transition:background .2s; }
.btn:hover, .quick button:hover, .news button:hover { background:#8E5220; }

/* ---------- testata ---------- */
.site-head { position:fixed; inset:0 0 auto; z-index:50; display:flex; align-items:center; gap:2.5rem; padding:1.1rem clamp(16px,4vw,48px); color:var(--night); transition:background .3s, color .3s; }
.dark-top .site-head { color:#fff; }
.site-head.solid, .dark-top .site-head.solid { background:var(--snow); color:var(--night); box-shadow:0 1px 0 var(--line); }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; font:500 1.05rem var(--f-d); letter-spacing:-.01em; }
.brand img { border-radius:50%; background:var(--pine); }
.main-nav { display:flex; gap:2rem; margin-left:auto; align-items:center; font-size:.95rem; }
.main-nav a { text-decoration:none; padding-block:.3rem; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current] { border-color:var(--larch); }
.langs { font:400 .75rem var(--f-m); opacity:.7; } .langs b { font-weight:500; opacity:1; }
.head-cta { text-decoration:none; font-weight:600; background:var(--larch); color:#fff; padding:.6rem 1.15rem; border-radius:2px; }
.burger { display:none; background:none; border:0; width:44px; height:44px; padding:10px; cursor:pointer; color:inherit; }
.burger span { display:block; height:2px; background:currentColor; margin:6px 0; transition:transform .3s; }

/* ---------- hero: foto piena, titolo in basso a sinistra, prenotazione agganciata ---------- */
.hero { position:relative; height:min(92svh,980px); min-height:560px; color:#fff; overflow:hidden; background:var(--night); }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,36,35,.45) 0,rgba(22,36,35,0) 30%,rgba(22,36,35,0) 45%,rgba(22,36,35,.85) 100%); }
.hero-txt { position:absolute; z-index:1; left:clamp(16px,4vw,48px); bottom:clamp(7rem,14vh,9rem); max-width:min(54rem,90%); }
.hero-txt h1 { color:#fff; margin-bottom:.35em; }
.hero-txt p { font-size:1.15rem; color:rgba(255,255,255,.88); max-width:40ch; margin:0; }
.quick { position:absolute; z-index:2; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; background:var(--snow); color:var(--night); width:min(860px,100%); }
.quick label { display:flex; flex-direction:column; padding:.9rem 1.3rem; font:500 .7rem var(--f-m); text-transform:uppercase; letter-spacing:.06em; color:var(--stone); border-right:1px solid var(--line); min-width:0; }
.quick input, .quick select { font:500 1rem var(--f-b); color:var(--night); border:0; background:none; padding:.25rem 0 0; outline:none; min-width:0; width:100%; }
.quick button { border-radius:0; padding-inline:2rem; }

/* ---------- panorama: la firma del sito ---------- */
.pano-sec { padding-block:clamp(4.5rem,9vw,7rem) 0; }
.pano-sec.top { padding-top:8rem; }
.pano-sec.mini { padding-block:3rem; background:var(--snow); }
.pano-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; margin-bottom:1rem; }
.pano-head h2, .pano-head h1 { margin:0; max-width:22ch; }
.pano-head p { color:var(--stone); margin:0; font-size:.95rem; }
.pano { overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.pano-in { position:relative; min-width:860px; height:clamp(300px,34vw,440px); margin-inline:clamp(16px,4vw,48px); }
.pano svg { position:absolute; left:0; right:0; bottom:0; width:100%; height:62%; overflow:visible; }
.pano-fill { fill:var(--pine); opacity:.12; }
.pano-line { fill:none; stroke:var(--night); stroke-width:1.3; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.4s .2s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
/* etichetta: nome sopra, filo verticale fino al punto sulla cresta */
.pk { position:absolute; left:var(--x); bottom:calc(62% * (1 - var(--y) / 100)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; text-decoration:none; padding-bottom:var(--lead,64px); opacity:0; animation:fade .6s forwards; }
.pk:nth-of-type(1){animation-delay:1s} .pk:nth-of-type(2){animation-delay:1.15s} .pk:nth-of-type(3){animation-delay:1.3s} .pk:nth-of-type(4){animation-delay:1.45s} .pk:nth-of-type(5){animation-delay:1.6s} .pk:nth-of-type(6){animation-delay:1.75s} .pk:nth-of-type(7){animation-delay:1.9s}
@keyframes fade { to { opacity:1; } }
.pk::after { content:""; position:absolute; bottom:0; left:50%; width:1px; height:calc(var(--lead,64px) - 6px); background:var(--stone); transition:background .2s; }
.pk::before { content:""; position:absolute; bottom:-4px; left:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:var(--fog); border:1.5px solid var(--night); transition:background .2s, transform .2s; }
.pano-sec.mini .pk::before { background:var(--snow); }
.pk b { font:500 1.05rem/1.1 var(--f-d); letter-spacing:-.01em; white-space:nowrap; }
.pk small { font:400 .72rem var(--f-m); color:var(--stone); white-space:nowrap; margin-top:.25rem; }
.pk:nth-of-type(odd) { --lead:92px; }
.pk:hover b, .pk:focus-visible b, .pk.is-on b { color:var(--larch); }
.pk:hover::after, .pk.is-on::after { background:var(--larch); }
.pk:hover::before, .pk:focus-visible::before, .pk.is-on::before { background:var(--larch); border-color:var(--larch); transform:scale(1.3); }
.pano-peek { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:2rem; align-items:end; padding-block:2.5rem 0; }
.pano-peek img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.pp-name { font:500 1.8rem var(--f-d); letter-spacing:-.02em; margin:0 0 .3rem; }
.pp-q { color:var(--stone); font-size:1.05rem; }
.pp-s { font:400 .85rem var(--f-m); margin:0; }

/* ---------- intro ---------- */
.intro { display:grid; grid-template-columns:5fr 4fr 3fr; gap:1.5rem clamp(1.5rem,4vw,3.5rem); padding-block:clamp(5rem,10vw,8rem); align-items:start; }
.intro-txt { padding-top:1rem; }
.intro figure { margin:0; }
.intro-a img { aspect-ratio:4/5; object-fit:cover; width:100%; }
.intro-b { margin-top:40% !important; } .intro-b img { aspect-ratio:3/4; object-fit:cover; width:100%; }
.facts { list-style:none; padding:0; margin:2rem 0 0; border-top:1px solid var(--line); }
.facts li { padding:.8rem 0; border-bottom:1px solid var(--line); color:var(--stone); }
.facts b { color:var(--night); font-weight:600; }

/* ---------- elenco chalet ---------- */
.list-sec { padding-bottom:clamp(5rem,10vw,8rem); }
.index { position:relative; }
.ix-head, .ix { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,3fr) 7.5rem 6rem 6rem 8rem; gap:1rem; align-items:baseline; }
.ix-head { font:500 .7rem var(--f-m); text-transform:uppercase; letter-spacing:.06em; color:var(--stone); padding-bottom:.6rem; border-bottom:1px solid var(--night); }
.ix { text-decoration:none; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.ix img { display:none; }
.ix-name { font:500 clamp(1.4rem,2.4vw,2rem)/1.1 var(--f-d); letter-spacing:-.02em; transition:color .2s; }
.ix-q { color:var(--stone); font-size:.92rem; }
.ix-d { font:400 .85rem var(--f-m); color:var(--stone); } .ix-d span { color:var(--night); font-weight:500; }
.ix-s { font:500 .78rem var(--f-m); color:var(--larch); }
.ix:hover .ix-name, .ix:focus-visible .ix-name { color:var(--larch); }
.ix-peek { position:fixed; z-index:40; left:0; top:0; width:300px; margin:0; pointer-events:none; opacity:0; transition:opacity .2s; }
.ix-peek img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.ix-peek.on { opacity:1; }

/* ---------- storia ---------- */
.story-band { display:grid; grid-template-columns:1fr 1fr; background:var(--night); color:#E7ECE9; }
.story-band > img { width:100%; height:100%; object-fit:cover; min-height:520px; }
.sb-txt { padding:clamp(3rem,7vw,6rem) clamp(16px,5vw,5rem); align-self:center; }
.sb-txt h2 { color:#fff; }
.sb-txt p { color:#C3CCC8; }
.year { font:500 .78rem var(--f-m); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.story-band .arrow { color:#fff; }
blockquote { margin:2rem 0; padding-left:1.2rem; border-left:2px solid var(--larch); font:500 1.3rem/1.4 var(--f-d); letter-spacing:-.01em; }
blockquote cite { display:block; font:400 .78rem var(--f-m); font-style:normal; margin-top:.6rem; color:var(--sage); }

/* ---------- recensioni ---------- */
.reviews { display:grid; grid-template-columns:1fr 2.2fr; gap:clamp(2rem,6vw,6rem); padding-block:clamp(5rem,10vw,8rem); }
.rv-score p:first-child { font:500 clamp(4rem,9vw,7rem)/.9 var(--f-d); letter-spacing:-.04em; margin-bottom:.8rem; color:var(--pine); }
.rv-score p:first-child b { font-weight:500; }
.rv-score p { color:var(--stone); }
.rv-list blockquote { margin:0 0 2.2rem; font:400 1.15rem/1.55 var(--f-b); border-left-color:var(--line); }
.rv-list blockquote p { margin:0; max-width:none; }
.rv-list footer { font:400 .78rem var(--f-m); color:var(--stone); margin-top:.6rem; }

/* ---------- prenotazione ---------- */
.booking { display:grid; grid-template-columns:4fr 7fr; gap:clamp(2rem,6vw,6rem); padding-block:clamp(5rem,10vw,8rem); border-top:1px solid var(--line); }
.booking > * { min-width:0; }
.bk-side p { color:var(--stone); }
.bk-direct { display:flex; flex-direction:column; gap:.4rem; margin-top:2rem; }
.bk-direct a { color:var(--night); font-weight:600; text-decoration:none; } .bk-direct a:hover { color:var(--larch); }
.book { display:grid; gap:1.4rem; }
.book fieldset { border:0; padding:0; margin:0; display:grid; gap:1rem; min-width:0; }
.book legend { font:500 .72rem var(--f-m); text-transform:uppercase; letter-spacing:.06em; color:var(--stone); padding:0 0 .6rem; border-bottom:1px solid var(--night); width:100%; margin-bottom:.4rem; }
.row3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.book label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; font-weight:500; min-width:0; }
.book input, .book select, .book textarea { font:400 1rem var(--f-b); color:var(--night); background:var(--snow); border:1px solid var(--line); border-radius:2px; padding:.8rem .85rem; outline:none; width:100%; min-width:0; }
.book input:focus, .book select:focus, .book textarea:focus { border-color:var(--pine); }
.book .check { flex-direction:row; align-items:center; gap:.6rem; font-weight:400; }
.book .check input { width:auto; }
.book .btn { justify-self:start; }
.sent-msg { display:none; margin:0; color:var(--pine); font-weight:600; }
.book.sent .sent-msg { display:block; }
.map { width:100%; height:320px; border:0; margin-top:1.5rem; filter:grayscale(.6); }

/* ---------- pagine interne ---------- */
.pg-head { padding-top:9rem; padding-bottom:1rem; }
.story { display:grid; grid-template-columns:5fr 6fr; gap:clamp(2rem,5vw,5rem); padding-bottom:clamp(5rem,10vw,8rem); align-items:start; }
.story figure { margin:0; } .story img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.st-b { grid-column:2; max-width:320px; }
.st-t a { color:var(--pine); }

/* scheda chalet */
.ch-hero { position:relative; height:min(78svh,820px); min-height:440px; background:var(--night); }
.ch-hero-img, .ch-hero-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ch-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,36,35,.4),rgba(22,36,35,0) 35%,rgba(22,36,35,.8)); pointer-events:none; }
.ch-hero-txt { position:absolute; z-index:1; left:clamp(16px,4vw,48px); bottom:2.5rem; color:#fff; max-width:52rem; }
.ch-hero-txt h1 { color:#fff; margin-bottom:.2em; }
.ch-q { font-size:1.15rem; color:rgba(255,255,255,.88); }
.crumbs a { font:400 .78rem var(--f-m); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); text-decoration:none; } .crumbs a::before { content:"← "; }
.ch-data dl { display:grid; grid-template-columns:repeat(6,1fr); margin:0; border-bottom:1px solid var(--night); }
.ch-data dl div { padding:1.3rem 0 1.3rem 1rem; border-right:1px solid var(--line); }
.ch-data dl div:first-child { padding-left:0; } .ch-data dl div:last-child { border:0; }
.ch-data dt { font:500 .7rem var(--f-m); text-transform:uppercase; letter-spacing:.06em; color:var(--stone); }
.ch-data dd { margin:0; font:500 1.5rem var(--f-d); letter-spacing:-.02em; }
.ch-body { display:grid; grid-template-columns:7fr 4fr; gap:clamp(2rem,6vw,6rem); padding-block:4rem 5rem; }
.ch-body > * { min-width:0; }
.ch-main > p { font-size:1.15rem; }
.ch-gal { display:flex; flex-wrap:wrap; gap:.5rem; margin:2.5rem 0 3rem; }
.ch-gal a { flex:1 1 30%; overflow:hidden; } .ch-gal a:nth-child(1), .ch-gal a:nth-child(2) { flex-basis:45%; }
.ch-gal img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s; } .ch-gal a:hover img { transform:scale(1.04); }
.feat { list-style:none; padding:0; columns:3; column-gap:2rem; color:var(--stone); }
.feat li { padding:.3rem 0; break-inside:avoid; }
.sticky { position:sticky; top:6rem; }
.ch-aside h2 { font-size:1.6rem; }
.ch-aside .row3 { grid-template-columns:1fr 1fr; } .ch-aside .row3 label:nth-child(3) { grid-column:span 2; }
.next { margin-top:2rem; color:var(--stone); }
.lb { position:fixed; inset:0; z-index:80; background:rgba(14,22,22,.95); display:grid; place-items:center; }
.lb[hidden] { display:none; }
.lb img { max-width:92vw; max-height:88vh; }
.lb button { position:absolute; background:none; border:0; color:#fff; font-size:2.6rem; width:60px; height:60px; cursor:pointer; }
.lb-x { top:1rem; right:1rem; } .lb-p { left:1rem; } .lb-n { right:1rem; }

/* ---------- piè di pagina ---------- */
.site-foot { background:var(--pine); color:#DCE4E0; padding:4rem clamp(16px,4vw,48px) 2rem; }
.foot-top { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.18); flex-wrap:wrap; }
.foot-brand { display:flex; align-items:center; gap:1rem; margin:0; font:500 1.6rem var(--f-d); letter-spacing:-.02em; color:#fff; }
.coords { font:400 .85rem var(--f-m); margin:0; }
.foot-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1.3fr; gap:2rem; padding-block:2.5rem; }
.site-foot h4 { font:500 .72rem var(--f-m); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); margin:0 0 .9rem; }
.site-foot p { margin:0; } .site-foot a { text-decoration:none; } .site-foot a:hover { text-decoration:underline; }
.foot-list { display:grid; gap:.2rem; }
.news { display:flex; margin-top:1rem; }
.news input { flex:1; min-width:0; font:inherit; padding:.8rem; border:1px solid rgba(255,255,255,.35); border-right:0; background:transparent; color:#fff; border-radius:2px 0 0 2px; }
.news button { border-radius:0 2px 2px 0; padding:.8rem 1.1rem; }
.news.light input { border-color:var(--line); background:var(--snow); color:var(--night); }
.foot-legal { font:400 .72rem var(--f-m); color:#A9B8B2; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.18); max-width:none; }
.mock { color:var(--sage); }

@media (prefers-reduced-motion:reduce) { .pano-line { animation:none; stroke-dashoffset:0; } .pk { animation:none; opacity:1; } * { transition:none !important; } }

/* ---------- responsive ---------- */
@media (max-width:1000px) {
  .main-nav { position:fixed; inset:0; z-index:-1; background:var(--snow); color:var(--night); flex-direction:column; justify-content:center; font:500 1.6rem var(--f-d); gap:1.2rem; transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1); }
  .nav-open .main-nav { transform:none; }
  .nav-open .site-head { color:var(--night); }
  .burger { display:block; margin-left:auto; }
  .head-cta { display:none; }
  .nav-open .burger span:first-child { transform:translateY(4px) rotate(45deg); }
  .nav-open .burger span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .ix-head { display:none; }
  .ix { grid-template-columns:96px auto minmax(0,1fr); grid-template-areas:"img name name" "img d1 d2" "img s s"; gap:.2rem 1rem; align-items:center; }
  .ix img { display:block; grid-area:img; width:96px; height:96px; object-fit:cover; }
  .ix-name { grid-area:name; } .ix-q { display:none; }
  .d1 { grid-area:d1; } .d2 { grid-area:d2; } .d3 { display:none; }
  .ix-s { grid-area:s; }
  .ix-peek { display:none; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .hero { height:auto; min-height:0; display:flex; flex-direction:column; }
  .hero-img { position:relative; height:62svh; }
  .hero::after { height:62svh; }
  .hero-txt { bottom:auto; top:calc(62svh - 1.2rem); transform:translateY(-100%); }
  .hero-txt p { display:none; }
  .quick { position:static; grid-template-columns:1fr 1fr; width:100%; }
  .quick label:nth-child(2) { border-right:0; }
  .quick label:nth-child(3) { grid-column:span 2; border-top:1px solid var(--line); border-right:0; }
  .quick button { grid-column:span 2; padding-block:1.1rem; }
  .pano-peek { grid-template-columns:1fr; gap:1rem; }
  .intro { grid-template-columns:1fr 1fr; }
  .intro-txt { grid-column:span 2; }
  .intro-b { margin-top:30% !important; }
  .story-band, .reviews, .booking, .story, .ch-body { grid-template-columns:1fr; }
  .story-band > img { min-height:300px; }
  .st-b { grid-column:auto; }
  .row3 { grid-template-columns:1fr 1fr; } .row3 label:nth-child(3) { grid-column:span 2; }
  .ch-data dl { grid-template-columns:repeat(3,1fr); }
  .ch-data dl div:nth-child(3) { border-right:0; } .ch-data dl div:nth-child(4) { padding-left:0; }
  .ch-data dl div:nth-child(-n+3) { border-bottom:1px solid var(--line); }
  .feat { columns:2; }
  .ch-gal a, .ch-gal a:nth-child(1), .ch-gal a:nth-child(2) { flex-basis:45%; }
}
@media (max-width:480px) { .foot-grid { grid-template-columns:1fr; } .brand span { font-size:.95rem; } }
.pp-s { margin-bottom:1.2rem; }