/* ============================================================
   WebCreator — shared base stylesheet (premium)
   Structure + components. Palette/typography come from a variant
   stylesheet that overrides the CSS custom properties below.
   ============================================================ */
:root {
  --accent: #c0703a;
  --accent-2: #e0a96d;
  --bg: #faf6f1;
  --surface: #ffffff;
  --ink: #241d18;
  --muted: #6f655c;
  --border: #e9e0d4;
  --radius: 24px;
  --radius-pill: 999px;
  --font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Cinematic scrim: darkens the lower-left (where the headline + CTA sit) and
     the bottom edge, while letting the upper-right of the real photo stay vivid
     — the image reads as a photograph, not a murky wash. */
  --hero-overlay:
    linear-gradient(105deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 44%, rgba(0,0,0,.06) 72%),
    linear-gradient(0deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.10) 42%, transparent 60%);
  --shadow: 0 30px 60px rgba(20,12,6,.18);
  --shadow-sm: 0 10px 26px rgba(20,12,6,.10);
  --maxw: 1180px;

  /* --- design-token scales -------------------------------------------- */
  /* spacing scale (rem) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
  /* radius scale */
  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px;
  /* elevation scale */
  --shadow-xs: 0 2px 8px rgba(20,12,6,.06);
  --shadow-lg: 0 44px 90px rgba(20,12,6,.24);
  /* colour roles derived from the accent */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ink: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --ring: color-mix(in srgb, var(--accent) 22%, transparent);
  /* Always-dark panel for the topbar & footer. These carry hard-coded LIGHT
     text (and white OTA pills), so their background must stay dark in EVERY
     variant. Using var(--ink) broke dark variants, where --ink is a light
     colour → light text on a light bar. This token is dark regardless. */
  --dark-panel: color-mix(in srgb, var(--accent) 16%, #15110d);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
/* Contain the off-canvas mobile menu (.main-nav is position:fixed + translateX(100%),
   which otherwise creates a horizontal scroll on phones). `clip` clips the overflow
   WITHOUT creating a scroll container, so position:sticky (the header) still works. */
html, body { overflow-x: clip; }
/* in-page nav jumps land BELOW the sticky glass header, not hidden under it */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); line-height: 1.75; font-size: 18px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-head); line-height: 1.08; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }

/* Accessibility */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--dark-panel); color: #fff; padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 10px 0; font-weight: 700; }
.skip-link:focus { left: 0; }

/* Header / nav — glassy floating bar */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 3.5rem);
  /* Liquid-glass bar: deeper translucency + saturation + a soft shadow instead
     of a hard hairline border (reads as frosted glass over the content). */
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: 0 6px 24px -14px rgba(20,12,6,.5);
}
.brand { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); letter-spacing: -.02em; }
/* Per-lead brand LOGO (opt-in): shown in place of the text name; sized to the header
   on desktop and mobile, never overflowing the bar. */
.brand--logo { display: inline-flex; align-items: center; padding: .1rem 0; flex: none; }
.brand-logo { height: 56px; width: auto; max-width: 230px; display: block; object-fit: contain; border-radius: 10px; }
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
.main-nav a { color: var(--ink); font-weight: 600; font-size: .95rem; position: relative; padding: .2rem 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--accent); transition: right .25s ease; }
.main-nav a:hover { color: var(--accent); }
.main-nav a:hover::after { right: 0; }
.social-links { display: flex; gap: .55rem; align-items: center; }
.social-links a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  transition: transform .18s, background .18s, color .18s;
}
.social-links a:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
  padding: .95rem 2rem; border-radius: var(--radius-pill); cursor: pointer;
  border: 2px solid transparent; transition: transform .18s, box-shadow .18s, background .18s;
  font-size: 1.02rem; font-family: var(--font-head);
}
.btn-primary {
  /* Solid, slightly DEEPENED accent so white text always meets AA contrast —
     the old accent→accent-2 gradient washed out the label on lighter palettes
     (gold/sand) and read as "too light to see". */
  color: #fff; background-image: none;
  background: color-mix(in srgb, var(--accent) 88%, #1c120a);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}
.btn-primary:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--accent) 70%, #1c120a); box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 50%, transparent); color: #fff; }
/* tactile press feedback (ui-ux-pro-max scale-feedback) */
.btn:active { transform: translateY(0) scale(.98); }
/* form submit loading state (ui-ux-pro-max loading-buttons): spinner + locked */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: btnspin .7s linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
.btn-ghost { background: transparent; border-color: currentColor; color: #fff; }
.hero .btn-ghost { color: #fff; backdrop-filter: blur(4px); background: rgba(255,255,255,.08); }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Hero — cinematic */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden;
  background-size: cover; background-position: center; color: #fff; isolation: isolate;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); z-index: -1; }
.hero::after {
  content: ""; position: absolute; inset: -20% -20% auto -20%; height: 70%; z-index: -1;
  background: radial-gradient(60% 60% at 70% 20%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%);
  mix-blend-mode: screen; opacity: .8; animation: glow 9s ease-in-out infinite alternate;
}
.hero--small { min-height: 60vh; }
.hero-inner { position: relative; padding: clamp(2rem, 6vw, 7rem); max-width: 960px; animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); text-shadow: 0 4px 30px rgba(0,0,0,.45); font-weight: 800; }
.hero .subtitle { font-size: clamp(1.1rem, 2.6vw, 1.6rem); opacity: .96; max-width: 40ch; }
.hero .eyebrow {
  display: inline-block; letter-spacing: .28em; text-transform: uppercase; font-size: .78rem;
  font-weight: 700; padding: .45rem 1rem; margin-bottom: 1.2rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px);
}
.hero .rating { margin: .8rem 0 1.6rem; font-weight: 700; }
/* aligned figures for ratings/prices/distances (no width jitter) */
.rating, .poi .dist, .badge, .count-up { font-variant-numeric: tabular-nums; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
/* scroll cue */
.hero::after, .hero { will-change: transform; }

/* Sections */
.section { max-width: 1120px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 2rem); }
.section--alt { position: relative; background: var(--surface); max-width: none; overflow: hidden; }
/* Soft accent aurora for depth on alternating sections */
.section--alt::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 60%; height: 120%;
  background: radial-gradient(50% 50% at 70% 30%, var(--accent-soft), transparent 70%);
  pointer-events: none; z-index: 0;
}
.section--alt > .section-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.section-title { font-size: clamp(1.9rem, 4.4vw, 2.9rem); display: inline-block; }
.section-title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 99px; margin-top: .7rem; background: var(--accent); }
.lead { color: var(--muted); max-width: 72ch; font-size: 1.08rem; }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem; margin-top: 2.4rem; }
.card {
  position: relative; padding: 1.9rem; overflow: hidden; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  /* Clean flat surface (editorial), not a tinted gradient — reads crisper and
     lets the border + hover lift do the work (ui-ux-pro-max card guidance). */
  background: var(--surface);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s;
}
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.section--alt .card { background: var(--bg); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.card:hover::before { transform: scaleX(1); }
.card h3 { color: var(--accent); font-size: 1.25rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 2.4rem; }
.gallery .media { position: relative; height: 250px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background-size: cover; background-position: center; margin: 0; }
.gallery .media picture, .gallery .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .media img { transition: transform .5s ease, opacity .7s ease; }
.gallery .media:hover { box-shadow: var(--shadow); }
.gallery .media:hover img { transform: scale(1.06); }
/* blur-up: real photo fades in over its tiny placeholder (JS-gated) */
html.js .media.blur-up img { opacity: 0; }
.media img.loaded { opacity: 1 !important; }

/* Map */
.map-wrap { margin-top: 1.8rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.map { width: 100%; height: 400px; border: 0; display: block; filter: saturate(1.05); }

/* Forms */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow); max-width: 680px; margin-top: 1.6rem; }
.section--alt .form-card { background: var(--bg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* width:100% + min-width:0 so date/number inputs never exceed their grid track on
   mobile (grid/flex children default to min-width:auto = min-content → overflow). */
.field input, .field textarea, .field select { width: 100%; min-width: 0; max-width: 100%; padding: .85rem .95rem; border: 1px solid var(--border); border-radius: 12px; font: inherit; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
/* Checkboxes/radios (e.g. the "Servizi extra" multiselect) must NOT inherit the
   full-width text-input styling above, or the box stretches to 100% and shoves its
   label out of the fieldset on mobile. Keep them native-sized. */
.field input[type="checkbox"], .field input[type="radio"] { width: auto; min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); outline: none; }
.form-status { min-height: 1.4em; font-weight: 700; margin: .9rem 0 0; }
.form-status.ok { color: #2e7d32; }
.form-status.err { color: #c0392b; }

/* Nearby POIs */
/* Space the "nearby" category blocks apart so a title isn't glued to the
   previous category's cards. */
.nearby-group + .nearby-group { margin-top: clamp(2.8rem, 5vw, 4rem); }
.poi { display: flex; flex-direction: column; }
.poi .kind { color: var(--muted); font-size: .85rem; text-transform: capitalize; margin: 0; }
.poi .dist { font-weight: 800; color: var(--accent); margin-top: .6rem; font-size: 1.1rem; }
/* Clickable POI card → opens Google Maps (new tab on desktop, app on mobile) */
.poi--link { color: inherit; text-decoration: none; cursor: pointer; }
.poi--link h3 { color: var(--accent); }
.poi--link:hover { color: inherit; }

/* Badges / notes */
.badge { display: inline-block; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; border-radius: var(--radius-pill); padding: .25rem .9rem; font-size: .8rem; font-weight: 700; }
.note { color: var(--muted); font-size: .95rem; }
.review-cta { display: inline-flex; align-items: center; gap: .5rem; }

/* Footer */
.site-footer { background: var(--dark-panel); color: #e8ddd0; text-align: center; padding: 3.5rem 1rem; }
.site-footer .brand, .site-footer strong { color: #fff; }
.site-footer .social-links { justify-content: center; margin: 1.2rem 0; }
.site-footer .social-links a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.site-footer .btn-ghost { color: #fff; margin-top: .6rem; }
.demo-note { font-size: .8rem; opacity: .55; margin-top: .8rem; }

/* Animations */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes glow { from { transform: translateY(-6%) scale(1); opacity: .55; } to { transform: translateY(4%) scale(1.1); opacity: .85; } }
/* Progressive enhancement: content is visible by default (good for SEO &
   no-JS); only hidden once JS marks the document, then revealed on scroll. */
.reveal { transition: opacity .8s ease, transform .8s ease; }
html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

.main-nav a.active { color: var(--accent); }
.main-nav a.active::after { right: 0; }

/* Mobile nav toggle (injected by app.js) */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 3px; transition: transform .25s, opacity .25s; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 80; padding: 4vw; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }

@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  /* The slide-in drawer is position:fixed; a backdrop-filter on the header would
     make it resolve against the header box (a tiny strip) instead of the viewport
     → broken half-height drawer. Drop the blur on mobile so the drawer fills the
     screen; keep a solid header bg for legibility. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .nav-toggle { display: flex; z-index: 70; }
  /* keep the toggle (now an ✕) ABOVE the open drawer, pinned top-right, so the
     menu can always be closed */
  body.nav-open .nav-toggle { position: fixed; top: 1.05rem; right: 1.1rem; }
  body.nav-open .nav-toggle span { background: var(--ink); }
  .main-nav { position: fixed; inset: 0 0 0 28%; background: var(--surface); transform: translateX(100%); transition: transform .3s ease; padding: 5rem 1.5rem; box-shadow: var(--shadow); z-index: 60; overflow-y: auto; }
  body.nav-open .main-nav { transform: none; }
  /* lock the page behind the open menu so it doesn't scroll away under it.
     The scroller is usually <html>, so body overflow alone isn't enough — lock
     the root too (:has lets us reach it from the body class). */
  body.nav-open { overflow: hidden; }
  html:has(body.nav-open) { overflow: hidden; }
  .main-nav ul { flex-direction: column; gap: 1.2rem; }
  /* Compact contact topbar on mobile (phone/email/city): smaller + tighter so it
     doesn't eat a third of the screen and push the hero under the header. */
  .topbar { font-size: .72rem; gap: .1rem .9rem; padding: .3rem .7rem; line-height: 1.35; }
  /* Small safety clearance so the bottom-anchored hero eyebrow never tucks under the
     sticky header on very short viewports. */
  .hero { padding-top: 2rem; }
  /* Header actions on small screens: the language switcher (up to 4 codes) plus the
     social icons were wider than the row, so the last icon (e.g. the Google review
     star) got clipped off the right edge. Drop the social icons from the sticky bar
     on mobile — the phone is already tappable in the topbar (📞) and every social/
     review link stays in the footer — leaving brand + menu + switcher, which always
     fits for any number of languages. */
  .site-header .social-links { display: none; }
  .brand-logo { height: 44px; max-width: 150px; }
  .header-right { gap: .5rem; min-width: 0; }
  .lang-switch { font-size: .8rem; gap: .1rem; }
  .lang-switch a { padding: .22rem .4rem; }
  /* cookie banner: stack compactly so it never overflows the viewport width */
  .cookie-banner { padding: .8rem 1rem; gap: .55rem; }
  .cookie-banner p { flex: 1 1 100%; font-size: .85rem; text-align: center; }
  .cookie-banner .cookie-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
  .cookie-banner .btn { flex: 1 1 auto; }
}

/* ============================================================
   MODERN LAYER — extra components for a premium feel
   ============================================================ */

/* Thin contact/announcement bar above the header */
.topbar {
  display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--dark-panel); color: #f3ece0; font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; letter-spacing: .02em;
}
.topbar a { color: #fff; }
.topbar a:hover { color: var(--accent-2); }

/* Hero glass info-card */
.hero-inner { max-width: 1000px; }
.hero-card {
  display: inline-block; margin-top: 1.6rem; padding: 1.1rem 1.4rem; border-radius: 18px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.hero-card .meta { display: flex; gap: 1.4rem; flex-wrap: wrap; font-weight: 600; }
.hero-card .meta span { display: inline-flex; align-items: center; gap: .4rem; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; z-index: 1; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: #fff; border-radius: 4px; transform: translateX(-50%); animation: cue 1.6s infinite; }
@keyframes cue { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,12px)} }

/* Richer animated mesh in the hero */
.hero::after {
  background:
    radial-gradient(40% 50% at 78% 18%, color-mix(in srgb, var(--accent-2) 60%, transparent), transparent 70%),
    radial-gradient(34% 44% at 18% 12%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 72%);
}

/* Features / amenities strip */
.features { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.features-inner { max-width: var(--maxw); margin: 0 auto; padding: 2.2rem clamp(1rem,4vw,2rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.2rem; }
.feature { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.feature .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow-sm); font-size: 1.2rem; }

/* Stats band */
.stats { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, #000), var(--accent)); color: #fff; }
.stats-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem,5vw,4rem) clamp(1rem,4vw,2rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; text-align: center; }
.stat .num { font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; }
.stat .lbl { opacity: .9; font-size: .95rem; margin-top: .4rem; }

/* Testimonial */
.quote { max-width: 760px; margin: 2.4rem auto 0; text-align: center; font-size: clamp(1.2rem,2.6vw,1.6rem); font-style: italic; color: var(--ink); }
.quote cite { display: block; margin-top: 1rem; font-size: .95rem; font-style: normal; color: var(--muted); font-weight: 700; }

/* Floating booking CTA */
.float-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; opacity: 0; transform: translateY(20px);
  transition: opacity .3s, transform .3s; box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 50%, transparent);
}
.float-cta.show { opacity: 1; transform: none; }
@media print { .float-cta, .scroll-cue { display: none; } }

/* WhatsApp + OTA portal links */
.social-links a.wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.portals { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .8rem 0; }
.portal { font-size: .85rem; font-weight: 700; padding: .45rem 1rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.portal:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Varied gallery heights for a modern masonry feel */
.gallery .media:nth-child(3n+1) { height: 300px; }
.gallery .media:nth-child(4n+2) { height: 210px; }
@media (max-width: 760px) { .gallery .media { height: 200px !important; } }

/* ============================================================
   PREMIUM LAYER — Ken Burns hero, bento, carousel, FAQ, dark
   ============================================================ */

/* Cinematic Ken Burns zoom on the hero photo (its own GPU layer) */
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.02); will-change: transform;
  animation: kenburns 26s ease-in-out 0s infinite alternate both;
}
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.16); } }

/* Bento grid: first card spans larger for a modern editorial rhythm */
@media (min-width: 880px) {
  .grid--bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .grid--bento > .card:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
  .grid--bento > .card:first-child h3 { font-size: 1.7rem; }
  .grid--bento > .card:first-child p { font-size: 1.08rem; }
}

/* Reviews carousel — scroll-snap track with dot navigation */
.reviews-carousel { position: relative; margin-top: 1.6rem; }
.reviews-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr);
  gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .4rem .2rem 1.2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track .review-card { scroll-snap-align: center; }
.review-card .stars { color: var(--accent); letter-spacing: .12em; font-size: 1.05rem; margin-bottom: .4rem; }
@media (min-width: 980px) { .reviews-track { grid-auto-columns: minmax(0, 1fr); overflow: visible; } }
.carousel-dots { display: flex; gap: .5rem; justify-content: center; margin-top: .2rem; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); cursor: pointer; transition: transform .2s, background .2s; }
.carousel-dots button.active { background: var(--accent); transform: scale(1.35); }
@media (min-width: 980px) { .carousel-dots { display: none; } }

/* FAQ accordion (native <details>, no JS required) */
.faq { max-width: 820px; margin-top: 2rem; display: grid; gap: .9rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .2rem 1.3rem; box-shadow: var(--shadow-xs); transition: box-shadow .2s, border-color .2s; }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.faq-item summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; padding: 1rem 0; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 1.1rem; color: var(--muted); }

/* Styled map: subtle frame + lift on hover */
.map-wrap { transition: box-shadow .25s, transform .25s; }
.map-wrap:hover { box-shadow: var(--shadow-lg); }

/* Premium dark variants only override the colour-role tokens above, so every
   component (cards, header, forms, FAQ) re-themes automatically. The map keeps
   its own light tiles, so give it a soft edge to sit well on a dark canvas. */
.map { filter: saturate(1.05) brightness(.96); }

/* Header right cluster + language switcher */
.header-right { display: flex; align-items: center; gap: .9rem; }
.lang-switch { display: flex; gap: .15rem; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: .85rem; }
.lang-switch a { padding: .25rem .5rem; border-radius: 8px; color: var(--muted); line-height: 1; }
.lang-switch a.active { color: #fff; background: var(--accent); }
.lang-switch a:not(.active):hover { color: var(--accent); }

/* Cookie banner */
/* Pinned to the TOP, full-width: a consent bar must never sit on top of the
   bottom "do you like this preview?" box (they used to collide bottom-centre).
   The [hidden] rule is essential — without it the .cookie-banner display:flex
   overrides the HTML hidden attribute, so "Accetto" could never close it. */
.cookie-banner { position: fixed; left: 0; right: 0; top: 0; bottom: auto; transform: none; z-index: 90; width: 100%; max-width: none; background: var(--surface); color: var(--ink); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: 0 8px 26px rgba(0,0,0,.20); padding: .8rem clamp(1rem,4vw,2.2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.3rem; }
.cookie-banner[hidden] { display: none; }
/* flex-basis min(420px,100%) so the paragraph never forces a width wider than the
   viewport on mobile (plain 420px basis caused ~427px horizontal overflow, which in
   turn pushed the fixed .float-cta / header to overflow too). */
.cookie-banner p { margin: 0; font-size: .9rem; flex: 1 1 min(420px, 100%); min-width: 0; }
.cookie-banner .cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.cookie-banner .btn { padding: .6rem 1.2rem; font-size: .9rem; }
.cookie-banner .btn-ghost { color: var(--ink); }
@media print { .cookie-banner { display: none; } }
.legal-page h2 { margin-top: 1.6rem; }

/* Accessibility toolbar (opt-in add-on, injected by app.js) */
.a11y-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 78; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: #fff; font-size: 1.3rem; box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.a11y-panel { position: fixed; left: 16px; bottom: 74px; z-index: 78; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: .8rem; display: none; flex-direction: column; gap: .5rem; min-width: 200px; }
.a11y-panel.open { display: flex; }
.a11y-panel button { font: inherit; font-weight: 700; text-align: left; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--ink); cursor: pointer; }
.a11y-panel button:hover { border-color: var(--accent); color: var(--accent); }
.a11y-panel button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
@media print { .a11y-toggle, .a11y-panel { display: none !important; } }

/* Larger-text mode */
html.a11y-lg body { font-size: 1.16rem; line-height: 1.85; }
html.a11y-lg .lead { font-size: 1.22rem; }
/* High-contrast mode — re-maps the colour-role tokens, so all components follow */
html.a11y-hc { --ink: #111; --muted: #333; --bg: #fff; --surface: #fff; --border: #222; --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.8)); }
html.a11y-hc a { text-decoration: underline; }
html.a11y-hc .btn-primary { color: #fff; }

/* =====================================================================
   MODERN REWORK (2025 quiet-luxury) — applies to ALL categories.
   Palette-agnostic: uses each variant's --accent/--ink/--border/--surface,
   so every theme (light AND dark "luxe") keeps its colours but loses the
   dated gradients/glow and gains editorial type, flat components and air.
   Per-category variant CSS still loads AFTER base.css and can override.
   ===================================================================== */
h1, h2, h3 { font-weight: 600; letter-spacing: -.012em; }

/* sections: more breathing room */
.section { padding: clamp(4.5rem, 10vw, 9rem) clamp(1.2rem, 5vw, 2.5rem); }
.section-title { font-weight: 600; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; }
.section-title::after { width: 40px; height: 2px; background: var(--accent); background-image: none; border-radius: 2px; }

/* HERO: editorial, low-anchored headline, no decorative mesh glow */
.hero { align-items: end; }
.hero::after { display: none; }
.hero-inner { padding-bottom: clamp(2.6rem, 7vw, 6rem); }
.hero h1 { font-weight: 500; font-size: clamp(2.8rem, 8.5vw, 6rem); line-height: 1.0; text-shadow: 0 2px 24px rgba(0,0,0,.34); }
.hero .eyebrow { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); letter-spacing: .3em; font-weight: 600; backdrop-filter: blur(4px); }

/* buttons: flat solid accent, crisp, no gradient */
.btn { border-radius: 10px; letter-spacing: .04em; }
.btn-primary { background: var(--accent); background-image: none; box-shadow: none; }
.btn-primary:hover { background: var(--accent-ink, var(--accent-2)); background-image: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* cards: flat, hairline border, no gradient fill, no accent top-bar */
.card { background: var(--surface); background-image: none; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
.section--alt .card { background: var(--bg); }
.card::before { display: none; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.card h3 { color: var(--ink); }

/* quieter alternating sections — drop the radial "aurora" */
.section--alt::before { display: none; }

/* badges + social: hairline, calmer */
.badge { background: transparent; background-image: none; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); }
.social-links a { background: transparent; border: 1px solid var(--border); color: var(--ink); border-radius: 10px; }
.social-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

/* gallery + forms: lose the heavy shadows */
.gallery .media { box-shadow: none; }
.form-card { box-shadow: var(--shadow-sm); }