/* Scroll-reveal (progressive enhancement via src/js/reveal.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal="fade-up"] { transform: translateY(24px); }
[data-reveal="fade-down"] { transform: translateY(-24px); }
[data-reveal="fade-left"] { transform: translateX(-24px); }
[data-reveal="fade-right"] { transform: translateX(24px); }
[data-reveal="fade"] { transform: none; }
[data-reveal="zoom-in"] { transform: scale(0.92); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.oncobeauty [data-reveal] {
  transition-duration: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Nav */
.site-nav {
  background: var(--color-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --nav-v-pad: 1.5rem;
  padding-top: var(--nav-v-pad);
  padding-bottom: var(--nav-v-pad);
  transition: padding 0.25s ease;
}

.site-nav__logo img {
  width: 230px;
  transition: width 0.25s ease;
}

.site-nav__logo-img--dark { display: none; }

[data-theme="dark"] .site-nav__logo-img--light { display: none; }
[data-theme="dark"] .site-nav__logo-img--dark { display: block; }

.site-nav.is-scrolled .site-nav__inner {
  --nav-v-pad: 0.75rem;
}

/* Shrunk state: keep the logo wordmark roughly as tall as the 1.2rem menu text
   (~19px) rather than dropping to ~17px — 190px wide → ~21.7px tall. */
.site-nav.is-scrolled .site-nav__logo img { width: 190px; }

/* Back to top */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  z-index: 30;
}

.back-to-top svg { width: 22px; height: 22px; }

.back-to-top:hover { background: rgba(0, 0, 0, 0.55); }

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-nav__toggle-input { display: none; }

.site-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.site-nav__toggle span {
  width: 26px;
  height: 2px;
  background: var(--color-text);
}

/* Direct child only: dropdown lists are nested uls and must keep their own display */
.site-nav__menu > ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav__menu a,
.site-nav__drop-label {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-text);
}

.site-nav__menu a:hover,
.site-nav__menu a[aria-current="page"] {
  color: var(--color-accent);
}

.site-nav__menu > ul > li > a[aria-current="page"],
.site-nav__menu > ul > li > a.is-scroll-active,
.site-nav__drop.is-active > .site-nav__drop-label {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 4px;
}

.site-nav__drop {
  position: relative;
  cursor: default;
}

.site-nav__lang .site-nav__drop-label { display: inline-flex; align-items: center; line-height: 1; }
.flag-icon { width: 22px; height: auto; vertical-align: middle; }

.site-nav__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.site-nav__icon-btn svg { width: 20px; height: 20px; }

.site-nav__icon-btn:hover,
.site-nav__icon-btn[aria-pressed="true"] { color: var(--color-accent); }

.site-nav__icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-ink);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

.site-nav__icon-btn:hover::after,
.site-nav__icon-btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#glow-canvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#glow-canvas.is-active { opacity: 1; }

.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

.site-nav__drop-label::after {
  content: "";
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: 0.15em;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.site-nav__drop-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-radius: 0 0 10px 10px;
  padding: 0.5rem 0;
  min-width: 9rem;
  z-index: 30;
}

/* Language switcher sits at the far-right of the nav — open it leftward so it
   doesn't overflow the viewport edge. */
.site-nav__lang .site-nav__drop-list {
  left: auto;
  right: 0;
}

.site-nav__drop:hover .site-nav__drop-list,
.site-nav__drop:focus-within .site-nav__drop-list {
  display: block;
}

.site-nav__drop-list li a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__drop-list li a:hover {
  background: rgba(43, 167, 172, 0.6);
  color: var(--color-text);
}

@media (max-width: 767px) {
  .site-nav__toggle { display: flex; }

  .site-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 1rem 1.5rem;
  }

  /* This overlay's background stays a fixed white translucent panel regardless of theme
     (accepted design), so its text/icons must stay fixed dark (--color-ink) too, instead of
     following the theme-aware --color-text, or dark mode leaves near-white text illegible
     on the white panel. */
  .site-nav__menu a,
  .site-nav__drop-label,
  .site-nav__icon-btn {
    color: var(--color-ink);
  }

  .site-nav__menu > ul { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .site-nav__toggle-input:checked ~ .site-nav__menu { display: block; }

  .site-nav__drop-list { position: static; box-shadow: none; display: block; padding-left: 1rem; border-radius: 0; background: transparent; }
}

/* Tablet/narrow-desktop: full menu doesn't fit beside the logo in one row (it wraps and
   overlaps the vertically-centered logo). Stack logo above menu instead of switching to the
   hamburger — menu row gets full width and centers/wraps on its own, no overlap. */
@media (min-width: 768px) and (max-width: 1240px) {
  .site-nav__inner { flex-direction: column; gap: var(--nav-v-pad); }
  .site-nav__menu { width: 100%; }
  .site-nav__menu > ul { justify-content: center; gap: 0.75rem; }

  /* At 768px (this band's narrowest point) the full item list + icons + language flag no
     longer fit on one row at the default 1.2rem/1.5rem gap, so the flag wraps to its own
     3rd row. Shrinking to 0.875rem (tested against every language's longest label, worst
     case FR "QUI SOMMES-NOUS") keeps the whole menu — including the flag — on a single row,
     so the nav is 2 rows total (logo, then menu) instead of 3. */
  .site-nav__menu a,
  .site-nav__drop-label { font-size: 0.875rem; }
}

/* Hero (full-bleed background photo, text overlays the pale wall at left — live .fse-hero) */
.hero {
  height: 750px;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--color-ink);
  background-color: var(--color-surface);
  background-image: url("/assets/img/hero/hero-full-service-europe-home.png");
  background-image: image-set(url("/assets/img/hero/hero-full-service-europe-home.webp") type("image/webp"), url("/assets/img/hero/hero-full-service-europe-home.png") type("image/png"));
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* .container is a flex child here; force full width or it shrinks to fit.
   Drop the centered max-width so the content panel hugs the left viewport
   edge (over the photo's pale wall) at every width — most visible above
   ~1800px where the 1240px centered container would otherwise push it far
   from the border. 4vw ≈ the "4% from the left" the panel should keep. */
.hero > .container {
  width: 100%;
  max-width: none;
  padding-left: 4vw;
  padding-right: 4vw;
}

.hero__content {
  max-width: 25rem;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
}

/* h1 jumps 34px -> 40px -> 51.2px at the 768/1200 breakpoints (base.css). This box's
   width must track it: a single-word heading (DE "EVENTAGENTUR", FR "ÉVÉNEMENTIELLE")
   must never break mid-word, so each breakpoint's max-width holds the widest such word
   at that font size (measured: DE 331/389/498, FR 366/431/551, + 20px padding).
   overflow-wrap stays as the last-resort fallback for sub-~380px phones where the
   viewport itself is narrower than the word. */
@media (min-width: 768px) {
  .hero__content { max-width: 29rem; }
}

@media (min-width: 1200px) {
  .hero__content { max-width: 37rem; }
}

/* IT heading is forced onto two rows ("agenzia\nEVENTI") so its panel doesn't
   need the wide single-word box the other languages do — narrow it so the
   paragraph wraps to more lines and the whole panel reads taller/tighter.
   "AGENZIA" is ~268px at the 51px desktop size, so 21rem clears it at every
   breakpoint. Higher specificity than the width media queries above. */
:lang(it) .hero__content { max-width: 21rem; }

.hero__content h1 {
  color: var(--color-accent);
  overflow-wrap: break-word;
  /* Honour explicit newlines in the copy string (e.g. IT "agenzia\nEVENTI")
     so a two-word heading can be forced onto two rows regardless of how much
     width the panel has — still wraps normally at the box edge otherwise. */
  white-space: pre-line;
}

.hero__content .btn--primary {
  overflow-wrap: break-word;
}

.hero__content p {
  margin: 1.5rem 0;
  font-size: 1.2rem;
}

@media (max-width: 1199px) {
  .hero { height: 650px; }
}

@media (max-width: 767px) {
  .hero { height: 550px; }
}

@media (max-width: 575px) {
  .hero { height: 500px; }
}

/* Chi siamo hero (live .fse-bck-chi-siamo: full-bleed photo, white body text, teal headings) */
.chi-siamo-hero {
  padding: 5rem 0;
  color: #fff;
  background-color: var(--color-ink);
  background-image: url("/assets/img/hero/hero-chi-siamo.jpg");
  background-image: image-set(url("/assets/img/hero/hero-chi-siamo.webp") type("image/webp"), url("/assets/img/hero/hero-chi-siamo.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chi-siamo-hero__content {
  max-width: 48rem;
}

.chi-siamo-hero__content h1 {
  color: var(--color-accent);
  text-transform: uppercase;
}

.chi-siamo-hero__content h2 {
  color: var(--color-accent);
  font-size: 1.6rem;
}

.chi-siamo-hero__content p {
  margin: 1.5rem 0;
  font-size: 1.2rem;
}

.chi-siamo-hero__divider {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 1.5rem 0;
}

@media (max-width: 767px) {
  .chi-siamo-hero { padding: 3rem 0; background-size: 220% auto; background-position: 85% center; }
}

/* Soft skill strip (live #soft-skill: solid teal bg, 3-col, white text) */
.soft-skill {
  background: var(--color-accent);
  color: #fff;
  padding: 4rem 0;
  margin-bottom: 2.5rem;
}

.soft-skill__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.soft-skill__grid h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.soft-skill__heading {
  color: #fff;
  margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
  .soft-skill__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Eventi catalog pages: "why choose us" is ink bg with teal item headings, not solid teal */
.soft-skill.eventi-why-choose { background: var(--color-ink); margin-bottom: 0; }

.soft-skill.eventi-why-choose .soft-skill__grid h2 { color: var(--color-accent); }

/* Buttons */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* live .fse-pulsante-azzurro: Syncopate uppercase 1.5em on teal */
.btn--primary {
  background: var(--color-accent);
  color: #fff !important;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: 0.5rem 1.75rem;
  border-radius: 0.3rem;
  margin: 0.75rem 0;
}

.btn--primary:hover { background: var(--color-accent-hover); }

.btn--secondary {
  background: #fff;
  color: var(--color-ink) !important;
  font-family: var(--font-body);
  text-transform: none;
  font-size: 1.2rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0.25rem;
}

.btn--secondary:hover { background: var(--color-accent); color: #fff !important; }

/* live .fse-pulsante-eventi: Ubuntu sentence case, 75% width, radius 15.
   Uniform size across cards (sized to the tallest two-line label), label centered. */
.btn--pill {
  background: var(--color-accent);
  color: #fff !important;
  font-family: var(--font-body);
  text-transform: none;
  border-radius: 15px;
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
  width: 75%;
  min-height: 4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0.75rem 0;
}

.btn--pill:hover { background: var(--color-accent-hover); }

/* Catalog section */
.catalog h2 {
  color: var(--color-accent);
  /* DE "VERANSTALTUNGSKATALOG" is one long compound word — let it hyphenate /
     break instead of overflowing the column on narrow phones. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Catalog cards: plain columns on the cream band, no card box (live layout) */
.event-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Image carries only width/height attrs (467x327) — without this it renders at
   that fixed 467px instead of filling the card, so on wide screens where the
   4-col grid makes cards wider than 467px the image no longer lines up with the
   full-width paragraph below it. */
.event-card picture,
.event-card img {
  display: block;
  width: 100%;
  height: auto;
}

.event-card .btn { margin-top: auto; align-self: center; }

.event-card h3 {
  font-size: 1.6rem;
  margin: 1.5rem 0 1rem;
  color: var(--color-accent);
}

.event-card p {
  font-size: 1.2rem;
  margin: 0 0 1rem;
  /* Reserve 3 lines so paragraphs of different length across a row end at the
     same height — keeps the pill buttons' top edge and the gap above them
     uniform card-to-card (most visible on wide screens where the 4-col grid
     makes copy wrap to 2 vs 3 lines). */
  min-height: 5.5rem;
}

/* Promo/360 panes (full-bleed background photo, floating rounded card) */
.promo-360__pane {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background-size: cover;
  background-position: center;
}

.promo-360__pane--promo {
  background-image: url("/assets/img/misc/servizi-promo.jpg");
  background-image: image-set(url("/assets/img/misc/servizi-promo.webp") type("image/webp"), url("/assets/img/misc/servizi-promo.jpg") type("image/jpeg"));
}

.promo-360__pane--360 {
  background-image: url("/assets/img/misc/servizi-360.jpg");
  background-image: image-set(url("/assets/img/misc/servizi-360.webp") type("image/webp"), url("/assets/img/misc/servizi-360.jpg") type("image/jpeg"));
}

.promo-360__card {
  background: var(--color-surface);
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 450px;
}

.promo-360__card h2 { color: var(--color-accent); }

.promo-360__card p { margin: 1rem 0; }

.promo-360__card .btn--primary { font-size: 1.25rem; }

/* Clients (white section, full-colour logos like the live site) — background and heading
   text stay fixed regardless of theme, since the client-logo PNGs assume a white backdrop
   and would show visible boxes/halos against a dark section. */
.clients {
  background: #fff;
}

.clients h2 {
  color: var(--color-ink);
}

.clients .eyebrow {
  font-family: var(--font-body);
  text-transform: none;
  font-size: 1.5rem;
  font-weight: 400;
}

/* Video: the mp4 stream displays at 1694x720 (2.35:1) — box must match or it letterboxes */
.automotive video {
  width: 100%;
  aspect-ratio: 1694 / 720;
}

.automotive p { text-align: left; }

/* OncoBeauty (dark section) */
.oncobeauty p { margin: 1rem 0; }
.oncobeauty h2 { color: #fff; }

@media (max-width: 767px) {
  .oncobeauty__grid > div:last-child {
    order: -1;
    max-width: 18rem;
    margin: 0 auto;
  }
}

/* Promo page hero (live site: full-bleed split, no container/gutter/radius) */
section.promo-hero {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
}

.promo-hero__text {
  background: var(--color-accent);
  color: #fff;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.promo-hero__text h1 { color: #fff; }

.promo-hero__text .eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
}

.promo-hero picture {
  display: block;
  line-height: 0;
}

.promo-hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  section.promo-hero { grid-template-columns: 1fr 1fr; }
  .promo-hero__text { padding: 4rem; }
  .promo-hero__text .eyebrow {
    max-width: 35rem;
  }
  .promo-hero__text p {
    max-width: 33rem;
  }
}

/* Eventi catalog pages (live *-it/): hero is cream/ink, not promo's teal/white */
.promo-hero__text.eventi-hero__text {
  background: var(--color-cream);
  color: var(--color-text);
}

.promo-hero__text.eventi-hero__text h1 { color: var(--color-accent); }

/* Promo page category rows (alternating image-gallery / text, balanced columns) */
.promo-row h2 { color: var(--color-accent); }
.promo-row p { margin: 1rem 0; }

.promo-row ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.promo-row li { list-style: disc; }
.promo-row li p { margin: 0 0 0.5rem; }

.promo-row__gallery {
  column-count: 3;
  column-gap: 0.75rem;
}

.promo-row__gallery picture {
  display: block;
  break-inside: avoid;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  overflow: hidden;
}

.promo-row__gallery img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}

.promo-row__image picture {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.promo-row__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Lightbox (promo page category galleries, scoped per section by JS) */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox.is-open { display: flex; }

.lightbox__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  padding: 10px 0;
  background: rgba(96, 96, 96, 0.55);
}

.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem 1rem;
}

.lightbox__close {
  top: 0.25rem;
  right: 1rem;
  font-size: 2.5rem;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
}

.lightbox__prev { left: 0.5rem; }
.lightbox__next { right: 0.5rem; }

body.lightbox-open { overflow: hidden; }

/* Eventi catalog hero carousel (right column of .promo-hero, autoplaying,
   cross-fade slides; markup from partials/hero-carousel.njk) */
.hero-carousel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

/* Side-by-side hero: grid items with an aspect-ratio default to align-self:start,
   leaving a dark gap under the photo when the text column is taller. Stretch to
   fill the row; the 4/3 ratio stays as the minimum height. */
@media (min-width: 768px) {
  .promo-hero > .hero-carousel { align-self: stretch; width: 100%; }
}

.hero-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

.hero-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-carousel__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.hero-carousel__dots {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}

.hero-carousel__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.hero-carousel__dot.is-active { background: #fff; }

.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-carousel__arrow--prev { left: 0.5rem; }
.hero-carousel__arrow--next { right: 0.5rem; }

/* Promo page CTA band (dark, white contact card like promo-360__card) */
.promo-cta p { margin: 1rem 0; }

.promo-cta__card {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 2rem 2.5rem;
  text-align: center;
}

.promo-cta__card h3 {
  color: var(--color-accent);
  font-size: 1.2rem;
  margin: 1rem 0 0.5rem;
}

.promo-cta__card p { margin: 0.25rem 0; }
.promo-cta__card a { color: var(--color-text); }
.promo-cta__card a:hover { color: var(--color-accent); }

/* Contact info / footer (teal band, white text — live bgc-6687) */
.contact-info {
  background: var(--color-accent);
  color: #fff;
}

.contact-info h2 {
  color: #fff;
  margin-bottom: 1.5rem;
}

.contact-info a { color: #fff; }

.contact-info p { font-size: 1.1rem; margin-bottom: 1rem; }

.contact-info__social { display: flex; gap: 1rem; margin-top: 0.5rem; }

.contact-info__badges img { margin: 0.75rem 0; }

/* Contact form (white section, teal heading) */
.contact-form {
  background: var(--color-surface);
}

.contact-form h2 {
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.contact-form p { margin-bottom: 1rem; }

.contact-form__terms { font-size: 1.05rem; margin: 1.5rem 0 1rem; }
.contact-form__terms a { color: var(--color-accent); }

.contact-form__optin-heading { font-size: 1.1rem; margin-bottom: 0.5rem; }

.contact-form__send { width: 100%; }
.contact-form__send:disabled { opacity: 0.6; cursor: wait; }

/* Honeypot: off-screen, not display:none (some bots skip display:none fields) */
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__status { margin: 1rem 0 0; min-height: 1.5em; }
.contact-form__status--ok { color: #2e9e5b; }
.contact-form__status--error { color: #e05a4f; }

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  background: var(--color-surface);
}

.form-check {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.form-check input { margin-right: 0.5rem; }

.legal-footer {
  font-size: 1rem;
  text-align: center;
  margin-top: 1rem;
}

.legal-footer a { color: var(--color-accent); }

/* Welcome section: image fills column (live .fse-img-h1), taller block */
section.welcome { padding: 6rem 0; }

.welcome__grid picture img { width: 100%; }

@media (max-width: 767px) {
  .welcome__grid picture {
    max-width: 26rem;
    margin: 0 auto;
  }
}

/* Welcome section heading pair (live: small dark Ubuntu kicker, big teal Syncopate title) */
.welcome__kicker {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.welcome__title {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2.8rem;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}


/* Live-site typography scales down below 1200px (Blocs media queries) */
.welcome__title { font-size: 1.875rem; }
.welcome__kicker { font-size: 1.1rem; }
.event-card h3 { font-size: 1.25rem; }
.btn--primary { font-size: 1.2rem; }
.btn--pill { font-size: 1.05rem; }
.clients .eyebrow { font-size: 1.2rem; }

@media (min-width: 1200px) {
  .welcome__title { font-size: 2.8rem; }
  .welcome__kicker { font-size: 1.4rem; }
  .event-card h3 { font-size: 1.6rem; }
  .btn--primary { font-size: 1.5rem; }
  .btn--pill { font-size: 1.3rem; }
  .clients .eyebrow { font-size: 1.5rem; }
}

.legal-page { padding: 4rem 0; }

.legal-page__inner {
  max-width: 860px;
}

.legal-page__inner h1 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2rem;
  overflow-wrap: break-word;
}

.legal-page__inner h2 {
  color: var(--color-accent);
  margin: 2rem 0 1rem;
}

.legal-page__inner h3 {
  color: var(--color-text);
  margin: 1.5rem 0 0.75rem;
}

.legal-page__inner p { margin: 0 0 1rem; }

.legal-page__inner ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-page__inner ol li { list-style: decimal; margin-bottom: 0.5rem; }

.error-404 {
  text-align: center;
  padding: 4rem 0;
}

.error-404 h1 {
  font-size: 5rem;
  margin-bottom: 0.5rem;
}

.error-404 h2 {
  margin-top: 0;
}

.error-404 .btn {
  margin-top: 1.5rem;
}

.credits-groups { margin-top: 1rem; }

.credits-group { margin-bottom: 2rem; }
.credits-group:last-child { margin-bottom: 0; }

.credits-group h2 a { color: inherit; text-decoration: none; }
.credits-group h2 a:hover { text-decoration: underline; }

.credits-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2rem;
  margin-top: 0.75rem;
}

.credits-list a { color: var(--color-accent); }

@media (min-width: 768px) {
  .credits-list { grid-template-columns: 1fr 1fr; }
}

/* Eventi catalog "why this category" section (cream bg, full container-width text) */
.why-block { background: var(--color-cream); }

.why-block__subheading {
  color: var(--color-accent);
  font-size: 1.6rem;
  margin: 1rem 0 1.5rem;
}

.why-block__inner p { margin: 0 0 1rem; }

/* Cookie banner — fixed bottom-right card; back-to-top is hidden while it is open */
.cookie-banner {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  z-index: 60;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner h2 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  text-transform: none;
  margin: 0 0 0.75rem;
}

.cookie-banner p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.cookie-banner__settings { margin-bottom: 1rem; }

.cookie-banner__option {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cookie-banner__actions .btn--primary {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  margin: 0;
  border: none;
  cursor: pointer;
}

.cookie-banner__link {
  background: none;
  border: none;
  padding: 0.5rem 0.25rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: underline;
  cursor: pointer;
}

.has-cookie-banner .back-to-top { display: none; }