:root {
  --bg: #F6F2FA;
  --text: #272033;
  --accent: #7A5EA0;
  --accent-hover: #5C4480;
  --on-accent: #F9F6FC;
  --link: #7A5EA0;
  --sage: #4E6F66;
  --sage-hover: #3F5A52;
  --panel-tan: #EAE2F3;
  --panel-green: #DDE9E4;
  --card: #FCFAFE;
  --cta-fg: #F4F9F7;
  --cta-btn-fg: #2F4640;
  --font-display: 'Caprasimo', serif;
  --font-body: 'Glacial Indifference', 'Figtree', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Keeps #anchor jumps (e.g. a home "Percorsi individuali" card linking to
   /percorsi#percorsi-individuali) from landing the target under the sticky
   header. */
html { scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-hover); color: var(--bg); }
.btn-outline { background: transparent; border: 1px solid rgba(39,32,51,.18); color: var(--text); }
.btn-outline:hover { background: rgba(39,32,51,.06); color: var(--text); }
.btn-sage { background: var(--sage); color: var(--bg); }
.btn-sage:hover { background: var(--sage-hover); color: var(--bg); }
.btn-small { padding: 8px 16px; font-size: 13px; }

.text-link {
  display: inline-block; cursor: pointer; border: none; border-bottom: 2px solid var(--accent);
  background: transparent; padding: 0 0 2px; color: var(--accent);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
}
.text-link:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* ── Header / nav ────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(249,246,252,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(39,32,51,.1);
}
.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(18px,5vw,44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; color: var(--text); }
.brand__dot { width: 34px; height: 34px; flex: none; border-radius: 999px; background: var(--accent); }
.brand__logo { height: 34px; width: auto; max-width: 140px; flex: none; object-fit: contain; }
.brand__name { font-family: var(--font-display); font-size: 19px; letter-spacing: -.01em; }

.nav { display: flex; flex-wrap: wrap; gap: 6px; }
.nav__link {
  border: none; font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 9px 15px; border-radius: 999px; background: transparent; color: var(--text);
}
.nav__link--active { background: var(--panel-green); color: var(--text); }
.nav__link--cta { background: var(--accent); color: var(--on-accent); }
.nav__link--cta:hover { background: var(--accent-hover); color: var(--on-accent); }

.hamburger {
  display: none;
  width: 44px; height: 44px; flex: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border: 1px solid rgba(39,32,51,.18); background: transparent; border-radius: 999px;
  cursor: pointer; padding: 0;
}
.hamburger span { display: block; width: 17px; height: 1.5px; background: var(--text); border-radius: 2px; }
.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  padding: 10px clamp(18px,5vw,44px) 24px;
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid rgba(39,32,51,.1);
}
/* Same fix as .cookie-banner[hidden] below: without this, the unconditional
   `display: flex` above overrides the `[hidden]` attribute the hamburger
   toggle relies on, so the mobile menu would render permanently open under
   720px instead of starting closed. */
.mobile-menu[hidden] { display: none; }
.mobile-menu__link { text-align: left; font-family: var(--font-display); font-size: 22px; padding: 13px 18px; color: var(--text); border-radius: 16px; }
.mobile-menu__link--active { background: var(--panel-green); }
.mobile-menu__link--cta {
  color: var(--on-accent); background: var(--accent); border-radius: 16px;
  padding: 13px 18px; margin-top: 8px;
}

@media (max-width: 720px) {
  .nav { display: none; }
  .hamburger { display: flex; }
}
@media (min-width: 721px) {
  .mobile-menu { display: none !important; }
  .hamburger { display: none; }
}

/* ── Layout / sections ───────────────────────────────────────────────── */

.section { max-width: 1240px; margin: 0 auto; padding: clamp(44px,7vw,84px) clamp(18px,5vw,44px); }
.section--tan { background: var(--panel-tan); }
/* Full-bleed background variants: the section itself spans the full
   viewport width with no horizontal padding of its own. .section-inner
   (wrapped around the section's content in the template, see home.html/
   chi_sono.html/percorsi.html) is the one thing centered/padded to match
   plain .section — every child then just flows left-aligned inside it
   exactly like it would inside a plain .section, so a child with its own
   narrower max-width (.section-subtitle, .timeline) stays left-aligned
   instead of being centered in the remaining space. Per-child centering
   was tried first and had to be abandoned: at equal specificity a child's
   own `margin` shorthand (e.g. .section-title's) silently overrides
   `margin: auto`, and even once fixed, centering a *narrower* child
   inside the section (rather than left-aligning it) visually detaches it
   from the heading above it. */
.section--tan, .section--green { max-width: none; padding-left: 0; padding-right: 0; }
.section-inner { max-width: 1240px; margin: 0 auto; padding-left: clamp(18px,5vw,44px); padding-right: clamp(18px,5vw,44px); }
.section--green { background: var(--panel-green); }

/* Removes the top half of the double vertical gap where two .section
   elements sit directly back to back (see home.html). */
.section--tight-top { padding-top: 0; }

.eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(39,32,51,.45); margin-bottom: 10px; }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px,5.6vw,62px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 24px; }
.section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px,4.2vw,44px); line-height: 1.05; margin: 0 0 12px; }
.section-subtitle { margin: 0 0 32px; font-size: 17px; color: rgba(39,32,51,.6); max-width: 52ch; }

.two-col { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: clamp(24px,4vw,52px); align-items: center; }
.two-col--top { align-items: start; }

.prose-block { max-width: 76ch; display: flex; flex-direction: column; gap: 16px; }
.prose-block p, .prose-block .richtext-output { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(39,32,51,.75); }
.prose-block img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
/* Flex items get an automatic min-width based on their content's natural
   size, which overrides overflow-wrap and lets long unbreakable strings
   (e.g. a run of characters with no spaces) push past the container's
   right edge instead of wrapping — min-width: 0 lets them shrink to fit. */
.prose-block > * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* Chi-sono's intro + biography text is the only content in its section,
   so at the shared 76ch/16px prose sizing it leaves a lot of empty page
   width next to it — bumped up here rather than on .prose-block itself,
   which other pages (pratiche, percorsi) pair with a sidebar/cards where
   the narrower column is still correct. */
.prose-block--wide { max-width: 92ch; }
.prose-block--wide p, .prose-block--wide .richtext-output { font-size: 18px; }
/* Nudges an element right to match .practice-card/.format-detail-card's
   own left padding (clamp(24px,3vw,36px)), so intro text lines up with
   card content below it — applied to the eyebrow/title above that text
   too, so the whole intro block (not just the paragraph) shares one
   consistent left edge instead of the title sticking out further left. */
.card-aligned { padding-left: clamp(24px,3vw,36px); }
/* Same idea as .card-aligned, but .contact-card's own left padding is a
   fixed 24px (not a clamp()), so match that exact value instead. */
.card-aligned-24 { padding-left: 24px; }

/* Admin-entered rich text (bold/italic/paragraphs from the CMS's richtext
   editor) renders as sibling <div>/<p> blocks from contenteditable — gap
   keeps multi-paragraph fields readable without a margin rule that would
   double up wherever the surrounding layout already uses flex/grid gap. */
.richtext-output { display: flex; flex-direction: column; gap: .85em; }
/* Paragraphs from the CMS's contenteditable richtext editor come out as
   plain <p> tags, which still carry the browser's default ~1em top/bottom
   margin — stacking on top of the gap above and roughly tripling the
   visible paragraph spacing. The gap is meant to be the only spacing
   mechanism (see .prose-block's equivalent reset), so this closes the
   same gap everywhere else .richtext-output is used, not just there. */
.richtext-output p { margin: 0; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(24px,4vw,48px); align-items: center; }
.hero__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px,5.6vw,68px); line-height: 1.05; letter-spacing: -.02em; color: var(--text); margin: 0 0 20px; max-width: 14ch; }
.hero__subhead { margin: 0 0 28px; max-width: 48ch; font-size: clamp(16px,2vw,19px); line-height: 1.55; color: rgba(39,32,51,.62); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__image { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: clamp(24px,4vw,48px); display: block; }

/* ── Marquee ─────────────────────────────────────────────────────────── */

.marquee { overflow: hidden; white-space: nowrap; padding: 14px 0; background: var(--accent); color: var(--on-accent); }
.marquee__track { display: inline-block; animation: marquee-slide 120s linear infinite; font-family: var(--font-display); font-size: 26px; }
.marquee__track span { padding: 0 22px; }
@keyframes marquee-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ── Intro/bio ───────────────────────────────────────────────────────── */

.intro-bio { display: grid; grid-template-columns: minmax(240px,440px) 1fr; gap: clamp(24px,4vw,52px); align-items: center; }
.intro-bio__image { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: clamp(24px,4vw,48px); }
.intro-bio__text { margin: 0 0 20px; font-size: clamp(17px,2.2vw,21px); line-height: 1.65; }
.intro-bio__text > :first-child { font-weight: 600; }
@media (max-width: 720px) { .intro-bio { grid-template-columns: 1fr; } }

/* ── Card grids ──────────────────────────────────────────────────────── */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: clamp(14px,2vw,20px); }
.card-grid--flat { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }

.format-card {
  background: var(--card); border-radius: clamp(22px,3vw,32px); padding: clamp(24px,3vw,32px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.format-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.1; margin: 0; }
.format-card p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(39,32,51,.62); }

.format-detail-card {
  background: var(--card); border-radius: clamp(24px,3vw,32px); padding: clamp(28px,4vw,40px) clamp(24px,3vw,36px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
/* .card-grid's grid items stretch to the tallest card in the row by
   default, so pushing just the button to the bottom of that stretched
   height lines it up across cards with different amounts of description
   text, instead of it trailing directly after wherever the text ends. */
.format-detail-card .btn { margin-top: auto; }
.format-detail-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.format-detail-card h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,3vw,32px); line-height: 1.12; margin: 0; }
.format-detail-card .richtext-output { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(39,32,51,.72); }
.format-detail-card__note { font-size: 15px; line-height: 1.6; color: rgba(39,32,51,.62); margin: 0; }

.schedule-footer-note { font-size: 14px; color: rgba(39,32,51,.62); margin: 18px 0 0; }

.pill { display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--panel-green); color: var(--sage-hover); }

/* margin: 0 (not auto) — auto would center this narrower-than-section
   block instead of left-aligning it, detaching card content from the
   intro text's left edge above it. */
.practice-list { display: grid; gap: 18px; max-width: 1060px; margin: 0; }
.practice-card {
  background: var(--card); border-radius: clamp(22px,3vw,28px); padding: clamp(28px,4vw,40px) clamp(24px,3vw,36px);
  display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 24px; align-items: start;
}
.practice-card h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,3vw,30px); line-height: 1.1; margin: 0 0 12px; }
.practice-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.practice-card .richtext-output { margin: 0 0 18px; font-size: 16px; line-height: 1.7; color: rgba(39,32,51,.72); }

/* ── Workshop promo banner (home) ────────────────────────────────────── */

.workshop-banner {
  background: var(--text); color: var(--bg); border-radius: clamp(24px,4vw,48px);
  display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); overflow: hidden;
}
.workshop-banner__content { padding: clamp(28px,5vw,56px); display: flex; flex-direction: column; justify-content: center; }
.workshop-banner__badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px;
  background: rgba(249,246,252,.12); color: var(--bg); margin: 0 0 18px;
}
.workshop-banner__badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex: none; }
.workshop-banner__date { font-weight: 600; font-size: 15px; margin: 0 0 10px; color: rgba(249,246,252,.85); }
.workshop-banner__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px,4.4vw,48px); line-height: 1.08; margin: 0 0 16px; color: var(--bg); }
.workshop-banner .richtext-output { font-size: 16px; line-height: 1.65; color: rgba(249,246,252,.75); margin: 0 0 22px; }
.workshop-banner__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.workshop-banner__price { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--bg); margin: 0 0 22px; }
.workshop-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.workshop-banner .btn-outline { border-color: rgba(249,246,252,.4); color: var(--bg); }
.workshop-banner .btn-outline:hover { background: rgba(249,246,252,.1); color: var(--bg); }
.workshop-banner__image { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }

/* ── Workshop list (percorsi) ────────────────────────────────────────── */

.workshop-list { display: grid; gap: 18px; }
.workshop-card {
  background: var(--card); border-radius: clamp(22px,3vw,28px); padding: clamp(28px,4vw,40px) clamp(24px,3vw,36px);
  display: grid; grid-template-columns: minmax(240px,440px) 1fr; gap: 24px; align-items: start;
}
.workshop-card__date { font-size: 14px; font-weight: 600; color: var(--sage-hover); margin: 0 0 6px; }
.workshop-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,3vw,28px); line-height: 1.1; margin: 0 0 4px; }
.workshop-card__location { font-size: 14px; color: rgba(39,32,51,.55); margin: 0; }
.workshop-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.workshop-card .richtext-output { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: rgba(39,32,51,.72); }
.workshop-card__note { font-size: 13px; color: rgba(39,32,51,.55); margin: 0 0 14px; }
.workshop-card__price { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text); margin: 0 0 14px; }
@media (max-width: 640px) { .workshop-card { grid-template-columns: 1fr; } }

.split-band { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(20px,3vw,32px); align-items: center; }
.split-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.schedule-card { background: var(--card); border-radius: clamp(22px,3vw,30px); padding: 22px 24px; }
.schedule-card__day { font-family: var(--font-display); font-size: 21px; margin-bottom: 6px; }
.schedule-card__slot { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(39,32,51,.14); }
.schedule-card__time { flex: none; font-family: var(--font-display); font-size: 17px; color: var(--accent-hover); }
.schedule-card__place { flex: 1; font-size: 14px; line-height: 1.5; color: rgba(39,32,51,.7); }

/* ── Testimonials ────────────────────────────────────────────────────── */

.testimonial-slider { position: relative; }
.testimonial-track {
  display: flex; gap: clamp(14px,2vw,20px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  scroll-snap-align: start; flex: 0 0 clamp(260px,80vw,340px);
  background: var(--panel-green); border-radius: clamp(22px,3vw,32px); padding: clamp(24px,3vw,30px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.testimonial-card__photo { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; }
.testimonial-card__quote { margin: 0; flex: 1; font-size: 15px; line-height: 1.65; color: rgba(39,32,51,.75); }
.testimonial-card__meta { font-style: normal; font-size: 13px; color: rgba(39,32,51,.62); }
.testimonial-slider__controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.testimonial-slider__btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(39,32,51,.18);
  background: transparent; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text);
}
.testimonial-slider__btn:hover { background: rgba(39,32,51,.06); }

/* ── Chi Sono gallery ────────────────────────────────────────────────── */

.chi-sono-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(14px,2vw,20px); }
.chi-sono-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: clamp(20px,3vw,28px); display: block; }

/* ── Timeline ────────────────────────────────────────────────────────── */

.timeline { max-width: 76ch; display: flex; flex-direction: column; gap: 12px; }
.timeline__row {
  background: var(--card); border-radius: clamp(18px,2.4vw,24px); padding: 20px 24px;
  display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: start;
}
.timeline__year { font-family: var(--font-display); font-size: 18px; color: var(--sage-hover); }
.timeline__title { font-weight: 600; font-size: 16px; }
.timeline__note { font-size: 14px; color: rgba(39,32,51,.6); margin-top: 3px; line-height: 1.55; }
@media (max-width: 560px) { .timeline__row { grid-template-columns: 1fr; gap: 4px; } }

/* ── Plain centered CTA (page-ending "get in touch" prompts) ────────── */

.cta-plain { text-align: center; }
.cta-plain__text { max-width: 520px; margin: 0 auto 28px; font-size: 18px; line-height: 1.65; color: rgba(39,32,51,.62); }
.cta-plain__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── CTA banner ──────────────────────────────────────────────────────── */

.cta-banner {
  border-radius: clamp(26px,4vw,44px); padding: clamp(28px,4.5vw,52px);
  display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(20px,3vw,40px); align-items: center;
}
.cta-banner--green { background: var(--sage); color: var(--cta-fg); }
.cta-banner--green .btn-sage { background: var(--cta-fg); color: var(--cta-btn-fg); }
.cta-banner--green .btn-sage:hover { background: #fff; color: var(--cta-btn-fg); }
.cta-banner--tan { background: var(--panel-tan); }
.cta-banner--stacked { display: block; text-align: center; }
.cta-banner.cta-banner--stacked .richtext-output { max-width: 520px; margin: 0 auto 28px; }
.cta-banner h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px,3.8vw,40px); line-height: 1.05; margin: 0 0 12px; }
.cta-banner p, .cta-banner .richtext-output { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(39,32,51,.72); }
.cta-banner--green p, .cta-banner--green .richtext-output { color: inherit; opacity: .85; }

.newsletter-inline .newsletter-form { flex-wrap: wrap; }
.newsletter-inline .newsletter-form input { background: var(--card); }
.newsletter-inline__disclaimer { font-size: 13px; color: rgba(39,32,51,.62); margin: 12px 0 0; }
.newsletter-inline .newsletter-form__message { font-size: 13px; margin-top: 8px; color: rgba(39,32,51,.7); }

/* Home/contatti newsletter CTA — larger and more deliberately laid out than
   the compact footer/popup forms: name fields share a row, email + button
   each get their own full-width row so the block reads as a real signup
   card rather than a cramped single line. */
.cta-banner--newsletter { padding: clamp(40px,6.5vw,76px); }
.cta-banner--newsletter h2 { font-size: clamp(28px,4.2vw,44px); }
@media (min-width: 860px) {
  .cta-banner--newsletter { grid-template-columns: 1fr 1.2fr; }
}
.cta-banner--newsletter .newsletter-inline { width: 100%; }
.cta-banner--newsletter .newsletter-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px;
}
.cta-banner--newsletter .newsletter-form input[name="email"],
.cta-banner--newsletter .newsletter-form button { grid-column: 1 / -1; }
.cta-banner--newsletter .newsletter-form input {
  padding: 16px 20px; font-size: 16px; border-radius: 14px;
}
.cta-banner--newsletter .newsletter-form button {
  padding: 16px 26px; font-size: 16px; margin-top: 2px;
}
@media (max-width: 560px) {
  .cta-banner--newsletter .newsletter-form { grid-template-columns: 1fr; }
}

/* ── Contact ─────────────────────────────────────────────────────────── */

.contatti-secondary { font-size: 16px; line-height: 1.7; color: rgba(39,32,51,.62); margin: 0; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 14px; margin-top: 24px; }
.contact-card {
  display: block; text-decoration: none; background: var(--card);
  border: 1px solid rgba(39,32,51,.13); border-radius: 24px; padding: 22px 24px;
}
.contact-card__label { font-family: var(--font-display); font-size: 18px; color: var(--text); margin-bottom: 2px; }
.contact-card__value { font-size: 14px; color: var(--accent); }

.contatti-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 20px; }
.contatti-sidebar { display: flex; flex-direction: column; gap: 20px; }

.contatti-locations { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.contatti-location { background: var(--panel-tan); border-radius: 16px; padding: 14px 16px; }
.contatti-location__name { font-weight: 600; font-size: 15px; }
.contatti-location__place { font-size: 13px; color: rgba(39,32,51,.62); }

/* display:flex column here (rather than just on the form) so the form
   itself can flex:1 to fill the card's full stretched height (see
   .contatti-grid) — otherwise the card would stretch taller than its
   content and leave dead space below the button instead of growing the
   textarea into it. */
.contact-form-card { background: var(--card); border-radius: clamp(26px,4vw,44px); padding: clamp(24px,3.5vw,38px); display: flex; flex-direction: column; }
.contact-form-card h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0 0 6px; }
.contact-form-card p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(39,32,51,.65); }
.contact-form-card form { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.contact-form-card input, .contact-form-card textarea {
  width: 100%; padding: 14px 20px; font-family: var(--font-body); font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid rgba(39,32,51,.16); border-radius: 24px;
}
.contact-form-card textarea { flex: 1; min-height: 130px; resize: vertical; }
.contact-form-card__message { margin-top: 12px; font-size: 14px; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer { background: var(--panel-tan); color: var(--text); border-top: 1px solid rgba(39,32,51,.13); }
.site-footer__inner {
  max-width: 1240px; margin: 0 auto; padding: clamp(36px,5vw,60px) clamp(18px,5vw,44px);
  display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 28px;
}
.site-footer__brand { font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
.site-footer__brand-sub { font-family: var(--font-body); font-weight: 400; font-size: 14px; }
.site-footer__brand-links { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 14px; }
.site-footer__icon-link { display: inline-flex; color: rgba(39,32,51,.62); }
.site-footer__icon-link:hover { color: var(--accent); }
.site-footer__icon { flex: none; }
.site-footer__nav { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.site-footer__nav a { color: rgba(39,32,51,.62); }
.site-footer__newsletter-label { font-weight: 600; margin-bottom: 8px; }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 160px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(39,32,51,.25);
  background: var(--card); color: var(--text); font-family: var(--font-body);
}
.newsletter-form__message { font-size: 13px; margin-top: 8px; color: rgba(39,32,51,.7); }

/* ── Cookie banner ───────────────────────────────────────────────────── */

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 640px; margin: 0 auto;
  background: var(--text); color: var(--bg);
  border-radius: 20px; padding: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
/* Higher specificity than .cookie-banner above, so this wins regardless of
   source order — without it, the unconditional `display: flex` on
   .cookie-banner overrides the browser's default `[hidden] { display: none }`
   (author CSS always beats the user-agent stylesheet), so toggling the
   `hidden` attribute from JS silently does nothing and the banner never
   visually disappears after Accetta/Rifiuta is clicked. */
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { margin: 0; font-size: 13px; line-height: 1.6; flex: 1; min-width: 220px; }
.cookie-banner__text a { color: rgba(249,246,252,.85); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 8px; }
.cookie-banner .btn-outline { border-color: rgba(249,246,252,.4); color: var(--bg); }

/* ── Newsletter popup ────────────────────────────────────────────────── */

.newsletter-popup { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.newsletter-popup[hidden] { display: none; }
.newsletter-popup__overlay { position: absolute; inset: 0; background: rgba(39,32,51,.55); }
.newsletter-popup__card {
  position: relative; width: 100%; max-width: 820px; max-height: 92vh; overflow-y: auto;
  background: var(--card); border-radius: 24px; box-shadow: 0 24px 60px rgba(39,32,51,.3);
  display: grid; grid-template-columns: 1fr;
}
.newsletter-popup__image { width: 100%; height: 160px; object-fit: cover; display: block; }
.newsletter-popup__body { position: relative; padding: 32px 26px; }
.newsletter-popup__close {
  position: absolute; top: 14px; right: 14px; cursor: pointer; width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid rgba(39,32,51,.25); background: var(--card);
  color: var(--text); font-size: 18px; line-height: 1;
}
.newsletter-popup__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,4vw,34px); line-height: 1.1; margin: 0 0 16px; }
.newsletter-popup__text { font-size: 16px; line-height: 1.7; margin: 0 0 10px; }
.newsletter-popup__text p, .newsletter-popup__text div { margin: 0; }
.newsletter-popup__body .newsletter-form { flex-direction: column; margin-top: 6px; }
.newsletter-popup__body .newsletter-form input { width: 100%; background: var(--bg); }
.newsletter-popup__body .newsletter-form button { width: 100%; }
.newsletter-popup__disclaimer { font-size: 13px; color: rgba(39,32,51,.62); margin: 14px 0 0; }
.newsletter-popup__done { text-align: center; padding-top: 6px; }
.newsletter-popup__done-icon {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 999px; background: var(--panel-green);
  color: var(--sage-hover); display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.newsletter-popup__done .newsletter-popup__headline { text-align: center; }
.newsletter-popup__done .newsletter-popup__text { margin-bottom: 22px; color: rgba(39,32,51,.62); }

@media (min-width: 640px) {
  .newsletter-popup__card { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
  .newsletter-popup__image { height: 100%; min-height: 360px; }
  .newsletter-popup__body { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
}

/* ── Newsletter standalone page (/newsletter) ──────────────────────────── */

.newsletter-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px 16px; }
.newsletter-page__brand { margin-right: 0; }
.newsletter-page__card { max-height: none; overflow-y: visible; }

/* ── Misc ────────────────────────────────────────────────────────────── */

.status-message { text-align: center; max-width: 560px; margin: 0 auto; }
.status-message .richtext-output { margin-bottom: 28px; }
.status-message p { margin: 0 0 28px; }