:root {
  --space: 0.5rem;
  --text-body: 1.125rem;
  --text-small: 0.95rem;
  --text-eyebrow: 0.78rem;
  --text-h3: 1.5rem;
  --text-h2: 2.2rem;
  --text-h1: clamp(2.4rem, 5vw, 3.4rem);
  --section-pad: clamp(5rem, 8vw, 7rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-background); color: var(--color-text-primary); font-family: "Mulish", sans-serif; font-size: var(--text-body); line-height: 1.7; }
h1,h2,h3 { margin-top: 0; color: var(--color-text-primary); font-family: "Cormorant", serif; font-weight: 650; line-height: 1.05; text-wrap: balance; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { text-wrap: pretty; }
.eyebrow { font-size: var(--text-eyebrow); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--color-primary-dark); }
.section-shell { padding-block: var(--section-pad); }
.prose-measure { max-width: 68ch; margin-inline: auto; }
.hero { min-height: 680px; background-image: linear-gradient(rgba(24,12,7,.24),rgba(24,12,7,.24)), url('../images/hero-caffetteria-milano.jpg'); background-size: cover; background-position: center; }
.hero h1,.hero p { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.22); }
.logo-mark { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.card { border-radius: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.05); background: var(--color-surface); transition: transform .2s ease; }
.card:hover { transform: translateY(-2px); }
.rounded-image { border-radius: 16px; }
.btn, button, input, select, textarea { font: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding: .8rem 1.35rem; font-weight: 750; text-decoration: none; border: 0; box-shadow: none; transition: background-color .2s ease, color .2s ease; cursor: pointer; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-soft { background: var(--color-surface); color: var(--color-primary-dark); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.btn-soft:hover { background: #fff; }
.form-control { width: 100%; border: 0; border-radius: 12px; padding: .8rem 1rem; background: var(--color-surface); color: var(--color-text-primary); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.form-control:focus { outline: 3px solid color-mix(in srgb, var(--color-accent) 28%, transparent); }
.map-frame { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 16px; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.utility-link, .nav-link, .footer-link { transition: color .2s ease; }
.utility-link:hover, .nav-link:hover, .footer-link:hover { color: var(--color-primary); }
.icon-soft { width: 3rem; height: 3rem; border-radius: 14px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--color-primary-light) 24%, white); color: var(--color-primary-dark); }
.icon-soft svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.cookie-banner { position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem; max-width: 760px; margin-inline: auto; padding: 1rem 1.25rem; background: var(--color-surface); border-radius: 24px; box-shadow: 0 8px 30px rgba(24,12,7,.14); }
.cookie-banner[hidden], .confirmation[hidden] { display: none; }
.nav-mobile[hidden] { display: none; }
.legal-copy h2 { margin-top: 2.5rem; }
.legal-copy h3 { margin-top: 1.75rem; }
.tabular { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .hero { min-height: 610px; }
  .utility-email { display: none; }
}