/* styles.css — base.css + theme.css + base-v2.css uniti il 2026-09-14.
   open-props.css è stato rimosso: nessuna delle sue variabili era usata. */

/* ===== base.css ===== */
/* ============================================================
   WebCreator — shared base stylesheet (premium)
   Structure + components. Palette/typography come from a variant
   stylesheet that overrides the CSS custom properties below.
   ============================================================ */
:root {
  --accent: #8d7047;
  --accent-2: #c6a875;
  --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; }
/* Il colore pieno dell'accento su superficie chiara sta a 4,42:1, sotto AA:
   per il testo dei link si usa la variante scura della stessa palette (6,4:1). */
a { color: var(--accent-ink, 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; }
a.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; }
.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; }

/* 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); } }
/* default (on light page sections): accent outline + accent text, so it's always
   visible. Dark contexts (hero/footer/cookie) re-assert white/ink below. */
.btn-ghost { background: transparent; border-color: var(--accent); color: var(--accent-ink, var(--accent)); }
.hero .btn-ghost { color: #fff; border-color: currentColor; 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; }
/* Sul pannello scuro del footer l'oro pieno sta a 3,86:1: qui la variante chiara (7,9:1). */
.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; }
}

/* 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; }
/* Explicit ✕ close button inside the open drawer (injected by app.js). The
   hamburger-into-X trick was too subtle — users couldn't find how to close the
   menu — so on open we HIDE the hamburger and show this clear ✕ instead. */
.nav-close { display: none; background: none; border: 0; cursor: pointer; color: var(--ink); font-size: 2.2rem; line-height: 1; padding: 0 .3rem; }

/* 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; }
  .nav-toggle { display: flex; z-index: 70; }
  /* On open, hide the hamburger and show the explicit ✕ inside the drawer. */
  body.nav-open .nav-toggle { display: none; }
  .nav-close { display: block; position: absolute; top: 1rem; right: 1.1rem; z-index: 65; }
  /* 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; }
  /* 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. */
  /* NB: the base `.topbar` rule below is declared later in the file, so on mobile
     its gap/font would win by source order — force the compact values here. */
  .topbar { font-size: .72rem !important; gap: 0 .8rem !important; padding: .25rem .7rem !important; line-height: 1.15 !important; }
  .topbar span { padding: 0 !important; margin: 0 !important; }
  /* 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. */
  
  .brand-logo { height: 44px; max-width: 150px; }
  .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; } }
.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: calc((100% - 2 * 1.4rem) / 3); } }
.review-card { scroll-snap-align: start; }
/* Photo gallery carousel — 3-up scrolling track (opt-in via extra.gallery_carousel) */
.gallery-carousel { position: relative; margin-top: 2.4rem; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .2rem .2rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track .media {
  position: relative; height: 340px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); background-size: cover; background-position: center; margin: 0;
  scroll-snap-align: start;
}
.gallery-track .media picture, .gallery-track .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-track .media img { transition: transform .5s ease, opacity .7s ease; }
.gallery-track .media:hover img { transform: scale(1.05); }
@media (min-width: 980px) { .gallery-track { grid-auto-columns: calc((100% - 2 * 1.1rem) / 3); } .gallery-carousel:has(.rev-nav:not([hidden])) { padding: 0 52px; } }
@media (max-width: 760px) { .gallery-track .media { height: 240px; } }
/* auto-scroll marquee mode: continuous motion, no scroll-snap fighting it */
.gallery-marquee .gallery-track, .reviews-marquee .reviews-track { scroll-snap-type: none; }
.gallery-marquee .gallery-track, .reviews-marquee .reviews-track { scroll-behavior: auto; }
.gallery-marquee, .reviews-marquee { cursor: default; }
.rev-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface, #fff); color: var(--ink); font-size: 1.5rem; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: opacity .2s, transform .15s;
  display: flex; align-items: center; justify-content: center;
}
.rev-nav:hover { transform: translateY(-50%) scale(1.06); }
.rev-nav[disabled] { opacity: .3; cursor: default; }
.rev-prev { left: 0; } .rev-next { right: 0; }
@media (min-width: 980px) { .reviews-carousel:has(.rev-nav:not([hidden])) { padding: 0 52px; } }
@media (max-width: 560px) { .rev-nav { display: none; } }
.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); }
/* Language switcher as a compact dropdown (a <details>): shows only the current
   language + a caret, so any number of languages fits on one row (mobile included);
   the others reveal in a small panel on click. */
/* Robust, self-contained tokens (--lang-*) with light fallbacks so the chip never
   collapses to black when a bespoke self-contained template redefines --surface/
   --ink/--border for its own (often dark) sections. A template may set --lang-bg/
   --lang-fg/--lang-bd/--lang-active in :root to theme the chip to its nav. */
.lang-switch { position: relative; font-family: var(--font-head, inherit); font-weight: 700; font-size: .85rem; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .32rem; padding: .3rem .55rem; border-radius: 8px; color: var(--lang-fg, #24303f); border: 1px solid var(--lang-bd, rgba(0,0,0,.16)); background: var(--lang-bg, #fff); line-height: 1; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch .lang-caret { transition: transform .2s ease; opacity: .7; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--lang-bg, #fff); border: 1px solid var(--lang-bd, rgba(0,0,0,.16)); border-radius: 10px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.35); padding: .35rem; display: flex; flex-direction: column; gap: .12rem; min-width: 68px; z-index: 80; }
.lang-menu a { padding: .42rem .6rem; border-radius: 7px; color: var(--lang-fg, #24303f); opacity: .72; line-height: 1; text-align: center; }
.lang-menu a.active { color: #fff; background: var(--lang-active, var(--accent, #4f46e5)); opacity: 1; }
.lang-menu a:not(.active):hover { opacity: 1; background: rgba(0,0,0,.06); }

/* Cookie banner */
/* Ancorata IN BASSO, a tutta larghezza (2026-09-14): il riquadro "ti piace questa
   anteprima?" che stava in fondo non esiste più — era un artefatto di vendita — quindi
   la barra del consenso può stare dove la gente se la aspetta, senza coprire l'header.
   Quando è visibile, il JS alza i pulsanti flottanti (--bb-fab-b) così non si sovrappongono.
   La regola [hidden] è essenziale: senza, display:flex batte l'attributo hidden dell'HTML
   e "Accetto" non riuscirebbe a chiuderla. */
.cookie-banner { position: fixed; left: 0; right: 0; top: auto; bottom: 0; transform: none; z-index: 95; width: 100%; max-width: none; background: var(--surface); color: var(--ink); border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: 0 -8px 26px rgba(0,0,0,.20); padding: .8rem clamp(1rem,4vw,2.2rem); padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); 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); }

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

/* ---------- font locali (niente Google Fonts: asset locali + nessun terzo) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  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;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter-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;
}

/* ===== theme.css ===== */
/* B&B variant: "warm" — terracotta & cream, rounded & cosy */
:root {
  --accent: #8d7047;
  --accent-2: #e6b27d;
  --bg: #faf4ec;
  --surface: #ffffff;
  --ink: #2c211a;
  --muted: #7a6c5f;
  --border: #ece1d2;
  --radius: 18px;
  --font-head: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --hero-overlay: linear-gradient(180deg, rgba(60,30,10,.30), rgba(40,20,8,.66));
}

/* ===== base-v2.css ===== */
/* ============================================================
   WebCreator — DESIGN v2 (ui-ux-pro-max) — premium override layer.
   Loaded AFTER base.css + the per-category variant, so it only refines:
   spacing, elevation, type rhythm and component polish. It reuses the same
   class contract and the per-site accent (var(--accent), auto-extracted from
   the hero photo), so every one of the 18 categories gets the upgrade with
   zero structural/template change. Goal: calmer, more editorial, more
   professional — the look that converts.
   ============================================================ */
:root {
  /* PALETTE (ui-ux-pro-max "sage neutral + calm teal"): clean slate neutrals +
     a fresh teal accent — replaces the earthy black/brown that read poorly. The
     accent is forced (!important) over the per-photo extracted colour, which was
     often brown/dark for B&B photos. */
  --ink: #0F172A;            /* slate-900 text/headings (not brown) */
  --bg: #F8FAFC;             /* clean off-white (not cream) */
  --surface: #FFFFFF;
  --muted: #64748B;          /* slate */
  --border: #E2E8F0;         /* slate-200 */
  --dark-panel: #0F172A;     /* topbar/footer: clean slate, not brown-black */
  /* accent comes per-CATEGORY from the builder (_V2_PALETTE) — a curated fresh
     colour per activity type (teal for B&B, rose for beauty, …), injected after
     this file, replacing the earthy per-photo accent. */
  /* refined geometry — a touch less round reads more grown-up/editorial */
  --radius: 18px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px;
  /* softer, layered elevation (premium depth, not heavy drop-shadows) */
  --shadow-xs: 0 1px 2px rgba(20,12,6,.05), 0 1px 3px rgba(20,12,6,.05);
  --shadow-sm: 0 2px 6px -2px rgba(20,12,6,.10), 0 6px 18px -8px rgba(20,12,6,.12);
  --shadow:    0 8px 24px -10px rgba(20,12,6,.18), 0 24px 60px -30px rgba(20,12,6,.30);
  --shadow-lg: 0 30px 80px -32px rgba(20,12,6,.42);
  --maxw: 1200px;
  /* Even lighter, airier hero scrim — photo stays bright, headline still legible. */
  --hero-overlay:
    linear-gradient(100deg, rgba(20,14,9,.46) 0%, rgba(20,14,9,.12) 44%, transparent 72%),
    linear-gradient(0deg, rgba(20,14,9,.34) 0%, transparent 42%);
}

/* calmer body rhythm + crisper rendering */
body { line-height: 1.7; }
h1, h2, h3 { letter-spacing: -.025em; }

/* ---------- header: REAL liquid glass FLOATING OVER THE HERO ----------
   The glass effect is only visible when there's a photo behind it. So the hero
   pulls UP behind the sticky header (negative margin). Only `.hero` pages get
   this — legal/accessibility have no `.hero`, so their header sits normally and
   nothing breaks. The frosted bar stays light enough for dark nav text to read
   over both the hero photo and (when scrolled) light content. */
.brand { font-size: 1.25rem; }
.hero { margin-top: -68px; }
.hero--small { margin-top: -64px; }
@media (max-width: 760px) { .hero { margin-top: -58px; } .hero--small { margin-top: -56px; } }

/* ---------- hero: more editorial, restrained motion ---------- */
.hero { min-height: 100svh; }
.hero::after { opacity: .42; }                 /* tone down the decorative glow */
.hero-inner { max-width: 1040px; padding: clamp(2rem, 6vw, 8rem); }
.hero h1 { font-size: clamp(3rem, 8.5vw, 6rem); line-height: 1.02; letter-spacing: -.035em; }
.hero .subtitle { font-size: clamp(1.15rem, 2.4vw, 1.55rem); max-width: 46ch; opacity: .95; line-height: 1.55; }
.hero .eyebrow {
  letter-spacing: .24em; font-size: .76rem; padding: .5rem 1.05rem;
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34);
}
.hero-cta { gap: .9rem; margin-top: 1.6rem; }

/* ---------- generous, editorial section rhythm ---------- */
.section { max-width: 1200px; padding: clamp(4.5rem, 9vw, 8.5rem) clamp(1.2rem, 4vw, 2rem); }
/* Gallery and FAQ share the page background, so their two stacked section
   paddings read as one oversized empty band. Tighten just that seam. */
#gallery:has(+ #faq) { padding-bottom: clamp(2rem, 4.5vw, 3.5rem); }
#gallery + #faq { padding-top: clamp(2rem, 4.5vw, 3.5rem); }
.section--alt > .section-inner { max-width: 1200px; }
.section--alt::before { opacity: .55; }
.section-title { font-size: clamp(2.1rem, 4.6vw, 3.1rem); letter-spacing: -.03em; }
.section-title::after { width: 52px; height: 3px; margin-top: .85rem; }
.lead { font-size: 1.12rem; line-height: 1.7; max-width: 66ch; }

/* ---------- cards: clean, elevated, tactile ---------- */
.grid { gap: 1.8rem; margin-top: 2.8rem; }
.card { padding: 2rem; border-radius: var(--radius-lg); border-color: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: var(--shadow-sm); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.3rem; letter-spacing: -.02em; }

/* ---------- gallery: tighter, softer ---------- */
.gallery { gap: 1.1rem; margin-top: 2.8rem; }
.gallery .media { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gallery .media:hover { box-shadow: var(--shadow); }

/* ---------- buttons: refined proportions (contrast handled by base) ---------- */
.btn { padding: 1rem 2.1rem; letter-spacing: -.01em; border-radius: var(--radius-pill); }

/* ---------- map / forms / footer polish ---------- */
.map-wrap { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 3rem); }
.field input, .field textarea, .field select { border-radius: 12px; padding: .95rem 1.05rem; }

/* ---------- subtle, professional motion ---------- */
.card, .btn, .gallery .media { transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease, background .2s ease; }

/* ---------- staggered card cascade (ui-ux-pro-max stagger-sequence) ----------
   When a section reveals, its cards/grid items fade up one after another instead
   of all at once. Progressive: only with JS (html.js) so no-JS keeps them visible;
   disabled under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal .grid > *, html.js .reveal.in .grid > * { will-change: transform; }
  html.js .reveal.in .grid > * { animation: v2rise .6s cubic-bezier(.2,.7,.2,1) both; }
  html.js .reveal .grid > :nth-child(2) { animation-delay: .07s; }
  html.js .reveal .grid > :nth-child(3) { animation-delay: .14s; }
  html.js .reveal .grid > :nth-child(4) { animation-delay: .21s; }
  html.js .reveal .grid > :nth-child(5) { animation-delay: .28s; }
  html.js .reveal .grid > :nth-child(n+6) { animation-delay: .35s; }
}
@keyframes v2rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Mobile: drop the header blur so the fixed slide-in drawer resolves against the
   viewport (a backdrop-filter ancestor would trap it into a broken half panel). */
@media (max-width: 760px) {
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}

/* ---------- extra services (Servizi page + booking multiselect) ---------- */
.service-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.service-media { aspect-ratio: 4/3; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-body { padding: 1.1rem 1.2rem 1.3rem; }
.service-body h3 { margin: 0 0 .35rem; }
/* min-width:0 so the <fieldset> shrinks below its content min-content on mobile
   (fieldsets default to min-inline-size:min-content → horizontal overflow). */
.booking-services { margin-top: 1.1rem; border: 1px solid var(--border, #e5e0d8); border-radius: var(--radius-lg, 16px); padding: 1rem 1.2rem; min-width: 0; }
.booking-services legend { font-weight: 700; padding: 0 .4rem; }
/* min(230px,100%) so a single narrow column never forces a track wider than the
   container (plain minmax(230px,1fr) overflows on phones < ~260px wide). */
.services-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: .5rem .9rem; }
.service-opt { display: flex; align-items: flex-start; gap: .5rem; font-size: .95rem; line-height: 1.4; cursor: pointer; }
.service-opt input { margin-top: .2rem; flex: none; }
.service-opt .muted { opacity: .7; }
@media (max-width: 760px) {
}

/* brand is a link to home (desktop + mobile) — keep it looking like text */
a.brand { text-decoration: none; cursor: pointer; }

/* breathing room before the stats band (it used to touch the section above) */
.stats { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* Calligrafica del nome nell'hero (2026-09-16). Locale come le altre: niente Google Fonts. */