/* ==========================================================================
   Il Boscheto — site.css
   Quiet luxury di campagna · palette terrosa · Cormorant + Inter
   ========================================================================== */

:root{
  --crema:#F4EFE6;        /* sfondo / carta */
  --paper:#FBF8F2;        /* carta più chiara */
  --bosco:#2F3A2E;        /* testo / verde bosco */
  --bosco-deep:#222b21;   /* fondi scuri */
  --bosco-mid:#36412f;
  --salvia:#7A8466;       /* primario */
  --salvia-soft:#9aa287;
  --terracotta:#B5663F;   /* CTA */
  --terracotta-d:#9c5333;
  --ocra:#C9A24B;         /* accento */
  --tortora:#C9BFA8;      /* neutro pietra */
  --line:#E4DBCB;         /* hairline su crema */
  --line-soft:#ece5d7;
  --ink-60:#5b6356;
  --ink-45:#7c8174;
  --cream-70:rgba(244,239,230,.72);
  --maxw:1240px;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-card:0 1px 2px rgba(47,58,46,.04), 0 18px 40px -28px rgba(47,58,46,.22);
  --shadow-soft:0 2px 6px rgba(47,58,46,.05), 0 14px 30px -20px rgba(47,58,46,.28);
  --shadow-lift:0 8px 18px rgba(47,58,46,.09), 0 30px 64px -28px rgba(47,58,46,.42);
  --shadow-deep:0 12px 26px rgba(47,58,46,.11), 0 44px 88px -32px rgba(47,58,46,.50);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--crema); color:var(--bosco);
  font-family:var(--sans); font-weight:400; line-height:1.7;
  font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.06; letter-spacing:.005em}
p{margin:0}
button{font-family:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.narrow{max-width:760px; margin-inline:auto}

/* ---------- typographic helpers ---------- */
.kicker{font-family:var(--sans); font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--salvia); font-weight:600}
.kicker.num::before{content:attr(data-n) "  —  "; color:var(--tortora)}
.eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45); font-weight:500}
.lede{font-size:clamp(18px,2.2vw,21px); line-height:1.65; color:var(--ink-60)}
.serif-i{font-family:var(--serif); font-style:italic}
h2.display{font-size:clamp(34px,5.2vw,58px)}
h1.display{font-size:clamp(44px,7vw,82px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:15px 30px; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s; line-height:1}
.btn:active{transform:translateY(1px)}
.btn.book{background:var(--terracotta); color:#fff}
.btn.book:hover{background:var(--terracotta-d)}
.btn.ghost{background:transparent; color:var(--bosco); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--salvia); color:var(--salvia)}
.btn.ghost-cream{background:transparent; color:var(--crema); border-color:rgba(244,239,230,.5)}
.btn.ghost-cream:hover{background:rgba(244,239,230,.1)}
.btn.sm{padding:11px 22px; font-size:11.5px}
.link-arrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--bosco); transition:gap .25s var(--ease), color .2s}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--terracotta)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ==========================================================================
   HEADER (injected)
   ========================================================================== */
.site-header{position:fixed; top:0; left:0; right:0; z-index:60; transition:background .4s var(--ease), border-color .4s, box-shadow .4s}
.site-header .bar{display:flex; align-items:center; gap:20px; height:74px}
.site-header .brand{display:flex; align-items:center; gap:11px; margin-right:auto; flex:0 0 auto}
.site-header .brand img{height:30px; width:auto; flex:0 0 auto; transition:opacity .3s}
.site-header .brand .wm-f{display:block}
.site-header .brand .wm-c{display:none}
.site-header nav.main{display:flex; gap:21px; align-items:center}
.site-header nav.main a{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bosco); font-weight:500; opacity:.85; white-space:nowrap; transition:opacity .2s, color .2s; position:relative; padding:4px 0}
.site-header nav.main a:hover,.site-header nav.main a[aria-current]{opacity:1; color:var(--terracotta)}
.site-header nav.main a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--terracotta)}
.site-header .right{display:flex; align-items:center; gap:14px}
.lang{display:flex; gap:6px; font-size:11.5px; letter-spacing:.08em; color:var(--ink-60); font-weight:500}
.lang a[aria-current]{color:var(--bosco); font-weight:700}
.lang span{opacity:.4}
.hamb{display:none; flex-direction:column; gap:5px; width:44px; height:44px; justify-content:center; align-items:center; background:none; border:none; cursor:pointer; margin-right:-9px}
.hamb i{height:1.5px; width:24px; background:var(--bosco); transition:.3s var(--ease); display:block}

/* transparent over hero */
.site-header.over{background:transparent; border-bottom:1px solid transparent}
.site-header.over .brand .wm-f{display:none}
.site-header.over .brand .wm-c{display:block}
.site-header.over nav.main a{color:var(--crema)}
.site-header.over .lang{color:var(--cream-70)}
.site-header.over .lang a[aria-current]{color:#fff}
.site-header.over .hamb i{background:var(--crema)}
.site-header.over .btn.ghost{color:var(--crema); border-color:rgba(244,239,230,.5)}
/* solid (scrolled or inner page) */
.site-header.solid{background:rgba(244,239,230,.9); backdrop-filter:saturate(1.1) blur(14px); border-bottom:1px solid var(--line)}

/* mobile menu */
.mobile-menu{position:fixed; inset:0; z-index:70; background:var(--bosco-deep); color:var(--crema); display:flex; flex-direction:column; padding:90px 32px 40px; transform:translateY(-100%); transition:transform .5s var(--ease); visibility:hidden}
.mobile-menu.open{transform:translateY(0); visibility:visible}
.mobile-menu a{font-family:var(--serif); font-size:32px; padding:11px 0; border-bottom:1px solid rgba(244,239,230,.12); color:var(--crema)}
.mobile-menu .mclose{position:absolute; top:26px; right:28px; background:none; border:none; color:var(--crema); font-size:30px; cursor:pointer; line-height:1}
.mobile-menu .mfoot{margin-top:auto; display:flex; gap:18px; align-items:center; padding-top:24px}

@media(max-width:1180px){
  .site-header nav.main{display:none}
  .site-header .right .btn{display:none}
  .hamb{display:flex}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; color:var(--crema); overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(122,132,102,.28), transparent 55%),
    linear-gradient(168deg,#3a4632 0%, #2c3527 52%, #222b21 100%);}
.hero .htex{position:absolute; inset:0; z-index:0; opacity:.55; background:url(textures/hero-misty.webp) center/cover no-repeat}
.hero .hveil{position:absolute; inset:0; z-index:1; background:
  radial-gradient(62% 50% at 50% 44%, rgba(18,24,16,.5) 0%, transparent 72%),
  linear-gradient(180deg, rgba(18,24,16,.34) 0%, rgba(18,24,16,.06) 36%, rgba(18,24,16,.72) 100%)}
.hero .emblem{display:block; width:auto; height:clamp(140px,18vw,232px); margin:0 auto 18px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.4))}
.hero .hin{position:relative; z-index:3; padding:104px 24px 132px; max-width:880px}
.hero img.wm{width:min(380px,62vw); margin:0 auto 26px; height:auto; opacity:.96}
.hero .sub{font-family:var(--serif); font-style:italic; font-size:clamp(22px,3.1vw,32px); color:#ece1cc; line-height:1.26}
.hero .blurb{margin:40px auto 38px; max-width:48ch; color:var(--cream-70); font-size:clamp(15px,1.8vw,17px); line-height:1.65}
.hero .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero .declared{position:absolute; left:18px; bottom:96px; z-index:4; font-size:10.5px; letter-spacing:.07em; color:var(--cream-70); border:1px solid rgba(244,239,230,.24); border-radius:100px; padding:6px 13px}
.scrollcue{position:absolute; left:50%; bottom:34px; z-index:4; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--cream-70); font-size:10px; letter-spacing:.24em; text-transform:uppercase}
.scrollcue .l{width:1px; height:42px; background:linear-gradient(var(--cream-70), transparent); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2); transform-origin:bottom}}
@media (prefers-reduced-motion: reduce){ .scrollcue .l{animation:none} }

/* page hero (inner pages) */
.page-hero{position:relative; padding:150px 0 70px; border-bottom:1px solid var(--line); overflow:hidden}
.page-hero .ptex{position:absolute; inset:0; z-index:0; opacity:.55; background:url(textures/watercolor-cream.webp) center/cover no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.page-hero .ptex.leafy{background-image:url(textures/leaf-weave.webp); opacity:.12}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{font-size:clamp(40px,6.4vw,76px); margin:14px 0 0; max-width:16ch}
.page-hero .lede{margin-top:22px; max-width:56ch}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{position:relative}
.sec{padding:clamp(64px,9vw,118px) 0}
.sec.tight{padding:clamp(48px,6vw,80px) 0}
.sec-bosco{background:var(--bosco-deep); color:var(--crema)}
.sec-bosco h2,.sec-bosco h3{color:var(--crema)}
.sec-paper{background:var(--paper)}
.sec-head{max-width:62ch}
.sec-head h2{margin:14px 0 0}
.sec-head .lede{margin-top:20px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,84px); align-items:center}
.split.wide-l{grid-template-columns:1.15fr .85fr}
.split.wide-r{grid-template-columns:.85fr 1.15fr}
@media(max-width:860px){ .split,.split.wide-l,.split.wide-r{grid-template-columns:1fr; gap:36px} }

/* faint section texture layer */
.sec .sectex{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06}
.sec > .wrap{position:relative; z-index:1}

/* real CAMAGNA wallpaper layers */
.tx{position:absolute; inset:0; z-index:0; pointer-events:none; background-position:center; background-size:cover; background-repeat:no-repeat}
.tx-watercolor{background-image:url(textures/watercolor-cream.webp); opacity:.5}
.tx-leafweave{background-image:url(textures/leaf-weave.webp); opacity:.10}
.tx-leafline{background-image:url(textures/leaf-lineart.webp); opacity:.12}
.tx-paths{background-image:url(textures/paths.webp); opacity:.09}
.tx-cta{background-image:url(textures/cta-wave.webp); opacity:.24}
.tx-hills{background-image:url(textures/hills.webp); opacity:.45}
.tx-agnolotti{background-image:url(textures/agnolotti.webp); opacity:.12; background-size:min(420px,46%); background-position:right -40px bottom -30px}
.tx-horses{background-image:url(textures/horses.webp); opacity:.10; background-size:min(460px,48%); background-position:right -30px center}
.tx-greens{background-image:url(textures/greens-wash.webp); opacity:.13}
.tx-layered{background-image:url(textures/layered-leaf.webp); opacity:.13}
.tx-jack{background-image:url(textures/jack-russell-new.png); opacity:.2; background-size:min(330px,38%); background-position:right 5% bottom 12%}
.tx-mask-b{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%)}
.tx-mask-soft{-webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 85%); mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 85%)}

/* brand emblem (three leaves) */
.emblem-accent{display:block; height:34px; width:auto; opacity:.9; margin-bottom:18px}

/* ==========================================================================
   REAL IMAGE TILES  (.shot) — drop a graphic into any ratio box
   ========================================================================== */
.shot{position:relative; overflow:hidden; border-radius:14px; background:var(--tortora); display:block}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.shot.contain img{object-fit:contain; background:var(--paper)}
.shot:hover img{transform:scale(1.045)}
.shot .scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,26,17,0) 40%, rgba(20,26,17,.52) 100%)}
.shot .cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 18px 15px; font-family:var(--serif); font-style:italic; color:#fbf6ec; font-size:clamp(16px,2vw,21px); line-height:1.2}
.shot .micro{position:absolute; left:13px; top:13px; z-index:2; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(34,43,33,.55); backdrop-filter:blur(4px); border:1px solid rgba(244,239,230,.28); border-radius:100px; padding:5px 11px}
a.shot, .shot.zoom{cursor:zoom-in}

/* ==========================================================================
   FULL-BLEED IMAGE BAND
   ========================================================================== */
.band{position:relative; min-height:clamp(380px,54vw,640px); display:grid; place-items:center; text-align:center; color:var(--crema); overflow:hidden}
.band > img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.band .bveil{position:absolute; inset:0; z-index:1; background:
  radial-gradient(70% 60% at 50% 50%, rgba(18,24,16,.28) 0%, transparent 70%),
  linear-gradient(180deg, rgba(18,24,16,.30) 0%, rgba(18,24,16,.12) 45%, rgba(18,24,16,.55) 100%)}
.band .bin{position:relative; z-index:2; padding:clamp(60px,10vw,120px) 24px; max-width:760px}
.band .bin .serif-i{font-size:clamp(26px,4.2vw,46px); line-height:1.24; color:#fbf6ec; text-shadow:0 2px 30px rgba(0,0,0,.35)}
.band .bin .src{margin-top:20px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-70)}

/* ==========================================================================
   STRIPS & MOSAICS
   ========================================================================== */
.strip-3{display:grid; grid-template-columns:1.3fr .85fr .85fr; gap:14px}
@media(max-width:760px){ .strip-3{grid-template-columns:1fr 1fr} .strip-3 > :first-child{grid-column:1/-1} }
.mosaic{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px}
.mosaic .shot{height:100%}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}
@media(max-width:860px){ .mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:170px} .mosaic .wide{grid-column:span 2} }
@media(max-width:520px){ .mosaic{grid-template-columns:1fr 1fr; grid-auto-rows:140px} .mosaic .wide{grid-column:span 2} .mosaic .tall{grid-row:span 1} }

/* animals / friends row */
.friends{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:760px){ .friends{grid-template-columns:1fr 1fr} }

/* ==========================================================================
   ART GALLERY  (every graphic, by family)
   ========================================================================== */
.art-fam{margin-top:clamp(40px,5vw,64px)}
.art-fam .fam-head{display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:22px}
.art-fam .fam-head h3{font-size:clamp(24px,3vw,32px)}
.art-fam .fam-head .fam-n{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--salvia); font-weight:600}
.art-fam .fam-head p{margin-left:auto; font-size:13.5px; color:var(--ink-60); max-width:40ch; text-align:right}
@media(max-width:680px){ .art-fam .fam-head{flex-wrap:wrap} .art-fam .fam-head p{margin-left:0; text-align:left; flex-basis:100%} }
.art-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.art-grid .shot{aspect-ratio:1/1}
.art-grid.land .shot{aspect-ratio:4/3}

/* inner-page head (solid header offset) */
.page-head{padding:calc(74px + clamp(40px,8vw,96px)) 24px clamp(28px,4vw,44px); text-align:center; position:relative; overflow:hidden}
.page-head .kicker{justify-content:center}
.page-head h1{font-family:var(--serif); font-weight:500; font-size:clamp(40px,6vw,76px); line-height:1.02; color:var(--bosco); margin:14px 0 0}
.page-head p{max-width:60ch; margin:18px auto 0; color:var(--ink-60); font-size:clamp(15px,1.6vw,17px); line-height:1.7}

/* ==========================================================================
   PLACEHOLDER (foto in arrivo)
   ========================================================================== */
.ph{position:relative; overflow:hidden; background:var(--tortora); display:grid; place-items:center; border-radius:14px}
.ph .tex{position:absolute; inset:0; opacity:.16; filter:blur(20px)}
.ph .veil{position:absolute; inset:0; background:linear-gradient(135deg, rgba(122,132,102,.30), rgba(201,191,168,.08))}
.ph .mid{position:relative; z-index:2; text-align:center; color:#33402f; padding:18px}
.ph .mid .lf{opacity:.5; margin:0 auto 10px}
.ph .mid .cap{font-family:var(--serif); font-style:italic; font-size:clamp(17px,2.4vw,22px); color:#3a4634}
.ph .tag{position:absolute; left:14px; bottom:14px; z-index:3; font-size:10.5px; letter-spacing:.06em; color:#36412f; background:rgba(251,248,242,.92); border:1px solid var(--line); border-radius:100px; padding:5px 12px; display:flex; align-items:center; gap:7px}
.ph .tag .pulse{width:7px; height:7px; border-radius:50%; background:var(--ocra)}
.ratio-43{aspect-ratio:4/3}
.ratio-34{aspect-ratio:3/4}
.ratio-11{aspect-ratio:1/1}
.ratio-169{aspect-ratio:16/9}
.ratio-32{aspect-ratio:3/2}

/* ==========================================================================
   ROOM CARDS / GRID
   ========================================================================== */
.rooms-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){ .rooms-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .rooms-grid{grid-template-columns:1fr} }
.room-card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s}
.room-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card)}
.room-card .body{padding:22px 24px 26px}
.room-card .idx{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--salvia); font-weight:600}
.room-card h3{font-size:28px; margin:6px 0 0}
.room-card .desc{font-size:14.5px; color:var(--ink-60); margin-top:9px; line-height:1.55}
.room-card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.room-card .from{font-size:12px; color:var(--ink-60)}
.room-card .from b{font-family:var(--serif); font-size:21px; color:var(--bosco); font-weight:500}

/* preview tiles (home) */
.feature{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px)}
@media(max-width:860px){ .feature{grid-template-columns:1fr} }
.feature .item .ph{margin-bottom:18px}
.feature .item h3{font-size:26px}
.feature .item p{color:var(--ink-60); font-size:15px; margin:8px 0 14px}

/* ==========================================================================
   GALLERY / LIGHTBOX
   ========================================================================== */
.gallery-main{position:relative; border-radius:18px; overflow:hidden}
.thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:12px}
@media(max-width:600px){ .thumbs{grid-template-columns:repeat(4,1fr)} }
.thumbs .ph{border-radius:10px; cursor:zoom-in}
.gallery-masonry{columns:3; column-gap:14px}
.gallery-masonry .ph{margin-bottom:14px; break-inside:avoid; cursor:zoom-in}
@media(max-width:860px){ .gallery-masonry{columns:2} }
@media(max-width:520px){ .gallery-masonry{columns:1} }
.lightbox{position:fixed; inset:0; z-index:90; background:rgba(20,26,17,.92); display:none; place-items:center; padding:40px}
.lightbox.open{display:grid}
.lightbox .lb-inner{max-width:min(900px,92vw); width:100%}
.lightbox .lb-stage{border-radius:12px; overflow:hidden; background:rgba(0,0,0,.3); display:grid; place-items:center}
.lightbox .lb-stage img{display:block; width:100%; max-height:78vh; object-fit:contain}
.lightbox .ph{aspect-ratio:3/2; border-radius:12px}
.lightbox .lb-cap{color:var(--cream-70); text-align:center; margin-top:14px; font-size:13px; letter-spacing:.04em}
.lightbox button{position:absolute; background:rgba(244,239,230,.1); border:1px solid rgba(244,239,230,.3); color:var(--crema); width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:18px; display:grid; place-items:center; transition:background .2s}
.lightbox button:hover{background:rgba(244,239,230,.2)}
.lightbox .lb-close{top:26px; right:26px}
.lightbox .lb-prev{left:24px; top:50%; transform:translateY(-50%)}
.lightbox .lb-next{right:24px; top:50%; transform:translateY(-50%)}

/* ==========================================================================
   MISC COMPONENTS
   ========================================================================== */
.amenities{display:flex; flex-wrap:wrap; gap:9px}
.amenities span{font-size:12.5px; color:var(--ink-60); border:1px solid var(--line); border-radius:100px; padding:8px 15px; background:var(--paper)}
.price-line{display:flex; align-items:baseline; gap:10px; font-family:var(--serif)}
.price-line .big{font-size:34px}
.price-line small{font-family:var(--sans); font-size:12.5px; color:var(--ink-60); letter-spacing:.03em}

.pill-row{display:flex; flex-wrap:wrap; gap:8px}
.pill{font-size:11.5px; letter-spacing:.04em; color:var(--ink-60); border:1px solid var(--line); border-radius:100px; padding:6px 13px; background:var(--paper)}

.editorial{font-size:clamp(17px,1.9vw,19px); line-height:1.8; color:#46503f}
.editorial p+p{margin-top:1.3em}
.dropcap::first-letter{font-family:var(--serif); font-size:3.6em; line-height:.72; float:left; padding:8px 12px 0 0; color:var(--salvia)}

.callout-honest{border:1px solid var(--line); border-left:3px solid var(--salvia); background:var(--paper); border-radius:12px; padding:22px 26px; color:var(--ink-60); font-size:15px}
.callout-honest b{color:var(--bosco)}

/* experiences list */
.exp-list{display:grid; gap:0; border-top:1px solid var(--line)}
.exp-list .row{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:26px 4px; border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease)}
.exp-list .row:hover{padding-left:14px}
.exp-list .row .n{font-family:var(--serif); font-size:22px; color:var(--tortora)}
.exp-list .row h3{font-size:27px}
.exp-list .row p{color:var(--ink-60); font-size:14.5px; margin-top:4px}
@media(max-width:640px){ .exp-list .row{grid-template-columns:auto 1fr; gap:16px} .exp-list .row .arr{display:none} }

/* events */
.event-row{display:grid; grid-template-columns:160px 1fr; gap:28px; padding:28px 0; border-bottom:1px solid var(--line)}
.event-row .when{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); font-weight:600; padding-top:6px}
.event-row h3{font-size:26px}
.event-row p{color:var(--ink-60); font-size:15px; margin-top:7px}
@media(max-width:560px){ .event-row{grid-template-columns:1fr; gap:8px} }

/* faq */
.faq details{border-bottom:1px solid var(--line); padding:8px 0}
.faq summary{font-family:var(--serif); font-size:24px; padding:18px 40px 18px 0; cursor:pointer; list-style:none; position:relative; color:var(--bosco)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:26px; color:var(--salvia); transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 40px 22px 0; color:var(--ink-60); font-size:15.5px; line-height:1.7}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px)}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr} }
.contact-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.contact-line .ico{flex:0 0 auto; width:22px; color:var(--salvia)}
.contact-line .l{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45); font-weight:600}
.contact-line .v{font-size:16px; color:var(--bosco); margin-top:2px}
.map-ph{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--tortora)}
.field{display:block; margin-bottom:16px}
.field label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); font-weight:600; display:block; margin-bottom:7px}
.field input,.field textarea{width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:var(--paper); font-family:inherit; font-size:15px; color:var(--bosco)}
.field input:focus,.field textarea:focus{outline:2px solid var(--salvia); outline-offset:1px; border-color:transparent}

/* booking widget placeholder */
.book-embed{border:1px dashed var(--salvia-soft); border-radius:16px; background:var(--paper); padding:clamp(30px,5vw,56px); text-align:center}
.book-fields{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:760px; margin:0 auto}
@media(max-width:680px){ .book-fields{grid-template-columns:1fr 1fr} }
.book-fields .bf{background:var(--crema); border:1px solid var(--line); border-radius:10px; padding:14px 16px; text-align:left}
.book-fields .bf .l{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45); font-weight:600}
.book-fields .bf .v{font-size:16px; font-family:var(--serif); color:var(--bosco); margin-top:4px}

/* ==========================================================================
   FIXED MOBILE BOOKING BAR
   ========================================================================== */
.mobile-book{position:fixed; left:0; right:0; bottom:0; z-index:55; background:rgba(34,43,33,.94); backdrop-filter:blur(10px); border-top:1px solid rgba(244,239,230,.14); display:none; align-items:center; gap:14px; padding:12px 18px; color:var(--crema)}
.mobile-book .t{font-size:12.5px; color:var(--cream-70)}
.mobile-book .t b{color:var(--crema); font-family:var(--serif); font-size:16px}
.mobile-book .btn{margin-left:auto}
@media(max-width:1180px){ .mobile-book{display:flex} body{padding-bottom:82px} }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{position:relative; background:var(--bosco-deep); color:var(--crema); padding:clamp(56px,8vw,96px) 0 38px; overflow:hidden}
.site-footer .ftex{position:absolute; inset:0; z-index:0; opacity:.42; background:url(textures/hills.webp) center bottom/cover no-repeat; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 70%); mask-image:linear-gradient(180deg,transparent 0%,#000 70%)}
.site-footer .fbrand .femblem{height:58px; width:auto; display:block; margin-bottom:18px}
.site-footer .wrap{position:relative; z-index:1}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px}
@media(max-width:860px){ .footer-top{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .footer-top{grid-template-columns:1fr} }
.site-footer .fbrand img{height:26px; margin-bottom:18px}
.site-footer .fbrand p{color:var(--cream-70); font-size:14px; max-width:34ch; line-height:1.6}
.site-footer h4{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--salvia-soft); font-weight:600; font-family:var(--sans); margin-bottom:16px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.site-footer ul a{color:var(--cream-70); font-size:14.5px; transition:color .2s}
.site-footer ul a:hover{color:var(--crema)}
.footer-bottom{margin-top:clamp(40px,6vw,64px); padding-top:24px; border-top:1px solid rgba(244,239,230,.14); display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between}
.footer-bottom .cin{font-size:12px; letter-spacing:.08em; color:var(--cream-70)}
.footer-bottom .legal{display:flex; gap:20px; font-size:12.5px; color:var(--cream-70)}
.footer-bottom .legal a:hover{color:var(--crema)}

/* ==========================================================================
   COOKIE BANNER (Garante)
   ========================================================================== */
.cookie{position:fixed; left:0; right:0; bottom:0; z-index:95; background:var(--crema); border-top:1px solid var(--line); box-shadow:0 -16px 40px -30px rgba(0,0,0,.4); padding:22px 0; display:none}
.cookie.show{display:block}
.cookie .inner{display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center}
@media(max-width:760px){ .cookie .inner{grid-template-columns:1fr} }
.cookie h4{font-family:var(--serif); font-size:22px; margin-bottom:6px}
.cookie p{font-size:13.5px; color:var(--ink-60); max-width:62ch; line-height:1.6}
.cookie p a{color:var(--terracotta); text-decoration:underline}
.cookie .acts{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.cookie .acts .btn{padding:13px 24px}
.cookie .btn.flat{background:transparent; color:var(--bosco); border-color:var(--line)}
.cookie .ck-x{position:absolute; top:14px; right:18px; background:none; border:none; font-size:22px; color:var(--ink-45); cursor:pointer; line-height:1}
.cookie .manage{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--salvia); font-weight:600; background:none; border:none; cursor:pointer}

/* whatsapp float */
.wa-float{position:fixed; right:18px; bottom:94px; z-index:54; width:54px; height:54px; border-radius:50%; background:#25683f; color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.06)}
@media(min-width:941px){ .wa-float{bottom:24px} }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
/* richer 3D scroll reveals — rise + slight rotateX, with JS stagger */
.reveal{opacity:0; transform:perspective(1200px) translateY(40px) rotateX(7deg); transform-origin:50% 100%; transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:perspective(1200px) translateY(0) rotateX(0deg)}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1 !important; transform:none !important} }

/* scroll progress bar */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--salvia), var(--terracotta)); z-index:66; will-change:transform; pointer-events:none}

/* back-to-top button */
.to-top{position:fixed; left:18px; bottom:94px; z-index:54; width:46px; height:46px; border-radius:50%; background:var(--bosco); color:var(--crema); border:none; display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s; box-shadow:var(--shadow-lift)}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{background:var(--terracotta)}
.to-top svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2}
@media(min-width:941px){ .to-top{bottom:24px; left:24px} }

/* utilities */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.center{text-align:center}
.maxw50{max-width:50ch}.maxw60{max-width:60ch}

/* ==========================================================================
   INNER-PAGE EXTRAS — forms, FAQ, spec lists, booking, contact
   ========================================================================== */

/* spec / amenities list (camera pages) */
.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; margin:0; padding:0; list-style:none}
@media(max-width:560px){ .spec{grid-template-columns:1fr} }
.spec li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-60); padding:11px 0; border-bottom:1px solid var(--line-soft)}
.spec li::before{content:""; flex:0 0 auto; width:7px; height:7px; margin-top:8px; border-radius:50%; background:var(--salvia)}
.spec li b{color:var(--bosco); font-weight:600}

/* price block */
.pricebox{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pricebox .big{font-family:var(--serif); font-size:clamp(30px,4vw,42px); color:var(--bosco); line-height:1}
.pricebox .lbl{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--salvia); font-weight:600}
.pricebox .note{flex-basis:100%; font-size:13px; color:var(--ink-45); margin-top:2px}

/* placeholder data chip */
.todo{display:inline-block; font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--terracotta-d); background:rgba(181,102,63,.09); border:1px dashed rgba(181,102,63,.4); border-radius:7px; padding:1px 9px; font-weight:500}

/* FAQ accordion */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 4px; font-family:var(--serif); font-size:clamp(19px,2.2vw,24px); color:var(--bosco); transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--terracotta)}
.faq summary .ic{flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .3s var(--ease)}
.faq summary .ic::before,.faq summary .ic::after{content:""; position:absolute; background:var(--salvia); border-radius:2px}
.faq summary .ic::before{top:10px; left:2px; right:2px; height:2px}
.faq summary .ic::after{left:10px; top:2px; bottom:2px; width:2px; transition:transform .3s var(--ease)}
.faq details[open] summary .ic::after{transform:scaleY(0)}
.faq .ans{padding:0 4px 28px; max-width:70ch; color:var(--ink-60); font-size:15.5px; line-height:1.75}
.faq .ans p{margin:0 0 .8em}

/* forms */
.form{display:grid; gap:18px; max-width:560px}
.form .field{display:grid; gap:7px}
.form label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--salvia); font-weight:600}
.form input,.form textarea,.form select{font-family:var(--sans); font-size:16px; color:var(--bosco); background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:14px 16px; transition:border-color .2s, box-shadow .2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--salvia); box-shadow:0 0 0 3px rgba(122,132,102,.14)}
.form select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23545b48' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; cursor:pointer}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){ .form-row{grid-template-columns:1fr} }
.form textarea{resize:vertical; min-height:130px}
.form .consent{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-60); line-height:1.55}
.form .consent input{flex:0 0 auto; width:18px; height:18px; margin-top:2px; padding:0}

/* contact info grid */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
@media(max-width:860px){ .info-grid{grid-template-columns:1fr; gap:40px} }
.info-list{list-style:none; margin:0; padding:0; display:grid; gap:20px}
.info-list .k{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--salvia); font-weight:600; margin-bottom:4px}
.info-list .v{font-size:16px; color:var(--bosco); line-height:1.55}
.info-list a{color:var(--terracotta-d); text-decoration:underline; text-underline-offset:3px}

/* booking placeholder panel */
.bookbox{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-card)}
.bookbox .engine{margin-top:22px; border:1px dashed var(--tortora); border-radius:14px; background:repeating-linear-gradient(135deg, rgba(201,191,168,.10) 0 12px, transparent 12px 24px); min-height:230px; display:grid; place-items:center; text-align:center; padding:34px 24px}
.bookbox .engine .inner{max-width:42ch}
.bookbox .engine h4{font-family:var(--serif); font-size:24px; color:var(--bosco); margin:0 0 8px}
.bookbox .engine p{font-size:14px; color:var(--ink-60); margin:0}

/* perks / value props row */
.perks{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px)}
@media(max-width:760px){ .perks{grid-template-columns:1fr} }
.perk{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:24px 24px 26px}
.perk h4{font-family:var(--serif); font-size:21px; color:var(--bosco); margin:0 0 7px}
.perk p{font-size:14px; color:var(--ink-60); margin:0; line-height:1.6}

/* legal prose */
.prose{max-width:72ch; color:var(--ink-60); font-size:16px; line-height:1.8}
.prose h2{font-family:var(--serif); color:var(--bosco); font-size:clamp(22px,2.6vw,28px); margin:1.8em 0 .5em}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1em}
.prose ul{margin:0 0 1em; padding-left:1.2em}
.prose li{margin:.3em 0}

/* cookie preferences modal */
.ck-prefs{position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:24px; background:rgba(20,26,16,.5); backdrop-filter:blur(3px)}
.ck-prefs.show{display:grid}
.ck-prefs .ck-card{position:relative; width:100%; max-width:520px; background:var(--crema); border:1px solid var(--line); border-radius:18px; padding:clamp(24px,4vw,38px); box-shadow:0 30px 80px -30px rgba(20,26,16,.6); max-height:88vh; overflow:auto}
.ck-prefs .ck-x2{position:absolute; top:16px; right:18px; background:none; border:none; font-size:26px; line-height:1; color:var(--ink-45); cursor:pointer}
.ck-prefs h4{font-family:var(--serif); font-size:27px; color:var(--bosco); margin:0 0 8px}
.ck-prefs .ck-intro{font-size:14px; color:var(--ink-60); margin:0 0 22px; line-height:1.6}
.ck-opt{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:16px 0; border-top:1px solid var(--line)}
.ck-opt span{display:flex; flex-direction:column; gap:3px}
.ck-opt b{font-size:15.5px; color:var(--bosco)}
.ck-opt small{font-size:13px; color:var(--ink-60); line-height:1.5}
.ck-opt input{flex:0 0 auto; width:20px; height:20px; margin-top:3px; accent-color:var(--salvia)}
.ck-opt.is-locked{opacity:.7}
.ck-prefs .ck-acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.ck-prefs .btn.flat{background:transparent; color:var(--ink-60); border-color:var(--line)}
.ck-prefs .btn.flat:hover{border-color:var(--salvia); color:var(--salvia)}

/* ==========================================================================
   DEPTH / TRIDIMENSIONALITÀ
   Layered shadows, lift-on-hover, parallax bands, optional pointer tilt.
   Applied here (end of file) so it layers cleanly over the base rules.
   ========================================================================== */

/* image tiles rest slightly raised, lift on hover */
.shot{box-shadow:var(--shadow-soft); transition:transform .55s var(--ease), box-shadow .55s var(--ease)}
.shot:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift)}
/* tiles that sit INSIDE a lifting card shouldn't double-lift */
.room-card .shot{box-shadow:none}
.room-card .shot:hover{transform:none}
/* mosaic spanning tiles keep their grid placement while lifting */
.mosaic .shot:hover{transform:translateY(-6px)}

/* room cards: always faintly raised, deeper lift on hover */
.room-card{box-shadow:var(--shadow-soft)}
.room-card:hover{transform:translateY(-10px); box-shadow:var(--shadow-deep)}

/* perks & booking & contact panels float off the page */
.perk{box-shadow:var(--shadow-soft); transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.perk:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift)}
.bookbox{box-shadow:var(--shadow-lift)}

/* feature items: lift the whole item (text + image) together */
.feature .item{transition:transform .45s var(--ease)}
.feature .item:hover{transform:translateY(-4px)}
.feature .item:hover .shot{box-shadow:var(--shadow-lift)}

/* full-bleed bands: parallax depth + edge vignette so the image recedes */
.band{perspective:1200px}
.band img.bg{height:132%; top:-16%; will-change:transform}
.band::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 140px 10px rgba(16,21,13,.55), inset 0 0 40px rgba(16,21,13,.35)}
.band .bin{text-shadow:0 2px 30px rgba(0,0,0,.35)}

/* hero: gentle parallax on the texture layer + deeper emblem float */
.hero .htex{will-change:transform}
.hero .emblem{filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.hero .hin{transform:translateZ(0)}

/* pointer-tilt: only on fine pointers, set up by site.js (adds .tilt) */
.tilt{transform-style:preserve-3d; will-change:transform}
.tilt > *{transform:translateZ(0)}

/* section headers lift their stacked layers a touch */
.sec-paper{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

@media (prefers-reduced-motion: reduce){
  .shot, .room-card, .perk, .feature .item{transition:none}
  .shot:hover, .room-card:hover, .perk:hover, .mosaic .shot:hover, .feature .item:hover{transform:none}
  .band img.bg{height:100%; top:0}
}

/* ==========================================================================
   AMENITIES  (servizi della casa)
   ========================================================================== */
.amenities{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:860px){ .amenities{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .amenities{grid-template-columns:1fr} }
.amenity{display:flex; align-items:center; gap:14px; min-width:0; padding:18px 18px; background:var(--paper); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s}
.amenity:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.amenity svg{flex:0 0 auto; width:24px; height:24px; stroke:var(--salvia); fill:none; stroke-width:1.5}
.amenity .lbl{font-size:14.5px; color:var(--bosco); line-height:1.3}
.amenity .lbl small{display:block; font-size:11.5px; color:var(--ink-45); letter-spacing:.02em; margin-top:2px}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.skip-link{position:fixed; top:-60px; left:12px; z-index:200; background:var(--bosco); color:var(--crema); padding:10px 18px; border-radius:0 0 10px 10px; font-family:var(--sans); font-size:14px; font-weight:600; transition:top .2s ease}
.skip-link:focus{top:0; outline:2px solid var(--terracotta); outline-offset:2px}
:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px; border-radius:3px}
.site-header.over a:focus-visible, .hero a:focus-visible, .band a:focus-visible{outline-color:#fbf6ec}

/* ==========================================================================
   FLOATING ACTION STACK  (assistant + whatsapp on right)
   ========================================================================== */
.fab{position:fixed; right:20px; z-index:55; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-lift); transition:transform .3s var(--ease), box-shadow .3s, background .25s}
.fab svg{width:25px; height:25px}
.fab:hover{transform:translateY(-3px) scale(1.04); box-shadow:var(--shadow-deep)}
.chat-fab{bottom:20px; background:var(--bosco); color:var(--crema)}
.chat-fab .ic-close{display:none}
.chat-fab.is-open .ic-open{display:none}
.chat-fab.is-open .ic-close{display:block}
.chat-fab .dot{position:absolute; top:1px; right:1px; width:13px; height:13px; border-radius:50%; background:var(--terracotta); border:2px solid var(--crema)}
.chat-fab.is-open .dot{display:none}
/* whatsapp sits above the assistant */
.wa-float{bottom:88px}
@media(max-width:1180px){
  .chat-fab{bottom:84px}
  .wa-float{bottom:152px}
  .to-top{bottom:84px !important}
}

/* ==========================================================================
   ASSISTANT CHAT PANEL
   ========================================================================== */
.asst{position:fixed; right:20px; bottom:88px; z-index:56; width:min(384px, calc(100vw - 40px)); height:min(564px, calc(100vh - 130px));
  background:var(--crema); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-deep); overflow:hidden;
  display:flex; flex-direction:column; opacity:0; transform:translateY(16px) scale(.98); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease)}
.asst.open{opacity:1; transform:none; pointer-events:auto}
@media(max-width:1180px){ .asst{bottom:152px; height:min(540px, calc(100vh - 210px))} }
@media(max-width:480px){ .asst{right:12px; left:12px; width:auto; bottom:84px; height:min(72vh, calc(100vh - 150px))} }
.asst .a-head{display:flex; align-items:center; gap:12px; padding:15px 16px; background:var(--bosco); color:var(--crema)}
.asst .a-head .av{flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:rgba(244,239,230,.12); display:grid; place-items:center}
.asst .a-head .av img{width:26px; height:26px}
.asst .a-head .t{flex:1; min-width:0}
.asst .a-head .t b{font-family:var(--serif); font-size:18px; font-weight:500; display:block; line-height:1.15}
.asst .a-head .t span{font-size:11.5px; color:var(--cream-70); display:flex; align-items:center; gap:6px}
.asst .a-head .t span::before{content:""; width:7px; height:7px; border-radius:50%; background:#7fd19a}
.asst .a-head .a-x{background:none; border:none; color:var(--cream-70); font-size:25px; line-height:1; cursor:pointer; padding:2px 4px}
.asst .a-head .a-x:hover{color:#fff}
.asst .a-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:11px; scroll-behavior:smooth}
.asst .msg{max-width:85%; padding:11px 15px; border-radius:15px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word}
.asst .msg.bot{align-self:flex-start; background:var(--paper); border:1px solid var(--line); color:var(--bosco); border-bottom-left-radius:5px}
.asst .msg.me{align-self:flex-end; background:var(--bosco); color:var(--crema); border-bottom-right-radius:5px}
.asst .msg a{color:var(--terracotta-d); text-decoration:underline; text-underline-offset:2px; font-weight:600}
.asst .msg.me a{color:#fbf6ec}
.asst .typing{align-self:flex-start; display:flex; gap:4px; padding:13px 16px; background:var(--paper); border:1px solid var(--line); border-radius:15px; border-bottom-left-radius:5px}
.asst .typing i{width:7px; height:7px; border-radius:50%; background:var(--tortora); animation:asstDot 1.2s infinite ease-in-out}
.asst .typing i:nth-child(2){animation-delay:.2s} .asst .typing i:nth-child(3){animation-delay:.4s}
@keyframes asstDot{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}
.asst .chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px}
.asst .chip{font-family:var(--sans); font-size:12.5px; color:var(--bosco); background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:7px 13px; cursor:pointer; transition:background .2s, border-color .2s, color .2s; text-align:left}
.asst .chip:hover{background:var(--bosco); color:var(--crema); border-color:var(--bosco)}
.asst .a-foot{border-top:1px solid var(--line); padding:11px; display:flex; gap:9px; align-items:flex-end; background:var(--crema)}
.asst .a-foot textarea{flex:1; resize:none; border:1px solid var(--line); border-radius:12px; padding:11px 14px; font-family:var(--sans); font-size:14.5px; color:var(--bosco); background:var(--paper); max-height:96px; line-height:1.4}
.asst .a-foot textarea:focus{outline:none; border-color:var(--salvia); box-shadow:0 0 0 3px rgba(122,132,102,.14)}
.asst .a-send{flex:0 0 auto; width:42px; height:42px; border-radius:11px; border:none; background:var(--bosco); color:var(--crema); cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .2s}
.asst .a-send:hover{transform:translateY(-1px)}
.asst .a-send:disabled{opacity:.45; cursor:default; transform:none}
.asst .a-note{font-size:10.5px; color:var(--ink-45); text-align:center; padding:2px 14px 9px; line-height:1.4}

/* ==========================================================================
   NEWSLETTER  (footer strip + standalone section)
   ========================================================================== */
.footer-news{border-bottom:1px solid rgba(244,239,230,.14); padding-bottom:34px; margin-bottom:34px; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px,5vw,60px); align-items:center}
@media(max-width:760px){ .footer-news{grid-template-columns:1fr; gap:20px} }
.footer-news .n-copy h4{font-family:var(--serif); font-weight:500; font-size:clamp(23px,3vw,30px); color:var(--crema); margin:0 0 7px}
.footer-news .n-copy p{font-size:14px; color:var(--cream-70); line-height:1.6; margin:0; max-width:46ch}
.footer-news form{display:flex; gap:10px; flex-wrap:wrap}
.footer-news input[type=email]{flex:1; min-width:0; background:rgba(244,239,230,.08); border:1px solid rgba(244,239,230,.22); border-radius:11px; padding:13px 16px; color:var(--crema); font-family:var(--sans); font-size:15px}
.footer-news input[type=email]::placeholder{color:rgba(244,239,230,.5)}
.footer-news input[type=email]:focus{outline:none; border-color:var(--cream-70); background:rgba(244,239,230,.13)}
.footer-news button{flex:0 0 auto; white-space:nowrap}
.footer-news .n-ok{flex-basis:100%; font-size:13px; color:#a8d8b8; margin-top:2px}
.footer-news .n-consent{flex-basis:100%; font-size:11.5px; color:var(--cream-70); line-height:1.5; display:flex; gap:8px; align-items:flex-start}
.footer-news .n-consent input{flex:0 0 auto; width:16px; height:16px; min-width:auto; margin-top:1px; padding:0; accent-color:var(--salvia)}
.footer-news .n-consent a{color:var(--crema); text-decoration:underline}

/* footer social slot */
.footer-social{display:flex; gap:11px; margin-top:18px}
.footer-social .social-link{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--cream-70); background:rgba(244,239,230,.08); border:1px solid rgba(244,239,230,.2); transition:color .25s, background .25s, border-color .25s, transform .25s}
.footer-social .social-link:hover{color:#fff; background:rgba(244,239,230,.16); border-color:rgba(244,239,230,.4); transform:translateY(-2px)}
/* social row inside the contact info list */
.info-list .social-row{display:flex; gap:10px; margin-top:4px}
.info-list .social-row a{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--salvia); background:var(--paper); border:1px solid var(--line); text-decoration:none; transition:color .25s, background .25s, border-color .25s, transform .25s}
.info-list .social-row a:hover{color:var(--crema); background:var(--bosco); border-color:var(--bosco); transform:translateY(-2px)}

/* ==========================================================================
   EXPERIENCE LIST → clickable request rows
   ========================================================================== */
a.exp-row{display:flex; align-items:center; gap:18px; text-decoration:none; color:inherit; padding:24px 4px; border-top:1px solid var(--line); transition:background .25s, padding .25s}
a.exp-row:first-child{border-top:none}
a.exp-row .n{flex:0 0 auto; font-family:var(--serif); font-size:30px; color:var(--tortora); line-height:1; width:42px; transition:color .25s}
a.exp-row .ex-body{flex:1; min-width:0}
a.exp-row h3{font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.6vw,27px); color:var(--bosco); margin:0 0 5px; transition:color .25s}
a.exp-row p{font-size:14.5px; color:var(--ink-60); line-height:1.6; margin:0}
a.exp-row .ex-req{display:inline-block; font-size:12px; letter-spacing:.04em; color:var(--salvia); font-weight:600; margin-top:9px}
a.exp-row .ex-arr{flex:0 0 auto; color:var(--salvia); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); transition:background .25s, border-color .25s, color .25s, transform .25s}
a.exp-row:hover{background:var(--paper); padding-left:14px; padding-right:14px; border-radius:14px}
a.exp-row:hover .n{color:var(--terracotta)}
a.exp-row:hover h3{color:var(--terracotta-d)}
a.exp-row:hover .ex-arr{background:var(--bosco); border-color:var(--bosco); color:var(--crema); transform:translateX(3px)}

/* ==========================================================================
   BLOG / ARTICLES (SEO territory content)
   ========================================================================== */
.art-list{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,28px)}
@media(max-width:880px){ .art-list{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .art-list{grid-template-columns:1fr} }
a.art-card{display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s}
a.art-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift)}
a.art-card .ac-img{aspect-ratio:3/2; overflow:hidden; background:var(--tortora)}
a.art-card .ac-img img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
a.art-card:hover .ac-img img{transform:scale(1.05)}
a.art-card .ac-body{padding:20px 20px 24px}
a.art-card .ac-k{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--salvia); font-weight:600}
a.art-card h3{font-family:var(--serif); font-weight:500; font-size:22px; color:var(--bosco); margin:9px 0 7px; line-height:1.2}
a.art-card p{font-size:14px; color:var(--ink-60); line-height:1.6; margin:0}
/* article body */
.article{max-width:72ch; margin:0 auto}
.article .lead{font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.4vw,24px); line-height:1.45; color:var(--bosco); margin:0 0 28px}
.article h2{font-family:var(--serif); font-weight:500; font-size:clamp(24px,3vw,30px); color:var(--bosco); margin:38px 0 12px}
.article p{font-size:16.5px; line-height:1.8; color:var(--ink-70, #4a4f42); margin:0 0 16px}
.article ul{margin:0 0 18px; padding-left:2px; list-style:none}
.article ul li{position:relative; padding-left:24px; margin:9px 0; font-size:16px; line-height:1.7; color:var(--ink-60)}
.article ul li::before{content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--salvia)}
.article .tip{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--salvia); border-radius:0 12px 12px 0; padding:18px 22px; margin:24px 0; font-size:15px; line-height:1.7; color:var(--ink-60)}
.article .tip b{color:var(--bosco)}
.article-meta{display:flex; gap:14px; align-items:center; justify-content:center; font-size:12.5px; letter-spacing:.04em; color:var(--ink-45); margin-top:16px}
.article-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--tortora)}