:root {
  --vr-brown: #2D0D02;
  --vr-brown-deep: #1B0904;
  --vr-gold: #E0BE64;
  --vr-gold-soft: #E8D295;
  --vr-ivory: #F8F4EC;
  --vr-stone: #DED5C7;
  --vr-text: #3B302A;
  --vr-white: #FFFFFF;

  --vr-font-display: "Cormorant Garamond", Georgia, serif;
  --vr-font-body: "Manrope", Arial, sans-serif;

  --vr-container: min(100% - clamp(2rem, 6vw, 6rem), 1120px);
  --vr-focus: 0 0 0 3px rgb(224 190 100 / 55%);

  /* Motion system unico */
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-duration: 550ms;
  --motion-shift: 12px;
  --motion-shift-title: 16px;
  --motion-shift-photo: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--vr-ivory);
  color: var(--vr-text);
  font-family: var(--vr-font-body);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--vr-ivory);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--vr-focus);
}

::selection {
  background: var(--vr-gold-soft);
  color: var(--vr-brown-deep);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html.reveal-enhanced [data-section-reveal] {
  --section-reveal-duration: var(--motion-duration);
  --section-reveal-easing: var(--motion-ease);
}

html.reveal-enhanced [data-section-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

html.reveal-enhanced [data-section-reveal].is-revealing {
  transition:
    opacity var(--section-reveal-duration) var(--section-reveal-easing),
    transform var(--section-reveal-duration) var(--section-reveal-easing);
  will-change: opacity, transform;
}

html.reveal-enhanced [data-section-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------------
   HERO — editoriale: foto reale, gradient localizzato, niente box.
   Font e tonalità sono limitati alla hero per non toccare il resto.
------------------------------------------------------------------ */

.hero {
  --hero-serif: var(--vr-font-display);
  --hero-sans: var(--vr-font-body);
  --hero-shade: 27 9 4; /* --vr-brown-deep */
  --hero-ivory: #F6EFE2;
  --hero-gutter: clamp(1.5rem, 4.8vw, 6rem);

  position: relative;
  isolation: isolate;
  display: grid;
  min-height: max(38rem, 94svh);
  overflow: hidden;
  background: url("SfondoHeroDesktop.webp") 55% 8% / cover no-repeat;
  background-color: var(--vr-brown-deep);
  color: var(--hero-ivory);
  font-family: var(--hero-sans);
}

/* Gradient solo sul lato del testo: si dissolve prima del centro */
.hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(
    90deg,
    rgb(var(--hero-shade) / 80%) 0%,
    rgb(var(--hero-shade) / 70%) 26%,
    rgb(var(--hero-shade) / 40%) 40%,
    rgb(var(--hero-shade) / 12%) 50%,
    rgb(var(--hero-shade) / 0%) 58%
  );
  pointer-events: none;
}

.hero__brand {
  position: absolute;
  top: clamp(1.75rem, 3.6vw, 2.75rem);
  left: 50%;
  z-index: 2;
  width: clamp(7.5rem, 10.5vw, 10rem);
  transform: translateX(-50%);
}

.hero__logo {
  display: block;
  width: 100%;
  height: auto;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  padding: clamp(10rem, 19vh, 12.5rem) var(--hero-gutter) clamp(3.5rem, 8vh, 5.5rem);
}

.hero__content {
  width: min(100%, 40rem);
  animation: hero-reveal var(--motion-duration) var(--motion-ease) both;
}

/* Didascalia discreta, non soprattitolo */
.hero__eyebrow {
  margin: 0 0 1.4rem;
  color: rgb(246 239 226 / 62%);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.hero h1 {
  margin: 0;
  color: var(--hero-ivory);
  font-family: var(--hero-serif);
  font-size: clamp(2.95rem, 4.3vw, 4.3rem);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  white-space: nowrap;
}

/* A capo manuali: desktop su 4 righe, mobile su 5 */
.hero__br-m {
  display: none;
}

.hero__copy {
  max-width: 32rem;
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
  color: rgb(246 239 226 / 86%);
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.62;
  text-wrap: pretty;
}

.hero__copy p,
.hero__microcopy,
.hero__authority {
  margin: 0;
}

.hero__conversion {
  display: grid;
  justify-items: start;
  margin-top: clamp(2.25rem, 3.4vw, 2.75rem);
}

.hero__cta {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.05rem 0.85rem 1.2rem;
  border: 1px solid rgb(224 190 100 / 38%);
  border-radius: 6px;
  background: var(--vr-brown);
  color: var(--hero-ivory);
  font-family: var(--vr-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 240ms ease;
}

.hero__cta-arrow {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__cta:hover {
  border-color: rgb(224 190 100 / 70%);
}

.hero__cta:hover .hero__cta-arrow,
.hero__cta:focus-visible .hero__cta-arrow {
  transform: translateX(4px);
}

.hero__microcopy {
  max-width: 26rem;
  margin-top: 1rem;
  color: rgb(246 239 226 / 72%);
  font-size: 0.875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.hero__authority {
  max-width: 27rem;
  margin-top: clamp(2.5rem, 4.5vw, 3.25rem);
  color: rgb(246 239 226 / 56%);
  font-size: 0.75rem;
  line-height: 1.5;
}

@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--motion-shift-title));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Schermi larghi: la colonna cresce con il titolo, senza diventare un poster */
@media (min-width: 1600px) {
  .hero__content {
    width: min(100%, 45rem);
  }

  .hero__copy {
    max-width: 34rem;
    font-size: 1.125rem;
  }

  .hero__cta {
    font-size: 0.8125rem;
  }

  .hero__microcopy {
    max-width: 29rem;
    font-size: 0.9375rem;
  }

  .hero__authority {
    font-size: 0.8125rem;
  }
}

/* Tablet: stessa logica, gradient un po' più ampio */
@media (max-width: 1024px) {
  .hero::before {
    background: linear-gradient(
      90deg,
      rgb(var(--hero-shade) / 82%) 0%,
      rgb(var(--hero-shade) / 70%) 34%,
      rgb(var(--hero-shade) / 36%) 56%,
      rgb(var(--hero-shade) / 0%) 76%
    );
  }
}

/* Mobile: composizione verticale dedicata — foto sopra, testo in basso */
@media (max-width: 760px) {
  .hero {
    /* Gutter proporzionale: titolo e riga più lunga scalano insieme */
    --hero-gutter: 5vw;

    min-height: 100svh;
    background-position: 68% 0%; /* tetto del pergolato fuori campo, dietro al titolo */
    background-size: auto 90svh;
    background-color: rgb(var(--hero-shade));
  }

  .hero::before {
    background: linear-gradient(
      180deg,
      rgb(var(--hero-shade) / 0%) 20svh,
      rgb(var(--hero-shade) / 2%) 25.6svh,
      rgb(var(--hero-shade) / 9%) 31.2svh,
      rgb(var(--hero-shade) / 20%) 36.8svh,
      rgb(var(--hero-shade) / 34%) 42.4svh,
      rgb(var(--hero-shade) / 50%) 48svh,
      rgb(var(--hero-shade) / 66%) 53.6svh,
      rgb(var(--hero-shade) / 79%) 59.2svh,
      rgb(var(--hero-shade) / 90%) 64.8svh,
      rgb(var(--hero-shade) / 97%) 70.4svh,
      rgb(var(--hero-shade)) 76svh
    );
  }

  .hero__brand {
    top: 1.25rem;
    width: 5.75rem;
  }

  .hero__inner {
    align-items: end;
    padding: 46svh var(--hero-gutter) 2.25rem;
  }

  .hero__content {
    width: 100%;
  }

  .hero__eyebrow {
    margin-bottom: 1.1rem;
    color: rgb(246 239 226 / 58%);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 9.6vw, 2.4rem);
    line-height: 1.18;
    white-space: normal;
  }

  .hero__br-m {
    display: inline;
  }

  .hero__br-d {
    display: none;
  }

  .hero__copy {
    margin-top: 2.625rem;
    font-size: 1rem;
    line-height: 1.62;
  }

  .hero__conversion {
    justify-items: stretch;
    margin-top: 2.5rem;
  }

  .hero__cta {
    min-height: 3.5rem;
    justify-content: space-between;
    padding: 0.55rem 1.05rem 0.55rem 1.15rem;
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
    line-height: 1.3;
  }

  /* Microcopy agganciata alla CTA, proof staccato: tre pesi diversi */
  .hero__microcopy {
    max-width: 19rem;
    margin-top: 0.875rem;
    color: rgb(246 239 226 / 66%);
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .hero__authority {
    margin-top: 2.25rem;
    color: rgb(246 239 226 / 48%);
    font-size: 0.6875rem;
    line-height: 1.5;
  }
}

/* ------------------------------------------------------------------
   FILM — il video di Villa Rivì, subito dopo la hero.
   Nessun contenitore: fondo avorio, video, testo e CTA.
------------------------------------------------------------------ */

.film {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);

  padding-block: clamp(2.75rem, 7vw, 6rem) clamp(3.25rem, 8vw, 7rem);
  background: var(--vr-ivory);
  color: var(--vr-brown);
  font-family: var(--hero-sans);
}

.film__inner {
  width: min(100% - 2.5rem, 1100px);
  margin-inline: auto;
}

/* Comando discreto, allineato al bordo sinistro del video */
.film__command {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--vr-brown);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: rgb(45 13 2 / 28%);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  cursor: pointer;
  transition: text-decoration-color 240ms ease;
}

/* Area di tocco di 44px, invisibile */
.film__command {
  position: relative;
}

.film__command::after {
  position: absolute;
  inset: -0.5625rem -0.25rem;
  content: "";
}

.film__command:hover {
  text-decoration-color: rgb(45 13 2 / 70%);
}

.film__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--vr-brown-deep);
}

/* Il master ha 3px neri in alto e 4px a destra: li porta fuori campo */
.film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.006);
  transform-origin: 0 100%;
}

.film__play {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
  transition:
    opacity 320ms ease,
    visibility 0s linear 0s;
}

.film__play-disc {
  display: grid;
  width: clamp(3.5rem, 6.4vw, 4.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(246 239 226 / 90%);
  place-items: center;
  transition: background-color 240ms ease;
}

.film__play svg {
  width: 58%;
  margin-left: 6%;
  fill: var(--vr-brown);
}

.film__play:hover .film__play-disc {
  background: rgb(246 239 226 / 97%);
}

.film.is-playing .film__play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms;
}

.film__footer {
  display: grid;
  margin-top: 1.75rem;
  gap: 1.5rem;
}

.film__microcopy {
  max-width: 26rem;
  margin: 0;
  color: var(--vr-text);
  font-size: 1rem;
  line-height: 1.58;
  text-wrap: pretty;
}

/* Entrata al primo scroll: breve, una sola volta */
.film.is-reveal-ready .film__media {
  opacity: 0;
  transform: translate3d(0, var(--motion-shift-photo), 0);
}

.film.is-revealed .film__media {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}

@media (min-width: 761px) {
  .film__command {
    margin-bottom: 1.1rem;
    font-size: 0.8125rem;
  }

  /* Comando discreto: niente sottolineatura, allineato al bordo del film */
  .film__command {
    padding-inline: 0;
    color: rgb(45 13 2 / 68%);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color 240ms ease;
  }

  .film__command:hover,
  .film__command:focus-visible {
    color: var(--vr-brown);
  }

  /* Caption editoriale: sotto il film, sul suo bordo sinistro, niente colonna vuota */
  .film {
    padding-bottom: 4rem;
  }

  .film__footer {
    display: block;
    margin-top: 1.75rem;
  }

  .film__microcopy {
    max-width: 29rem;
  }

  .film__microcopy {
    font-size: 1rem;
  }
}

@media (max-width: 760px) {
  :root {
    --vr-container: min(100% - 2rem, 1120px);
  }
}

/* ------------------------------------------------------------------
   PROBLEMA — composizione editoriale: testo 45%, fotografie 55%.
   Mobile: titolo, foto sposi, dettaglio tavola, testo, CTA.
------------------------------------------------------------------ */

.problem-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);

  background: var(--vr-ivory);
  color: var(--vr-brown);
  font-family: var(--hero-sans);
}

.problem-section__inner {
  display: grid;
  width: min(100% - 10vw, 40rem);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4.5rem, 9vw, 8.5rem);
  grid-template-areas:
    "title"
    "visual"
    "copy";
}

.problem-section__title {
  grid-area: title;
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: clamp(2.25rem, 10.75vw, 2.75rem);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.problem-section__visual {
  grid-area: visual;
  margin-top: 2.25rem;
}

.problem-section__photo {
  display: block;
  border-radius: 3px;
  object-fit: cover;
}

.problem-section__photo--main {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-position: 50% 55%;
}

/* Dettaglio sfalsato: sporge a destra, senza coprire lo strascico */
.problem-section__photo--detail {
  --reveal-delay: 120ms;

  position: relative;
  z-index: 1;
  width: 50%;
  height: auto;
  aspect-ratio: 5 / 6;
  margin: 0.75rem -2.5vw 0 auto;
  object-position: 50% 88%;
}

.problem-section__copy {
  grid-area: copy;
  display: grid;
  align-content: start;
  align-self: start;
  margin-top: 2.75rem;
  gap: 1.25rem;
  color: rgb(45 13 2 / 80%);
  font-size: 1.0625rem;
  line-height: 1.66;
}

.problem-section__copy p {
  margin: 0;
  text-wrap: pretty;
}

.problem-section__emphasis {
  margin-top: 0.5rem !important;
  color: var(--vr-brown);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Mobile e tablet: sezione compatta, body tipografico precedente (Manrope) */
@media (max-width: 1023px) {
  .problem-section__photo--detail {
    display: none;
  }

  .problem-section__copy {
    margin-top: 2.75rem;
    gap: 1.75rem;
  }

  .problem-section__copy p {
    color: rgb(59 48 42 / 84%);
    font-family: var(--vr-font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.62;
  }

  .problem-section__copy .problem-section__emphasis {
    margin-top: 0 !important;
    color: var(--vr-brown-deep);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.58;
  }
}

@media (min-width: 1024px) {
  .problem-section__inner {
    width: min(100% - 12vw, 1240px);
    grid-template-areas:
      "title visual"
      "copy visual";
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-rows: auto 1fr;
  }

  .problem-section__title {
    font-size: clamp(2.4rem, 3.78vw, 3.4rem);
    line-height: 1.08;
    white-space: nowrap;
  }

  .problem-section__br-m {
    display: none;
  }

  .problem-section__visual {
    position: relative;
    align-self: start;
    margin: 3rem 0 clamp(5rem, 7vw, 6rem);
  }

  .problem-section__photo--main {
    width: 60%;
    margin-left: 14%;
    aspect-ratio: 3 / 4;
    object-position: 50% 62%;
  }

  .problem-section__photo--detail {
    position: absolute;
    left: 67%;
    bottom: -13%;
    width: 30%;
    margin: 0;
  }

  .problem-section__copy {
    max-width: 30rem;
    margin-top: clamp(2.25rem, 3.4vw, 3rem);
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .problem-section__emphasis {
    font-size: 1.1875rem;
  }
}

/* Entrate sobrie, una sola volta */
.problem-section.is-reveal-ready [data-problem-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, var(--motion-shift)), 0);
}

.problem-section.is-reveal-ready [data-problem-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms),
    transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------------
   METODO — racconto in cinque fasi, separate solo dallo spazio.
   Desktop: foto sticky a sinistra. Mobile: una colonna, niente sticky.
------------------------------------------------------------------ */

.method-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);
  --method-serif: var(--vr-font-display);

  background: var(--vr-ivory);
  color: var(--vr-brown);
  font-family: var(--hero-sans);
}

.method-section__inner {
  display: grid;
  width: min(100% - 10vw, 40rem);
  margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 5rem) clamp(4.5rem, 10vw, 6rem);
}

/* Indicatore di capitolo, non soprattitolo */
.method-section__chapter {
  margin: 0 0 1.25rem;
  color: rgb(45 13 2 / 62%);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.method-section__header h2 {
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--method-serif);
  font-size: clamp(1.9rem, 9.75vw, 2.6rem);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.method-section__nowrap {
  white-space: nowrap;
}

.method-section__br-d {
  display: none;
}

.method-section__header > p:last-child {
  max-width: 30rem;
  margin: 1.5rem 0 0;
  color: rgb(45 13 2 / 80%);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.method-section__media {
  margin-top: 2.5rem;
}

.method-section__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  object-fit: cover;
  object-position: 55% 62%;
}

.method-phases {
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

.method-phase {
  display: grid;
  column-gap: 0.75rem;
  grid-template-columns: 1.5rem minmax(0, 1fr);
}

/* Più respiro verso le fasi finali */
.method-phase:nth-child(2) { margin-top: 2.75rem; }
.method-phase:nth-child(3) { margin-top: 3.25rem; }
.method-phase:nth-child(4) { margin-top: 3.75rem; }
.method-phase:nth-child(5) { margin-top: 4.5rem; }

.method-phase__index {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  color: rgb(45 13 2 / 36%);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.method-phase h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  margin: 0 0 0.7rem;
  color: var(--vr-brown);
  font-family: var(--method-serif);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.3;
}

.method-phase p {
  grid-column: 2;
  max-width: 31rem;
  margin: 0;
  color: rgb(45 13 2 / 80%);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

/* L'ultima fase chiude il racconto */
.method-phase:last-child p {
  color: var(--vr-brown);
  font-family: var(--method-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.method-section__cta {
  justify-self: start;
  margin-top: 3.5rem;
}

@media (max-width: 760px) {
  .method-section__cta {
    justify-self: stretch;
  }
}

@media (min-width: 1024px) {
  .method-section__inner {
    width: 100%;
    padding: 0;
    grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
    grid-template-rows: auto auto 1fr;
  }

  .method-section__header,
  .method-phases,
  .method-section__cta {
    grid-column: 2;
    margin-left: clamp(3.5rem, 6.5vw, 7rem);
    margin-right: clamp(2rem, 5vw, 5.5rem);
  }

  .method-section__header {
    max-width: 36rem;
    padding-top: clamp(5.5rem, 9vw, 8.5rem);
  }

  .method-section__header h2 {
    font-size: clamp(2.2rem, 3.35vw, 3.1rem);
    line-height: 1.1;
    white-space: nowrap;
  }

  .method-section__br-m {
    display: none;
  }

  .method-section__br-d {
    display: inline;
  }

  .method-section__media {
    position: sticky;
    top: 0;
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    height: 100svh;
    margin: 0;
  }

  .method-section__media img {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-position: 55% 60%;
  }

  .method-phases {
    max-width: 33rem;
    margin-top: clamp(4.5rem, 7vw, 6rem);
  }

  .method-phase {
    column-gap: 1rem;
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .method-phase:nth-child(2) { margin-top: 3.5rem; }
  .method-phase:nth-child(3) { margin-top: 4rem; }
  .method-phase:nth-child(4) { margin-top: 4.75rem; }
  .method-phase:nth-child(5) { margin-top: 6rem; }

  .method-phase h3 {
    font-size: 1.3125rem;
  }

  .method-phase:last-child p {
    font-size: 1.75rem;
  }

  .method-section__cta {
    margin-top: clamp(4rem, 6vw, 5.5rem);
    margin-bottom: clamp(5.5rem, 9vw, 8.5rem);
  }
}

/* Desktop: la fase letta è piena, le altre restano leggibili */
.method-section.is-guided .method-phase {
  opacity: 0.58;
  transition: opacity 300ms ease;
}

.method-section.is-guided .method-phase.is-current {
  opacity: 1;
}

/* Mobile: entrata sobria, una sola volta */
.method-section.is-reveal-ready [data-method-reveal],
.method-section.is-reveal-ready [data-method-phase] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, var(--motion-shift)), 0);
}

.method-section.is-reveal-ready .is-revealed[data-method-reveal],
.method-section.is-reveal-ready .is-revealed[data-method-phase] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms),
    transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------------
   SARDEGNA — cesura fotografica: il luogo che il metodo non crea.
   Gradient solo dove cade il testo; mare e promontorio liberi.
------------------------------------------------------------------ */

.gulf-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);
  --gulf-shade: 27 9 4; /* --vr-brown-deep */
  --gulf-shift: 0px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vr-brown-deep);
  color: var(--hero-ivory);
  font-family: var(--hero-sans);
}

/* Mobile: foto alta in cima, il testo scende sul marrone che la prosegue */
.gulf-section::after {
  position: absolute;
  inset: 0 0 auto;
  z-index: -2;
  height: 76svh;
  content: "";
  background: url("Panorama Golfo di Cagliari.webp") 66% 50% / cover no-repeat;
}

.gulf-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(
    180deg,
    rgb(var(--gulf-shade) / 0%) 0%,
    rgb(var(--gulf-shade) / 0%) 36svh,
    rgb(var(--gulf-shade) / 18%) 42svh,
    rgb(var(--gulf-shade) / 48%) 49svh,
    rgb(var(--gulf-shade) / 76%) 57svh,
    rgb(var(--gulf-shade) / 92%) 66svh,
    rgb(var(--gulf-shade)) 76svh
  );
  pointer-events: none;
}

.gulf-section__inner {
  display: grid;
  justify-items: start;
  padding: 48svh 5vw 3.5rem;
}

.gulf-section h2 {
  margin: 0;
  color: var(--hero-ivory);
  font-family: var(--vr-font-display);
  font-size: clamp(1.9rem, 10vw, 2.6rem);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.gulf-section p {
  max-width: 34rem;
  margin: 0;
  text-wrap: pretty;
}

.gulf-section__lead {
  margin-top: 2rem !important;
  color: rgb(246 239 226 / 94%);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
}

.gulf-section__lead + p {
  margin-top: 1.1rem !important;
  color: rgb(246 239 226 / 80%);
  font-size: 1.0625rem;
  line-height: 1.62;
}

@media (min-width: 1024px) {
  .gulf-section::after {
    inset: -3% 0;
    height: auto;
    background-position: 50% 42%;
    transform: translate3d(0, var(--gulf-shift), 0);
    will-change: transform;
  }

  .gulf-section::before {
    background:
      radial-gradient(
        ellipse 66% 96% at 0% 100%,
        rgb(var(--gulf-shade) / 82%) 0%,
        rgb(var(--gulf-shade) / 62%) 44%,
        rgb(var(--gulf-shade) / 0%) 80%
      ),
      linear-gradient(
        90deg,
        rgb(var(--gulf-shade) / 64%) 0%,
        rgb(var(--gulf-shade) / 50%) 30%,
        rgb(var(--gulf-shade) / 26%) 44%,
        rgb(var(--gulf-shade) / 0%) 58%
      );
  }

  .gulf-section__inner {
    min-height: max(80svh, 40rem);
    align-content: end;
    padding: 7rem clamp(1.5rem, 6vw, 6.5rem) clamp(4rem, 8vh, 5.5rem);
  }

  .gulf-section__br-m {
    display: none;
  }

  .gulf-section h2 {
    font-size: clamp(2.4rem, 3.45vw, 3.25rem);
    line-height: 1.1;
    white-space: nowrap;
  }

  .gulf-section p {
    max-width: min(34rem, 37vw);
  }

  .gulf-section__lead {
    margin-top: 1.75rem !important;
    font-size: 1.125rem;
  }

  .gulf-section__lead + p {
    margin-top: 0.9rem !important;
  }
}

/* ------------------------------------------------------------------
   SCELTA DELLA LOCATION — cambio di ritmo: solo tipografia su avorio.
------------------------------------------------------------------ */

.location-decision-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);

  background: var(--vr-ivory);
  color: var(--vr-brown);
  font-family: var(--hero-sans);
}

.location-decision-section__inner {
  display: grid;
  width: min(100% - 10vw, 40rem);
  margin-inline: auto;
  padding-block: clamp(3.75rem, 9vw, 7rem) clamp(4.5rem, 10vw, 7.5rem);
}

.location-decision-section h2 {
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: clamp(1.8rem, 9.1vw, 2.4rem);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.location-decision-section__br-d {
  display: none;
}

.location-decision-section__narrative {
  display: grid;
  margin-top: 2.5rem;
  gap: 1.35rem;
}

.location-decision-section__narrative p,
.location-decision-section__final p {
  margin: 0;
  text-wrap: pretty;
}

.location-decision-section__narrative p {
  color: rgb(45 13 2 / 82%);
  font-size: 1.0625rem;
  line-height: 1.68;
}

/* Primo e ultimo paragrafo: stesso copy, un grado di peso in più */
.location-decision-section__narrative .location-decision-section__lead,
.location-decision-section__narrative .location-decision-section__turn {
  color: var(--vr-brown);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.55;
}

.location-decision-section__narrative .location-decision-section__turn {
  margin-top: 0.6rem;
}

.location-decision-section__final {
  display: grid;
  margin-top: 4rem;
}

.location-decision-section__prompt {
  color: rgb(45 13 2 / 82%);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.location-decision-section__question {
  margin-top: 0.85rem !important;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: clamp(1.55rem, 7vw, 1.9rem);
  font-weight: 600;
  line-height: 1.22;
  text-wrap: balance;
}

.location-decision-section__answer {
  margin-top: 1.35rem !important;
  color: rgb(45 13 2 / 82%);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  /* Griglia editoriale: 12 colonne, gutter 24px, max 1240px */
  .location-decision-section__inner {
    display: grid;
    width: min(100% - 128px, 1240px);
    column-gap: 24px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .location-decision-section h2 {
    grid-column: 1 / -1;
    font-size: clamp(2.8rem, 4.4vw, 4rem);
    line-height: 1.08;
    white-space: nowrap;
  }

  .location-decision-section__br-m {
    display: none;
  }

  .location-decision-section__br-d {
    display: inline;
  }

  /* Colonna di lettura rientrata: colonne 3–9, stesso asse per body e domanda */
  .location-decision-section__narrative,
  .location-decision-section__final {
    grid-column: 3 / span 7;
  }

  .location-decision-section__narrative {
    margin-top: clamp(3rem, 5vw, 4.5rem);
    gap: 1.5rem;
  }

  .location-decision-section__narrative p,
  .location-decision-section__prompt,
  .location-decision-section__answer {
    font-size: 1.125rem;
  }

  .location-decision-section__narrative .location-decision-section__lead,
  .location-decision-section__narrative .location-decision-section__turn {
    font-size: 1.3125rem;
  }

  .location-decision-section__final {
    margin-top: clamp(4.5rem, 7vw, 6rem);
  }

  .location-decision-section__question {
    font-size: 2.25rem;
  }
}


/* Entrate sobrie, una sola volta */
.gulf-section.is-reveal-ready [data-gulf-reveal],
.location-decision-section.is-reveal-ready [data-location-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, var(--motion-shift)), 0);
}

.gulf-section.is-reveal-ready .is-revealed[data-gulf-reveal],
.location-decision-section.is-reveal-ready .is-revealed[data-location-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms),
    transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------------
   DIFFERENZE — quattro punti vissuti con la tipografia, su avorio.
------------------------------------------------------------------ */

.difference-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);

  background: var(--vr-ivory);
  color: var(--vr-brown);
  font-family: var(--hero-sans);
}

.difference-section__inner {
  display: grid;
  width: min(100% - 10vw, 40rem);
  margin-inline: auto;
  padding-block: clamp(3.75rem, 9vw, 7rem) clamp(4.5rem, 10vw, 7.5rem);
}

.difference-section__header h2 {
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: clamp(2.25rem, 10.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.difference-section__header p {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: rgb(45 13 2 / 82%);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.difference-list {
  display: grid;
  margin: 3rem 0 0;
  padding: 0;
  gap: 2.25rem;
  list-style: none;
}

/* Icone originali: visibili solo su mobile */
.difference-item__icon {
  display: none;
}

.difference-item p {
  max-width: 30rem;
  margin: 0;
  color: rgb(45 13 2 / 80%);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

/* L'inizio di ogni frase diventa il suo titolo, senza cambiare parole */
.difference-item__lead {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Conclusione argomentativa: dopo i quattro punti, prima della CTA */
.difference-section__closing {
  display: grid;
  margin-top: 3rem;
  gap: 1.625rem;
}

.difference-section__closing p {
  max-width: 38rem;
  margin: 0;
  color: rgb(45 13 2 / 80%);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.difference-section__closing .difference-section__statement {
  max-width: 34rem;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  /* Griglia editoriale: titolo 1–6, intro 7–11, punti 1–5 e 7–11 */
  .difference-section__inner {
    display: grid;
    width: min(100% - 128px, 1240px);
    column-gap: 24px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .difference-section__header {
    display: grid;
    grid-column: 1 / -1;
    align-items: end;
    grid-template-columns: subgrid;
  }

  .difference-section__header h2 {
    grid-column: 1 / span 6;
    font-size: clamp(3rem, 4.6vw, 4.25rem);
  }

  .difference-section__header p {
    grid-column: 7 / span 5;
    margin: 0 0 0.55rem;
    font-size: 1.125rem;
  }

  .difference-list {
    grid-column: 1 / -1;
    margin: clamp(4rem, 6vw, 5.5rem) 0 0;
    column-gap: 24px;
    row-gap: 3.5rem;
    grid-template-columns: subgrid;
  }

  .difference-item:nth-child(odd) {
    grid-column: 1 / span 5;
  }

  .difference-item:nth-child(even) {
    grid-column: 7 / span 5;
  }

  .difference-item p {
    font-size: 1.125rem;
  }

  .difference-item__lead {
    margin-bottom: 0.55rem;
    font-size: 1.625rem;
  }

  .difference-section__closing {
    grid-column: 1 / span 7;
    margin-top: 5rem;
    gap: 1.5rem;
  }

  .difference-section__closing p {
    font-size: 1.125rem;
  }

  .difference-section__closing .difference-section__statement {
    max-width: none;
    margin-top: 0.75rem;
    font-size: 2rem;
    line-height: 1.22;
  }
}


/* ------------------------------------------------------------------
   GALLERY + RECENSIONI — un album su fondo marrone.
------------------------------------------------------------------ */

.weddings-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);
  --weddings-gutter: 5vw;

  background: var(--vr-brown-deep);
  color: var(--hero-ivory);
  font-family: var(--hero-sans);
}

.weddings-section__inner {
  padding-block: clamp(3.75rem, 9vw, 7rem) clamp(4.5rem, 10vw, 7.5rem);
}

.weddings-section__header,
.wedding-carousel__hint,
.wedding-carousel__status,
.weddings-reviews {
  margin-inline: var(--weddings-gutter);
}

.weddings-section__header h2 {
  margin: 0;
  color: var(--hero-ivory);
  font-family: var(--vr-font-display);
  font-size: clamp(2rem, 9.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.wedding-carousel {
  position: relative;
  margin-top: 1.25rem;
}

.wedding-carousel__hint {
  margin-block: 0 1.5rem;
  color: rgb(246 239 226 / 60%);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Swipe nativo: la foto successiva si intravede a destra */
.wedding-carousel__viewport {
  display: flex;
  overflow-x: auto;
  gap: 0.625rem;
  padding-inline: var(--weddings-gutter);
  scroll-padding-inline: var(--weddings-gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.wedding-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.wedding-carousel__viewport:focus-visible {
  outline: none;
  box-shadow: none;
}

.wedding-carousel__viewport:focus-visible .wedding-carousel__slide:first-child {
  box-shadow: var(--vr-focus);
}

.wedding-carousel__slide {
  flex: 0 0 84vw;
  margin: 0;
  scroll-snap-align: start;
}

.wedding-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  object-fit: cover;
}

.wedding-carousel__slide.is-sunset img { object-position: 38% 62%; }
.wedding-carousel__slide.is-portrait img { object-position: 46% 50%; }
.wedding-carousel__slide.is-cake img { object-position: 56% 50%; }
.wedding-carousel__slide.is-tower img { object-position: 50% 60%; }
.wedding-carousel__slide.is-garden img { object-position: 62% 50%; }

.wedding-carousel__status {
  margin-top: 1rem;
  color: rgb(246 239 226 / 60%);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Mobile: niente frecce sopra le foto */
.wedding-carousel__button {
  display: none;
}

.weddings-reviews {
  display: grid;
  margin-top: clamp(4.5rem, 12vw, 7.5rem);
}

.weddings-reviews__title {
  margin: 0;
  color: var(--hero-ivory);
  font-family: var(--vr-font-display);
  font-size: clamp(1.9rem, 8.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.weddings-reviews__grid {
  display: grid;
  margin-top: 3rem;
  gap: 1rem;
}

/* Card avorio: stessa altezza, firma sempre in fondo */
.review {
  display: flex;
  padding: 2rem 1.5rem 1.75rem;
  border: 1px solid rgb(224 190 100 / 30%);
  border-radius: 7px;
  background: var(--hero-ivory);
  color: var(--vr-brown);
}

.review blockquote {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

.review__headline {
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

.review__text {
  margin: 1rem 0 0;
  color: rgb(45 13 2 / 80%);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.review footer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.5rem;
  gap: 0.75rem;
}

.review cite {
  color: var(--vr-brown);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}

.review footer span {
  color: rgb(45 13 2 / 50%);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.weddings-reviews__cta {
  margin-top: 3.5rem;
}

@media (min-width: 761px) {
  .weddings-reviews__cta {
    justify-self: start;
  }
}

@media (min-width: 1024px) {
  .weddings-section {
    --weddings-gutter: max(6vw, (100vw - 1240px) / 2);
  }

  .weddings-section__header h2 {
    max-width: 20ch;
    font-size: clamp(3rem, 4.6vw, 4.25rem);
    line-height: 1.08;
  }

  .wedding-carousel {
    margin-top: 1.5rem;
  }

  .wedding-carousel__hint {
    margin-bottom: 2rem;
  }

  /* L'album resta nel contenitore: i margini laterali ospitano le frecce */
  .wedding-carousel__viewport {
    gap: 1.5rem;
    margin-inline: var(--weddings-gutter);
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .wedding-carousel__slide {
    flex-basis: 76%;
  }

  .wedding-carousel__slide img {
    aspect-ratio: 16 / 10;
  }

  .wedding-carousel__slide.is-sunset img { object-position: 40% 58%; }
  .wedding-carousel__slide.is-tower img { object-position: 50% 66%; }

  .wedding-carousel__button {
    position: absolute;
    top: calc(50% + 1rem);
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(246 239 226 / 72%);
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    place-items: center;
    transform: translateY(-50%);
    transition: color 240ms ease, opacity 240ms ease;
  }

  .wedding-carousel__button:hover {
    color: var(--hero-ivory);
  }

  .wedding-carousel__button:disabled {
    opacity: 0.25;
    cursor: default;
  }

  .wedding-carousel__button--prev {
    left: calc(var(--weddings-gutter) / 2 - 1.375rem);
  }

  .wedding-carousel__button--next {
    right: calc(var(--weddings-gutter) / 2 - 1.375rem);
  }

  .weddings-reviews__title {
    max-width: 22ch;
    font-size: clamp(2.6rem, 3.8vw, 3.5rem);
    line-height: 1.1;
  }

  /* Tre card in una riga, stessa altezza, gutter della griglia */
  .weddings-reviews__grid {
    align-items: stretch;
    margin-top: clamp(3.5rem, 5vw, 4.5rem);
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .review {
    padding: 2.5rem 2.25rem 2.25rem;
  }

  .review__headline {
    font-size: 1.5rem;
  }

  .review__text {
    font-size: 1rem;
  }

  .weddings-reviews__cta {
    margin-top: clamp(3.5rem, 5vw, 4.5rem);
  }
}

/* Entrate sobrie, una sola volta */
.difference-section.is-reveal-ready [data-soft-reveal],
.weddings-section.is-reveal-ready [data-soft-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, var(--motion-shift)), 0);
}

.difference-section.is-reveal-ready .is-revealed[data-soft-reveal],
.weddings-section.is-reveal-ready .is-revealed[data-soft-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms),
    transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------------
   QUALIFICAZIONE — due territori tipografici, nessun box.
------------------------------------------------------------------ */

.fit-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);

  background: var(--vr-ivory);
  color: var(--vr-brown);
  font-family: var(--hero-sans);
}

.fit-section__inner {
  display: grid;
  width: min(100% - 10vw, 40rem);
  margin-inline: auto;
  padding-block: clamp(3.75rem, 9vw, 7rem) clamp(4.5rem, 10vw, 7.5rem);
}

.fit-section__header h2 {
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: clamp(2.1rem, 9.8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.fit-section__grid {
  display: grid;
  margin-top: 2.75rem;
  gap: 3.75rem;
}

.fit-panel h3 {
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.3;
}

.fit-panel__list {
  display: grid;
  margin: 1.25rem 0 0;
  padding: 0;
  gap: 1.1rem;
  list-style: none;
}

.fit-panel__list li {
  max-width: 30rem;
  color: rgb(45 13 2 / 82%);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* La parte "non per voi" resta un tono più bassa, senza sparire */
.fit-panel--selective h3,
.fit-panel--selective .fit-panel__list li {
  color: rgb(45 13 2 / 64%);
}

.fit-section__cta {
  margin-top: 3.5rem;
}

@media (min-width: 761px) {
  .fit-section__cta {
    justify-self: start;
  }
}

@media (min-width: 1024px) {
  /* Griglia editoriale: due territori di pari larghezza, colonne 1–5 e 7–11 */
  .fit-section__inner {
    display: grid;
    width: min(100% - 128px, 1240px);
    column-gap: 24px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .fit-section__header {
    grid-column: 1 / -1;
  }

  .fit-section__header h2 {
    font-size: clamp(3rem, 4.6vw, 4.25rem);
    line-height: 1.08;
  }

  .fit-section__grid {
    grid-column: 1 / -1;
    align-items: start;
    margin-top: clamp(3.5rem, 5.5vw, 5rem);
    column-gap: 24px;
    grid-template-columns: subgrid;
  }

  .fit-panel--selective {
    grid-column: 1 / span 5;
  }

  .fit-panel--aligned {
    grid-column: 7 / span 5;
  }

  .fit-panel h3 {
    font-size: 1.3125rem;
  }

  .fit-panel__list {
    margin-top: 1.5rem;
    gap: 1.25rem;
  }

  .fit-panel__list li {
    font-size: 1.125rem;
  }

  /* CTA centrata sotto l'intero sistema (colonne 1–11) */
  .fit-section__cta {
    grid-column: 1 / span 11;
    justify-self: center;
    margin-top: clamp(4rem, 6vw, 5.5rem);
  }
}


.fit-section.is-reveal-ready [data-fit-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, var(--motion-shift)), 0);
}

.fit-section.is-reveal-ready .is-revealed[data-fit-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms),
    transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------------
   FAQ — titolo a sinistra, accordion leggero a destra.
------------------------------------------------------------------ */

.faq-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);

  background: var(--vr-brown-deep);
  color: var(--hero-ivory);
  font-family: var(--hero-sans);
}

.faq-section__inner {
  display: grid;
  width: min(100% - 10vw, 40rem);
  margin-inline: auto;
  padding-block: clamp(3.75rem, 9vw, 7rem) clamp(4.5rem, 10vw, 7.5rem);
}

.faq-section__intro h2 {
  margin: 0;
  color: var(--hero-ivory);
  font-family: var(--vr-font-display);
  font-size: clamp(2.1rem, 9.8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.faq-section__main {
  display: grid;
  margin-top: 2.5rem;
}

.faq-item {
  border-bottom: 1px solid rgb(224 190 100 / 18%);
}

.faq-item:first-child {
  border-top: 1px solid rgb(224 190 100 / 18%);
}

.faq-item__title {
  margin: 0;
}

.faq-item__trigger {
  display: flex;
  width: 100%;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border: 0;
  background: none;
  color: var(--hero-ivory);
  cursor: pointer;
  font-family: var(--hero-sans);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.faq-item__trigger:focus-visible {
  outline: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: rgb(224 190 100 / 70%);
  text-underline-offset: 0.3em;
}

/* Un semplice + che diventa − */
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  color: rgb(246 239 226 / 72%);
}

.faq-item__icon::before,
.faq-item__icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  content: "";
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item__icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-item.is-open .faq-item__icon::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq-item__answer-inner p {
  max-width: 36rem;
  margin: 0;
  padding-bottom: 1.4rem;
  color: rgb(246 239 226 / 78%);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

/* Apertura morbida: l'altezza cresce, niente salto */
.faq-accordion.is-enhanced .faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 320ms;
}

.faq-accordion.is-enhanced .faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.faq-accordion.is-enhanced .faq-item__answer-inner {
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .faq-section__inner {
    width: min(100% - 12vw, 1240px);
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
    grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  }

  .faq-section__sticky {
    position: sticky;
    top: 6rem;
  }

  .faq-section__intro h2 {
    font-size: clamp(2.75rem, 4vw, 3.75rem);
    line-height: 1.08;
  }

  .faq-section__main {
    margin-top: 0.5rem;
  }

  .faq-item__trigger {
    min-height: 4.5rem;
    padding: 1.35rem 0;
    font-size: 1.25rem;
  }

  .faq-item__answer-inner p {
    padding-bottom: 1.75rem;
  }
}

/* ------------------------------------------------------------------
   FORM — due ambienti: racconto su marrone, modulo sull'avorio.
   Solo presentazione: markup del form, attributi e JS invariati.
------------------------------------------------------------------ */

.request-section {
  --hero-ivory: #F6EFE2;
  --hero-sans: var(--vr-font-body);
  --form-line: rgb(45 13 2 / 28%);
  --form-card-bg: #FCFAF6;
  --form-focus-border: var(--vr-gold);
  --form-focus-label: #A9812F; /* oro caldo leggibile sull'avorio */
  --form-focus-ring: 0 0 0 3px rgb(224 190 100 / 22%);
  --form-error: #8F3D34;

  background: var(--vr-ivory);
  color: var(--vr-brown);
  font-family: var(--hero-sans);
}

.request-section__inner {
  display: grid;
}

/* Ambiente marrone: logo, titolo, testo */
.request-section__header {
  padding: 3.5rem 1.25rem 3.75rem;
  background: var(--vr-brown-deep);
  color: var(--hero-ivory);
}

.request-section__logo {
  display: block;
  width: 5.5rem;
  height: auto;
}

.request-section__header h2 {
  margin: 2.75rem 0 0;
  color: var(--hero-ivory);
  font-family: var(--vr-font-display);
  font-size: clamp(2.25rem, 10.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.request-section__header p {
  max-width: 24rem;
  margin: 1.25rem 0 0;
  color: rgb(246 239 226 / 78%);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* Ambiente avorio: il modulo vive sulla superficie, una colonna */
/* Form V3: una card leggera che contiene il modulo aperto a filo */
.wedding-form {
  display: grid;
  margin: 2.5rem 20px 4rem;
  padding: 1.5rem;
  gap: 1.875rem;
  border: 1px solid rgb(166 128 60 / 22%);
  border-radius: 12px;
  background: var(--form-card-bg);
  box-shadow:
    0 1px 2px rgb(45 13 2 / 4%),
    0 24px 48px -32px rgb(45 13 2 / 22%);
  color: var(--vr-brown);
}

.wedding-form__field,
.wedding-form__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wedding-form__field label,
.wedding-form__group legend {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--vr-brown);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 200ms ease;
}

/* Sistema a filo: niente box, solo una linea sottile sotto il valore.
   La linea oro cresce da sinistra al focus (background-size). */
.wedding-form input[type="date"],
.wedding-form input[type="number"],
.wedding-form input[type="text"],
.wedding-form input[type="email"],
.wedding-form input[type="tel"],
.wedding-form select,
.wedding-form textarea,
.wedding-form__multi-select summary {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: 0 0 0.9rem;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--form-focus-border), var(--form-focus-border)) no-repeat left bottom / 0% 1px,
    linear-gradient(var(--form-line-color, var(--form-line)), var(--form-line-color, var(--form-line))) no-repeat left bottom / 100% 1px;
  box-shadow: none;
  color: var(--vr-brown);
  font: 400 1.0625rem / 1.4 var(--hero-sans);
  transition:
    background-size 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wedding-form ::placeholder {
  color: rgb(45 13 2 / 45%);
  opacity: 1;
}

.wedding-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

.wedding-form input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  font-family: var(--hero-sans);
}

/* Indicatore data nativo, ridotto e attenuato */
.wedding-form input[type="date"]::-webkit-calendar-picker-indicator {
  width: 0.95rem;
  height: 0.95rem;
  margin-right: 0.1rem;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.wedding-form input[type="date"]:focus::-webkit-calendar-picker-indicator,
.wedding-form input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 0.85;
}

.wedding-form input:focus,
.wedding-form select:focus,
.wedding-form textarea:focus,
.wedding-form__multi-select summary:focus-visible,
.wedding-form__multi-select[open] summary {
  outline: none;
  background-size: 100% 1px, 100% 1px;
  box-shadow: none;
}

/* La label si accende d'oro quando il suo controllo è attivo */
.wedding-form__field:focus-within label,
.wedding-form__group:has(summary:focus-visible) legend,
.wedding-form__group:has(.wedding-form__multi-select[open]) legend {
  color: var(--form-focus-label);
}

/* Textarea: un'area aperta tra due linee, senza lati */
.wedding-form textarea {
  min-height: 10rem;
  margin-top: 0.625rem;
  padding: 0.9rem 0;
  background:
    linear-gradient(var(--form-focus-border), var(--form-focus-border)) no-repeat left bottom / 0% 1px,
    linear-gradient(var(--form-focus-border), var(--form-focus-border)) no-repeat left top / 0% 1px,
    linear-gradient(var(--form-line-color, var(--form-line)), var(--form-line-color, var(--form-line))) no-repeat left bottom / 100% 1px,
    linear-gradient(var(--form-line-color, var(--form-line)), var(--form-line-color, var(--form-line))) no-repeat left top / 100% 1px;
  line-height: 1.6;
  resize: vertical;
}

.wedding-form textarea:focus {
  background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
}

.wedding-form__select-wrap,
.wedding-form__multi-select {
  position: relative;
}

.wedding-form select {
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

/* Chevron minimale, allineato al valore */
.wedding-form__select-wrap::after,
.wedding-form__select-arrow {
  position: absolute;
  top: calc((100% - 0.9rem) / 2); /* centro della riga del valore */
  right: 0.2rem;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.25px solid rgb(45 13 2 / 60%);
  border-bottom: 1.25px solid rgb(45 13 2 / 60%);
  content: "";
  pointer-events: none;
  transform: translateY(-50%) rotate(45deg);
  transition:
    transform 200ms ease,
    border-color 200ms ease;
}

.wedding-form__select-wrap:focus-within::after,
.wedding-form__multi-select[open] .wedding-form__select-arrow,
.wedding-form__multi-select summary:focus-visible .wedding-form__select-arrow {
  border-color: var(--form-focus-border);
}

.wedding-form__multi-select summary {
  display: flex;
  align-items: center;
  padding-right: 2rem;
  cursor: pointer;
  list-style: none;
}

.wedding-form__multi-select summary::-webkit-details-marker {
  display: none;
}

.wedding-form__multi-select[open] .wedding-form__select-arrow {
  transform: translateY(-15%) rotate(225deg);
}

/* Elenco delle scelte: pannello leggero che si apre sopra il contenuto */
.wedding-form__multi-options {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  display: grid;
  max-height: 20rem;
  overflow: auto;
  border: 0;
  border-top: 1px solid var(--form-focus-border);
  border-bottom: 1px solid var(--form-line);
  border-radius: 0;
  background: var(--form-card-bg);
}

.wedding-form__multi-option {
  display: grid;
  min-height: 3.25rem;
  align-items: center;
  gap: 0.8rem;
  grid-template-columns: 1.125rem 1fr;
  padding: 0.7rem 0.25rem;
  color: var(--vr-brown);
  cursor: pointer;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.wedding-form__multi-option + .wedding-form__multi-option {
  border-top: 1px solid rgb(45 13 2 / 8%);
}

.wedding-form__multi-option:hover,
.wedding-form__multi-option:has(input:focus-visible),
.wedding-form__multi-option:has(input:checked) {
  background: rgb(224 190 100 / 10%);
}

.wedding-form__multi-option input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--vr-brown);
  cursor: pointer;
}

.wedding-form [aria-invalid="true"],
.wedding-form__group[aria-invalid="true"] .wedding-form__multi-select summary {
  --form-line-color: rgb(143 61 52 / 75%);
}

.wedding-form__error {
  margin: 0.45rem 0 0;
  color: var(--form-error);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.wedding-form__error:empty {
  display: none;
}

.wedding-form__submit-area {
  display: grid;
  margin-top: 0.5rem;
}

.wedding-form__submit {
  display: flex;
  width: 100%;
  min-height: 3.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid rgb(224 190 100 / 40%);
  border-radius: 6px;
  background: var(--vr-brown-deep);
  color: var(--hero-ivory);
  cursor: pointer;
  font: 700 0.8125rem / 1.35 var(--vr-font-body);
  letter-spacing: 0.095em;
  transition: border-color 240ms ease;
}

/* Freccia solo visiva: il testo accessibile resta "INVIA LA RICHIESTA" */
.wedding-form__submit::after {
  content: "→";
  content: "→" / "";
  font-size: 1rem;
  line-height: 1;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wedding-form__submit:hover {
  border-color: rgb(224 190 100 / 68%);
}

.wedding-form__submit:focus-visible {
  outline: none;
  border-color: var(--form-focus-border);
  box-shadow: var(--form-focus-ring);
}

.wedding-form__submit:hover::after,
.wedding-form__submit:focus-visible::after {
  transform: translateX(4px);
}

.wedding-form__status {
  margin: 0.85rem 0 0;
  color: var(--form-error);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.wedding-form__status:empty {
  display: none;
}

/* Stati dell'invio (lead-submit.js): l'errore resta il colore di default */
.wedding-form__status[data-state="pending"],
.wedding-form__status[data-state="ok"] {
  color: inherit;
}

.wedding-form__submit:disabled {
  cursor: progress;
  opacity: 0.6;
}

@media (min-width: 1024px) {
  .request-section__inner {
    align-items: stretch;
    grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  }

  .request-section__header {
    padding: clamp(5rem, 8vw, 7.5rem) clamp(2.5rem, 5vw, 5.5rem);
  }

  .request-section__logo {
    width: 6.5rem;
  }

  .request-section__header h2 {
    margin-top: clamp(4rem, 7vw, 6rem);
    font-size: clamp(2.75rem, 4vw, 3.75rem);
    line-height: 1.08;
  }

  .request-section__header p {
    font-size: 1.125rem;
  }

  /* Due colonne dove ha senso; domande lunghe a tutta larghezza */
  .wedding-form {
    align-self: center;
    justify-self: center;
    width: calc(100% - 2 * clamp(1.5rem, 3vw, 3rem));
    max-width: 860px;
    margin: clamp(4rem, 7vw, 6rem) 0;
    padding: 3.25rem;
    border-radius: 14px;
    column-gap: 2.5rem;
    row-gap: 1.875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wedding-form__field--wide,
  .wedding-form__group,
  .wedding-form__field--message,
  .wedding-form__submit-area {
    grid-column: 1 / -1;
  }

  .wedding-form__field label,
  .wedding-form__group legend {
    font-size: 0.875rem;
  }

  .wedding-form__submit {
    min-height: 3.875rem;
  }
}

/* ------------------------------------------------------------------
   CALENDARIO VILLA RIVÌ — interfaccia sopra il vero input[type=date].
   Senza JavaScript resta attivo il selettore nativo.
------------------------------------------------------------------ */

.has-calendar {
  position: relative;
}

.has-calendar input[type="date"] {
  padding-right: 2.5rem;
  cursor: pointer;
}

.has-calendar input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

.date-picker__trigger {
  position: absolute;
  top: var(--trigger-top, 1.4rem);
  right: -0.5rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgb(45 13 2 / 55%);
  cursor: pointer;
  place-items: center;
  transition: color 200ms ease;
}

.date-picker__trigger:hover,
.date-picker__trigger[aria-expanded="true"] {
  color: #A9812F;
}

.date-picker__trigger:focus-visible {
  outline: 2px solid var(--vr-gold);
  outline-offset: -4px;
  box-shadow: none;
}

.date-picker__trigger svg {
  width: 1.05rem;
  height: 1.05rem;
}

.date-picker {
  position: absolute;
  z-index: 1000;
  width: 22.5rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border: 1px solid rgb(166 128 60 / 24%);
  border-radius: 12px;
  background: #FCFAF6;
  box-shadow:
    0 2px 6px rgb(45 13 2 / 6%),
    0 22px 48px -20px rgb(45 13 2 / 30%);
  color: var(--vr-brown);
  font-family: var(--vr-font-body);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 180ms var(--motion-ease),
    transform 180ms var(--motion-ease);
}

.date-picker[hidden],
.date-picker__backdrop[hidden] {
  display: none;
}

.date-picker.is-open {
  opacity: 1;
  transform: none;
}

.date-picker__logo {
  display: block;
  width: 3.25rem;
  height: auto;
  margin: 0 auto 0.75rem;
}

.date-picker__nav {
  display: grid;
  align-items: center;
  grid-template-columns: 2.75rem 1fr 2.75rem;
}

.date-picker__title {
  margin: 0;
  color: var(--vr-brown);
  font-family: var(--vr-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.date-picker__arrow {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--vr-brown);
  cursor: pointer;
  transition: background-color 180ms ease;
}

.date-picker__arrow::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-bottom: 1.25px solid currentColor;
  border-left: 1.25px solid currentColor;
  content: "";
  transform: translate(-30%, -50%) rotate(45deg);
}

.date-picker__arrow--next::before {
  transform: translate(-70%, -50%) rotate(-135deg);
}

.date-picker__arrow:hover:not(:disabled) {
  background: rgb(224 190 100 / 16%);
}

.date-picker__arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.date-picker__arrow:focus-visible,
.date-picker__day:focus-visible,
.date-picker__today:focus-visible {
  outline: 2px solid var(--vr-gold);
  outline-offset: 1px;
  box-shadow: none;
}

.date-picker__grid {
  margin-top: 0.75rem;
}

.date-picker__row {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.date-picker__weekday {
  padding: 0.35rem 0;
  color: rgb(45 13 2 / 50%);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}

.date-picker__day {
  width: 100%;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--vr-brown);
  cursor: pointer;
  font: 400 0.9375rem / 1 var(--vr-font-body);
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease, color 150ms ease;
}

.date-picker__day:hover:not(.is-disabled):not(.is-selected) {
  background: rgb(224 190 100 / 18%);
}

.date-picker__day.is-outside {
  color: rgb(45 13 2 / 38%);
}

.date-picker__day.is-today {
  box-shadow: inset 0 0 0 1px var(--vr-gold);
}

.date-picker__day.is-disabled {
  color: rgb(45 13 2 / 22%);
  cursor: default;
}

.date-picker__day.is-selected {
  background: var(--vr-brown-deep);
  box-shadow: none;
  color: #F6EFE2;
}

.date-picker__footer {
  display: flex;
  justify-content: center;
  margin-top: 0.35rem;
}

.date-picker__today {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgb(45 13 2 / 70%);
  cursor: pointer;
  font: 500 0.8125rem / 1 var(--vr-font-body);
  letter-spacing: 0.04em;
  transition: color 180ms ease;
}

.date-picker__today:hover {
  color: var(--vr-brown);
}

.date-picker__backdrop {
  position: fixed;
  z-index: 999;
  inset: 0;
  background: rgb(27 9 4 / 38%);
}

/* Mobile: foglio in basso, comodo per il pollice */
@media (max-width: 760px) {
  .date-picker {
    position: fixed;
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    padding: 1.5rem 1.25rem 1rem;
    transform: translate3d(0, 16px, 0);
  }

  .date-picker__day {
    min-height: 2.875rem;
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------
   MOBILE — un solo asse: 20px identici a sinistra e a destra.
------------------------------------------------------------------ */

/* A capo manuale delle CTA: attivo solo su mobile */
.cta-br-m {
  display: none;
}

@media (max-width: 760px) {
  .cta-br-m {
    display: inline;
  }

  /* Se una CTA va a capo, le righe restano bilanciate: niente parole orfane */
  .hero__cta > span:first-child {
    text-wrap: balance;
  }

  .hero {
    --hero-gutter: 20px;
  }

  .weddings-section {
    --weddings-gutter: 20px;
  }

  .gulf-section__inner {
    padding-inline: 20px;
  }

  .film__inner,
  .problem-section__inner,
  .method-section__inner,
  .location-decision-section__inner,
  .difference-section__inner,
  .fit-section__inner,
  .faq-section__inner {
    width: calc(100% - 40px);
    margin-inline: auto;
  }

  .request-section__header {
    padding-inline: 20px;
  }

  /* ---- Ritmo cromatico mobile: il cambio di fondo fa da separatore ---- */

  /* Video: sezione cinematografica su marrone profondo */
  .film {
    background: var(--vr-brown-deep);
    color: var(--hero-ivory);
  }

  .film__command {
    color: var(--vr-gold-soft);
    text-decoration-color: rgb(232 210 149 / 40%);
  }

  .film__command:hover {
    text-decoration-color: rgb(232 210 149 / 80%);
  }

  .film__microcopy {
    color: rgb(246 239 226 / 78%);
  }

  /* Il matrimonio perfetto: avorio, chiusura più corta prima del marrone */
  .problem-section__inner {
    padding-bottom: 3.5rem;
  }

  /* Metodo: apertura su marrone, la foto fa da ponte, le fasi tornano avorio */
  .method-section {
    overflow: hidden;
    background: var(--vr-brown-deep);
  }

  .method-section__inner {
    position: relative;
    isolation: isolate;
  }

  .method-section__chapter {
    color: var(--vr-gold-soft);
  }

  .method-section__header h2 {
    color: var(--hero-ivory);
  }

  .method-section__header > p:last-child {
    color: rgb(246 239 226 / 78%);
  }

  .method-phases {
    position: relative;
    margin-top: 2.5rem;
  }

  .method-section__cta {
    margin-top: 2.5rem;
  }

  .method-section__inner {
    padding-bottom: 3.5rem;
  }

  /* L'avorio parte da metà fotografia e scende fino in fondo alla sezione */
  .method-phases::before {
    position: absolute;
    z-index: -1;
    top: calc(-2.5rem - 0.625 * (100vw - 40px));
    right: -20px;
    bottom: -100vh;
    left: -20px;
    content: "";
    background: var(--vr-ivory);
  }

  /* Scelta della location: la domanda diventa una fascia marrone a tutta larghezza */
  .location-decision-section__inner {
    padding-bottom: 0;
  }

  .location-decision-section__final {
    margin: 3rem -20px 0;
    padding: 3rem 20px 3.25rem;
    background: var(--vr-brown-deep);
  }

  .location-decision-section__prompt,
  .location-decision-section__answer {
    color: rgb(246 239 226 / 76%);
  }

  .location-decision-section__question {
    color: var(--hero-ivory);
  }

  /* Cosa ci rende diversi: avorio, subito dopo la fascia; chiude sullo statement */
  .difference-section__inner {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }
}

/* ------------------------------------------------------------------
   MOBILE — Metodo e "Cosa ci rende diversi" nella versione originale.
   Font e valori da styles.orig.css / styles.pre-method.css / styles.pre-b789.css
   (Cormorant Garamond per i titoli, Manrope per corpo, numeri e label).
------------------------------------------------------------------ */

@media (max-width: 760px) {
  /* Apertura del Metodo: stessi colori, font originali */
  .method-section__chapter {
    font-family: var(--vr-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
  }

  .method-section__header h2 {
    font-family: var(--vr-font-display);
    font-size: clamp(2.15rem, 10vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 0.98;
  }

  .method-section__header > p:last-child {
    font-family: var(--vr-font-body);
    font-size: 0.98rem;
    line-height: 1.65;
  }

  /* Timeline: numero, rombo e linea a sinistra, testo a destra */
  .method-phase {
    position: relative;
    align-items: start;
    column-gap: 1rem;
    grid-template-columns: 2.9rem minmax(0, 1fr);
  }

  .method-phase:nth-child(n + 2) {
    margin-top: 0;
  }

  .method-phase:not(:last-child) {
    padding-bottom: 1.875rem;
  }

  .method-phase:not(:last-child)::before {
    position: absolute;
    top: 2.75rem;
    bottom: 0.35rem;
    left: 1.45rem;
    width: 1px;
    content: "";
    background: rgb(224 190 100 / 45%);
    transform: translateX(-50%);
  }

  .method-phase__index {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-items: center;
    color: var(--vr-gold);
    font-family: var(--vr-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
  }

  .method-phase__index::after {
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.72rem;
    border: 1px solid var(--vr-gold);
    content: "";
    background: rgb(224 190 100 / 20%);
    transform: rotate(45deg);
  }

  .method-phase h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0.5625rem;
    padding-top: 1.12rem;
    font-family: var(--vr-font-display);
    font-size: clamp(1.28rem, 5vw, 1.7rem);
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.08;
  }

  .method-phase p,
  .method-phase:last-child p {
    grid-column: 2;
    max-width: none;
    margin: 0;
    color: rgb(59 48 42 / 78%);
    font-family: var(--vr-font-body);
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.62;
  }

  .method-phase p + p {
    margin-top: 0.4rem;
  }

  /* Cosa ci rende diversi: intro fuori, un solo pannello con quattro righe */
  .difference-section__header h2 {
    font-family: var(--vr-font-display);
    font-size: clamp(2.15rem, 10vw, 2.95rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
  }

  .difference-section__header p {
    color: rgb(59 48 42 / 82%);
    font-family: var(--vr-font-body);
    font-size: 0.96rem;
    line-height: 1.64;
  }

  .difference-list {
    margin-top: 2.25rem;
    padding: 0.25rem 1.125rem;
    gap: 0;
    border: 1px solid rgb(166 128 60 / 18%);
    border-radius: 18px;
    background: #FCFAF6;
  }

  .difference-item {
    display: grid;
    align-items: start;
    column-gap: 0.95rem;
    grid-template-columns: 2.65rem minmax(0, 1fr);
    padding: 1.125rem 0;
  }

  .difference-item:not(:last-child) {
    border-bottom: 1px solid rgb(45 13 2 / 9%);
  }

  .difference-item__icon {
    display: inline-grid;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgb(224 190 100 / 58%);
    border-radius: 50%;
    background: rgb(224 190 100 / 7%);
    color: var(--vr-gold);
    place-items: center;
  }

  .difference-item__icon svg {
    display: block;
    width: 1.22rem;
    height: 1.22rem;
  }

  .difference-item:nth-child(2) .difference-item__icon svg {
    width: 1.34rem;
    height: 1.34rem;
  }

  .difference-item p {
    max-width: none;
    color: rgb(59 48 42 / 84%);
    font-family: var(--vr-font-body);
    font-size: 0.96rem;
    line-height: 1.64;
  }

  .difference-item__lead {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
  }

  /* Blocco argomentativo: fuori e sotto il pannello */
  .difference-section__closing {
    margin-top: 2.5rem;
    gap: 1.25rem;
  }

  .difference-section__closing p {
    color: rgb(59 48 42 / 84%);
    font-family: var(--vr-font-body);
    font-size: 0.96rem;
    line-height: 1.64;
  }

  .difference-section__closing .difference-section__statement {
    color: var(--vr-brown);
    font-family: var(--vr-font-display);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
}

/* ------------------------------------------------------------------
   MOTION — spostamento per tipo: titoli 16px, foto 14px, resto 12px.
------------------------------------------------------------------ */

:is([data-problem-reveal], [data-method-reveal], [data-gulf-reveal], [data-location-reveal], [data-soft-reveal], [data-fit-reveal]):is(h2, h3, header) {
  --reveal-shift: var(--motion-shift-title);
}

:is([data-problem-reveal], [data-method-reveal], [data-soft-reveal]):is(img, .method-section__media, .wedding-carousel) {
  --reveal-shift: var(--motion-shift-photo);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .hero__bg-video {
    display: none;
  }

  html.reveal-enhanced [data-section-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}