/* Marevanto tokens — generated from tokens.json. Light = default, dark = [data-theme="dark"] or OS dark mode. */

:root, [data-theme="light"] {
  --mare-900: #0d2f45;
  --mare-700: #14476a;
  --azzurro-500: #3f7fa6;
  --mare-100: #dce9ee;
  --terracotta-600: #b9482a;
  --terracotta-400: #d9714c;
  --limone-400: #eec03e;
  --limone-700: #8a6410;
  --oliva-600: #5f6e33;
  --oliva-100: #e6e9d3;
  --sabbia-50: #faf6ef;
  --sabbia-200: #efe5d3;
  --sabbia-400: #dccdb1;
  --inchiostro-900: #1b2329;
  --inchiostro-600: #5b6168;
  --surface: var(--sabbia-50);
  --surface-alt: var(--sabbia-200);
  --ink: var(--inchiostro-900);
  --ink-muted: var(--inchiostro-600);
  --hairline: var(--sabbia-400);
  --brand: var(--mare-700);
  --on-brand: var(--sabbia-50);
  --accent: var(--terracotta-600);
  --on-accent: #ffffff;
  --highlight: var(--limone-400);
  --line-mercato: var(--oliva-600);
  --line-cucina: var(--terracotta-600);
  --line-eventi: #2f6a8f;
  --line-bar: var(--limone-700);
  --focus: var(--mare-700);
}
[data-theme="dark"] {
  --surface: #0f1a22;
  --surface-alt: #172631;
  --ink: #f3ece3;
  --ink-muted: #a9b1b8;
  --hairline: #2a3b47;
  --brand: #7fb3d3;
  --on-brand: #0f1a22;
  --accent: #e88a66;
  --on-accent: #0f1a22;
  --line-mercato: #b3c27a;
  --line-cucina: #e88a66;
  --line-eventi: #7fb3d3;
  --line-bar: var(--limone-400);
  --focus: var(--limone-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0f1a22;
    --surface-alt: #172631;
    --ink: #f3ece3;
    --ink-muted: #a9b1b8;
    --hairline: #2a3b47;
    --brand: #7fb3d3;
    --on-brand: #0f1a22;
    --accent: #e88a66;
    --on-accent: #0f1a22;
    --line-mercato: #b3c27a;
    --line-cucina: #e88a66;
    --line-eventi: #7fb3d3;
    --line-bar: var(--limone-400);
    --focus: var(--limone-400);
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(13,47,69,0.08), 0 8px 24px rgba(13,47,69,0.08);
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 800ms;
  --dur-hero: 1200ms;
  --stagger: 70ms;
  --reveal-y: 32px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-base: 1ms; --dur-slow: 200ms; --dur-hero: 200ms; --stagger: 0ms; --reveal-y: 0px; }
}
.mv-display { font-family: var(--font-serif); font-size: 72px; line-height: 76px; font-weight: 600; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 100; }
.mv-h1 { font-family: var(--font-serif); font-size: 48px; line-height: 54px; font-weight: 600; letter-spacing: -0.015em; font-variation-settings: 'SOFT' 100; }
.mv-h2 { font-family: var(--font-serif); font-size: 32px; line-height: 38px; font-weight: 600; font-variation-settings: 'SOFT' 100; }
.mv-h3 { font-family: var(--font-serif); font-size: 22px; line-height: 28px; font-weight: 600; font-variation-settings: 'SOFT' 100; }
.mv-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; }
.mv-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.mv-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.mv-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.mv-price { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }



/* Marevanto starter components — plain CSS classes over tokens.css */
.mv-btn { display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-sans); font-size:16px; font-weight:650; line-height:20px; padding:var(--space-3) var(--space-6); border-radius:var(--radius-md); border:1.5px solid transparent; cursor:pointer; text-decoration:none; }
.mv-btn:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.mv-btn--primary { background:var(--brand); color:var(--on-brand); }
.mv-btn--accent { background:var(--accent); color:var(--on-accent); }
.mv-btn--ghost { background:transparent; color:var(--brand); border-color:var(--brand); }
.mv-btn[disabled] { opacity:.45; cursor:not-allowed; }

.mv-tag { display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-sans); font-size:12px; font-weight:650; letter-spacing:.18em; text-transform:uppercase; line-height:16px; padding:6px var(--space-3) 6px 10px; border-radius:var(--radius-pill); border:1.5px solid currentColor; background:var(--surface); }
.mv-tag::before { content:""; width:10px; height:10px; border-radius:50%; background:currentColor; }
.mv-tag--mercato { color:var(--line-mercato); }
.mv-tag--cucina { color:var(--line-cucina); }
.mv-tag--eventi { color:var(--line-eventi); }
.mv-tag--bar { color:var(--line-bar); }
.mv-tag--bar::before { background:var(--limone-400); }

.mv-menu { background:var(--surface-alt); border-radius:var(--radius-md); padding:var(--space-6); max-width:560px; }
.mv-menu__item { display:grid; grid-template-columns:1fr auto; gap:var(--space-1) var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid var(--hairline); }
.mv-menu__item:last-child { border-bottom:0; }
.mv-menu__name { font-family:var(--font-serif); font-size:22px; line-height:28px; font-weight:600; color:var(--brand); margin:0; }
.mv-menu__price { font-family:var(--font-sans); font-size:18px; line-height:28px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mv-menu__desc { grid-column:1 / -1; font-family:var(--font-sans); font-size:14px; line-height:20px; color:var(--ink-muted); margin:0; }
.mv-menu__badge { display:inline-block; margin-left:var(--space-2); vertical-align:middle; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:2px var(--space-2); border-radius:var(--radius-pill); background:var(--highlight); color:#1b2329; }


/* ===== Marevanto, site styles. tokens.css is prepended at build time. ===== */

/* Fonts (self-hosted, subset woff2), overrides the ttf faces in tokens.css */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --max: 1440px;
  --gutter: clamp(16px, 5vw, 96px);
  --gap: 16px;
  --section: clamp(64px, 10vw, 160px);
  --header-h: 88px;
  --fs-display: clamp(48px, 8vw, 140px);
  --fs-h1: clamp(36px, 5vw, 72px);
  --fs-h2: clamp(28px, 3.2vw, 48px);
  --fs-h3: clamp(20px, 1.6vw, 24px);
  --fs-lead: clamp(17px, 1.3vw, 20px);
  --photo-a: var(--terracotta-400);
  --photo-b: var(--limone-400);
  --photo-ink: var(--mare-900);
  --line-bottega: var(--line-mercato);
  --logo-ink: var(--mare-700);
  --wordmark-filter: none;
  color-scheme: light dark;
}
@media (min-width: 768px) { :root { --gap: 24px; --header-h: 104px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.nav-open, body.intro-lock { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, dl, dd, figure, address, fieldset { margin: 0; }
address { font-style: normal; }
fieldset { border: 0; padding: 0; min-width: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--highlight); color: var(--inchiostro-900); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 16px; background: var(--brand); color: var(--on-brand); border-radius: var(--radius-md); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- Type ---------- */
.display, .h1, .h2, .h3 { font-family: var(--font-serif); font-weight: 600; font-variation-settings: 'SOFT' 100, 'opsz' 144; color: var(--brand); text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: .94; letter-spacing: -0.025em; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.015em; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; font-variation-settings: 'SOFT' 100, 'opsz' 24; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34em; }
.body-lg { font-size: 18px; line-height: 28px; max-width: 36em; }
.body { font-size: 16px; line-height: 24px; }
.small { font-size: 14px; line-height: 20px; }
.muted { color: var(--ink-muted); }
.price { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 18px; line-height: 24px; white-space: nowrap; }
.mt { margin-top: var(--space-8); }
.prose > * + * { margin-top: var(--space-6); }
.prose .h3 + .body { margin-top: var(--space-3); }
.prose .body + .h3 { margin-top: var(--space-12); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid > * { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .col-2 { grid-column: auto / span 2; } .col-3 { grid-column: auto / span 3; } .col-4 { grid-column: auto / span 4; }
  .col-5 { grid-column: auto / span 5; } .col-6 { grid-column: auto / span 6; } .col-7 { grid-column: auto / span 7; }
  .col-9 { grid-column: auto / span 9; } .col-10 { grid-column: auto / span 10; }
  .col-start-3 { grid-column-start: 3; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; }
  .sticky { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--alt { background: var(--surface-alt); }
.section__head { margin-bottom: clamp(32px, 4vw, 64px); }
.section__head .h2 { margin-top: var(--space-3); }
.section__head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-6); }
.section__head--row .col-4 { max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + .display { margin-top: var(--space-4); }
.h1 + .body-lg, .h1 + .lead, .h2 + .body-lg, .display + .body-lg { margin-top: var(--space-6); }
.body-lg + div, .lead + div { margin-top: var(--space-8); }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: height var(--dur-base) var(--ease-soft); }
.header::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); opacity: 0; transition: opacity var(--dur-base) var(--ease-soft); }
.header.is-compact { height: 72px; }
.header.is-compact::before { opacity: 1; }
[data-page="home"] .header { position: fixed; left: 0; right: 0; }

.header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 100%; }
.logo { display: flex; align-items: center; gap: 8px; height: 36px; flex: none; }
.logo__mark { height: 100%; width: auto; color: var(--logo-ink); }
.logo__word { height: 72%; width: auto; }
.wordmark { filter: var(--wordmark-filter); }
@media (min-width: 768px) { .logo { height: 44px; gap: 10px; } }
.header__actions { display: flex; align-items: center; gap: var(--space-4); }
.mv-btn[data-header-cta] { display: none; }
@media (min-width: 1200px) { .mv-btn[data-header-cta] { display: inline-flex; } }
.lang { display: inline-flex; gap: 4px; font-size: 12px; font-weight: 650; letter-spacing: .14em; color: var(--ink-muted); padding: 8px 2px; }
.lang__cur { color: var(--ink); }
.lang__sep { opacity: .5; }

/* nav: inline on desktop, full panel on mobile */
.nav__list { display: flex; gap: clamp(16px, 2vw, 32px); }
.nav__link { position: relative; font-size: 15px; font-weight: 550; letter-spacing: .01em; padding: 8px 0; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-fast) var(--ease-soft); }
.nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-current::after { background: var(--accent); }
.nav__foot { display: none; }
.burger { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; padding: 10px 0; }
.burger__x { display: none; }
.burger__lines { width: 22px; height: 12px; position: relative; }
.burger__lines i { position: absolute; left: 0; right: 0; height: 1.75px; background: currentColor; border-radius: 2px; transition: transform var(--dur-base) var(--ease-in-out); }
.burger__lines i:first-child { top: 0; } .burger__lines i:last-child { bottom: 0; }
@media (min-width: 1024px) { .burger { display: none; } }
@media (max-width: 1023.98px) {
  .nav { position: fixed; inset: 0; z-index: 90; background: var(--mare-900); color: var(--sabbia-50); padding: calc(var(--header-h) + var(--space-8)) var(--gutter) var(--space-12); display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-hero) var(--ease-in-out); visibility: hidden; }
  .nav-open .nav { clip-path: inset(0); visibility: visible; }
  .nav__list { flex-direction: column; gap: 4px; }
  .nav__link { font-family: var(--font-serif); font-size: clamp(36px, 9vw, 56px); font-weight: 600; line-height: 1.1; font-variation-settings: 'SOFT' 100; display: inline-block; padding: 6px 0; transform: translateY(24px); opacity: 0; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) + 200ms); }
  .nav-open .nav__link { transform: none; opacity: 1; }
  .nav__link::after { display: none; }
  .nav__link.is-current { color: var(--limone-400); }
  .nav__foot { display: grid; gap: 6px; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out) 600ms; }
  .nav-open .nav__foot { opacity: 1; }
  .nav__foot .eyebrow { color: var(--limone-400); margin-bottom: 6px; }
  .nav__foot-link { font-size: 18px; }
  .nav-open .header { color: var(--sabbia-50); }
  .nav-open .header::before { opacity: 0; }
  .nav-open .logo { --logo-ink: var(--sabbia-50); --wordmark-filter: brightness(0) invert(.96); }
  .nav-open .lang, .nav-open .lang__cur { color: var(--sabbia-50); }
  .nav-open .burger__label { display: none; } .nav-open .burger__x { display: inline; }
  .nav-open .burger__lines i:first-child { transform: translateY(5px) rotate(45deg); }
  .nav-open .burger__lines i:last-child { transform: translateY(-5px) rotate(-45deg); }
  .header, .header__actions, .logo { z-index: 95; }
}

/* ---------- Dark / Sera contexts ---------- */
[data-theme="dark"] { --logo-ink: var(--sabbia-50); --wordmark-filter: brightness(0) invert(.96); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-ink: var(--sabbia-50); --wordmark-filter: brightness(0) invert(.96); }
  :root:not([data-theme="light"]) .nav { background: #0a141b; }
}
[data-theme="dark"] .display, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3 { color: var(--ink); }
[data-theme="dark"] .mv-menu__name { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .display, :root:not([data-theme="light"]) .h1, :root:not([data-theme="light"]) .h2, :root:not([data-theme="light"]) .h3, :root:not([data-theme="light"]) .mv-menu__name { color: var(--ink); }
}

/* ---------- Buttons & links ---------- */
.mv-btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 15px; font-weight: 650; line-height: 20px; padding: 14px 24px; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; overflow: hidden; isolation: isolate; transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.mv-btn::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: 50%; width: 260%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
.mv-btn:hover::before, .mv-btn:focus-visible::before { transform: scale(1); }
.mv-btn:active { transform: scale(.985); }
.mv-btn--primary { background: var(--brand); color: var(--on-brand); }
.mv-btn--primary::before { background: var(--mare-900); }
.mv-btn--accent { background: var(--accent); color: var(--on-accent); }
.mv-btn--accent::before { background: color-mix(in srgb, var(--accent) 78%, black); }
.mv-btn--ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.mv-btn--ghost::before { background: var(--brand); }
.mv-btn--ghost:hover { color: var(--on-brand); }
.mv-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mv-btn__text { position: relative; display: block; overflow: hidden; line-height: 20px; height: 20px; }
.mv-btn__text > span { display: block; transition: transform var(--dur-base) var(--ease-out); }
.mv-btn__text > span + span { position: absolute; inset: 0; transform: translateY(100%); }
.mv-btn:hover .mv-btn__text > span:first-child { transform: translateY(-100%); }
.mv-btn:hover .mv-btn__text > span + span { transform: translateY(0); }
.link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 550; padding-bottom: 2px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-fast) var(--ease-soft); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link .arrow { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-soft); }
.link:hover .arrow { transform: translateX(4px); }
.prose .link, .consent .link, .footer__legal .link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose .link::after, .consent .link::after, .footer__legal .link::after { display: none; }

/* ---------- Photo placeholders ---------- */
.photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: var(--ratio, 3/2); background: var(--photo-ink); isolation: isolate; }
.photo__img { position: absolute; inset: 0; background:
  radial-gradient(circle at 72% 22%, color-mix(in srgb, var(--limone-400) 55%, transparent) 0, transparent 22%),
  linear-gradient(160deg, var(--photo-a) 0%, var(--photo-b) 100%);
  transform: scale(1.1); transform-origin: center; }
.photo__img::after { content: ""; position: absolute; inset: 0; background: url("/assets/pattern/marevanto-wave-pattern.svg") center / 480px 240px repeat; opacity: .07; mix-blend-mode: multiply; }
.photo__cap { position: absolute; left: 16px; bottom: 14px; z-index: 1; font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); padding: 6px 10px; border-radius: var(--radius-pill); background: rgba(13,47,69,.35); backdrop-filter: blur(6px); pointer-events: none; }
.photo.mt { margin-top: var(--space-8); }
.photo--img { background: var(--sabbia-200); }
.photo--img .photo__img { background: none; }
.photo--img .photo__img::after { display: none; }
.photo__img picture, .photo__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo--warm { --photo-a: #c45c3a; --photo-b: #e9b266; }
.photo--sea { --photo-a: #14476a; --photo-b: #5f98b8; }
.photo--olive { --photo-a: #5f6e33; --photo-b: #c9c58a; }
.photo--sun { --photo-a: #d9714c; --photo-b: #eec03e; }
.photo--sera { --photo-a: #0d2f45; --photo-b: #3f5f78; }
.photo--rose { --photo-a: #b9482a; --photo-b: #dccdb1; }

/* Clip reveal, clip lives on the inner wrapper: Chrome's IntersectionObserver never fires for a target fully clipped by clip-path */
[data-reveal="clip"] .photo__img { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-slow) var(--ease-in-out), transform calc(var(--dur-slow) * 1.5) var(--ease-out); }
[data-reveal="clip"].is-in .photo__img { clip-path: inset(0); transform: scale(1); }

/* Text reveal */
[data-reveal]:not([data-reveal="clip"]) { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
[data-reveal]:not([data-reveal="clip"]).is-in { opacity: 1; transform: none; }
[data-reveal="clip"] .photo__img { transition-delay: calc(var(--i, 0) * var(--stagger)); }
.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* ---------- Home hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--sabbia-50); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media .photo { position: absolute; inset: -6% 0; height: 112%; aspect-ratio: auto; border-radius: 0; }
.photo--hero .photo__img { animation: heroZoom var(--dur-hero) var(--ease-out) forwards; transform: scale(1.08); }
.has-intro .photo--hero .photo__img { animation-delay: 1.1s; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,246,239,.72) 0%, rgba(250,246,239,.28) 14%, rgba(250,246,239,0) 28%, rgba(13,47,69,.22) 42%, rgba(13,47,69,.62) 68%, rgba(13,47,69,.88) 100%); }
.photo--hero .photo__cap { display: none; }
.hero__content { position: relative; padding-top: calc(var(--header-h) + var(--space-16)); padding-bottom: clamp(64px, 10vh, 128px); }
.hero__eyebrow { color: var(--limone-400); opacity: 0; animation: fadeUp var(--dur-slow) var(--ease-out) forwards; animation-delay: .2s; }
.hero__title { color: var(--sabbia-50); margin-top: var(--space-4); max-width: 12ch; }
.mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mask__inner { display: block; transform: translateY(110%); animation: maskUp var(--dur-hero) var(--ease-out) forwards; animation-delay: calc(.3s + var(--i) * var(--stagger) * 2); }
@keyframes maskUp { to { transform: none; } }
.hero__text { margin-top: var(--space-8); color: rgba(250,246,239,.88); max-width: 30em; opacity: 0; animation: fadeUp var(--dur-slow) var(--ease-out) forwards; animation-delay: .9s; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); opacity: 0; animation: fadeUp var(--dur-slow) var(--ease-out) forwards; animation-delay: 1.05s; }
.hero__actions .mv-btn--primary { background: var(--sabbia-50); color: var(--mare-700); }
.hero__actions .mv-btn--primary::before { background: var(--sabbia-200); }
.hero__scroll { position: absolute; right: var(--gutter); bottom: clamp(32px, 6vh, 64px); width: 1px; height: 64px; background: rgba(250,246,239,.3); overflow: hidden; display: none; }
.hero__scroll span { position: absolute; inset: 0; background: var(--limone-400); transform: translateY(-100%); animation: scrollLine 2.2s var(--ease-in-out) infinite; }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 50% { transform: none; } 100% { transform: translateY(100%); } }
@media (min-width: 1024px) { .hero__scroll { display: block; } }
.has-intro .hero__eyebrow, .has-intro .hero__text, .has-intro .hero__actions { animation-delay: calc(1.1s + .2s); }
.has-intro .hero__text { animation-delay: 2s; } .has-intro .hero__actions { animation-delay: 2.15s; }
.has-intro .mask__inner { animation-delay: calc(1.4s + var(--i) * var(--stagger) * 2); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Page hero ---------- */
.hero-page { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(24px, 4vw, 64px); }
.hero-page--short { padding-bottom: 0; }
.hero-page__text { grid-column: 1 / -1; }
.hero-page__text .h1 { margin-top: var(--space-6); max-width: 14ch; }
.hero-page__text .lead { margin-top: var(--space-6); color: var(--ink-muted); }
.hero-page__photo { grid-column: 1 / -1; margin-top: var(--space-8); }
@media (min-width: 1024px) {
  .hero-page__text { grid-column: 1 / span 7; padding-top: var(--space-12); }
  .hero-page__photo { grid-column: 9 / -1; margin-top: 0; }
}
/* Line lockup: official mark (sun in the line colour) + official wordmark + line label */
.lockup { display: inline-flex; align-items: center; gap: 10px; height: 44px; }
.lockup__mark { height: 100%; width: auto; color: var(--logo-ink); }
.lockup__word { height: 72%; width: auto; }
.lockup__sep { width: 1.5px; height: 60%; background: var(--hairline); margin-inline: 4px; }
.lockup__label { font-size: 13px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--line, var(--accent)); }
.lockup--bottega { --line: var(--line-bottega); } .lockup--bottega .sun__disc { fill: var(--oliva-600); }
.lockup--cucina { --line: var(--line-cucina); } .lockup--cucina .sun__disc { fill: var(--terracotta-600); }
.lockup--eventi { --line: var(--line-eventi); } .lockup--eventi .sun__disc { fill: var(--azzurro-500); }
@media (min-width: 768px) { .lockup { height: 56px; gap: 12px; } .lockup__label { font-size: 14px; } }

/* ---------- Statement ---------- */
.statement__text { max-width: 24ch; color: var(--ink); }
.statement__text { font-size: clamp(30px, 4vw, 60px); }

/* ---------- Line tiles ---------- */
.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 1fr; } .tile--bottega { grid-column: span 5; grid-row: span 2; } .tile--cucina { grid-column: span 7; } .tile--eventi { grid-column: span 7; } }
.tile { --line: var(--line-bottega); --sun: var(--oliva-600); position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(220px, 32vw, 340px); padding: clamp(16px, 2.4vw, 40px); border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--hairline); overflow: hidden; isolation: isolate; transition: color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft); }
.tile--bottega { --line: var(--line-bottega); --sun: var(--oliva-600); }
.tile--cucina { --line: var(--line-cucina); --sun: var(--terracotta-600); }
.tile--eventi { --line: var(--line-eventi); --sun: var(--azzurro-500); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sun); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-base) var(--ease-soft); }
.tile__sun { position: absolute; top: clamp(16px, 2.4vw, 40px); right: clamp(16px, 2.4vw, 40px); width: 14px; height: 14px; border-radius: 50%; background: var(--sun); transition: transform var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft); }
.tile__body { display: grid; gap: var(--space-3); max-width: 28ch; }
.tile__line { color: var(--line); }
.tile__title { color: var(--brand); }
.tile__text { color: var(--ink-muted); }
.tile__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; margin-top: var(--space-6); color: var(--brand); }
.tile__cta .arrow { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-soft); }
@media (hover: hover) {
  .tile:hover::before, .tile:focus-visible::before { transform: scaleY(1); }
  .tile:hover .tile__sun { transform: scale(5); background: var(--limone-400); }
  .tile:hover .tile__line, .tile:hover .tile__title, .tile:hover .tile__text, .tile:hover .tile__cta { color: var(--sabbia-50); }
  .tile:hover .tile__cta .arrow { transform: translateX(6px); }
  .tile:hover { border-color: transparent; }
}
@media (max-width: 479.98px) { .tiles { grid-template-columns: 1fr; } }
@media (min-width: 480px) and (max-width: 1023.98px) { .tile--bottega { grid-column: 1 / -1; } }

/* ---------- Marquee ---------- */
.marquee { display: flex; align-items: center; gap: var(--space-6); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding-block: 18px; overflow: hidden; }
.marquee__label { flex: none; padding-left: var(--gutter); color: var(--line-bottega); }
.marquee__viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: var(--space-8); width: max-content; animation: marquee 50s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 28px); font-weight: 600; font-variation-settings: 'SOFT' 100; color: var(--brand); white-space: nowrap; }
.marquee__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--limone-400); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
@media (max-width: 767.98px) { .marquee { flex-direction: column; align-items: start; gap: var(--space-3); } .marquee__viewport { width: 100%; } }

/* ---------- Feature ---------- */
.feature { align-items: center; }
.feature__photo-a, .feature__text, .feature__photo-b { grid-column: 1 / -1; }
.feature__text { padding-block: var(--space-8); }
.feature__photo-b { display: none; }
@media (min-width: 1024px) {
  .feature__photo-a { grid-column: 1 / span 5; }
  .feature__text { grid-column: 7 / span 5; padding-block: 0; }
  .feature__photo-b { display: block; grid-column: 9 / span 4; margin-top: var(--space-12); }
}

/* ---------- Producers ---------- */
.producers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); }
.producers li { padding: var(--space-6) 0; border-top: 1px solid var(--hairline); display: grid; gap: 4px; }
.producers__town { font-family: var(--font-serif); font-size: 22px; font-weight: 600; font-variation-settings: 'SOFT' 100; color: var(--brand); }
.producers__what { font-size: 14px; color: var(--ink-muted); }

/* ---------- Sera band ---------- */
.band { position: relative; padding-block: var(--section); background: var(--mare-900); color: var(--ink); overflow: hidden; }
.band::before { content: ""; position: absolute; right: -10%; top: -20%; width: 44vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(238,192,62,.18), transparent 60%); pointer-events: none; }
.band .grid { align-items: center; }
.band__title { color: var(--sabbia-50); }
.band__photo { margin-top: var(--space-8); }
@media (min-width: 1024px) { .band__photo { margin-top: 0; } }
.band .eyebrow { color: var(--limone-400); }
.band .mv-menu { background: rgba(250,246,239,.06); border-color: rgba(250,246,239,.14); }
.band .mv-menu__head { border-color: var(--limone-400); }
.band .grid { align-items: start; }
.band .sticky { align-self: start; }

/* ---------- Instagram ---------- */
.insta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (min-width: 768px) { .insta { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.insta .photo { border-radius: var(--radius-md); }
.insta .photo__cap { display: none; }

/* ---------- Newsletter ---------- */
.newsletter { display: grid; gap: var(--space-8); padding: clamp(24px, 4vw, 64px); border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--hairline); }
@media (min-width: 1024px) { .newsletter { grid-template-columns: 1fr 1fr; align-items: center; } }
.newsletter__form { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: start; }
.newsletter__form input { grid-column: 1; }
.newsletter__legal { grid-column: 1 / -1; }
.newsletter__form .form-success { grid-column: 1 / -1; position: absolute; inset: 0; background: var(--surface-alt); display: flex; align-items: center; gap: var(--space-4); }
.newsletter__form .form-success[hidden] { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--mare-900); color: var(--ink); }
.footer__pattern { height: 96px; background: url("/assets/pattern/marevanto-wave-pattern.svg") top center / 480px 240px repeat-x; border-bottom: 1px solid var(--hairline); }
.footer__grid { display: grid; gap: var(--space-12) var(--gap); padding-block: clamp(48px, 6vw, 96px); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__logo { display: grid; justify-items: start; gap: 10px; }
.footer__mark { width: 72px; height: 72px; color: var(--sabbia-50); }
.footer__logo .wordmark { width: 200px; height: auto; }
.footer__tagline { color: var(--limone-400); }
.footer__about { margin-top: var(--space-6); max-width: 30em; color: var(--ink-muted); }
.footer__col .eyebrow { color: var(--limone-400); margin-bottom: var(--space-4); }
.footer__col ul { display: grid; gap: 10px; }
.footer__col address { margin-bottom: var(--space-4); }
.footer__line { font-family: var(--font-serif); font-weight: 600; font-size: 18px; font-variation-settings: 'SOFT' 100; margin-top: var(--space-4); }
.footer__line:first-of-type { margin-top: 0; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid var(--hairline); color: var(--ink-muted); }
.footer .link::after { display: none; }
.footer .link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast); }
.footer .link:hover { text-decoration-color: currentColor; }

/* ---------- Hours / cards / lists ---------- */
.hours { display: grid; gap: 6px; }
.hours div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 15px; }
.hours dt { color: var(--ink-muted); } .hours dd { font-weight: 550; font-variant-numeric: tabular-nums; text-align: right; }
.card { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--hairline); }
.card .eyebrow { margin-bottom: var(--space-3); }
.board { border-top: 1px solid var(--hairline); }
.board__row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.board__origin { grid-column: 1; } .board__price { grid-row: 1 / span 2; align-self: center; }
@media (min-width: 768px) { .board__row { grid-template-columns: 1fr 1fr auto; } .board__origin { grid-column: auto; } .board__price { grid-row: auto; } }
.defs { display: grid; gap: var(--space-8); }
.defs div { padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.defs dd { margin-top: var(--space-2); max-width: 44ch; }
.defs--grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.defs--grid div { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.defs--3 { margin-top: var(--space-8); }
/* Rinfreschi / party trays */
.trays { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: stretch; }
.tray { display: grid; align-content: start; gap: 6px; padding: clamp(20px, 2vw, 28px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--hairline); }
.tray__from { color: var(--line-cucina); }
.tray__price { margin-top: 2px; font-variant-numeric: tabular-nums; }
.tray__per { margin-bottom: var(--space-3); }
.tray__items { display: grid; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: 15px; line-height: 22px; }
.tray__items li { padding-left: 16px; position: relative; }
.tray__items li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--limone-400); }
.trays__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); margin-top: var(--space-8); }
.trays__notes { display: grid; gap: 4px; }
.formats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.formats li { display: grid; gap: var(--space-3); padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.formats__n { font-size: 12px; font-weight: 650; letter-spacing: .18em; color: var(--accent); }
.menus { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.menus--stack { grid-template-columns: 1fr; }
.mv-menu { max-width: none; padding: clamp(20px, 2.4vw, 32px); background: var(--surface); border: 1px solid var(--hairline); }
.section--alt .mv-menu { background: var(--surface); }
.section:not(.section--alt) .mv-menu { background: var(--surface-alt); }
.mv-menu__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1.5px solid var(--brand); margin-bottom: var(--space-2); flex-wrap: wrap; }
.mv-menu__head .price { color: var(--accent); }
.mv-menu__name { font-size: 20px; line-height: 26px; }
.venues { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
@media (min-width: 1024px) { .venue:nth-child(2) { margin-top: var(--space-16); } }
.venue .h3 { margin-top: var(--space-6); }
.venue__cap { color: var(--ink-muted); margin-top: 6px; margin-bottom: var(--space-3); }
.gallery { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery .photo { --ratio: 1/1; }
@media (min-width: 768px) { .gallery--4 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gallery--4 .gallery__item--1 { grid-column: span 5; --ratio: 4/5; } .gallery--4 .gallery__item--2 { grid-column: span 7; --ratio: 3/2; } .gallery--4 .gallery__item--3 { grid-column: span 7; --ratio: 3/2; } .gallery--4 .gallery__item--4 { grid-column: span 5; --ratio: 4/5; }
  .gallery--6 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gallery--6 .gallery__item--1, .gallery--6 .gallery__item--6 { grid-column: span 6; --ratio: 3/2; } .gallery--6 .gallery__item--2, .gallery--6 .gallery__item--3 { grid-column: span 3; --ratio: 4/5; } .gallery--6 .gallery__item--4 { grid-column: span 4; --ratio: 1/1; } .gallery--6 .gallery__item--5 { grid-column: span 8; --ratio: 2/1; }
  .gallery--portrait { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery--portrait .photo { --ratio: 3/4; grid-column: auto; } .gallery--portrait .gallery__item--2, .gallery--portrait .gallery__item--4 { margin-top: var(--space-12); } }
.timeline { display: grid; gap: var(--space-8); }
.timeline li { display: grid; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
@media (min-width: 768px) { .timeline li { grid-template-columns: 220px 1fr; align-items: baseline; gap: var(--gap); } }
.timeline__year { font-size: clamp(40px, 5vw, 72px); }
.contact__col > .eyebrow { margin-bottom: var(--space-3); }
.contact__list { display: grid; gap: 10px; margin-top: var(--space-2); }
.contact__emails li { display: grid; gap: 2px; }
.actions--inline { margin-top: 0; }
.contact__line { margin-top: var(--space-6); margin-bottom: var(--space-2); font-size: 18px; }
.contact__line:first-of-type { margin-top: 0; }
.contact__line--bottega { color: var(--line-bottega); } .contact__line--cucina { color: var(--line-cucina); } .contact__line--eventi { color: var(--line-eventi); }
.contact address.h3 { margin-bottom: var(--space-4); }
.map { display: block; }
.map__photo .photo__img { background-image: radial-gradient(circle at 50% 50%, var(--limone-400) 0 10px, transparent 11px), repeating-linear-gradient(0deg, transparent 0 38px, rgba(250,246,239,.12) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(250,246,239,.12) 38px 39px), linear-gradient(160deg, var(--photo-a), var(--photo-b)); }

/* ---------- Forms ---------- */
.fields { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .fields--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; font-weight: 650; letter-spacing: .04em; color: var(--ink-muted); }
input:not([type="radio"]):not([type="checkbox"]), textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--hairline); border-radius: var(--radius-md); padding: 14px 16px; transition: border-color var(--dur-fast) var(--ease-soft); }
input:focus, textarea:focus { border-color: var(--brand); outline: none; }
input:user-invalid, textarea:user-invalid, .is-invalid { border-color: var(--accent); }
textarea { resize: vertical; min-height: 120px; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: block; padding: 18px 20px; border-radius: var(--radius-md); border: 1.5px solid var(--hairline); background: var(--surface); font-weight: 550; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.choice input:checked + span { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: start; margin-top: var(--space-6); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.steps { position: relative; padding: clamp(20px, 2.4vw, 40px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--hairline); }
.steps__progress { height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.steps__bar { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(.25); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.steps__count { margin-top: var(--space-3); }
.step { display: none; margin-top: var(--space-6); }
.step.is-active { display: block; animation: fadeUp var(--dur-base) var(--ease-out); }
.step legend { margin-bottom: var(--space-6); padding: 0; }
.steps__nav { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.steps__nav .js-next, .steps__nav .js-submit { margin-left: auto; }
.simple { display: grid; gap: var(--space-4); padding: clamp(20px, 2.4vw, 40px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--hairline); position: relative; }
.simple .mv-btn { justify-self: start; margin-top: var(--space-2); }
.form-error { color: var(--accent); margin-top: var(--space-4); }
.form-success { display: grid; gap: var(--space-4); justify-items: start; }
.form-success[hidden] { display: none; }
.steps .form-success, .simple .form-success { position: absolute; inset: 0; padding: clamp(20px, 2.4vw, 40px); border-radius: var(--radius-lg); background: var(--surface); align-content: center; }
.sun { width: 72px; height: 72px; color: var(--brand); }
.sun--sm { width: 40px; height: 40px; }
.form-success .sun__disc { animation: sunRise var(--dur-hero) var(--ease-out) both; transform-origin: center; }
@keyframes sunRise { from { transform: translateY(40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Intro loader ---------- */
.intro { display: none; }
.has-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--mare-900); color: var(--sabbia-50); animation: introOut .6s var(--ease-in-out) 1.3s forwards; }
.intro__logo { display: flex; align-items: center; gap: 12px; }
.intro__mark { width: clamp(56px, 8vw, 96px); height: auto; color: var(--sabbia-50); }
.intro__mark .sun__disc { transform: translateY(38px); opacity: 0; animation: sunUp .7s var(--ease-out) .1s forwards; }
@keyframes sunUp { to { transform: none; opacity: 1; } }
.intro__word { display: block; height: clamp(26px, 3.6vw, 44px); clip-path: inset(0 100% 0 0); animation: wordIn .6s var(--ease-in-out) .55s forwards; filter: brightness(0) invert(.96); }
.intro__word img { height: 100%; width: auto; }
@keyframes wordIn { to { clip-path: inset(0); } }
@keyframes introOut { to { transform: translateY(-100%); } }
.intro__skip { position: absolute; bottom: var(--space-8); right: var(--gutter); color: rgba(250,246,239,.6); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; font-weight: 650; }
.intro.is-done { display: none !important; }

/* ---------- Page transition ---------- */
.transition { position: fixed; inset: 0; z-index: 250; background: var(--mare-900); transform: translateY(100%); pointer-events: none; display: grid; place-items: center; }
.transition__sun { width: 24px; height: 24px; border-radius: 50%; background: var(--limone-400); opacity: 0; }
.transition.is-out { transform: none; transition: transform .5s var(--ease-in-out); }
.transition.is-out .transition__sun { animation: pulse .5s var(--ease-soft) .3s; }
.has-nav .transition { transform: none; animation: transIn .55s var(--ease-in-out) .05s forwards; }
@keyframes transIn { to { transform: translateY(-100%); } }
@keyframes pulse { 0% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }

/* ---------- Cursor ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor { display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 400; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); pointer-events: none; opacity: 0; transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-fast), background var(--dur-base); will-change: transform; mix-blend-mode: normal; }
  body.has-cursor .cursor { opacity: 1; }
  body.has-cursor.cursor-hidden .cursor { opacity: 0; }
  .cursor.is-big { width: 88px; height: 88px; background: var(--sabbia-50); color: var(--mare-700); box-shadow: var(--shadow-card); }
  .cursor__label { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity var(--dur-fast); white-space: nowrap; }
  .cursor.is-big .cursor__label { opacity: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal]:not([data-reveal="clip"]) { transition: opacity 200ms ease !important; transform: none; }
  [data-reveal="clip"] .photo__img { clip-path: none !important; }
  .photo__img { transform: none !important; }
  .mask__inner { transform: none; opacity: 1; }
  .hero__eyebrow, .hero__text, .hero__actions { opacity: 1; }
  .cursor, .intro, .transition, .hero__scroll { display: none !important; }
}