/* the site's fonts, served from the site itself (SIL Open Font License); made by prep_fonts.py */
/* Figtree latin-ext */ @font-face {font-family: 'Figtree';font-style: normal;font-weight: 400 700;font-display: swap;src:url(fonts/figtree-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Figtree latin */ @font-face {font-family: 'Figtree';font-style: normal;font-weight: 400 700;font-display: swap;src:url(fonts/figtree-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Fraunces latin-ext */ @font-face {font-family: 'Fraunces';font-style: normal;font-weight: 400 700;font-display: swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Fraunces latin */ @font-face {font-family: 'Fraunces';font-style: normal;font-weight: 400 700;font-display: swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Kaushan Script: the full original font (google/fonts, TTF -> WOFF2, unmodified), not a subset: its licence reserves the name */ @font-face {font-family: 'Kaushan Script';font-style: normal;font-weight: 400;font-display: swap;src:url(fonts/kaushan-script-full.woff2) format('woff2');}

/* ===== 00-base.css ===== */
/* ============ Design tokens ============ */
:root{
  --sea:#EAF5F6;--sea-2:#DCEEF1;--sea-3:#C6E0E5;--line:#DDE8EB;
  --petrol:#0B3440;--petrol-2:#134755;--petrol-d:#082A34;
  --ink:#0B3440;--ink-2:#46636B;--ink-3:#5A757C;
  --coral:#C9482A;--coral-h:#B23C20;--coral-a:#9E341B;--coral-ink:#B23C20;--coral-l:#F39A78;
  --sun:#F2B84B;
  --field:#7A9097;
  --r:16px;--r-btn:10px;
  --gut:20px;--hh:64px;
  --sec:clamp(72px,5.5vw + 44px,136px);
  --float:0 24px 60px -22px rgba(8,42,52,.42),0 6px 16px -6px rgba(8,42,52,.12);
  --ease:cubic-bezier(.22,.68,.2,1);
  --focus:var(--petrol);
  --sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --script:"Kaushan Script","Brush Script MT",cursive;
}
@media (min-width:600px){:root{--gut:32px}}
@media (min-width:1100px){:root{--gut:40px;--hh:76px}}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.modal-open{overflow:hidden}
body{margin:0;background:#fff;color:var(--ink-2);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media (min-width:900px){body{font-size:1.0625rem}}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0;color:var(--ink);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.875rem,1.25vw + 1.45rem,2.75rem);line-height:1.12}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:12px;z-index:200;background:#fff;color:var(--ink);padding:12px 18px;border-radius:var(--r-btn);font-weight:600;box-shadow:var(--float)}
.skip:not(:focus){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1200px,calc(100% - 2 * var(--gut)));margin-inline:auto}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lead{font-size:1.125rem;line-height:1.65}
@media (min-width:900px){.lead{font-size:1.1875rem}}
.script{font-family:var(--script);font-weight:400;letter-spacing:0;color:var(--coral-ink);font-size:clamp(2.25rem,1.4vw + 1.75rem,3.25rem);line-height:1.05}
.chip{width:48px;height:48px;border-radius:50%;background:var(--sea);color:var(--petrol);display:grid;place-items:center;flex:none}
.sec-sea .chip{background:#fff}

/* ============ Buttons & links ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:var(--r-btn);border:1.5px solid transparent;font:600 1rem/1.2 var(--sans);letter-spacing:.005em;text-decoration:none;text-align:center;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn .ico{width:20px;height:20px}
.btn-sm{min-height:44px;padding:9px 18px;font-size:.9375rem}
.btn-block{width:100%}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:var(--coral-h)}
.btn-primary:active{background:var(--coral-a)}
.btn-line{border-color:var(--petrol);color:var(--petrol);background:transparent}
@media (hover:hover){.btn-line:hover{background:var(--petrol);color:#fff}}
.btn-light{border-color:rgba(255,255,255,.88);color:#fff;background:transparent}
@media (hover:hover){.btn-light:hover{background:#fff;color:var(--petrol);border-color:#fff}}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--coral-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:color .2s}
.tlink:hover{color:var(--petrol)}
.tlink .ico{width:18px;height:18px}

/* ============ Header ============ */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hh);background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line);transition:background-color .35s ease,box-shadow .35s ease,color .35s ease}
.js .hdr:not(.solid){background:transparent;color:#fff;box-shadow:none}
.hdr-in{height:100%;display:flex;align-items:center;gap:16px}
.logo{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;text-decoration:none;line-height:1;margin-right:auto}
.logo-n{font-weight:700;font-size:1.25rem;letter-spacing:-.015em}
.logo-s{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.logo-st{color:var(--sun);letter-spacing:.06em;font-size:.6875rem}
.hdr .logo-st{color:var(--petrol)}
.js .hdr:not(.solid) .logo-st{color:var(--sun)}
@media (min-width:1100px){.logo-n{font-size:1.375rem}}
.nav{display:none}
.nav ul{display:flex;gap:4px}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 12px;font-weight:500;font-size:.98rem;text-decoration:none}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.hdr.solid .nav a.on{color:var(--petrol)}
.hdr-act{display:flex;align-items:center;gap:8px}
.hdr-tel{display:none;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 6px;font-weight:600;font-size:.98rem;text-decoration:none;font-variant-numeric:tabular-nums}
.hdr-tel span{display:none}
.burger{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:inherit;border-radius:var(--r-btn);margin-right:-8px}
.burger .ico{width:26px;height:26px}
.hdr .btn-primary{min-height:44px;padding:9px 18px}
@media (min-width:1100px){
  .nav{display:block;margin-right:12px}
  .burger{display:none}
  .hdr-tel{display:inline-flex}
  .hdr .btn-primary{padding:10px 22px}
}
@media (min-width:1280px){.hdr-tel span{display:inline}.nav ul{gap:8px}}
.js .hdr:not(.solid){--focus:#fff}
.js .hdr:not(.solid) .nav a,.js .hdr:not(.solid) .hdr-tel,.js .hdr:not(.solid) .logo{text-shadow:0 1px 3px rgba(4,28,36,.4)}

/* ============ Hero ============ */
.hero{position:relative;z-index:2;height:100vh;height:100svh;min-height:600px;max-height:1200px;background:var(--petrol);color:#fff;isolation:isolate;--focus:#fff;touch-action:pan-y pinch-zoom}
@media (min-width:900px){.hero{height:calc(100vh - 56px);height:calc(100svh - 56px);min-height:640px}}
.hero-media{position:absolute;inset:0;overflow:hidden}
.slide{position:absolute;inset:0;visibility:hidden}
.slide.is-on{visibility:visible;z-index:2}
.slide.is-prev{visibility:visible;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transform-origin:var(--kb,50% 50%);-webkit-user-drag:none;user-select:none}
@media (max-width:899px){.slide img{object-position:var(--opm,var(--op,50% 50%))}}
.hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(180deg,rgba(4,28,36,.5) 0,rgba(4,28,36,0) 150px),
  linear-gradient(0deg,#082A34 0,#082A34 var(--melt),rgba(8,42,52,.82) calc(var(--melt) + 60px),rgba(8,42,52,.46) calc(var(--melt) + 130px),rgba(8,42,52,.14) calc(var(--melt) + 210px),rgba(8,42,52,0) calc(var(--melt) + 280px))}
@media (min-width:900px){.hero::before{background:
  linear-gradient(180deg,rgba(4,28,36,.64) 0,rgba(4,28,36,0) 230px),
  linear-gradient(90deg,rgba(4,28,36,.62) 0%,rgba(4,28,36,.4) 30%,rgba(4,28,36,0) 58%),
  linear-gradient(0deg,rgba(4,28,36,.62) 0%,rgba(4,28,36,.28) 26%,rgba(4,28,36,0) 52%)}}
.hero-in{position:relative;z-index:4;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px}
@media (min-width:900px){.hero-in{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px;padding-bottom:calc(46px + clamp(36px,6vh,64px))}}
.hero-copy{max-width:680px}
.hero h1{color:#fff;font-size:clamp(2.5rem,3.3vw + 1.35rem,4.5rem);line-height:1.02;letter-spacing:-.028em}
.hero h1{text-shadow:0 2px 16px rgba(4,28,36,.3)}
.hero h1 .script{display:block;color:#FFDCCB;font-size:1.2em;line-height:1.05;margin:0 0 .04em -.02em}
@media (min-width:900px){.hero h1 .script{color:var(--coral-l)}}
.hero-facts{margin-top:18px;max-width:35em;font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.95)}
@media (min-width:900px){.hero-facts{font-size:1.1875rem;margin-top:22px}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:599px){.hero-ctas .btn{flex:1 1 100%}}
.hero-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:20px}
.hero-ctrl .hero-cap{flex:1 1 100%}
@media (min-width:900px){.hero-ctrl{flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:8px;margin:0;max-width:320px;text-align:right}.hero-ctrl .hero-cap{flex:none}}
.hero-cap{font-size:.875rem;line-height:1.4;color:#fff;min-width:0;text-shadow:0 1px 3px rgba(4,28,36,.45)}
.hero-num{font-variant-numeric:tabular-nums;font-weight:600;margin-right:6px}
@media (min-width:900px){.hero-cap{font-size:.9375rem}}
.hero-nav{display:none;align-items:center;justify-content:space-between;gap:6px;flex:1 1 100%;margin-left:-6px}
.js .hero-nav{display:flex}
@media (min-width:900px){.hero-nav{flex:none;margin:0 -2px 0 0}}
.dots{display:flex}
.dot{position:relative;width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center}
.dot::before,.dot i{content:"";grid-area:1/1;width:32px;height:3px;border-radius:3px}
.dot::before{background:rgba(255,255,255,.42);transition:background-color .2s}
.dot:hover::before{background:rgba(255,255,255,.75)}
.dot i{background:#fff;transform:scaleX(0);transform-origin:left center}
.dot.is-on i{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .dot.is-on i{animation:prog 6s linear both}
  .hero.paused .dot.is-on i{animation-play-state:paused}
}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-pause{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:transparent;color:#fff;display:grid;place-items:center;transition:background-color .2s,border-color .2s}
@media (hover:hover){.hero-pause:hover{background:rgba(255,255,255,.16);border-color:#fff}}
.hero-pause .ico{width:20px;height:20px}
.hero-pause .i-pl,.hero-pause[aria-pressed="true"] .i-pa{display:none}
.hero-pause[aria-pressed="true"] .i-pl{display:block}
@media (prefers-reduced-motion:reduce){.hero-pause{display:none}}

/* booking bar (desktop) */
.bbar{display:none}
@media (min-width:900px){.bbar{display:block;position:absolute;left:0;right:0;bottom:0;z-index:6;transform:translateY(50%);color:var(--ink);--focus:var(--petrol)}}
.bbar-f{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;align-items:stretch;background:#fff;border-radius:var(--r);box-shadow:var(--float);padding:10px}
.bf{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:72px;padding:10px 20px;border-radius:12px;cursor:pointer;transition:background-color .2s}
.bf:hover,.bf:focus-within{background:var(--sea)}
.bf-sep::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--line)}
.bf-l{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--ink-2);line-height:1.2;white-space:nowrap}
.bf-l .ico{width:18px;height:18px;color:var(--petrol)}
.bf-n{font-weight:500;color:var(--ink-2)}
.bf input{position:relative;width:100%;min-height:28px;margin:0;padding:0;border:0;background:transparent;font:600 1.0625rem/1.4 var(--sans);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
.bf input:focus{outline:none}
.bf:focus-within:not(.bf-wrap .bf){box-shadow:inset 0 0 0 2px var(--petrol)}
.bf-wrap{position:relative;display:flex}
.bf-btn{width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit}
.bf-btn.bf{align-items:stretch}
.bf-v{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.bf-v .ico{width:20px;height:20px;color:var(--ink-2);transition:transform .25s var(--ease)}
.bf-btn[aria-expanded="true"] .bf-v .ico{transform:rotate(180deg)}
.bf-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--petrol)}
.bbar-go{margin-left:8px;min-height:72px;padding:0 30px;border-radius:12px;font-size:1.0625rem}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer}
.bf input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;opacity:0}
input[type="date"]::-webkit-date-and-time-value{text-align:left}
input[type="date"]:invalid::-webkit-datetime-edit{color:var(--ink-3)}
.dwrap{position:relative;display:block;min-width:0}
.dph{display:none;position:absolute;top:50%;left:0;transform:translateY(-50%);pointer-events:none;color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8px)}
.inp + .dph{left:14px;max-width:calc(100% - 52px)}
@supports selector(::-webkit-datetime-edit){
  input[type="date"][data-empty]:not(:focus)::-webkit-datetime-edit{opacity:0}
  input[type="date"][data-empty]:not(:focus) + .dph{display:block}
}
.gpop{position:absolute;left:0;bottom:calc(100% + 18px);width:340px;background:#fff;border-radius:var(--r);box-shadow:var(--float);padding:6px 20px 20px;z-index:8;color:var(--ink)}
.gpop[hidden]{display:none}
.gpop.down{bottom:auto;top:calc(100% + 12px)}

/* steppers (popover + sheet) */
.stp{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.stp + .stp{border-top:1px solid var(--line)}
.stp-n{font-weight:600;color:var(--ink);font-size:1.0625rem}
.stp-c{display:flex;align-items:center;gap:4px}
.stp-b{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--field);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;transition:background-color .2s,border-color .2s,color .2s}
.stp-b .ico{width:20px;height:20px}
@media (hover:hover){.stp-b:hover:not([aria-disabled="true"]){background:var(--petrol);border-color:var(--petrol);color:#fff}}
.stp-b:active:not([aria-disabled="true"]){background:var(--sea-2)}
.stp-b[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.stp-v{min-width:2.4ch;text-align:center;font-weight:700;font-size:1.125rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.gpop .btn{margin-top:8px}

/* ============ Sections ============ */
.sec{padding-block:var(--sec)}
.sec-sea{background:var(--sea)}
.sec-head{max-width:720px}
.sec-head .lead{margin-top:18px}
.ph{position:relative;overflow:hidden;border-radius:var(--r);background:var(--sea-2)}
.sec-sea .ph{background:var(--sea-3)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transform:scale(var(--z,1));transform-origin:var(--op,50% 50%);transition:transform .8s var(--ease)}
.r45{aspect-ratio:4/5}
.r43{aspect-ratio:4/3}
.cap{margin-top:12px;font-size:.9375rem;color:var(--ink-2)}

/* reveal */
.rv{transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv-on .rv:not(.in){opacity:0;transform:translateY(24px)}

/* L'hotel */
@media (min-width:900px){.sec-first{padding-top:calc(var(--sec) + 46px)}}
.intro{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;grid-template-areas:"txt" "ph" "hl"}
.intro-txt{grid-area:txt}
.intro-txt .lead{margin-top:20px;max-width:34em}
.intro-ph{grid-area:ph;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.intro-ph figure:nth-child(2){margin-top:48px}
.hl{grid-area:hl;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.hl li{display:flex;align-items:center;gap:14px;color:var(--ink);font-weight:600;line-height:1.3;font-size:1rem}
@media (max-width:519px){.hl{grid-template-columns:minmax(0,1fr);gap:12px}.hl .chip{width:44px;height:44px}}
@media (min-width:960px){
  .intro{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);grid-template-areas:"txt ph" "hl ph";column-gap:clamp(48px,6vw,96px);row-gap:44px;align-items:start}
  .intro-txt{align-self:end}
  .intro-ph{gap:20px}
  .intro-ph figure:nth-child(2){margin-top:88px}
}

/* Camere */
.rooms{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;grid-template-areas:"head" "media" "body"}
.rooms-head{grid-area:head}
.rooms-head .lead{margin-top:18px}
.rooms-media{grid-area:media;min-width:0}
.rooms-body{grid-area:body}
@media (min-width:960px){
  .rooms{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"media head" "media body";column-gap:clamp(48px,5.5vw,88px);row-gap:36px}
  .rooms-head{align-self:end}
}
.slider{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--sea-3);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.sl-track{display:flex;height:100%;transition:transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){.sl-track{transition:none}}
.sl-item{flex:0 0 100%;height:100%}
.sl-item .ph{border-radius:0;height:100%}
.sl-item img{-webkit-user-drag:none}
.sl-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.sl-cap{font-size:.9375rem;color:var(--ink-2);min-width:0}
.sl-num{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:6px}
.sl-btns{display:none;gap:8px;flex:none}
.js .sl-btns{display:flex}
.rbtn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--petrol);background:transparent;color:var(--petrol);display:grid;place-items:center;padding:0;transition:background-color .2s,color .2s}
@media (hover:hover){.rbtn:hover{background:var(--petrol);color:#fff}}
.rbtn .ico{width:20px;height:20px}
.amen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.amen li{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:500;line-height:1.3}
.amen .ico{color:var(--coral-ink)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:32px}

/* Colazione */
.feat{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;grid-template-areas:"head" "ph" "body"}
.feat-head{grid-area:head}
.feat-ph{grid-area:ph;position:relative;padding:0 18% 14% 0;width:100%;max-width:620px}
@media (min-width:960px){.feat-ph{max-width:none}}
.feat-body{grid-area:body}
.feat-ph .ph-sub{position:absolute;right:0;bottom:0;width:54%;aspect-ratio:4/3;border:8px solid #fff;border-radius:calc(var(--r) + 8px);box-sizing:border-box}
.feat-ph .ph-sub img{border-radius:var(--r)}
.feat-body .lead{max-width:32em}
.mini{display:grid;gap:12px;margin-top:28px}
.mini li{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:500}
.mini .ico{color:var(--coral-ink)}
@media (min-width:960px){
  .feat{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"ph head" "ph body";column-gap:clamp(56px,7vw,112px);row-gap:24px}
  .feat-head{align-self:end}
}

/* Servizi */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card .ph{border-radius:0}
.card-b{padding:22px 24px 26px}
.card h3{margin-bottom:8px}
.card p{font-size:1rem;line-height:1.6}
.card:hover .ph img,.g-it:hover img{transform:scale(calc(var(--z,1) * 1.04))}
@media (max-width:899px){
  .cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 6px;scroll-padding-inline:var(--gut);scrollbar-width:none;margin-top:36px}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 min(82%,360px);scroll-snap-align:start}
}
.svc-wrap{margin-top:56px}
.svc-t{font-size:1.125rem}
.svc{display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px;margin-top:16px}
.svc li{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 0;border-top:1px solid var(--sea-3);color:var(--ink);font-weight:500;line-height:1.35}
.svc .ico{color:var(--coral-ink)}
@media (min-width:600px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.svc{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Band */
.band{position:relative;overflow:hidden;height:640px;background:#7FA0BC;display:flex;align-items:flex-end}
.band-media{position:absolute;left:0;right:0;top:-6%;bottom:-6%;will-change:transform}
.band-media img{width:100%;height:100%;object-fit:cover;object-position:37% 0}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(4,28,36,.82) 0%,rgba(4,28,36,.45) 26%,rgba(4,28,36,0) 46%)}
.band-in{position:relative;z-index:1;padding-bottom:36px;--focus:#fff}
.band h2{max-width:15ch;color:#fff;font-size:clamp(2rem,2.8vw + 1.1rem,3.875rem);line-height:1.08;letter-spacing:-.028em}
.band .btn{margin-top:22px}
@media (min-width:600px) and (max-width:899px){.band{height:720px}.band-media img{object-position:30% 0}}
@media (min-width:900px){
  .band{height:clamp(560px,76vh,800px);align-items:flex-start;background:#9DBAD3}
  .band::after{display:none}
  .band-media img{object-position:50% 6%}
  .band-in{text-align:center;padding:clamp(40px,7vh,88px) 0 0;--focus:var(--petrol)}
  .band h2{margin:0 auto;color:var(--petrol)}
  .band .btn{margin-top:26px}
}

/* Caorle */
.caorle{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.caorle-txt .lead{margin-top:20px;max-width:32em}
.caorle h2 .script{display:block;margin-bottom:2px}
.sky{height:112px;overflow:hidden;color:var(--ink-2);margin:4px 0 -4px}
.sky svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sky path{vector-effect:non-scaling-stroke}
@media (min-width:700px){.sky{height:auto}.sky svg{height:auto;aspect-ratio:8/1}}
@media (min-width:960px){.sky{grid-column:1 / -1;margin:8px 0 -8px}}
.dist{background:var(--sea);border-radius:var(--r);padding:28px clamp(22px,3vw,36px) 18px}
.dist h3{font-size:1.125rem;margin-bottom:10px}
.dist dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--sea-3)}
.dist dl div:first-child{border-top:0}
.dist dt{color:var(--ink-2)}
.dist dd{color:var(--ink);font-weight:700;text-align:right;white-space:nowrap}
.dist .tlink{margin-top:6px}
.places{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:8px}
.place{display:flex;gap:16px;align-items:flex-start}
.place h3{font-size:1.0625rem;margin:2px 0 4px}
.place p{font-size:1rem;line-height:1.55}
@media (min-width:600px){.places{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}}
@media (min-width:960px){
  .caorle{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(56px,7vw,112px);row-gap:64px;align-items:center}
  .places{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px;margin-top:0}
}

/* Galleria */
.gal-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.hint{font-size:.9375rem;color:var(--ink-2)}
.hint .h-touch{display:none}
@media (hover:none){.hint .h-touch{display:inline}.hint .h-hover{display:none}}
.gal{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:0 var(--gut) 6px;scroll-padding-inline:var(--gut);scrollbar-width:none;margin-top:32px}
.gal::-webkit-scrollbar{display:none}
.g{flex:0 0 80%;scroll-snap-align:start}
.g-it{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;color:inherit;border-radius:var(--r)}
.g-ph{display:block;position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--sea-3)}
.g-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform .8s var(--ease)}
.g-cap{display:block;padding:10px 2px 0;font-size:.9375rem;color:var(--ink);font-weight:500}
.winter{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;margin-top:clamp(56px,7vw,88px);padding:28px 24px;border-radius:var(--r);background:var(--petrol);color:#C9DCE0;--focus:#fff}
.winter .w-ico{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}
.winter .w-ico .ico{width:28px;height:28px}
.winter h2{font-family:var(--script);font-weight:400;letter-spacing:0;color:var(--coral-l);font-size:clamp(2rem,1.2vw + 1.6rem,2.75rem);line-height:1.1}
.winter p{margin-top:4px;font-size:1.0625rem;color:#E3EEF0}
.winter .btn{justify-self:start}
@media (min-width:760px){.winter{grid-template-columns:auto minmax(0,1fr) auto;gap:28px;padding:30px 36px}}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.faq-side .lead{margin-top:18px}
.faq-c{display:grid;gap:2px;margin-top:20px}
@media (min-width:960px){.faq-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);column-gap:clamp(56px,7vw,112px)}.faq-side{position:sticky;top:calc(var(--hh) + 32px);align-self:start}}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;color:var(--ink);font-weight:600;font-size:1.0625rem;line-height:1.4;border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--coral-ink)}
.faq summary .ico{width:22px;height:22px;color:var(--coral-ink);transition:transform .3s var(--ease)}
.faq details[open]:not(.closing) summary .ico{transform:rotate(180deg)}
.faq-a{overflow:hidden}
.faq details:not([open]) > .faq-a{display:none}
.faq-a p{padding:0 44px 22px 0;max-width:40em}

/* Richiesta + contatti */
.book{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1000px){.book{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:clamp(48px,5vw,80px);align-items:start}}
.form-card{margin-top:32px;background:#fff;border-radius:var(--r);padding:clamp(22px,3.2vw,40px)}
.req{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.fg{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:600px){.fg-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f{display:flex;flex-direction:column;gap:8px;min-width:0}
.f label{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-weight:600;font-size:.9375rem;color:var(--ink);line-height:1.35}
.opt,.f-hint{font-weight:400;color:var(--ink-2)}
.inp{display:block;width:100%;min-width:0;height:52px;padding:0 14px;border:1.5px solid var(--field);border-radius:var(--r-btn);background:#fff;color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.inp:hover{border-color:var(--ink-2)}
.inp:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(11,52,64,.18)}
.inp::placeholder{color:var(--ink-3);opacity:1}
textarea.inp{height:auto;min-height:116px;padding:12px 14px;resize:vertical;line-height:1.55}
select.inp{padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3440' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/20px 20px;cursor:pointer}
input[type="date"].inp{line-height:48px}
.inp[aria-invalid="true"]{border-color:#B3261E;background-color:#FDF3F2}
.inp[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(179,38,30,.18)}
.f-err{display:flex;align-items:flex-start;gap:6px;color:#B3261E;font-size:.9rem;font-weight:500;line-height:1.4}
.f-err .ico{width:18px;height:18px;margin-top:1px}
.f-err[hidden]{display:none}
.chk{display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:12px!important;font-weight:400!important;color:var(--ink-2)!important;font-size:.9375rem!important;line-height:1.55!important;cursor:pointer}
.chk input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--coral);cursor:pointer}
.chk input[aria-invalid="true"]{outline:2px solid #B3261E;outline-offset:2px}
.req-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.req-note{font-size:.9375rem;color:var(--ink-2);flex:1 1 220px}
.req-fail{padding:14px 16px;border-radius:var(--r-btn);background:#FDF3F2;color:#B3261E;font-weight:500}
.req-fail[hidden]{display:none}
.done{text-align:left}
.done[hidden]{display:none}
.done:focus{outline:none}
.done-ico{width:56px;height:56px;border-radius:50%;background:var(--sea);color:var(--petrol);display:grid;place-items:center;margin-bottom:18px}
.done-ico .ico{width:28px;height:28px}
.done h3{font-size:1.5rem;margin-bottom:10px}
.done p{max-width:36em}
.done-s{margin-top:10px;font-size:.9375rem}
.done-s a{color:var(--petrol);font-weight:600}
.done-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.book-side h3{font-size:1.25rem}
.clist{margin-top:14px}
.clist li{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--sea-3);color:var(--ink);line-height:1.45}
.clist li:first-child{border-top:0}
.clist a{color:var(--ink);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.clist a:hover{color:var(--coral-ink);text-decoration:underline;text-underline-offset:.2em}
.clist strong{font-weight:700}
.map{position:relative;width:100%;min-width:0;margin-top:24px;border-radius:var(--r);overflow:hidden;background:#fff;aspect-ratio:4/3;min-height:300px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.map-ph .chip{width:56px;height:56px;background:var(--sea)}
.map-t{font-weight:600;color:var(--ink)}
.map-b{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
.map-load{display:none}.js .map-load{display:inline-flex}
.map-note{font-size:.875rem;color:var(--ink-2);max-width:30em;line-height:1.5}

/* ============ Footer ============ */
.ft-wave{display:block;width:100%;height:clamp(36px,4.5vw,64px);background:var(--sea)}
.ft{background:var(--petrol);color:#C9DCE0;--focus:#fff;padding:56px 0 28px}
.ft a{color:#fff;text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:.2em}
.ft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
.ft-brand,.ft-contact{grid-column:1 / -1}
@media (min-width:600px){.ft-contact{grid-column:auto}}
@media (min-width:600px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
@media (min-width:1000px){.ft-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:48px}.ft-brand{grid-column:auto}}
.ft .logo{color:#fff}
.ft-claim{margin-top:16px;max-width:22em;color:#E3EEF0}
.ft-brand .btn{margin-top:22px}
.ft-h{font-size:1rem;font-weight:700;color:#fff;letter-spacing:0;margin-bottom:12px}
.ft ul li{display:flex;align-items:center;min-height:44px;padding:2px 0;line-height:1.5}
.ft ul a{display:inline-flex;align-items:center;min-height:44px}
.ft-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.875rem}
.ft-legal p{color:#B9CFD4}
.totop{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600}
.totop .ico{width:20px;height:20px}
@media (max-width:899px){.ft{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* ============ Mobile action bar ============ */
.mbar{display:none}
@media (max-width:899px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 var(--line),0 -10px 30px -12px rgba(8,42,52,.25);transform:translateY(110%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s}
  .mbar.show{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
}
.mb{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-btn);border:1.5px solid var(--petrol);color:var(--petrol);font-weight:600;text-decoration:none;font-size:.9375rem;transition:background-color .2s,color .2s}
.mb .ico{width:20px;height:20px}
.mb:active{background:var(--sea)}
.mb-p{background:var(--coral);border-color:var(--coral);color:#fff}
.mb-p:active{background:var(--coral-a)}
@media (prefers-reduced-motion:reduce){.mbar{transition:none!important}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
  .card:hover .ph img,.g-it:hover img{transform:scale(var(--z,1))}
}

/* ============ Dialogs ============ */
dialog{padding:0;border:0;max-width:none;max-height:none;color:var(--ink);background:#fff}
dialog::backdrop{background:rgba(4,24,31,.55)}
.menu{position:fixed;inset:0;width:100%;height:100%;margin:0;overflow-y:auto}
.menu::backdrop{background:transparent}
.menu-top{height:var(--hh);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.menu-top .logo{color:var(--ink)}
.menu-top .logo-st{color:var(--petrol)}
.xbtn{width:44px;height:44px;border-radius:50%;border:0;background:var(--sea);color:var(--petrol);display:grid;place-items:center;padding:0;transition:background-color .2s}
.xbtn:hover{background:var(--sea-3)}
.menu-nav{padding-top:12px}
.menu-nav a{display:flex;align-items:center;justify-content:space-between;min-height:60px;border-bottom:1px solid var(--line);font-size:1.375rem;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.menu-nav a .ico{color:var(--petrol)}
.menu-foot{display:grid;gap:6px;padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
.menu-foot .btn{margin-bottom:12px}
.menu-c{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);font-weight:600;text-decoration:none}
.menu-c .ico{color:var(--petrol)}
@media (prefers-reduced-motion:no-preference){
  .menu[open]{animation:fadein .25s ease}
  .sheet[open]{animation:sheetup .32s var(--ease)}
  .sheet.closing{animation:sheetdown .24s ease forwards}
  .lb[open]{animation:fadein .25s ease}
}
@keyframes fadein{from{opacity:0}}
@keyframes sheetup{from{transform:translateY(100%)}}
@keyframes sheetdown{to{transform:translateY(100%)}}
.sheet{position:fixed;inset:auto 0 0;width:100%;max-width:560px;margin:0 auto;border-radius:20px 20px 0 0;padding:22px var(--gut) calc(24px + env(safe-area-inset-bottom));max-height:92vh;max-height:92svh;overflow-y:auto}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.sheet-h h2{font-size:1.5rem}
.sheet-d{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:6px}
.sheet .inp{padding:0 12px}
.sheet .inp + .dph{left:12px}
.sheet .btn{margin-top:14px}
.sheet-note{margin-top:12px;font-size:.9rem;color:var(--ink-2);text-align:center}
.lb{position:fixed;inset:0;width:100%;height:100%;margin:0;background:#061B22;color:#fff;--focus:#fff;overflow:hidden}
.lb::backdrop{background:rgba(4,22,28,.6)}
.lb-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:72px 16px 96px;touch-action:pan-y pinch-zoom}
@media (min-width:900px){.lb-in{padding:72px 104px 88px}}
.lb-fig{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
.lb-fig img{max-width:100%;max-height:calc(100vh - 200px);max-height:calc(100svh - 200px);width:auto;height:auto;border-radius:12px;object-fit:contain;-webkit-user-drag:none;user-select:none}
.lb-fig figcaption{display:flex;gap:12px;align-items:baseline;font-size:1rem;color:#E3EEF0;text-align:center}
.lb-n{font-variant-numeric:tabular-nums;color:#9FBFC6;font-size:.9375rem}
.lb-b{position:absolute;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(4,22,28,.4);color:#fff;display:grid;place-items:center;padding:0;transition:background-color .2s,border-color .2s}
@media (hover:hover){.lb-b:hover{background:rgba(255,255,255,.14);border-color:#fff}}
.lb-x{top:14px;right:14px}
.lb-prev,.lb-next{bottom:22px}
.lb-prev{left:calc(50% - 64px)}
.lb-next{right:calc(50% - 64px)}
@media (min-width:900px){.lb-prev,.lb-next{bottom:auto;top:50%;margin-top:-26px}.lb-prev{left:28px}.lb-next{right:28px}.lb-x{top:20px;right:24px}}

/* ===== 10-e1.css ===== */
/* ============ Micro-interactions ============ */
.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .18s var(--ease),box-shadow .2s ease}
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:scale(.98)}
.btn-primary:not(.btn-sm)::after{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease)}
.hdr .btn-primary::after,.mbar .btn-primary::after,#req-btn:disabled::after{display:none}
.btn .ico{transition:transform .3s var(--ease)}
@media (hover:hover){.btn-primary:hover::after,.btn:hover .ico{transform:translateX(4px)}}
.tlink{color:var(--petrol);text-decoration-color:var(--sea-3);transition:text-decoration-color .25s ease,color .2s}
.tlink:hover{color:var(--petrol);text-decoration-color:var(--petrol)}
.req-note a,.hero-more{text-underline-offset:.22em}

/* header: smart hide + sliding underline */
.hdr{transition:background-color .35s ease,box-shadow .35s ease,color .35s ease,transform .42s var(--ease)}
.hdr.hide{transform:translateY(-100%)}
.nav{position:relative}
.nav-ink{position:absolute;left:0;bottom:6px;width:100px;height:2px;border-radius:2px;background:currentColor;transform-origin:left;pointer-events:none;opacity:0;transition:transform .45s var(--ease),opacity .25s}
.nav.has-ink a.on::after{transform:scaleX(0)}
.nav.has-ink a.on:hover::after{transform:scaleX(0)}

/* ============ Opening sequence ============ */
html.op:not(.op-go) .slide.is-on{transform:scale(1.12)}
html.op:not(.op-go) .hdr{transform:translateY(-100%)}
html.op:not(.op-go) .hero h1 .script{-webkit-mask-position:100% 0;mask-position:100% 0}
html.op .hero h1 .script{-webkit-mask:linear-gradient(100deg,#000 46%,transparent 56%) 0 0/230% 100% no-repeat;mask:linear-gradient(100deg,#000 46%,transparent 56%) 0 0/230% 100% no-repeat}
html.op:not(.op-go) .hero h1 .script{-webkit-mask-position:100% 0;mask-position:100% 0}
html.op .h1-l{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.h1-li{display:block}
html.op:not(.op-go) .h1-li{transform:translateY(112%)}
html.op:not(.op-go) .hero-facts,html.op:not(.op-go) .hero-ctas,html.op:not(.op-go) .hero-ctrl,html.op:not(.op-go) .bbar-f{opacity:0;transform:translateY(22px)}
html.op .hero-media{clip-path:inset(0% 0% 0% 0% round 0px)}
html.op:not(.op-go) .hero-media{clip-path:inset(9% 7% 9% 7% round 24px)}
html.op-go .hero-media{transition:clip-path 1.15s cubic-bezier(.62,.02,.16,1)}
html.op-go .slide.is-on{transition:transform 1.5s cubic-bezier(.22,.68,.2,1)}
html.op-go .hdr{transition:transform .75s var(--ease) .2s}
html.op-go .hero h1 .script{transition:-webkit-mask-position .95s cubic-bezier(.4,.1,.3,1) .35s,mask-position .95s cubic-bezier(.4,.1,.3,1) .35s}
html.op-go .h1-li{transition:transform .85s var(--ease) .6s}
html.op-go .hero-facts{transition:opacity .7s ease .8s,transform .8s var(--ease) .8s}
html.op-go .hero-ctas{transition:opacity .7s ease .95s,transform .8s var(--ease) .95s}
html.op-go .hero-ctrl{transition:opacity .7s ease 1.05s,transform .8s var(--ease) 1.05s}
html.op-go .bbar-f{transition:opacity .7s ease 1s,transform .85s var(--ease) 1s}

/* ============ Hero ============ */
.slide{will-change:clip-path,transform}
.slide.is-drag{visibility:visible;z-index:3}
@media (prefers-reduced-motion:no-preference){
  .slide.is-on img,.slide.is-prev img,.slide.is-drag img{animation:kb 10s linear both}
  .hero.paused .slide img{animation-play-state:paused}
}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero.dragging,.hero.dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.hf-short{display:none}
.hero-more .ico{width:20px;height:20px}
@media (min-width:900px){.hero-book{display:none}}
@media (max-width:599px){.hf-long{display:none}.hf-short{display:inline}}
/* phones: the photo stays clear on top, the text sits on a calm petrol base that melts into it */
@media (max-width:899px){
  .hero{--melt:clamp(150px,24svh,210px);background:#082A34}
  .hero-media{bottom:calc(var(--melt) - 2px)}
  .hero-in{padding-bottom:12px}
  .hero-facts{margin-top:12px;font-size:1rem;line-height:1.5}
  .hero-ctas{margin-top:18px;gap:2px 18px;align-items:center}
  .hero-ctas .hero-book{flex:1 1 100%}
  .hero-ctas .hero-more{flex:0 0 auto;min-height:44px;padding:0;border:0;font-weight:600;background:none}
  .hero-ctrl{margin-top:4px}
  .hero-ctrl .hero-cap{display:none}
}

/* ============ Booking bar ============ */
.bf-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;min-width:0}
.bf-date,.bf-arrow{display:none}
.js .bf-native{display:none}
.js .bf-date{display:flex}
.js .bf-dates{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.js .bf-arrow{display:grid;place-items:center;color:var(--ink-3)}
.bf-arrow .ico{width:18px;height:18px}
.bf-date.is-act,.bf-btn[aria-expanded="true"]{background:var(--sea)}
.bf-t,.dk-v,.sd-v{white-space:nowrap}
.is-empty{color:var(--ink-3);font-weight:500}
.bf-n{white-space:pre}

/* ============ Date picker ============ */
.dp{position:absolute;left:10px;bottom:calc(100% + 14px);z-index:9;width:min(704px,calc(100% - 20px));background:#fff;border-radius:var(--r);box-shadow:var(--float);padding:14px 20px 14px;color:var(--ink);--focus:var(--petrol);text-align:left;font-size:1rem}
.dp.down{bottom:auto;top:calc(100% + 10px)}
.dp[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.dp:not([hidden]):not(.dp-inline){animation:dpin .3s var(--ease)}}
@keyframes dpin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dp-navs{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;pointer-events:none}
.dp-nav{pointer-events:auto;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);display:grid;place-items:center;transition:background-color .2s,opacity .2s}
.dp-nav:hover:not(:disabled){background:var(--sea)}
.dp-nav:disabled{opacity:.28;cursor:default}
.dp-nav .ico{width:22px;height:22px}
.dp-prev .ico{transform:rotate(90deg)}
.dp-next .ico{transform:rotate(-90deg)}
.dp-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;touch-action:pan-y pinch-zoom}
.dp-g{width:100%;border-collapse:collapse;table-layout:fixed}
.dp-g caption{height:44px;line-height:44px;font-weight:700;font-size:1.0625rem;color:var(--ink)}
.dp-g th{padding:4px 0 6px;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.dp-g td{padding:1px 0;text-align:center}
.dp-g td.rg{background:var(--sea-2)}
.dp-g td.rg-s{background:linear-gradient(90deg,transparent 50%,var(--sea-2) 50%)}
.dp-g td.rg-e{background:linear-gradient(90deg,var(--sea-2) 50%,transparent 50%)}
.dp-g td.pv{background:var(--sea)}
.dp-g td.pv.rg-s{background:linear-gradient(90deg,transparent 50%,var(--sea) 50%)}
.dp-g td.pv.rg-e{background:linear-gradient(90deg,var(--sea) 50%,transparent 50%)}
.dp-d{position:relative;display:inline-grid;place-items:center;width:44px;max-width:100%;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;transition:background-color .15s,color .15s}
.dp-d:hover:not(:disabled):not(.sel){background:#fff;box-shadow:inset 0 0 0 1.5px var(--petrol)}
.dp-d:disabled{color:#A7B9BF;cursor:default}
.dp-d.today::after{content:"";position:absolute;left:50%;bottom:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.dp-d.sel{background:var(--petrol);color:#fff;font-weight:700}
.dp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.dp-sum{font-weight:600;color:var(--ink);line-height:1.35;min-width:0}
.dp-act{display:flex;align-items:center;gap:6px;margin-left:auto}
.dp-clear{min-height:44px;padding:0 12px;border:0;background:none;color:var(--ink-2);font-weight:500;text-decoration:underline;text-underline-offset:.2em}
.dp-clear:hover{color:var(--ink)}
.dp-inline{position:static;width:auto;padding:4px 0 0;box-shadow:none;border-radius:0}
.dp-inline .dp-navs{left:-8px;right:-8px;top:4px}
.dp-inline .dp-months{grid-template-columns:minmax(0,1fr)}
.dp-inline{position:relative}

/* ============ Docked booking bar ============ */
.dock{display:none}
@media (min-width:1024px){
  html{scroll-padding-top:calc(var(--hh) + 76px)}
  .js .dock{display:block;position:fixed;left:0;right:0;top:var(--hh);z-index:45;background:#fff;color:var(--ink);--focus:var(--petrol);box-shadow:0 1px 0 var(--line),0 12px 24px -20px rgba(8,42,52,.4);--y:calc(-100% - var(--hh));transform:translateY(var(--y));visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
  .js .dock.show{--y:0px;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
  .hdr.hide + .dock.show{--y:calc(-1 * var(--hh))}
}
.dock-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,.95fr) auto;align-items:center;gap:6px;padding-block:7px}
.dk{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:48px;padding:3px 14px;border:0;background:none;border-radius:10px;text-align:left;color:inherit;transition:background-color .2s}
.dk:hover,.dk.is-act,.dk[aria-expanded="true"]{background:var(--sea)}
.dk-l{font-size:.75rem;font-weight:600;line-height:1.3;color:var(--ink-2);white-space:pre}
.dk-v{font-weight:600;font-size:.98rem;line-height:1.3;color:var(--ink)}
.dk-v.is-empty{color:var(--ink-3);font-weight:500}
.dk-go{min-height:46px;margin-left:6px;white-space:nowrap}

/* ============ Booking sheet ============ */
.sheet{max-height:92svh;overflow-y:auto;overscroll-behavior:contain;--focus:var(--petrol)}
.sheet-grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--sea-3);margin:-8px auto 14px}
.sheet-d{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.sd{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:60px;padding:8px 12px;border:1.5px solid var(--field);border-radius:var(--r-btn);background:#fff;color:var(--ink);text-align:left;transition:border-color .2s,box-shadow .2s}
.sd.is-act{border-color:var(--petrol);box-shadow:0 0 0 1px var(--petrol)}
.sd-l{font-size:.8125rem;font-weight:600;color:var(--ink-2);white-space:pre}
.sd-v{font-weight:600;font-size:1.0313rem}
.sheet-cal[hidden],.sheet-main[hidden]{display:none}
dialog:focus,dialog:focus-visible{outline:none}
#req-t:focus{outline:none}

/* ============ Request form ============ */
.fg-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:600px){.fg-pair{gap:20px}}
.req-top{display:grid;gap:8px;margin-bottom:22px}
.req-top[hidden],.req-hand[hidden]{display:none}
.req-sum{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-btn);background:var(--sea);color:var(--ink);font-weight:600;line-height:1.4}
.req-sum .ico{width:20px;height:20px;margin-top:1px}
.req-hand{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.req-talk{font-size:.9375rem;color:var(--ink-2);flex:1 1 220px}
.req-talk .tlink{min-height:44px}
.req-note{flex:1 1 100%}
@media (prefers-reduced-motion:no-preference){
  #form-card.hand{animation:handglow 1.8s ease both}
  .done:not([hidden]) .done-ico{animation:donepop .55s var(--ease) both}
  .done:not([hidden]) .done-ico path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .6s ease .2s forwards}
}
@keyframes handglow{0%{box-shadow:0 0 0 0 rgba(11,52,64,0)}30%{box-shadow:0 0 0 5px rgba(11,52,64,.16)}100%{box-shadow:0 0 0 0 rgba(11,52,64,0)}}
@keyframes donepop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.done-ico path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .dock,.hdr,.dp,.nav-ink,.btn,.btn::after{transition:none!important;animation:none!important}
}

/* ===== 20-e2.css ===== */
/* ============ Typography ============ */
h1,h2,h3{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}

/* ============ Accent discipline: coral only for buttons and the script ============ */
.amen .ico,.mini .ico,.svc .ico,.hl .ico,.place .ico,.faq summary .ico,.ct .ico,.map-pin,.done-ico{color:var(--petrol)}

/* ============ Heading lines rise from a mask ============ */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln-i{display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms + var(--hd,0ms))}
.split:not(.go) .ln-i{transform:translateY(108%)}

/* ============ Photos: clip reveal + inner depth ============ */
.ph img{transform:translate3d(0,var(--py,0px),0) scale(calc(var(--z,1) * var(--rs,1) * var(--pz,1)))}
.phr{transition:clip-path 1.25s cubic-bezier(.2,.7,.2,1)}
.phr img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.phr:not(.in){clip-path:inset(7% 7% 7% 7% round var(--r))}
.phr:not(.in) img{--rs:1.1}
.phr.in{clip-path:inset(0 0 0 0 round var(--r))}
.ph[data-par]{--pz:1.08}
.ph[data-par] img{will-change:transform}

/* ============ L'hotel ============ */
.intro-ph{display:block;position:relative;padding:0 0 18% 0}
.iph-main .ph{aspect-ratio:4/5;border-radius:var(--r)}
.iph-main{width:86%}
.iph-sub{position:absolute;right:0;bottom:0;width:48%}
.iph-sub .ph{aspect-ratio:4/3;outline:8px solid #fff;border-radius:var(--r)}
.iph-sub .cap{margin-top:12px}
@media (min-width:960px){
  .intro{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
  .intro-ph{padding:0 0 16% 6%}
  .iph-main{width:84%}
  .iph-sub{width:46%}
}
.hl{gap:22px 28px}
.hl li{align-items:flex-start;gap:14px;font-weight:400}
.hl li .ico{width:26px;height:26px;margin-top:1px}
.hl li span{display:flex;flex-direction:column;gap:2px;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.hl li b{font-weight:650;font-size:1rem;color:var(--ink)}
@media (max-width:519px){.hl{gap:18px}}

/* ============ Colazione: no script label above the heading ============ */
.feat-head h2{margin-top:0}

/* ============ Servizi showcase ============ */
.showcase{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.show-list{border-top:1px solid var(--sea-3)}
.show-it{border-bottom:1px solid var(--sea-3)}
.show-h{font-size:inherit;margin:0}
.show-b{display:flex;align-items:center;gap:18px;width:100%;min-height:72px;padding:18px 4px;border:0;background:none;text-align:left;color:var(--ink);font:700 clamp(1.25rem,.9vw + 1rem,1.75rem)/1.2 var(--sans);letter-spacing:-.02em;transition:color .3s}
.show-b .show-k{flex:none;width:2.2em;font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--ink-3);font-variant-numeric:tabular-nums}
.show-b .ico{margin-left:auto;width:22px;height:22px;color:var(--petrol);transition:transform .35s var(--ease)}
.show-b[aria-expanded="true"] .ico{transform:rotate(180deg)}
.show-p{padding:0 4px 26px calc(2.2em * .875 + 18px + 4px)}
.show-p p{max-width:30em}
.show-ph{aspect-ratio:4/3;margin-bottom:16px}
.js .show-it:not(.is-on) .show-p{display:none}
.show-stage{display:none}
@media (min-width:960px){
  .showcase{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:clamp(48px,6vw,96px);align-items:center}
  .show-b{min-height:92px}
  .show-b .ico{display:none}
  .js .show-b{color:var(--ink-3)}
  .js .show-it.is-on .show-b,.js .show-b:hover{color:var(--ink)}
  .js .show-ph{display:none}
  .js .show-stage{display:block;position:relative;aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;background:var(--sea-3)}
  .show-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);opacity:0;transform:scale(calc(var(--z,1) * 1.08));transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
  .show-stage img.on{opacity:1;transform:scale(var(--z,1))}
  .show-p{padding-bottom:28px}
}

/* ============ Band: grows to full width as it scrolls in ============ */
.js .band{clip-path:inset(0 calc(var(--bi,1) * var(--bm,6vw)) round calc(var(--bi,1) * 24px));--bm:6vw}
@media (max-width:699px){.js .band{--bm:4vw}}
.band-btn{border-color:var(--petrol);color:var(--petrol)}
@media (min-width:900px){
  .band::after{display:block;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 42%)}
  .band-in{text-align:left}
  .band h2{margin:0;text-shadow:0 1px 18px rgba(255,255,255,.35)}
}
@media (max-width:899px){
  .band-btn{border-color:#fff;color:#fff}
  @media (hover:hover){.band-btn:hover{background:#fff;color:var(--petrol)}}
}

/* ============ Caorle skyline ============ */
.sky{position:relative;height:auto;overflow:visible;margin:8px 0 0;color:var(--petrol)}
.sky svg{width:100%;height:auto;aspect-ratio:1400/214;overflow:visible}
.sky path{vector-effect:non-scaling-stroke;stroke-width:1.35;transition:stroke .45s ease,opacity .45s ease}
.sky .t{stroke-width:1}
.sky .w,.sky .sky-mare path{stroke:var(--sea-3);stroke-width:1.1}
.sky-lm{transition:opacity .45s ease}
.sky[data-on] .sky-lm{opacity:.32}
.sky[data-on] .sky-lm.lit{opacity:1}
.sky .sky-lm.lit path{stroke:var(--coral)}
.sky-lbl{position:absolute;left:0;top:0;transform:translate(-50%,-130%);padding:5px 10px;border-radius:8px;background:var(--petrol);color:#fff;font-size:.8125rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s ease}
.sky[data-on] .sky-lbl{opacity:1}
.js .sky.pre svg{clip-path:inset(0 100% 0 0)}
.sky.draw svg{clip-path:inset(0 0 0 0);transition:clip-path 2.6s cubic-bezier(.45,.05,.25,1)}
.place{cursor:default;border-radius:12px;transition:background-color .3s}
.place .ico{width:28px;height:28px;margin-top:2px}
@media (hover:hover){.place:hover{background:var(--sea)}}
.place.lit{background:var(--sea)}
.places .place{padding:12px 14px;margin:-12px -14px}

/* ============ Galleria strip ============ */
.gal-ctl{display:flex;align-items:center;gap:20px}
.gal-btns{display:none;gap:8px}
@media (min-width:700px){.js .gal-btns{display:flex}}
.gal{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:0 var(--gut) 8px;scroll-padding-inline:var(--gut);scrollbar-width:none;margin-top:32px;cursor:grab;-webkit-user-select:none;user-select:none}
.gal.dragging{cursor:grabbing;scroll-snap-type:none}
.gal.dragging .g-it{pointer-events:none}
@media (min-width:1280px){.gal{padding-inline:calc((100% - 1200px) / 2);scroll-padding-inline:calc((100% - 1200px) / 2)}}
.g{flex:0 0 auto;width:min(80vw,560px);scroll-snap-align:start}
.g-it{display:block;text-decoration:none;color:inherit;border-radius:var(--r);cursor:zoom-in}
.g-ph{aspect-ratio:4/3}
@media (min-width:700px){.g{width:clamp(380px,38vw,560px)}}
.g-it img{-webkit-user-drag:none}
@media (hover:hover){.g-it:hover img{transform:scale(calc(var(--z,1) * 1.04))}}
.gal-prog{height:2px;margin-top:22px;background:var(--sea-3);border-radius:2px;overflow:hidden}
.gal-prog i{display:block;height:100%;width:100%;background:var(--petrol);transform-origin:left;transform:scaleX(var(--gp,.2));transition:transform .15s linear}
.lb-fig img{transform-origin:0 0}
.lb.flip{background:transparent}
.lb.flip::backdrop{background:transparent}
.lb-bg{position:absolute;inset:0;background:#061B22;pointer-events:none}

/* ============ Winter Wonderland card ============ */
.winter h2{font-family:var(--sans);font-weight:700;color:#fff;font-size:clamp(1.375rem,.6vw + 1.2rem,1.75rem);line-height:1.2;letter-spacing:-.015em}

@media (prefers-reduced-motion:reduce){
  .split .ln-i,.phr,.phr img,.sky svg,.show-stage img{transition:none!important;transform:none!important;clip-path:none!important}
  .js .band{clip-path:none}
}

/* ===== 30-e3.css ===== */
/* ================= "Mare": colour fields, moving shorelines, a display serif ================= */
:root{
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sand0:#FBF6EE;--sand:#F4EADB;--sand2:#EADCC6;
  --aqua0:#E4F4F2;--aqua:#CDEDEA;--aqua2:#9ED8D5;
  --deep:#0C3E50;--deep2:#082C3A;--night:#071F29;
  --edge:max(var(--gut),calc((100vw - 1200px) / 2));
}
body{background:var(--sand0)}
::selection{background:var(--aqua2);color:var(--deep2)}

/* headings in the serif, the script stays for "Benvenuti" and "Caorle" */
h1,h2,.show-b{font-family:var(--serif);font-optical-sizing:auto}
h1,h2{font-weight:560;letter-spacing:-.018em}
h2{font-size:clamp(2.125rem,2.3vw + 1.25rem,3.75rem);line-height:1.05}
.hero h1{font-weight:580;font-size:clamp(2.75rem,3.6vw + 1.4rem,5.25rem);line-height:.98;letter-spacing:-.025em}
.hero h1 .script{font-size:1.02em;margin-bottom:.06em}
.band h2{font-size:clamp(2.25rem,3.4vw + 1rem,4.5rem);line-height:1.02}
.lead{font-size:clamp(1.0625rem,.35vw + 1rem,1.25rem)}

/* ---------- moving shorelines between colour fields ---------- */
.sec{position:relative}
.wv{position:absolute;left:0;right:0;top:calc(-1 * var(--wvh) + 1px);height:var(--wvh);overflow:hidden;pointer-events:none;z-index:2;--wvh:clamp(40px,5.2vw,84px)}
.wv svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block}
.wv .wv-a{fill:var(--shore,#9ED8D5);opacity:.55}
.wv .wv-b{fill:var(--foam,#fff);opacity:.7}
.wv .wv-c{fill:var(--top,#fff)}
@media (prefers-reduced-motion:no-preference){
  .wv.on .wv-a{animation:wvx 24s linear infinite}
  .wv.on .wv-b{animation:wvx 33s linear infinite reverse}
  .wv.on .wv-c{animation:wvx 47s linear infinite}
}
@keyframes wvx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wv-hero{top:auto;bottom:-1px;z-index:5;--top:var(--sand);--foam:#fff;--shore:#9ED8D5;--wvh:clamp(44px,5.6vw,92px)}
@media (max-width:899px){.wv-hero{--wvh:40px}}

/* ---------- colour fields ---------- */
#hotel{--top:var(--sand);background:linear-gradient(180deg,var(--sand) 0%,var(--sand0) 70%)}
#camere{--foam:#1C8E9B;--shore:#9ED8D5;--top:var(--deep);--focus:#fff;background:radial-gradient(1100px 520px at 88% 0%,rgba(158,216,213,.16),transparent 62%),linear-gradient(180deg,var(--deep) 0%,var(--deep2) 100%);color:#C9DEE2}
#colazione{--foam:#fff;--shore:#9ED8D5;--top:#F8E7D3;background:linear-gradient(180deg,#F8E7D3 0%,#FBF2E6 100%)}
#servizi{--foam:#fff;--shore:#7FCBC8;--top:var(--aqua);background:linear-gradient(180deg,var(--aqua) 0%,var(--aqua0) 100%);overflow:hidden}
#caorle{--foam:#1C8E9B;--shore:#9ED8D5;--top:var(--deep);--focus:#fff;background:radial-gradient(900px 480px at 12% 100%,rgba(242,184,75,.10),transparent 60%),linear-gradient(180deg,var(--deep) 0%,var(--night) 100%);color:#C9DEE2}
#galleria{--foam:#fff;--shore:#9ED8D5;--top:var(--sand);background:linear-gradient(180deg,var(--sand) 0%,var(--sand0) 100%)}
#info{--foam:#fff;--shore:#9ED8D5;--top:var(--aqua0);background:linear-gradient(180deg,var(--aqua0) 0%,#F1F9F8 100%);overflow:hidden}
#contatti{--foam:#fff;--shore:#9ED8D5;--top:var(--sand);background:linear-gradient(180deg,var(--sand) 0%,var(--sand0) 100%)}
.ft{position:relative;--foam:#1C8E9B;--shore:#9ED8D5;--top:var(--petrol)}
.ft .wv{z-index:1}

/* ripples on the light-water sections: a quiet texture, drifting */
#servizi::before,#info::before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(100% + 320px);pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='56' viewBox='0 0 320 56'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 14q40-9 80 0t80 0t80 0t80 0'/%3E%3Cpath d='M-40 42q40-9 80 0t80 0t80 0t80 0t80 0' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent)}
@media (prefers-reduced-motion:no-preference){#servizi.wv-live::before,#info.wv-live::before{animation:rip 60s linear infinite}}
@keyframes rip{to{transform:translateX(-320px)}}
#servizi > .wrap,#info > .wrap{position:relative;z-index:1}

/* ---------- dark sections: type and components ---------- */
#camere h2,#camere h3,#caorle h2,#caorle h3{color:#fff}
#camere .lead,#caorle .lead{color:#DCEAEC}
#camere .amen li{color:#fff}
#camere .amen .ico,#caorle .place .ico{color:var(--aqua2)}
#camere .rbtn{border-color:rgba(255,255,255,.7);color:#fff}
@media (hover:hover){#camere .rbtn:hover{background:#fff;color:var(--deep)}}
#camere .tlink,#caorle .tlink{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
#camere .tlink:hover,#caorle .tlink:hover{text-decoration-color:#fff}
#camere .sl-cap{color:#BFD6DB}
#camere .sl-num{color:#fff}
#camere .slider,#camere .ph{background:#0E4A5E}
#caorle .script,.caorle h2 .script{color:var(--coral-l)}
#caorle .dist{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
#caorle .dist h3{color:#fff}
#caorle .dist dt{color:#B9D1D6}
#caorle .dist dd{color:#fff}
#caorle .dist dl div{border-top-color:rgba(255,255,255,.14)}
#caorle .place h3{color:#fff}
#caorle .place p{color:#B9D1D6}
@media (hover:hover){#caorle .place:hover{background:rgba(255,255,255,.06)}}
#caorle .place.lit{background:rgba(255,255,255,.08)}
#caorle .sky{color:#E6F2F3}
#caorle .sky .w,#caorle .sky .sky-mare path{stroke:rgba(158,216,213,.5)}
#caorle .sky .sky-lm.lit path{stroke:var(--sun)}
#caorle .sky-lbl{background:var(--sun);color:var(--deep2)}
.sunrise{display:flex;align-items:center;gap:12px;margin:6px 0 0;color:#DCEAEC;font-size:1rem;line-height:1.5}
.sunrise[hidden]{display:none}
.sunrise .ico{width:28px;height:28px;color:var(--sun);flex:none}
.sunrise b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:960px){.sunrise{grid-column:1 / -1}}

/* ---------- Camere: the photos run to the edge of the screen ---------- */
#camere .rooms{row-gap:28px}
@media (min-width:960px){
  #camere .rooms{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);column-gap:clamp(48px,6vw,104px)}
  #camere .rooms-media{margin-left:calc(-1 * var(--edge))}
  #camere .slider{border-radius:0 28px 28px 0;aspect-ratio:5/4}
  #camere .sl-bar{padding-left:var(--edge)}
}

/* ---------- Colazione: warmer, deeper composition ---------- */
#colazione .feat-ph .ph-sub{border-color:#FBF2E6}
.feat-ph .ph{box-shadow:0 30px 60px -34px rgba(8,42,52,.45)}

/* ---------- Servizi ---------- */
.show-b{font-weight:520;letter-spacing:-.015em;font-size:clamp(1.375rem,1.1vw + 1.05rem,2.125rem)}
.js .show-b{color:rgba(11,52,64,.48)}
.js .show-it.is-on .show-b,.js .show-b:hover{color:var(--ink)}
@media (max-width:959px){.js .show-b{color:var(--ink)}}
.show-b .show-k{font-family:var(--sans)}
.show-list,.show-it{border-color:rgba(11,52,64,.14)}
.show-stage{border-radius:28px!important;box-shadow:0 40px 80px -40px rgba(8,42,52,.55)}
.svc-wrap{margin-top:clamp(48px,6vw,80px)}
.svc-p{max-width:46em;font-size:clamp(1.0625rem,.3vw + 1rem,1.25rem);line-height:1.75;color:var(--ink-2)}
.svc-p b{color:var(--ink);font-weight:650}

/* ---------- photos: softer, deeper ---------- */
.iph-main .ph,.show-ph,.g-ph{box-shadow:0 30px 60px -36px rgba(8,42,52,.5)}
.iph-sub .ph{outline-color:var(--sand0)}
.g-ph{background:var(--sand2)}
.hl{border-top:1px solid rgba(11,52,64,.12);padding-top:28px}
.hl li .ico{color:var(--turq,#1C8E9B)}

/* ---------- Winter card ---------- */
.winter{background:radial-gradient(600px 240px at 0% 0%,rgba(242,184,75,.14),transparent 70%),linear-gradient(120deg,var(--deep),var(--deep2))}
.winter .w-ico{color:var(--sun)}

/* ---------- forms and FAQ on colour ---------- */
.form-card{box-shadow:0 40px 80px -48px rgba(8,42,52,.45)}
.faq summary{font-family:var(--sans)}


/* ---------- small living details ---------- */
#camere .slider .ph img{transform-origin:72% 46%}
@media (prefers-reduced-motion:no-preference){
  .sky .sky-mare{animation:tide 9s ease-in-out infinite alternate}
}
@keyframes tide{from{transform:translateX(-14px)}to{transform:translateX(14px)}}

@media (prefers-reduced-motion:reduce){.wv svg,#servizi::before,#info::before{animation:none!important}}

/* ===== 40-e4.css ===== */
/* ================= Una giornata da noi ================= */
#servizi.day{--d0:#F8E7D3;--d1:#D3EFEC;--d2:#AEE0DC;--d3:#F4DDBB;--top:var(--d0);background:var(--d0);overflow:visible;overflow-x:clip;transition:background-color 1.1s ease}
#servizi.day[data-day="1"]{--top:var(--d1);background-color:var(--d1)}
#servizi.day[data-day="2"]{--top:var(--d2);background-color:var(--d2)}
#servizi.day[data-day="3"]{--top:var(--d3);background-color:var(--d3)}
#servizi.day .wv .wv-c{transition:fill 1.1s ease}
.day-head{max-width:740px}
.day-grid{margin-top:clamp(40px,5vw,72px)}
.day-media{display:none}
.day-steps{list-style:none;margin:0;padding:0;display:grid;gap:64px}
.day-ph{position:relative;overflow:hidden;border-radius:22px;aspect-ratio:4/3;margin-bottom:22px;background:rgba(11,52,64,.08);box-shadow:0 30px 60px -36px rgba(8,42,52,.5)}
.day-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.day-when{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:650;font-size:.9375rem;color:#0E6E79;letter-spacing:.01em}
.day-when .ico{width:22px;height:22px}
.day-step h3{font-family:var(--serif);font-weight:560;font-size:clamp(1.75rem,1.4vw + 1.2rem,2.625rem);line-height:1.06;letter-spacing:-.015em;margin:0 0 14px;color:var(--ink)}
.day-step p:not(.day-when){max-width:30em;font-size:clamp(1.0625rem,.3vw + 1rem,1.1875rem);line-height:1.7}
#servizi.day .svc-wrap{margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(11,52,64,.14)}
@media (min-width:960px){
  .day-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:clamp(56px,7vw,120px);align-items:start}
  .js .day-media{display:block;position:sticky;top:calc(var(--hh) + 92px);height:min(calc(100vh - var(--hh) - 132px),700px)}
  .day-frame{position:relative;height:100%;border-radius:30px;overflow:hidden;background:rgba(11,52,64,.1);box-shadow:0 44px 90px -46px rgba(8,42,52,.6)}
  .day-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);opacity:0;transform:scale(1.08);transition:opacity 1s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
  .day-frame img.on{opacity:1;transform:scale(1)}
  .day-frame::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(0deg,rgba(4,28,36,.5),rgba(4,28,36,0));pointer-events:none}
  .day-sun{position:absolute;left:28px;bottom:22px;z-index:1;width:200px;height:auto;overflow:visible}
  .day-arc{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round}
  .day-hz{stroke:rgba(255,255,255,.85);stroke-width:1.6}
  .day-dot{fill:#FFD27A;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .js .day-step .day-ph{display:none}
  .js .day-steps{gap:0}
  .js .day-step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .7s ease}
  .js .day-step.is-on{opacity:1}
  .js .day-step:first-child{min-height:56vh;justify-content:flex-start;padding-top:8vh}
  .js .day-step:last-child{min-height:60vh}
}

/* ================= Il mare, oggi ================= */
.oggi{position:relative;display:flex;align-items:flex-end;min-height:clamp(560px,86vh,820px);color:#fff;background:#123B52;--focus:#fff;overflow:hidden;
  --og-s0:#5FAEDC;--og-s1:#CDE9F3;--og-w0:#1F8BA0;--og-w1:#0C3E50;--og-stars:0;--og-sun:#FFF3C4}
.oggi-scene{position:absolute;inset:0}
.oggi-svg{display:block;width:100%;height:100%}
.og-s0{stop-color:var(--og-s0)}
.og-s1{stop-color:var(--og-s1)}
.og-w0{stop-color:var(--og-w0)}
.og-w1{stop-color:var(--og-w1)}
.og-stars circle{fill:#fff;opacity:var(--og-stars)}
.og-sunc{fill:var(--og-sun)}
.og-sunc,.og-glow,.og-glint{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.og-glint path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .og-glint path{animation:glint 3.2s ease-in-out infinite}
  .og-glint path:nth-child(2n){animation-delay:-1.1s;animation-duration:2.7s}
  .og-glint path:nth-child(3n){animation-delay:-2s;animation-duration:3.8s}
}
@keyframes glint{0%,100%{opacity:.18}50%{opacity:.8}}
.oggi::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(4,24,32,.72) 0%,rgba(4,24,32,.38) 38%,rgba(4,24,32,0) 66%)}
.oggi-in{position:relative;z-index:1;padding:120px 0 clamp(80px,10vh,120px)}
.oggi h2{color:#fff;font-size:clamp(2.5rem,3.4vw + 1.2rem,4.75rem);line-height:1;text-shadow:0 2px 24px rgba(4,24,32,.35)}
.oggi-when{margin-top:12px;font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);color:rgba(255,255,255,.9)}
.oggi-data{display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,64px);margin:34px 0 0}
.oggi-data[hidden]{display:none}
.oggi-data div{min-width:0}
.oggi-data dt{font-size:.9375rem;font-weight:600;color:rgba(255,255,255,.78)}
.oggi-data dd{margin:2px 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,2.6vw + 1.4rem,4.25rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.oggi-data dd small{display:block;margin-top:8px;font-family:var(--sans);font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.8);line-height:1.3}
.oggi-sun{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:1.0625rem;color:rgba(255,255,255,.9)}
.oggi-sun[hidden]{display:none}
.oggi-sun .ico{width:28px;height:28px;color:#FFD27A}
.oggi-sun b{color:#fff;font-variant-numeric:tabular-nums}
.og-sep{margin:0 10px;opacity:.6}
.oggi-note{margin-top:14px;font-size:.8125rem;color:rgba(255,255,255,.7)}
.oggi-note a{color:#fff}
.oggi-note[hidden]{display:none}
@media (max-width:599px){.oggi-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){
  .oggi{flex-direction:column;align-items:stretch;min-height:0;background:linear-gradient(180deg,#0C3E50,#082C3A)}
  .oggi-scene{position:relative;inset:auto;height:clamp(240px,62vw,320px)}
  .oggi::after{inset:auto 0 0;top:0;height:clamp(240px,62vw,320px);background:linear-gradient(0deg,rgba(8,44,58,.9) 0%,rgba(8,44,58,0) 45%)}
  .oggi-in{padding:8px 0 72px;margin-top:-56px}
}
#caorle{--top:#0B3242}

/* ================= Scopri la camera ================= */
.hs{position:absolute;inset:0;z-index:2;pointer-events:none}
.hs[hidden]{display:none}
.hs-dot{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;border-radius:50%;background:none;pointer-events:auto;cursor:pointer}
.hs-dot::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.35),0 4px 14px rgba(4,24,32,.35);transition:transform .25s var(--ease)}
.hs-dot::after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--coral)}
.hs-dot:hover::before,.hs-dot[aria-expanded="true"]::before{transform:scale(1.15)}
@media (prefers-reduced-motion:no-preference){.hs-dot::before{animation:hsp 2.6s ease-out infinite}}
@keyframes hsp{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6),0 4px 14px rgba(4,24,32,.35)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0),0 4px 14px rgba(4,24,32,.35)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 4px 14px rgba(4,24,32,.35)}}
.hs-tip{position:absolute;left:0;top:0;z-index:3;width:min(260px,70%);padding:14px 16px;border-radius:14px;background:#fff;color:var(--ink-2);font-size:.9375rem;line-height:1.45;box-shadow:0 18px 40px -16px rgba(4,24,32,.5);pointer-events:auto}
.hs-tip b{display:block;margin-bottom:2px;color:var(--ink);font-family:var(--serif);font-weight:560;font-size:1.125rem}
.hs-tip[hidden]{display:none}
.hs-hint{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.9375rem;color:#BFD6DB}
.hs-hint i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--coral);flex:none}

@media (prefers-reduced-motion:reduce){
  #servizi.day,.day-frame img,.day-dot,.og-sunc,.og-glow,.og-glint,.js .day-step{transition:none!important}
}

/* ===== 50-site.css ===== */
/* ================= Multi-page site: page hero, colour fields, components, umbrella beach ================= */

/* ---------- home hero, refined ---------- */
.hero h1{font-size:clamp(2.875rem,4.2vw + 1.2rem,6rem);line-height:.96}
.hero h1 .script{font-size:.9em}
.hero-facts{max-width:34em}
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 80% at 50% 120%,rgba(4,24,32,.35),transparent 60%)}
.s-live{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(6,30,40,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font-size:.9375rem;font-weight:500;line-height:1.3}
.s-live[hidden]{display:none}
.s-live .ico{width:20px;height:20px;color:var(--sun)}
.s-live b{font-weight:700;font-variant-numeric:tabular-nums}
.s-live-sep{opacity:.55}
@media (max-width:599px){.s-live{font-size:.875rem;margin-bottom:12px}}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;z-index:2;display:flex;align-items:flex-end;min-height:clamp(460px,74svh,760px);background:var(--deep);color:#fff;overflow:hidden;--focus:#fff;isolation:isolate}
.phero-media{position:absolute;inset:0}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transform:scale(1.07);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.phero.in .phero-media img{transform:none}
.phero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,24,32,.62) 0,rgba(4,24,32,0) 200px),linear-gradient(0deg,rgba(4,24,32,.78) 0%,rgba(4,24,32,.42) 38%,rgba(4,24,32,0) 70%)}
@media (min-width:900px){.phero::before{background:linear-gradient(180deg,rgba(4,24,32,.6) 0,rgba(4,24,32,0) 220px),linear-gradient(90deg,rgba(4,24,32,.58) 0%,rgba(4,24,32,.2) 45%,rgba(4,24,32,0) 70%),linear-gradient(0deg,rgba(4,24,32,.6) 0%,rgba(4,24,32,0) 55%)}}
.phero-in{position:relative;z-index:3;width:min(1200px,calc(100% - 2 * var(--gut)));margin:0 auto;padding:calc(var(--hh) + 56px) 0 clamp(84px,11vh,132px)}
.s-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 18px;padding:0;list-style:none;font-size:.9375rem;color:rgba(255,255,255,.86)}
.s-crumbs li{display:flex;align-items:center;gap:10px}
.s-crumbs li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
.s-crumbs a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:.22em;min-height:44px;display:inline-flex;align-items:center}
.phero h1{max-width:15ch;color:#fff;font-size:clamp(2.5rem,3.6vw + 1.3rem,5rem);line-height:.98;letter-spacing:-.025em;text-shadow:0 2px 24px rgba(4,24,32,.35)}
.phero h1 .script{display:block;margin-bottom:.06em;color:#FFDCCB;font-size:.82em;line-height:1.05}
@media (min-width:900px){.phero h1 .script{color:var(--coral-l)}}
.phero-lead{max-width:36em;margin-top:18px;font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);line-height:1.6;color:rgba(255,255,255,.94)}
.phero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.phero .wv-hero{z-index:4}
@media (prefers-reduced-motion:reduce){.phero-media img{transform:none;transition:none}}

/* ---------- colour fields ---------- */
.sec--sand{--top:var(--sand);--foam:#fff;--shore:#9ED8D5;background:linear-gradient(180deg,var(--sand) 0%,var(--sand0) 75%)}
.sec--sand0{--top:var(--sand0);--foam:#fff;--shore:#9ED8D5;background:var(--sand0)}
.sec--peach{--top:#F8E7D3;--foam:#fff;--shore:#9ED8D5;background:linear-gradient(180deg,#F8E7D3 0%,#FBF2E6 100%)}
.sec--aqua{--top:var(--aqua);--foam:#fff;--shore:#7FCBC8;background:linear-gradient(180deg,var(--aqua) 0%,var(--aqua0) 100%)}
.sec--deep{--top:var(--deep);--foam:#1C8E9B;--shore:#9ED8D5;--focus:#fff;background:radial-gradient(1100px 520px at 88% 0%,rgba(158,216,213,.14),transparent 62%),linear-gradient(180deg,var(--deep) 0%,var(--deep2) 100%);color:#C9DEE2}
.sec--night{--top:var(--deep);--foam:#1C8E9B;--shore:#9ED8D5;--focus:#fff;background:radial-gradient(900px 480px at 12% 100%,rgba(242,184,75,.10),transparent 60%),linear-gradient(180deg,var(--deep) 0%,var(--night) 100%);color:#C9DEE2}
.sec--deep h2,.sec--deep h3,.sec--night h2,.sec--night h3{color:#fff}
.sec--deep .lead,.sec--night .lead{color:#DCEAEC}
.sec--deep .tlink,.sec--night .tlink{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.sec--deep .ico,.sec--night .ico{color:var(--aqua2)}
.sec--deep .btn-line,.sec--night .btn-line{border-color:rgba(255,255,255,.8);color:#fff}
@media (hover:hover){.sec--deep .btn-line:hover,.sec--night .btn-line:hover{background:#fff;color:var(--deep)}}
.s-head{max-width:760px}
.s-head .lead{margin-top:18px}
.s-head--c{margin-inline:auto;text-align:center}
.s-kick{display:block;margin-bottom:6px;font-family:var(--script);font-size:clamp(1.75rem,1vw + 1.4rem,2.5rem);line-height:1.05;color:var(--coral-ink)}
.sec--deep .s-kick,.sec--night .s-kick{color:var(--coral-l)}
.s-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:30px}

/* ---------- split: photo + text ---------- */
.s-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:center}
.s-split + .s-split{margin-top:clamp(64px,8vw,120px)}
.s-split-ph{position:relative}
.s-split-ph .ph{aspect-ratio:5/4;border-radius:24px;box-shadow:0 34px 70px -40px rgba(8,42,52,.55)}
.s-split-ph .ph.r34{aspect-ratio:3/4}
.s-split-ph .s-inset{position:absolute;right:-4%;bottom:-8%;width:46%;border-radius:18px;outline:8px solid var(--sand0);box-shadow:0 24px 50px -28px rgba(8,42,52,.55)}
.sec--deep .s-split-ph .s-inset,.sec--night .s-split-ph .s-inset{outline-color:var(--deep)}
.s-split-ph .s-inset .ph{aspect-ratio:4/3;border-radius:18px;box-shadow:none}
.s-split-tx p + p{margin-top:14px}
.s-split-tx .lead{margin-top:18px}
@media (min-width:960px){
  .s-split{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:clamp(56px,7vw,120px)}
  .s-split--rev .s-split-ph{order:2}
}
@media (max-width:959px){.s-split-ph .s-inset{right:4%;bottom:-10%;width:44%}.s-split-ph{margin-bottom:24px}}

/* ---------- mosaics ---------- */
.s-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(36px,4vw,56px)}
.s-mosaic figure{margin:0;min-width:0;display:flex;flex-direction:column}
.s-mosaic .ph{width:100%;border-radius:18px;aspect-ratio:4/3}
.s-mosaic figcaption{margin-top:8px;font-size:.9375rem;color:var(--ink-2)}
.sec--deep .s-mosaic figcaption,.sec--night .s-mosaic figcaption{color:#B9D1D6}
.s-mosaic .m-wide{grid-column:1 / -1}
.s-mosaic .m-wide .ph{aspect-ratio:16/9}
.s-mosaic .m-tall .ph{aspect-ratio:3/4}
@media (min-width:900px){
  .s-mosaic{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(220px,21vw,330px);gap:18px}
  .s-mosaic .ph{flex:1;min-height:0;aspect-ratio:auto}
  .s-mosaic .m-wide .ph,.s-mosaic .m-tall .ph{aspect-ratio:auto}
  .s-mosaic .m-7{grid-column:span 7}.s-mosaic .m-5{grid-column:span 5}.s-mosaic .m-6{grid-column:span 6}
  .s-mosaic .m-4{grid-column:span 4}.s-mosaic .m-8{grid-column:span 8}.s-mosaic .m-3{grid-column:span 3}
  .s-mosaic .m-wide{grid-column:1 / -1;grid-row:span 2}
  .s-mosaic .m-tall{grid-row:span 2}
}

/* ---------- room cards ---------- */
.s-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(18px,2vw,28px);margin-top:clamp(36px,4vw,56px);list-style:none;padding:0}
.s-rcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px -36px rgba(8,42,52,.55);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.s-rcard .ph{aspect-ratio:4/3;border-radius:0}
.s-rcard-b{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px}
.s-rcard h3{font-family:var(--serif);font-weight:560;font-size:1.625rem;line-height:1.1}
.s-rcard h3 a{color:inherit;text-decoration:none}
.s-rcard h3 a::after{content:"";position:absolute;inset:0;border-radius:22px}
.s-rcard h3 a:focus-visible{outline:none}
.s-rcard:focus-within{box-shadow:0 0 0 3px var(--petrol),0 24px 50px -36px rgba(8,42,52,.55)}
.s-rcard p{font-size:1rem;line-height:1.6;color:var(--ink-2)}
.s-cap{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 12px 5px 8px;border-radius:999px;background:var(--aqua0);color:var(--ink);font-size:.875rem;font-weight:600}
.s-cap .ico{width:18px;height:18px;color:var(--petrol)}
.s-rcard-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-weight:650;color:var(--petrol)}
.s-rcard-go .ico{width:20px;height:20px;transition:transform .3s var(--ease)}
@media (hover:hover){
  .s-rcard:hover{transform:translateY(-4px);box-shadow:0 34px 60px -36px rgba(8,42,52,.6)}
  .s-rcard:hover .ph img{transform:scale(calc(var(--z,1) * 1.04))}
  .s-rcard:hover .s-rcard-go .ico{transform:translateX(4px)}
}
.s-rcard--now{outline:3px solid var(--coral);outline-offset:-3px}

/* ---------- specs and icon lists ---------- */
.s-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:26px;list-style:none;padding:0}
.s-specs li{display:flex;align-items:flex-start;gap:12px;line-height:1.35;color:var(--ink);font-weight:500}
.s-specs .ico{width:24px;height:24px;flex:none;color:var(--petrol)}
.sec--deep .s-specs li,.sec--night .s-specs li{color:#fff}
.s-specs--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.s-specs li span small{display:block;margin-top:3px;font-size:.9rem;font-weight:400;color:var(--ink-2)}
.sec--deep .s-specs li span small,.sec--night .s-specs li span small{color:#B9D1D6}
@media (max-width:419px){.s-specs{grid-template-columns:minmax(0,1fr)}}

/* ---------- room detail ---------- */
.s-room{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.s-room > *{grid-area:auto;min-width:0}
.s-room .slider{aspect-ratio:4/3;border-radius:24px}
@media (min-width:960px){.s-room{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.s-room-tx{position:sticky;top:calc(var(--hh) + 100px)}}
.s-room-tx h2{font-size:clamp(1.875rem,1.4vw + 1.4rem,2.75rem)}
.s-room-tx .lead{margin-top:16px}
.s-note{margin-top:14px;font-size:.875rem;color:var(--ink-3)}

/* ---------- CTA band ---------- */
.s-cta{text-align:center}
.s-cta h2{max-width:20ch;margin-inline:auto;font-size:clamp(2.125rem,2.8vw + 1.2rem,4rem)}
.s-cta .lead{max-width:34em;margin:18px auto 0}
.s-cta .s-more{justify-content:center}

/* ---------- typographic cards (trips, things to do, how to get here) ---------- */
.s-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px;margin-top:clamp(32px,4vw,52px);list-style:none;padding:0}
.s-tile{display:flex;flex-direction:column;gap:8px;padding:24px 24px 26px;border-radius:20px;background:#fff;box-shadow:0 18px 40px -32px rgba(8,42,52,.5)}
.sec--deep .s-tile,.sec--night .s-tile{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.s-tile .ico{width:30px;height:30px;color:var(--petrol)}
.sec--deep .s-tile .ico,.sec--night .s-tile .ico{color:var(--aqua2)}
.s-tile h3{font-family:var(--serif);font-weight:560;font-size:1.375rem;line-height:1.15}
.s-tile p{font-size:1rem;line-height:1.6}
.s-tile .s-dist{margin-top:auto;padding-top:6px;font-weight:650;color:var(--ink);font-size:.9375rem}
.sec--deep .s-tile .s-dist,.sec--night .s-tile .s-dist{color:#fff}

/* ---------- gallery page ---------- */
.s-gnav{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 clamp(36px,4vw,56px)}
.s-gnav::-webkit-scrollbar{display:none}
.s-gnav a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;text-decoration:none;box-shadow:0 8px 20px -14px rgba(8,42,52,.5)}
.s-gnav a:hover{background:var(--petrol);color:#fff}
.s-ggroup{scroll-margin-top:calc(var(--hh) + 80px)}
.s-ggroup + .s-ggroup{margin-top:clamp(48px,6vw,80px)}
.s-ggroup h2{font-size:clamp(1.875rem,1.4vw + 1.3rem,2.75rem);margin-bottom:22px}
.gal.gal--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:0;margin:0;cursor:auto}
.gal.gal--grid .g{width:auto}
.gal.gal--grid .g-ph{aspect-ratio:1}
@media (min-width:700px){.gal.gal--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gal.gal--grid .g-ph{aspect-ratio:4/3}}
@media (min-width:1100px){.gal.gal--grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gal.gal--grid .g-cap{font-size:.875rem}

/* ---------- contact cards ---------- */
.s-contact{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px;margin-top:clamp(28px,3vw,44px);list-style:none;padding:0}
.s-contact a,.s-contact div{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 22px 24px;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 18px 40px -32px rgba(8,42,52,.5)}
.s-contact .ico{width:28px;height:28px;color:var(--petrol)}
.s-contact b{font-family:var(--serif);font-weight:560;font-size:1.25rem}
.s-contact span{color:var(--ink-2);font-size:1rem;line-height:1.5}
@media (hover:hover){.s-contact a:hover{box-shadow:0 0 0 2px var(--petrol),0 18px 40px -32px rgba(8,42,52,.5)}}

/* ---------- assistant teaser ---------- */
.s-teaser{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding:clamp(28px,4vw,56px);border-radius:28px;background:radial-gradient(600px 300px at 100% 0%,rgba(242,184,75,.18),transparent 70%),linear-gradient(135deg,var(--deep),var(--deep2));color:#DCEAEC;--focus:#fff;box-shadow:0 40px 80px -50px rgba(8,42,52,.7)}
.s-teaser h2{color:#fff;font-size:clamp(2rem,2vw + 1.3rem,3.25rem)}
.s-teaser .s-kick{color:var(--coral-l)}
.s-teaser p{margin-top:14px;max-width:34em}
.s-teaser ol{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:st}
.s-teaser li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font-weight:600;counter-increment:st}
.s-teaser li::before{content:counter(st);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sun);color:var(--deep2);font-weight:700;flex:none}
@media (min-width:900px){.s-teaser{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:56px}}

/* ---------- the beach of umbrellas, above the footer (from the Riviera demo) ---------- */
.s-beach{position:relative;z-index:1;background:var(--sand);padding:clamp(34px,4vw,52px) 0 clamp(70px,7vw,104px);overflow:hidden}
.s-beach-rows{display:grid;gap:14px}
.s-urow{display:flex;justify-content:space-around;gap:10px;padding:0 10px}
.s-urow:nth-child(even){padding-left:44px}
.s-urow i{display:block;width:38px;height:38px;flex:none;transform:scale(0) rotate(-120deg);transition:transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s);filter:drop-shadow(5px 6px 0 rgba(60,40,10,.18))}
.s-beach.in .s-urow i{transform:none}
.s-urow svg{width:100%;height:100%;display:block}
.no-js .s-urow i,.s-beach.still .s-urow i{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.s-urow i{transform:none!important;transition:none!important}}
@media (min-width:900px){.s-urow i{width:44px;height:44px}.s-beach-rows{gap:18px}}

/* ===== 60-pages.css ===== */
/* ================= Caorle + Colazione: feature pages ================= */

/* ---------- editorial split hero (Colazione) ---------- */
.xhero{position:relative;z-index:2;background:radial-gradient(900px 520px at 85% 10%,rgba(242,184,75,.22),transparent 60%),linear-gradient(180deg,#F8E2C8 0%,#F8E7D3 100%);overflow:hidden;--top:#FBF2E6;--foam:#fff;--shore:#E9C9A2}
.xhero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:center;width:min(1200px,calc(100% - 2 * var(--gut)));margin:0 auto;padding:calc(var(--hh) + 40px) 0 clamp(110px,12vw,170px)}
.xhero .s-crumbs{color:var(--ink-2)}
.xhero .s-crumbs a{color:var(--ink);text-decoration-color:rgba(11,52,64,.3)}
.xhero h1{color:var(--ink);font-size:clamp(2.75rem,4vw + 1.2rem,5.5rem);line-height:.96;letter-spacing:-.028em}
.xhero h1 .script{display:block;margin-bottom:.06em;color:var(--coral-ink);font-size:.78em;line-height:1.05}
.xhero-lead{max-width:30em;margin-top:22px;font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);line-height:1.65;color:var(--ink-2)}
.xhero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}
.xhero-art{position:relative;padding:0 0 14% 0}
.xhero-art .xa-main{aspect-ratio:4/5;border-radius:32px;box-shadow:0 44px 90px -50px rgba(70,40,10,.6)}
.xhero-art .xa-main img{transform:scale(1.06);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.xhero.in .xhero-art .xa-main img{transform:none}
.xhero-art .xa-sub{position:absolute;left:-7%;bottom:0;width:44%;aspect-ratio:3/4;border-radius:24px;outline:9px solid #FBF2E6;box-shadow:0 30px 60px -34px rgba(70,40,10,.6)}
.xhero-art .xa-note{position:absolute;right:-2%;top:8%;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:#fff;color:var(--ink);font-weight:600;font-size:.9375rem;line-height:1.3;box-shadow:0 18px 40px -20px rgba(70,40,10,.45)}
.xhero-art .xa-note .ico{width:26px;height:26px;color:var(--coral-ink)}
@media (min-width:960px){
  .xhero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(56px,7vw,112px)}
  .xhero-art{padding:0 0 10% 10%}
  .xhero-art .xa-sub{left:0}
}
@media (max-width:599px){.xhero-art .xa-note{right:0;top:auto;bottom:16%;font-size:.875rem}}
@media (prefers-reduced-motion:reduce){.xhero-art .xa-main img{transform:none;transition:none}}

/* header over a light hero: dark text until it turns solid */
html[data-hero="light"].js .hdr:not(.solid){color:var(--ink);--focus:var(--petrol)}
html[data-hero="light"].js .hdr:not(.solid) .nav a,html[data-hero="light"].js .hdr:not(.solid) .hdr-tel,html[data-hero="light"].js .hdr:not(.solid) .logo{text-shadow:none}
html[data-hero="light"].js .hdr:not(.solid) .logo-st{color:var(--coral-ink)}

/* ---------- section intro statement ---------- */
.lede{max-width:900px}
.lede h2{font-size:clamp(2.25rem,3vw + 1.1rem,4.25rem);line-height:1.02}
.lede p{max-width:40em;margin-top:22px;font-size:clamp(1.0625rem,.4vw + 1rem,1.3125rem);line-height:1.7}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.jump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:#fff;color:var(--ink);font-weight:600;text-decoration:none;box-shadow:0 10px 24px -18px rgba(8,42,52,.55);transition:background-color .2s,color .2s}
.jump a .ico{width:18px;height:18px;transition:transform .3s var(--ease)}
@media (hover:hover){.jump a:hover{background:var(--petrol);color:#fff}.jump a:hover .ico{transform:translateY(2px)}}
.facts3{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:28px;padding:0;list-style:none}
.facts3 li{display:flex;flex-direction:column;gap:2px;padding-left:16px;border-left:2px solid var(--coral)}
.facts3 b{font-family:var(--serif);font-weight:560;font-size:1.375rem;color:var(--ink);line-height:1.1}
.facts3 span{font-size:.9375rem;color:var(--ink-2)}

/* ---------- buffet explorer (tabs) ---------- */
.buf{margin-top:clamp(40px,5vw,64px)}
.buf-tabs{display:none;position:relative;gap:clamp(8px,2.4vw,40px);margin:0 0 clamp(28px,3vw,44px);padding:0 0 14px;border-bottom:1px solid rgba(11,52,64,.14);overflow-x:auto;scrollbar-width:none}
.buf-tabs::-webkit-scrollbar{display:none}
.js .buf-tabs{display:flex}
.buf-tab{flex:none;min-height:48px;padding:0 2px;border:0;background:none;color:rgba(11,52,64,.45);font:560 clamp(1.5rem,1.4vw + 1rem,2.5rem)/1.1 var(--serif);letter-spacing:-.015em;cursor:pointer;transition:color .3s}
.buf-tab[aria-selected="true"],.buf-tab:hover{color:var(--ink)}
.buf-tab:focus-visible{outline-offset:6px;border-radius:6px}
.buf-ink{position:absolute;left:0;bottom:-1px;height:3px;width:100px;border-radius:3px;background:var(--coral);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.buf-p{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.buf-p + .buf-p{margin-top:56px}
.js .buf-p + .buf-p{margin-top:0}
.buf-p[hidden]{display:none}
.buf-p:focus-visible{outline-offset:8px;border-radius:12px}
.buf-main{aspect-ratio:5/4;border-radius:28px;box-shadow:0 40px 80px -46px rgba(70,40,10,.6)}
.buf-tx h3{font-family:var(--serif);font-weight:560;font-size:clamp(2rem,1.6vw + 1.3rem,3rem);line-height:1.04;letter-spacing:-.018em;color:var(--ink)}
.buf-tx > p{margin-top:14px;font-size:clamp(1.0625rem,.3vw + 1rem,1.1875rem);line-height:1.7}
.buf-menu{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid rgba(11,52,64,.14)}
.buf-menu li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(11,52,64,.14);font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.buf-menu li span{font-family:var(--sans);font-size:.9rem;color:var(--ink-3)}
.buf-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.buf-side .ph{aspect-ratio:1;border-radius:18px}
@media (min-width:960px){
  .buf-p{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(48px,5vw,88px)}
  .buf-tx{padding-top:8px}
}
.js .buf-p.anim .buf-main{animation:bufin .9s cubic-bezier(.2,.7,.2,1) both}
.js .buf-p.anim .buf-tx > *{animation:bufup .7s cubic-bezier(.2,.7,.2,1) both}
.js .buf-p.anim .buf-tx > :nth-child(2){animation-delay:.06s}
.js .buf-p.anim .buf-tx > :nth-child(3){animation-delay:.12s}
.js .buf-p.anim .buf-tx > :nth-child(4){animation-delay:.18s}
@keyframes bufin{from{clip-path:inset(6% 6% 6% 6% round 28px);opacity:.4}to{clip-path:inset(0 round 28px);opacity:1}}
@keyframes bufup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- photo band with a line ---------- */
.pband{position:relative;display:flex;align-items:flex-end;min-height:clamp(420px,68vh,720px);overflow:hidden;color:#fff;--focus:#fff}
.pband-media{position:absolute;left:0;right:0;top:-8%;bottom:-8%}
.pband-media img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.pband::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,12,6,.66) 0%,rgba(20,12,6,.25) 45%,rgba(20,12,6,0) 70%)}
.pband-in{position:relative;z-index:1;width:min(1200px,calc(100% - 2 * var(--gut)));margin:0 auto;padding:0 0 clamp(56px,8vh,96px)}
.pband h2{max-width:16ch;color:#fff;font-size:clamp(2.25rem,3.4vw + 1rem,4.5rem);line-height:1.02;text-shadow:0 2px 24px rgba(20,12,6,.35)}

/* ---------- coffee ---------- */
.sec--cof{--top:#2B1D16;--foam:#8A5A3A;--shore:#C9925E;--focus:#fff;background:radial-gradient(900px 500px at 10% 0%,rgba(201,146,94,.22),transparent 60%),linear-gradient(180deg,#2B1D16 0%,#1D130E 100%);color:#E9D9C6}
.sec--cof h2{color:#fff}
.sec--cof .s-kick{color:#E7B98A}
.sec--cof .lead{color:#E9D9C6}
.cof{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center}
.cof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);align-items:start}
.cof-grid figure{margin:0;will-change:transform}
.cof-grid .ph{aspect-ratio:2/3;border-radius:20px;background:#3A2A20;box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.cof-grid figure:nth-child(2){margin-top:clamp(40px,6vw,90px)}
.cof-grid figure:nth-child(3){margin-top:clamp(16px,2.5vw,36px)}
.cof-list{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.cof-list li{display:flex;align-items:center;gap:14px;color:#fff;font-weight:500}
.cof-list .ico{width:24px;height:24px;color:#E7B98A}
@media (min-width:960px){.cof{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);column-gap:clamp(56px,7vw,112px)}}

/* ---------- from breakfast to the beach ---------- */
.walk{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:34px;margin-top:clamp(36px,4vw,56px);padding:0;list-style:none}
.walk-line{position:absolute;left:31px;top:32px;bottom:32px;width:3px;border-radius:3px;background:repeating-linear-gradient(180deg,var(--coral) 0 4px,transparent 4px 12px);transform-origin:top;transition:transform 1.6s cubic-bezier(.45,.05,.25,1)}
.walk li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;align-items:start}
.walk-ic{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--petrol);box-shadow:0 14px 30px -18px rgba(8,42,52,.6)}
.walk-ic .ico{width:30px;height:30px}
.walk li:last-child .walk-ic{background:var(--coral);color:#fff}
.walk h3{font-family:var(--serif);font-weight:560;font-size:1.5rem;line-height:1.15;margin:6px 0 6px}
.walk p{font-size:1rem;line-height:1.6}
.walk-t{display:block;margin-bottom:2px;font-size:.875rem;font-weight:650;color:#0E6E79}
@media (min-width:900px){
  .walk{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .walk-line{left:16.66%;right:16.66%;top:31px;bottom:auto;width:auto;height:3px;background:repeating-linear-gradient(90deg,var(--coral) 0 4px,transparent 4px 12px);transform-origin:left}
  .walk li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
}
.js .walk:not(.in) .walk-line{transform:scaleY(0)}
@media (min-width:900px){.js .walk:not(.in) .walk-line{transform:scaleX(0)}}
.js .walk:not(.in) .walk-ic{transform:scale(.6);opacity:0}
.walk .walk-ic{transition:transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),opacity .5s ease var(--d,0s)}

/* ---------- small family note ---------- */
.fam{display:flex;align-items:center;gap:18px;margin-top:clamp(36px,4vw,56px);padding:20px 24px;border-radius:20px;background:#fff;box-shadow:0 18px 40px -32px rgba(8,42,52,.5)}
.fam .ico{width:34px;height:34px;color:var(--petrol);flex:none}
.fam b{display:block;font-family:var(--serif);font-weight:560;font-size:1.25rem;color:var(--ink)}

/* ---------- Caorle: illustrated map ---------- */
.cmap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(36px,4vw,56px);align-items:start}
.cmap-fig{position:relative;margin:0}
.cmap-art{position:relative;aspect-ratio:660/440;border-radius:28px;overflow:hidden;background:#F4E7D0;box-shadow:0 44px 90px -50px rgba(8,42,52,.6)}
.cmap-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cmap-lbl{position:absolute;z-index:1;transform:translate(-50%,-50%);font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(.75rem,.5vw + .6rem,1.0625rem);color:rgba(11,52,64,.72);white-space:nowrap;pointer-events:none}
.cmap-lbl.sea{color:rgba(255,255,255,.92);font-size:clamp(.875rem,.8vw + .6rem,1.375rem)}
.cmap-lbl.l{transform:translate(0,-50%)}
.cmap-lbl.r{transform:translate(-100%,-50%)}
.cmap-lbl.edge{font-style:normal;font-family:var(--sans);font-weight:600;font-size:clamp(.6875rem,.4vw + .55rem,.875rem);color:var(--ink-2);background:rgba(255,255,255,.75);padding:3px 8px;border-radius:6px}
.cmap-pin{position:absolute;z-index:2;width:clamp(26px,2.4vw,36px);height:clamp(26px,2.4vw,36px);margin:0;padding:0;border:0;border-radius:50% 50% 50% 0;transform-origin:50% 50%;transform:translate(-50%,calc(-50% - clamp(26px,2.4vw,36px) * .72 - 2px)) rotate(-45deg) scale(var(--s,1));background:var(--petrol);color:#fff;font:700 clamp(.75rem,.5vw + .55rem,.9375rem)/1 var(--sans);display:grid;place-items:center;box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(8,42,52,.6);cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s,opacity .25s}
.cmap-pin > span{transform:rotate(45deg)}
.cmap-pin.home{background:var(--coral)}
.cmap-pin.home::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--coral);opacity:0}
@media (prefers-reduced-motion:no-preference){.cmap-pin.home::after{animation:pinpulse 2.4s ease-out infinite}}
@keyframes pinpulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.cmap[data-on] .cmap-pin{opacity:.55}
.cmap[data-on] .cmap-pin.on{opacity:1;--s:1.22;background:var(--coral)}
.cmap.walking .cmap-pin.seen{opacity:1;background:var(--coral)}
.cmap-tag{position:absolute;z-index:3;transform:translate(-50%,calc(-100% - clamp(26px,2.4vw,36px) * 1.75 - 10px));padding:7px 12px;border-radius:10px;background:var(--petrol);color:#fff;font-weight:600;font-size:.875rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s ease}
.cmap-tag::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.cmap[data-on] .cmap-tag{opacity:1}
.cmap-route{fill:none;stroke:var(--coral);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--rl,900);stroke-dashoffset:var(--rl,900);transition:stroke-dashoffset 2.6s cubic-bezier(.45,.05,.25,1)}
.cmap.walking .cmap-route{stroke-dashoffset:0}
.cmap-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:16px}
.cmap-note{font-size:.875rem;color:var(--ink-3)}
.cmap-walk[aria-pressed="true"]{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.cmap-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.cmap-it{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;width:100%;padding:12px 14px;border:0;border-radius:16px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:background-color .25s,box-shadow .25s}
.cmap-it .n{display:grid;place-items:center;width:32px;height:32px;margin-top:2px;border-radius:50%;background:var(--petrol);color:#fff;font-weight:700;font-size:.875rem}
.cmap-it.home .n{background:var(--coral)}
.cmap-it b{display:block;font-family:var(--serif);font-weight:560;font-size:1.1875rem;line-height:1.2;color:var(--ink)}
.cmap-it span{display:block;margin-top:3px;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.cmap-it:hover,.cmap-it[aria-pressed="true"]{background:#fff;box-shadow:0 14px 30px -22px rgba(8,42,52,.55)}
.cmap-it[aria-pressed="true"] .n{background:var(--coral)}
@media (min-width:960px){.cmap{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(36px,4vw,64px)}.cmap-fig{position:sticky;top:calc(var(--hh) + 96px)}}
@media (max-width:599px){.cmap-art{border-radius:20px}.cmap-pin{box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(8,42,52,.6)}}
@media (prefers-reduced-motion:reduce){.cmap-route,.cmap-pin,.cmap-tag,.walk-line,.walk-ic,.lag-art .ln,.lag-art .sun{transition:none!important}.js .walk .walk-line{transform:none!important}.js .walk .walk-ic{transform:none!important;opacity:1!important}.js .lag-art .ln{stroke-dashoffset:0!important}}

/* ---------- Caorle: the lagoon ---------- */
.lag{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center}
.lag-art{position:relative;aspect-ratio:5/4;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#123F52 0%,#0E3646 60%,#0B2E3B 100%);box-shadow:0 44px 90px -50px rgba(0,0,0,.7)}
.lag-art svg{position:absolute;inset:0;width:100%;height:100%}
.lag-art .ln{fill:none;stroke:#E6F2F3;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lag-art .ln.w{stroke:rgba(158,216,213,.55)}
.lag-art .ln.r{stroke:#9FC4A9}
.lag-art .sun{fill:#F2B84B;opacity:.9}
.js .lag-art .ln{stroke-dasharray:1;stroke-dashoffset:1}
.js .lag-art.in .ln{stroke-dashoffset:0}
.lag-art .ln{transition:stroke-dashoffset 2.2s cubic-bezier(.45,.05,.25,1) var(--d,0s)}
.js .lag-art:not(.in) .sun{opacity:0;transform:translateY(20px)}
.lag-art .sun{transition:opacity 1.2s ease .9s,transform 1.6s cubic-bezier(.2,.7,.2,1) .9s}
.lag p + p{margin-top:14px}
.lag .lead{margin-top:18px}
.lag-quote{margin-top:24px;padding:18px 22px;border-left:3px solid var(--sun);background:rgba(255,255,255,.05);border-radius:0 14px 14px 0;font-family:var(--serif);font-size:1.25rem;line-height:1.45;color:#fff}
@media (min-width:960px){.lag{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(56px,7vw,112px)}}

/* ---------- horizontal cards ---------- */
.hcards{position:relative;margin-top:clamp(32px,4vw,52px)}
.hc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--gut) 18px;margin:0 calc(-1 * var(--gut));scrollbar-width:none;overscroll-behavior-x:contain}
.hc-track::-webkit-scrollbar{display:none}
.hc-card{position:relative;flex:0 0 auto;width:min(78vw,340px);min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:28px 26px;border-radius:26px;scroll-snap-align:start;overflow:hidden;background:var(--bg,#fff);color:var(--fg,var(--ink-2));box-shadow:0 24px 50px -36px rgba(8,42,52,.55)}
.hc-card h3{position:relative;font-family:var(--serif);font-weight:560;font-size:1.75rem;line-height:1.08;color:var(--hfg,var(--ink))}
.hc-card p{position:relative;font-size:1rem;line-height:1.6}
.hc-card .big{position:absolute;right:-18px;top:-14px;width:190px;height:190px;color:var(--ic,rgba(11,52,64,.16));fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.hc-card .when{position:relative;align-self:flex-start;font-size:.8125rem;font-weight:700;letter-spacing:.02em;color:var(--hfg,var(--ink))}
.hc-card a{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:650;color:var(--hfg,var(--petrol))}
.hc-btns{display:none;gap:8px;justify-content:flex-end;margin-top:6px}
.js .hc-btns{display:flex}
@media (max-width:699px){.js .hc-btns{display:none}}

/* ---------- destinations ---------- */
.dest{margin:clamp(28px,3vw,44px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(11,52,64,.16)}
.dest li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 32px;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid rgba(11,52,64,.16);transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.dest b{font-family:var(--serif);font-weight:560;font-size:clamp(1.875rem,2vw + 1.1rem,3.25rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.dest span{font-size:1.0625rem;line-height:1.55;color:var(--ink-2)}
.dest em{font-style:normal;font-weight:700;color:var(--coral-ink);white-space:nowrap}
@media (min-width:900px){.dest li{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;align-items:baseline}}
@media (hover:hover){.dest li:hover{padding-left:14px}}

/* ---------- how to get here ---------- */
.route{margin-top:clamp(28px,3vw,44px)}
.route-tabs{display:none;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.js .route-tabs{display:flex}
.route-tab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1.5px solid rgba(11,52,64,.25);border-radius:12px;background:#fff;color:var(--ink);font:600 1rem/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.route-tab .ico{width:22px;height:22px}
.route-tab[aria-selected="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.route-p{padding:clamp(24px,3vw,40px);border-radius:24px;background:#fff;box-shadow:0 24px 50px -38px rgba(8,42,52,.55)}
.route-p + .route-p{margin-top:16px}
.js .route-p + .route-p{margin-top:0}
.route-p[hidden]{display:none}
.route-p h3{font-family:var(--serif);font-weight:560;font-size:1.75rem;line-height:1.1;margin-bottom:22px;color:var(--ink)}
.route-line{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin:0;padding:0 0 0 34px;list-style:none}
.route-line::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(180deg,var(--sea-3) 0 6px,transparent 6px 12px)}
.route-line li{position:relative}
.route-line li::before{content:"";position:absolute;left:-30px;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--petrol)}
.route-line li:last-child::before{background:var(--coral);box-shadow:0 0 0 4px rgba(201,72,42,.2)}
.route-line b{display:block;font-weight:700;color:var(--ink);font-size:1.0625rem}
.route-line span{display:block;font-size:.9375rem;color:var(--ink-2);margin-top:2px}
@media (min-width:900px){
  .route-line{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:20px;padding:34px 0 0}
  .route-line::before{left:8px;right:8px;top:11px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--sea-3) 0 6px,transparent 6px 12px)}
  .route-line li::before{left:0;top:-30px}
}
.route-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cof .lead{margin-top:18px}

@media (max-width:599px){.cmap-lbl.edge,.cmap-lbl.r:not(.sea){display:none}.cmap-lbl.sea{font-size:.8125rem}}

/* ===== 65-pages-fix.css ===== */
/* ================= Caorle + Colazione, second pass (after the art-direction review) ================= */

/* ---------- hero variants ---------- */
.phero-credit{position:absolute;right:max(var(--gut),calc((100% - 1200px) / 2));bottom:clamp(54px,6vw,92px);z-index:4;margin:0;font-size:.75rem;line-height:1.3;color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(4,24,32,.6)}
.phero-credit a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.pband .phero-credit{bottom:16px}
@media (max-width:599px){.phero-credit{bottom:48px;font-size:.6875rem}}
.tlink--light{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.tlink--light:hover{color:#fff;text-decoration-color:#fff}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
@media (hover:hover){.btn-ink:hover{background:var(--petrol-2,#134755)}}
.phero-media img{object-position:var(--op,50% 50%)}
@media (max-width:899px){.phero-media img{object-position:var(--opm,var(--op,50% 50%))}}

/* Colazione: text at the top, the croissants clear below it */
@media (max-width:899px){
  .phero--top{align-items:flex-start;min-height:calc(100svh - 64px)}
  .phero--top .phero-in{padding-top:calc(var(--hh) + 28px)}
  .phero--top::before{background:linear-gradient(180deg,rgba(4,24,32,.74) 0,rgba(4,24,32,.46) 46%,rgba(4,24,32,0) 72%)}
  .phero--top .phero-media img{object-position:76% 100%}
}

/* Caorle without a town photo: dark text over the sky */
.phero--sky{align-items:flex-start;min-height:min(100svh,980px)}
.phero--sky .phero-media img{object-position:50% 16%}
.phero--sky::before{background:linear-gradient(180deg,rgba(234,243,248,.6) 0,rgba(234,243,248,0) 48%),linear-gradient(0deg,rgba(4,24,32,.35) 0,rgba(4,24,32,0) 30%)}
.phero--sky .phero-in{padding-top:calc(var(--hh) + 36px)}
.phero--sky h1{max-width:18ch;color:var(--ink);text-shadow:none}
.phero--sky h1 .script{color:var(--coral-ink)}
.phero--sky .phero-lead,.phero--sky .s-crumbs,.phero--sky .s-crumbs a{color:var(--ink);text-shadow:none}
@media (max-width:899px){.phero--sky .phero-media img{object-position:70% 0}.phero--sky .phero-lead{display:none}.phero--sky .phero-in{padding-top:calc(var(--hh) + 20px)}}

/* ---------- photo bands ---------- */
.pband-cap{max-width:34em;margin-top:14px;font-size:clamp(1rem,.3vw + .95rem,1.125rem);line-height:1.55;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(20,12,6,.4)}
.pband::after{background:linear-gradient(0deg,rgba(6,24,32,.62) 0%,rgba(6,24,32,.22) 42%,rgba(6,24,32,0) 66%)}

/* ---------- buffet ---------- */
.buf-tab{color:rgba(11,52,64,.6)}
@media (max-width:379px){.buf-tab{font-size:1.375rem}}
.buf-tabs{gap:clamp(18px,3vw,40px)}
.buf-side{grid-template-columns:repeat(3,minmax(0,1fr))}
.buf-side--1{grid-template-columns:minmax(0,1fr)}
.buf-side--1 .ph{aspect-ratio:2/1}
.buf-side--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* tab panels share one grid cell, so switching never makes the page jump */
/* the box takes the height of the open panel (set in js/60-pages.js), so a shorter panel leaves no empty space under it */
.js .tab-stack{display:grid;transition:height .45s var(--ease)}
.js .tab-stack > [role="tabpanel"]{grid-area:1/1;min-width:0;align-self:start}
@media (prefers-reduced-motion:reduce){.js .tab-stack{transition:none}}
.js .tab-stack > [role="tabpanel"].off{visibility:hidden}
.js .tab-stack > .route-p + .route-p,.js .tab-stack > .buf-p + .buf-p{margin-top:0}
.tab-stack > [role="tabpanel"][hidden]{display:block!important}
.tab-stack > .buf-p[hidden]{display:grid!important}
.js .tab-stack > [role="tabpanel"][hidden]{visibility:hidden}

/* ---------- people moment ---------- */
.pm{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.pm-ph{margin:0;max-width:440px}
.pm-ph .ph{aspect-ratio:3/4;border-radius:28px;box-shadow:0 44px 90px -50px rgba(8,42,52,.6)}
.pm-tx h2{font-size:clamp(2.25rem,3vw + 1.1rem,4.25rem);line-height:1.02;max-width:12ch}
.pm-tx .lead{margin-top:20px;max-width:30em}
@media (min-width:900px){.pm{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:clamp(56px,8vw,128px)}.pm-ph{justify-self:end;width:100%}}

/* ---------- coffee ---------- */
.cof .lead{margin-top:18px}

/* ---------- restaurant note: plain text, no box ---------- */
.fam{display:block;margin-top:28px;padding:20px 0 0;background:none;box-shadow:none;border-radius:0;border-top:1px solid rgba(11,52,64,.14);font-size:1rem;line-height:1.6;color:var(--ink-2)}
.fam b{display:inline;font-family:var(--serif);font-weight:560;font-size:1.125rem;color:var(--ink);margin-right:6px}

/* ---------- Caorle map ---------- */
.cmap-pin.home::after{animation-iteration-count:3}
.cmap-cap{display:none}
@media (max-width:959px){
  .cmap-cap{display:block;min-height:3.2em;margin-top:14px;font-size:1rem;line-height:1.5;color:var(--ink-2)}
  .cmap-cap b{display:block;font-family:var(--serif);font-weight:560;font-size:1.25rem;color:var(--ink)}
  .cmap-cap .ph{aspect-ratio:16/10;border-radius:16px;margin-bottom:12px}
  .cmap-cap figcaption{margin-top:6px;font-size:.75rem;color:var(--ink-3)}
}
.cmap-it{scroll-margin-bottom:120px}
.cmap-list li{border-radius:16px}
.cmap-more{margin:4px 14px 14px 64px}
.cmap-more .ph{aspect-ratio:16/10;border-radius:14px}
.cmap-more figcaption{margin-top:6px;font-size:.75rem;line-height:1.4;color:var(--ink-3)}
.cmap-more figcaption a{color:inherit}
.cmap-more[hidden]{display:none!important}
.cmap-list li.open{background:#fff;box-shadow:0 14px 30px -22px rgba(8,42,52,.55)}
.cmap-list li.open .cmap-it{background:transparent;box-shadow:none}
.cmap.walking .cmap-route{transition-timing-function:linear}

/* ---------- lagoon ---------- */
.lag .s-split-ph{position:relative}
.lag .s-split-ph .ph{aspect-ratio:5/4;border-radius:28px;box-shadow:0 44px 90px -50px rgba(0,0,0,.7)}
.lag .s-split-ph .s-inset{outline-color:var(--deep)}
.lag-cred{margin-top:14px;font-size:.75rem;color:rgba(255,255,255,.6)}
.lag-cred a{color:inherit}
.js .lag-art .ln{stroke-dasharray:none;stroke-dashoffset:0}
.js .lag-art:not(.in) .sun{opacity:.9;transform:none}

/* ---------- around Caorle: two typographic columns ---------- */
.dz-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px);margin-top:clamp(32px,4vw,52px)}
@media (min-width:960px){.dz-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(48px,6vw,96px)}}
.dz-h{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--ink-2);padding-bottom:14px;border-bottom:2px solid var(--ink)}
.dz{margin:0;padding:0;list-style:none}
.dz li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:baseline;padding:clamp(16px,1.8vw,22px) 0;border-bottom:1px solid rgba(11,52,64,.16)}
.dz b{font-family:var(--serif);font-weight:560;font-size:clamp(1.625rem,1.3vw + 1.1rem,2.25rem);line-height:1.08;letter-spacing:-.018em;color:var(--ink)}
.dz em{font-style:normal;font-weight:700;font-size:.9375rem;color:var(--coral-ink);white-space:nowrap;justify-self:end}
.dz li > span{grid-column:1 / -1;font-size:1.0625rem;line-height:1.55;color:var(--ink-2)}
.dz li > .tlink{grid-column:1 / -1;justify-self:start}

/* ---------- planner teaser, light ---------- */
.tz-wrap{margin-top:clamp(64px,8vw,112px)}
.s-teaser--light{background:#fff;color:var(--ink-2);box-shadow:0 30px 70px -48px rgba(8,42,52,.5);--focus:var(--petrol)}
.s-teaser--light h2{color:var(--ink)}
.s-teaser--light .s-kick{color:var(--coral-ink)}
.s-teaser--light li{background:var(--sand0);color:var(--ink)}
.s-teaser--light li::before{background:var(--sun);color:var(--deep2)}

/* ---------- how to get here ---------- */
.route-line::before{display:none}
.route-line li:not(:last-child)::after{content:"";position:absolute;left:-23px;top:24px;bottom:-24px;width:2px;background:repeating-linear-gradient(180deg,var(--sea-3) 0 6px,transparent 6px 12px)}
@media (min-width:900px){
  .route-line li:not(:last-child)::after{left:22px;right:-16px;top:-23px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--sea-3) 0 6px,transparent 6px 12px)}
}
.route-tab span{white-space:nowrap}
@media (max-width:599px){
  .js .route-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .route-tab{flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:8px 6px;font-size:.9375rem}
}

/* ---------- photo credits ---------- */
.pcred{margin-top:clamp(48px,6vw,80px);padding-top:20px;border-top:1px solid rgba(11,52,64,.16);font-size:.8125rem;line-height:1.6;color:var(--ink-3)}
.pcred h3{font-family:var(--sans);font-size:.875rem;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.pcred ul{margin:0;padding:0;list-style:none}
.pcred a{color:inherit}

/* ---------- map: tag stays inside the frame, pins are easy to tap, the walk has a walker ---------- */
.cmap-tag{transform:translate(calc(-50% + var(--dx,0px)),calc(-100% - clamp(26px,2.4vw,36px) * 1.75 - 10px))}
.cmap-tag::after{left:calc(50% - var(--dx,0px))}
.cmap-tag.below{transform:translate(calc(-50% + var(--dx,0px)),14px)}
.cmap-tag.below::after{bottom:auto;top:-5px}
.cmap-pin::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.cmap-route{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s linear}
.cmap:not(.walking) .cmap-route{transition:none}
.cmap-walker{fill:#fff;stroke:var(--coral);stroke-width:3}
.cmap-lbl.sea{text-shadow:0 1px 2px rgba(11,52,64,.6),0 0 14px rgba(11,52,64,.45)}
.cmap-list li.lit .cmap-it .n{background:var(--coral)}
@media (min-width:960px){
  .cmap-list li:not(.open) .cmap-more{display:none}
  .cmap-it[aria-pressed="true"]{background:transparent;box-shadow:none}
  .cmap-list li.open{background:#fff;box-shadow:0 14px 30px -22px rgba(8,42,52,.55)}
  .cmap-list li.has-ph .cmap-it::after{content:"";width:8px;height:8px;margin-top:10px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);grid-column:3;justify-self:end;transition:transform .3s var(--ease)}
  .cmap-list li.has-ph .cmap-it{grid-template-columns:36px minmax(0,1fr) 16px}
  .cmap-list li.open .cmap-it::after{transform:rotate(225deg);margin-top:16px}
}
/* phones and tablets: a strip of place cards under the map */
@media (max-width:959px){
  .cmap-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:18px calc(-1 * var(--gut)) 0;padding:4px var(--gut) 22px;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .cmap-list::-webkit-scrollbar{display:none}
  .cmap-list li{flex:0 0 min(80vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 16px 34px -24px rgba(8,42,52,.55);overflow:hidden}
  .cmap-list li.lit{box-shadow:0 0 0 2px var(--coral),0 16px 34px -24px rgba(8,42,52,.55)}
  .cmap-more{order:-1;margin:0}
  .cmap-more .ph{border-radius:0;aspect-ratio:16/10}
  .cmap-more figcaption{padding:6px 14px 0}
  .cmap-it{padding:14px 14px 18px;border-radius:0}
  .cmap-it:hover,.cmap-it[aria-pressed="true"]{background:transparent;box-shadow:none}
}
.cmap-cap{display:none!important}

/* ---------- hero text on bright photos ---------- */
.phero .s-crumbs{text-shadow:0 1px 10px rgba(4,24,32,.75)}
.phero--sky .s-crumbs{text-shadow:none}
.route-go .btn-primary::after{display:none}
#laguna.sec--night{background:linear-gradient(180deg,var(--deep) 0%,var(--night) 100%)}

/* ---------- coffee on phones: one tall photo and two small ones ---------- */
@media (max-width:599px){
  .cof-grid{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:10px}
  .cof-grid figure:nth-child(1){grid-row:1 / span 2}
  .cof-grid figure:nth-child(1) .ph{aspect-ratio:3/4.6}
  .cof-grid figure:nth-child(2),.cof-grid figure:nth-child(3){margin-top:0}
  .cof-grid figure:nth-child(2) .ph,.cof-grid figure:nth-child(3) .ph{aspect-ratio:1}
}

/* ---------- phone action bar: four actions ---------- */
@media (max-width:899px){
  .mbar{grid-template-columns:1fr 1fr 1fr 1.2fr;gap:6px;padding:7px 10px calc(7px + env(safe-area-inset-bottom))}
  .mb{gap:7px;font-size:.875rem}
  .mb .ico{width:19px;height:19px}
  .mb-p .ico{color:#fff}
}
@media (max-width:599px){
  .mb{flex-direction:column;gap:3px;min-height:54px;font-size:.75rem;line-height:1.1}
  .mb .ico{width:20px;height:20px}
}
/* the floating assistant button only on large screens: phones have it in the bottom bar */
@media (max-width:899px){.ch-launch{display:none!important}}
@media (max-width:959px){.cmap-list{align-items:flex-start}}
.phero h1 .script{text-shadow:0 2px 16px rgba(4,24,32,.6)}

/* ===== 70-rooms-plan.css ===== */
/* ===== the official room texts: variants and comparison ===== */
@media (min-width:960px){
  .s-room-tx{position:static}
  .s-room .rooms-media{position:sticky;top:clamp(84px,calc(100vh - 640px),176px)}
}
.s-room-p{margin-top:14px}
.s-tipi{margin-top:26px;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(11,52,64,.1)}
.s-tipi h3{font-size:1.0625rem;font-weight:700;letter-spacing:0}
.s-tipi ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.s-tipi li{display:grid;grid-template-columns:7em minmax(0,1fr);gap:0 10px;align-items:baseline;line-height:1.4}
.s-tipi b{font-weight:700;color:var(--ink)}
.s-tipi span{color:var(--ink-2)}
@media (max-width:419px){.s-tipi li{grid-template-columns:minmax(0,1fr)}}
.s-cmp{margin-top:clamp(48px,5vw,76px)}
.s-cmp h3{font-size:clamp(1.375rem,.8vw + 1.2rem,1.875rem);letter-spacing:-.01em}
.s-cmp-w{margin-top:18px;border-radius:18px;background:#fff;box-shadow:0 18px 44px -28px rgba(8,42,52,.5),inset 0 0 0 1px rgba(11,52,64,.08);overflow:hidden}
.s-cmp table{width:100%;border-collapse:collapse;table-layout:fixed}
.s-cmp th,.s-cmp td{padding:15px 12px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line);line-height:1.3}
.s-cmp th:first-child{width:36%;padding-left:clamp(14px,2vw,24px);text-align:left}
.s-cmp thead th{font-size:.8125rem;font-weight:700;letter-spacing:.02em;color:var(--ink-2);background:var(--sea)}
.s-cmp tbody tr:last-child th,.s-cmp tbody tr:last-child td{border-bottom:0}
.s-cmp tbody th a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(11,52,64,.28);text-underline-offset:3px}
@media (hover:hover){.s-cmp tbody tr:hover{background:var(--sea)}.s-cmp tbody th a:hover{color:var(--coral-ink);text-decoration-color:currentColor}}
.cmp-n{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.cmp-y{display:inline-grid;place-items:center;vertical-align:middle}
.cmp-y .ico{width:22px;height:22px;color:#14806F}
.cmp-no{color:var(--field)}
.cmp-t{display:block;margin-top:2px;font-size:.8125rem;color:var(--ink-2)}
.s-cmp .s-note{margin-top:14px}
@media (max-width:599px){
  .s-cmp th,.s-cmp td{padding:12px 5px}
  .s-cmp th:first-child{width:33%;padding-left:12px}
  .s-cmp thead th{font-size:.6875rem;letter-spacing:0}
  .s-cmp tbody th a{font-size:.875rem}
  .cmp-n{font-size:.875rem}
  .cmp-t{font-size:.6875rem}
}

@media (max-width:359px){
  .dots{flex:1 1 auto;min-width:0}
  .dot{flex:1 1 0;width:auto;min-width:0}
  .dot::before,.dot i{width:calc(100% - 8px)}
}

/* ===== "Pianifica la vacanza": the sun button ===== */
.btn-sun{background:var(--sun);border-color:var(--sun);color:#082C3A;font-weight:700;--focus:#082C3A}
.btn-sun .ico{width:22px;height:22px}
@media (hover:hover){.btn-sun:hover{background:#F7CB72;border-color:#F7CB72;color:#082C3A}}
.btn-sun:active{background:#E5A938;border-color:#E5A938}
.hdr-plan{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 17px 8px 13px;border-radius:var(--r-btn);background:var(--sun);color:#082C3A;font-weight:700;font-size:.9375rem;line-height:1.1;text-decoration:none;white-space:nowrap;--focus:#082C3A;box-shadow:0 8px 20px -10px rgba(120,78,6,.75);transition:background-color .2s ease,transform .25s var(--ease)}
.hdr-plan .ico{width:22px;height:22px;flex:none;animation:ch-sun 16s linear infinite}
.js .hdr:not(.solid) .hdr-plan{text-shadow:none}
@media (hover:hover){.hdr-plan:hover{background:#F7CB72;transform:translateY(-1px)}}
.hdr-plan:active{background:#E5A938;transform:none}
@media (min-width:900px){.hdr-plan{display:inline-flex}}
/* phone bar */
.mbar .mb-plan{background:var(--sun);border-color:var(--sun);color:#082C3A;font-weight:700;--focus:#082C3A}
.mbar .mb-plan .ico{color:#082C3A}
.mbar .mb-plan:active{background:#E5A938;border-color:#E5A938}
/* home hero */
.hero-plan{box-shadow:0 14px 30px -14px rgba(120,78,6,.8)}
.hero-plan .ico{animation:ch-sun 16s linear infinite}
@media (max-width:599px){
  .hero-ctas .hero-plan{flex:1 1 100%;margin-top:8px}
  .hero-ctas .hero-more{display:none}
}
@media (min-width:600px) and (max-width:899px){.hero-ctas{gap:10px 18px}.hero-ctas .hero-plan{flex:0 0 auto}}
.menu-foot .btn-sun{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.hdr-plan .ico,.hero-plan .ico{animation:none}}

/* ===== 75-email.css ===== */
/* ===== the client's email of 2026-11-05 ===== */

/* rooms: the sixth tile that helps to choose, and four columns for "Le altre camere" */
.s-rcard--help .s-rcard-b{background:linear-gradient(180deg,#fff 0%,var(--sea) 100%)}
.s-rcard--help .s-kick{margin:0}
.s-rcard--help h3{margin-top:2px}
.s-rcard-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:auto;padding-top:8px}
.s-rcard-acts .tlink{min-height:44px}
@media (min-width:600px) and (max-width:1279px){.s-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.s-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}.s-cards--4 .s-rcard h3{font-size:1.4375rem}.s-cards--4 .s-rcard-b{padding:20px 20px 22px}}

/* booking online, before the email request */
.bk-on{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 20px;align-items:center;margin-bottom:clamp(36px,4vw,56px);padding:clamp(20px,2.6vw,30px);border-radius:var(--r);background:#fff;box-shadow:0 30px 60px -40px rgba(8,42,52,.5),inset 0 0 0 1px rgba(11,52,64,.06)}
.bk-on-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--sea);color:var(--petrol)}
.bk-on-ico .ico{width:26px;height:26px}
.bk-on-t h3{font-family:var(--serif);font-weight:560;font-size:clamp(1.5rem,.8vw + 1.25rem,2rem);line-height:1.1;color:var(--ink)}
.bk-on-t p{margin-top:6px;color:var(--ink-2);line-height:1.55}
.bk-on-b{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.bk-on-b .tlink{min-height:44px}
@media (min-width:600px){.bk-on-b{grid-column:2}}
@media (max-width:479px){.bk-on-ico{width:46px;height:46px}.bk-on-b .btn{flex:1 1 100%}}
.req-group{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--sea);color:var(--ink);font-weight:500;line-height:1.5}
.req-group[hidden]{display:none}
.req-group .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--petrol)}
.req-cond{flex:1 1 100%;font-size:.9375rem;color:var(--ink-2)}
.req-cond a{color:var(--petrol);font-weight:600;text-underline-offset:.22em}

/* footer: the email request under "Prenota online" */
.ft-alt{margin-top:12px;font-size:.9375rem}
.ft-alt a{color:inherit;opacity:.85;text-underline-offset:.22em}
@media (hover:hover){.ft-alt a:hover{opacity:1}}

/* the contract conditions page */
.cond{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;max-width:1080px}
@media (min-width:980px){.cond{grid-template-columns:minmax(0,340px) minmax(0,1fr)}.cond-brief{position:sticky;top:calc(var(--hh) + 96px)}}
.cond-brief{padding:clamp(22px,2.6vw,30px);border-radius:var(--r);background:#fff;box-shadow:0 30px 60px -42px rgba(8,42,52,.5)}
.cond-brief h2{font-size:1.375rem;letter-spacing:-.01em}
.cond-brief ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.cond-brief li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;line-height:1.5;color:var(--ink)}
.cond-brief li .ico{width:22px;height:22px;margin-top:1px;color:var(--petrol)}
.cond-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-2)}
.cond-full{max-width:68ch}
.cond-s + .cond-s{margin-top:clamp(28px,3vw,40px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(11,52,64,.12)}
.cond-s h2{font-family:var(--serif);font-weight:560;font-size:clamp(1.375rem,.9vw + 1.05rem,1.875rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.cond-s p{margin-top:12px;font-size:1.0625rem;line-height:1.75;color:var(--ink)}
.cond-acts{margin-top:clamp(32px,4vw,48px)}

/* breakfast: the photo carousel */
.buf-head{align-items:flex-end}
.buf-head .s-head{flex:1 1 380px}
.gal--buf{margin-top:clamp(28px,3vw,40px)}
/* the hidden caption stays inside its photo (an absolutely placed text outside the strip would widen the page) */
.gal--buf .g-it{position:relative;display:block}
.gal--buf .g-cap.sr-only{padding:0}
.gal--buf .g-ph{aspect-ratio:4/3;box-shadow:0 30px 60px -40px rgba(70,40,10,.55)}
@media (min-width:700px){.gal--buf .g{width:clamp(360px,34vw,520px)}}

/* ===== 80-client-1107.css ===== */
/* ===== the hotel's corrections of 2026-11-07 ===== */

/* the header: a thin bar on top (landline, email, WhatsApp, the two seasons, Facebook) on large screens */
:root{--tb:0px}
.hdr-top{display:none}
@media (min-width:1100px){
  :root{--tb:36px;--hh:112px}
  .hdr-in{height:calc(var(--hh) - var(--tb))}
  .hdr-top{display:block;height:var(--tb);border-bottom:1px solid var(--line);font-size:.875rem;line-height:1}
  .hdr-top-in{height:100%;display:flex;align-items:center;gap:6px 22px}
  .hdr-top a,.hdr-top-note{display:inline-flex;align-items:center;gap:7px;min-height:32px;color:var(--ink-2);text-decoration:none;font-weight:500;white-space:nowrap}
  .hdr-top .ico{width:16px;height:16px;color:var(--petrol)}
  .hdr-top-note{margin-left:auto;color:var(--ink-2)}
  .hdr-top-fb{justify-content:center;min-width:32px;border-radius:50%}
  .hdr-top-fb .ico{width:18px;height:18px}
  @media (hover:hover){.hdr-top a:hover{color:var(--petrol)}.hdr-top a:hover span{text-decoration:underline;text-underline-offset:.2em}}
  /* over the hero photo the bar is light on dark, like the rest of the header */
  .js .hdr:not(.solid) .hdr-top{border-bottom-color:rgba(255,255,255,.2)}
  .js .hdr:not(.solid) .hdr-top a,.js .hdr:not(.solid) .hdr-top-note,.js .hdr:not(.solid) .hdr-top .ico{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(4,28,36,.45)}
  html[data-hero="light"].js .hdr:not(.solid) .hdr-top{border-bottom-color:var(--line)}
  html[data-hero="light"].js .hdr:not(.solid) .hdr-top a,html[data-hero="light"].js .hdr:not(.solid) .hdr-top-note{color:var(--ink-2);text-shadow:none}
  html[data-hero="light"].js .hdr:not(.solid) .hdr-top .ico{color:var(--petrol);text-shadow:none}
}

/* the logo: the HA monogram next to the name */
.logo{flex-direction:row;align-items:center;gap:12px}
.logo-m{flex:none;width:46px;height:auto;border-radius:5px;box-shadow:0 1px 3px rgba(4,28,36,.25)}
.logo-t{display:flex;flex-direction:column;justify-content:center}
@media (max-width:599px){.logo{gap:10px}.logo-m{width:40px}}
.ft .logo-m{box-shadow:none}

/* the footer: Facebook */
.ft-social{margin-top:16px}
.ft-social a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:inherit;font-weight:600;text-decoration:none}
.ft-social .ico{width:22px;height:22px}
@media (hover:hover){.ft-social a:hover span,.ft-social a:hover{text-decoration:underline;text-underline-offset:.22em}}

/* the contact cards: five, never an empty slot */
@media (min-width:700px) and (max-width:1099px){.s-contact{grid-template-columns:repeat(2,minmax(0,1fr))}.s-contact li:last-child{grid-column:1 / -1}}
@media (min-width:1100px){.s-contact{grid-template-columns:repeat(5,minmax(0,1fr))}}
.s-contact span{overflow-wrap:anywhere}

/* lists of services and equipment: full rows (6 and 12 items) */
@media (min-width:600px) and (max-width:899px){.s-specs--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.s-specs--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* icons on the dark sections ("Servizi", "In tutte le camere") were petrol on petrol: make them visible */
.sec--deep .s-specs .ico{color:var(--aqua2)}

/* small phones: the logo, "Prenota" and the menu button on one line */
@media (max-width:399px){.logo{gap:8px}.logo-m{width:34px}.logo-n{font-size:1.0625rem}.logo-s{letter-spacing:.14em}}
@media (max-width:359px){.hdr .logo-t{display:none}}

/* ===== 85-lang.css ===== */
/* ===== languages: the flags ===== */
.flag{display:block;width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(11,52,64,.2)}
.lang{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.lang-a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;border-radius:6px;opacity:.7;transition:opacity .2s ease,background-color .2s ease}
.lang-a[aria-current]{opacity:1;background:rgba(11,52,64,.09)}
@media (hover:hover){.lang-a:hover{opacity:1}}
.lang--top{margin-left:2px;padding-left:12px;border-left:1px solid var(--line)}
.js .hdr:not(.solid) .lang--top{border-left-color:rgba(255,255,255,.25)}
.js .hdr:not(.solid) .lang--top .lang-a[aria-current]{background:rgba(255,255,255,.18)}
html[data-hero="light"].js .hdr:not(.solid) .lang--top{border-left-color:var(--line)}
html[data-hero="light"].js .hdr:not(.solid) .lang--top .lang-a[aria-current]{background:rgba(11,52,64,.09)}
.lang--menu{gap:8px;margin:0 0 18px}
.lang--menu .lang-a{min-width:44px;min-height:44px}
.lang--menu .flag{width:30px;height:20px}
.ft .lang-a[aria-current]{background:rgba(255,255,255,.14)}
.ft .flag{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lang--ft .lang-a{min-width:40px;min-height:40px}

/* room variants: the name column as wide as the longest name (German and Hungarian names are long) */
.s-tipi ul{grid-template-columns:max-content minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:baseline}
.s-tipi li{display:contents}
@media (max-width:419px){.s-tipi ul{grid-template-columns:minmax(0,1fr);row-gap:0}.s-tipi li span{margin-bottom:8px}}

/* ===== 90-consent.css ===== */
/* ============ Consent: banner (first layer) and preference centre (second layer) ============
   Reject and Accept have the same weight (EDPB cookie banner taskforce, Garante 2021); the X keeps the defaults. */
.cc-bar{position:fixed;z-index:60;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:540px;
  padding:20px 22px 20px;border-radius:var(--r);background:#fff;color:var(--ink-2);box-shadow:var(--float),0 0 0 1px rgba(11,52,64,.06);
  font-size:.9375rem;line-height:1.55;opacity:0;transform:translateY(18px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.cc-bar.cc-in{opacity:1;transform:none}
.cc-bar[hidden]{display:none}
.cc-bar-t{margin:0 44px 6px 0;font-family:var(--serif);font-size:1.25rem;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.cc-bar p{margin:0 0 10px}
.cc-bar a,.cc-dlg a{color:var(--petrol);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.cc-bar a:hover,.cc-dlg a:hover{color:var(--coral-ink)}
.cc-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 14px!important}
.cc-links a{display:inline-flex;align-items:center;min-height:32px}
.cc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-btns .cc-b-more{grid-column:1 / -1;order:3}
@media (min-width:520px){.cc-bar .cc-btns{grid-template-columns:1fr 1.15fr 1fr}.cc-bar .cc-btns .cc-b-more{grid-column:auto;order:-1}}
.cc-btns .btn{min-height:48px;padding:10px 16px;font-size:.9375rem}
/* the two choices look the same: neither is pushed */
.btn.cc-eq{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn.cc-eq:hover{background:var(--petrol-2);border-color:var(--petrol-2)}
.btn.cc-eq:active{background:var(--petrol-d)}
.cc-x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s}
.cc-x:hover{background:var(--sea)}
.cc-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (max-width:599px){
  .cc-bar{font-size:.875rem;line-height:1.5}
  .cc-bar-t{font-size:1.125rem}
  .cc-bar p{margin-bottom:8px}
  .cc-btns .btn{min-height:46px}
  .cc-bar{left:0;right:0;bottom:0;max-width:none;border-radius:20px 20px 0 0;padding:20px var(--gut) calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px -20px rgba(8,42,52,.5),0 0 0 1px rgba(11,52,64,.06)}
}
/* while the banner is up, the floating buttons that sit in the same corner wait */
.cc-on .mbar,.cc-on .ch-launch{visibility:hidden!important;opacity:0!important}

/* ---------- the preference centre ---------- */
.cc-dlg{width:min(680px,calc(100% - 24px));max-height:min(88vh,860px);margin:auto;border-radius:20px;background:var(--sand0,#FBF6EE);color:var(--ink-2);box-shadow:var(--float);overflow:hidden;padding:0}
.cc-dlg[open]{display:flex;flex-direction:column}
.cc-dlg::backdrop{background:rgba(4,24,31,.6)}
.cc-dlg-h{position:relative;padding:22px 64px 14px 24px;border-bottom:1px solid var(--line)}
.cc-dlg-h h2{margin:0;font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:var(--ink)}
.cc-dlg-h h2:focus{outline:none}
.cc-dlg-h .cc-x{top:14px;right:12px}
.cc-dlg-b{padding:18px 24px 6px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;font-size:.9375rem;line-height:1.6}
.cc-dlg-b>p{margin:0 0 14px}
.cc-cats{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:12px}
.cc-cat{padding:16px 18px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.cc-cat-h{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cc-cat-h h3{margin:0;font-size:1.0625rem;color:var(--ink);letter-spacing:-.01em}
.cc-cat>p{margin:6px 0 0}
.cc-always{flex:none;padding:4px 10px;border-radius:999px;background:var(--sea);color:var(--petrol);font-size:.8125rem;font-weight:600}
.cc-sw{position:relative;flex:none;width:56px;height:32px;margin:0;padding:0;border:0;border-radius:999px;background:#B9C7CB;cursor:pointer;transition:background-color .2s}
.cc-sw::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(8,42,52,.35);transition:transform .25s var(--ease)}
.cc-sw[aria-checked="true"]{background:var(--petrol)}
.cc-sw[aria-checked="true"]::after{transform:translateX(24px)}
.cc-sw .cc-sw-on,.cc-sw .cc-sw-off{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cc-cat details{margin-top:8px}
.cc-cat summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--petrol);font-weight:600;cursor:pointer;list-style:none}
.cc-cat summary::-webkit-details-marker{display:none}
.cc-cat summary::before{content:"";width:8px;height:8px;margin-right:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.cc-cat details[open] summary::before{transform:rotate(45deg)}
.cc-tbl{width:100%;margin:6px 0 4px;border-collapse:collapse;font-size:.875rem;line-height:1.45}
.cc-tbl th,.cc-tbl td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cc-tbl th{color:var(--ink);font-weight:600}
.cc-tbl code{font-size:.8125rem;white-space:nowrap}
@media (max-width:599px){
  .cc-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cc-tbl tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}
  .cc-tbl td{display:block;padding:2px 0;border:0}
  .cc-tbl td::before{content:attr(data-h) ": ";color:var(--ink);font-weight:600}
}
.cc-dlg-f{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--sand0,#FBF6EE)}
.cc-dlg-f .cc-b-save{grid-column:1 / -1;order:3}
@media (min-width:600px){.cc-dlg-f{grid-template-columns:1fr 1.2fr 1fr}.cc-dlg-f .cc-b-save{grid-column:auto;order:0}}
.cc-dlg-f .btn{min-height:48px;padding:10px 16px;font-size:.9375rem}
.cc-dlg-l{display:flex;flex-wrap:wrap;gap:4px 18px;margin:4px 0 12px}
@media (max-width:599px){.cc-dlg{width:100%;max-width:none;max-height:100%;height:100%;border-radius:0}}

/* the footer link that reopens the choices */
.ft-cc{display:inline;margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;text-decoration:none;cursor:pointer}
.ft-cc:hover{text-decoration:underline;text-underline-offset:.2em}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
.ft-links li{min-height:0!important;padding:0!important}
.ft-links a,.ft-links .ft-cc{display:inline-flex;align-items:center;min-height:36px}
.ft-company{max-width:72ch}

/* a third-party map waiting for consent */
.map-note a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.2em}

@media (prefers-reduced-motion:reduce){.cc-bar,.cc-sw,.cc-sw::after{transition:none!important}}
@media print{.cc-bar,.cc-dlg{display:none!important}}

/* ---------- legal pages (privacy, cookie policy, note legali, accessibilità): the layout of the contract conditions ---------- */
.legal .cond-full{max-width:72ch}
.legal-brief ul li span{color:var(--ink)}
.legal-toc{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.legal-toc h2{font-size:1rem;letter-spacing:0;margin-bottom:6px}
.legal-toc ol{margin:0;padding-left:1.25em;display:block;font-size:.9375rem}
.cond-brief .legal-toc li{display:list-item;margin:0;line-height:1.45;color:var(--ink-2)}
.legal-toc a{display:inline-block;padding:3px 0;color:var(--petrol);text-decoration:underline;text-underline-offset:.2em}
.legal-toc a:hover{color:var(--coral-ink)}
.legal-s{scroll-margin-top:calc(var(--hh) + 24px)}
.legal-s ul,.legal-s ol{margin:12px 0 0;padding-left:1.2em;display:grid;gap:8px;font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.legal-s h3{margin:22px 0 4px;font-size:1.125rem}
.legal-s a{color:var(--petrol);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.legal-s a:hover{color:var(--coral-ink)}
.legal-s .legal-tbl{margin-top:14px;font-size:.9375rem;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.legal-s .legal-tbl th,.legal-s .legal-tbl td{padding:10px 12px}
.legal-s .legal-tbl thead th{background:var(--sea);font-size:.875rem}
@media (max-width:599px){.legal-s .legal-tbl tr{padding:10px 12px}.legal-s .legal-tbl td{padding:2px 0}}
.legal-dl{margin:14px 0 0;display:grid;gap:0;border-top:1px solid rgba(11,52,64,.12)}
.legal-dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0;border-bottom:1px solid rgba(11,52,64,.12)}
@media (min-width:640px){.legal-dl>div{grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:16px}}
.legal-dl dt{font-weight:600;color:var(--ink)}
.legal-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.legal-cc{margin-left:6px;vertical-align:middle}
/* the privacy notice of the request form, where the consent box used to be */
.req-priv{margin:4px 0 0;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.req-priv a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
/* the assistant's footer line: "not a person / AI" notice with the privacy link (AI Act art. 50) */
.ch-foot a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:.15em}
/* the data credit next to the live figures in the home hero (Open-Meteo terms: a link next to the data) */
.s-live .s-live-src{margin-left:4px;color:rgba(255,255,255,.82);font-size:.75rem;font-weight:500;text-decoration:underline;text-underline-offset:.15em}
.s-live .s-live-src:hover{color:#fff}

/* ---------- language suggestion (no automatic redirect: Reg. UE 2018/302 art. 3(2)) ---------- */
.lsg-bar{position:fixed;z-index:65;top:calc(10px + env(safe-area-inset-top));left:50%;width:min(640px,calc(100% - 24px));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;
  padding:14px 56px 14px 18px;border-radius:var(--r);background:#fff;color:var(--ink);box-shadow:var(--float),0 0 0 1px rgba(11,52,64,.08);
  font-size:.9375rem;line-height:1.45;opacity:0;transform:translate(-50%,-14px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.lsg-bar.lsg-in{opacity:1;transform:translate(-50%,0)}
.lsg-msg{margin:0;font-weight:600}
.lsg-note{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-2)}
.lsg-btns{display:flex;flex-wrap:wrap;gap:8px}
.lsg-btns .btn{min-height:44px;padding:8px 16px;font-size:.9375rem}
.lsg-bar .lsg-x{top:50%;right:8px;transform:translateY(-50%)}
@media (max-width:599px){
  .lsg-bar{grid-template-columns:minmax(0,1fr);padding:14px 52px 14px 16px}
  .lsg-bar .lsg-x{top:8px;transform:none}
  .lsg-btns .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.lsg-bar{transition:none!important}}
@media print{.lsg-bar{display:none!important}}
/* footer: the language choice is remembered on this device (WP29 Opinion 04/2012 §3.6, art. 122 Codice privacy) */
.ft-langnote{margin:0;font-size:.8125rem;color:#B9CFD4}

/* ===== 90-seo.css ===== */
/* The hero kicker (script font) now sits above the H1 instead of inside it, so the H1 is only the page title (SEO).
   Same look as the former ".phero h1 .script": 0.82 of the H1 size, block, its own colours and shadow. */
.phero-kick{display:block;margin:0 0 .06em;font-family:var(--script);font-weight:400;letter-spacing:0;line-height:1.05;
  font-size:calc(.82 * clamp(2.5rem,3.6vw + 1.3rem,5rem));color:#FFDCCB;text-shadow:0 2px 16px rgba(4,24,32,.6)}
@media (min-width:900px){.phero-kick{color:var(--coral-l)}}
.phero--sky .phero-kick{color:var(--coral-ink)}
/* WCAG 2.2 2.4.11 (focus not obscured): on phones the fixed action bar covers the bottom of the screen */
@media (max-width:899px){html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}}


/* header: the nav needs more room with seven links */
@media (min-width:1100px) and (max-width:1279px){.nav{display:none}.burger{display:grid}}