/* ==========================================================================
   POSA — Inner pages (Il Metodo Rilievo, Chi sono, Siti web, Consulenza)
   Shares tokens/base/components with Home; page layouts live here.
   Text measure: body copy ≤ ~62ch. Animate transform/opacity only.
   ========================================================================== */

/* ---------- Shared rhythm (same as Home) ---------- */
.section { padding-top: var(--section-y); padding-bottom: calc(var(--section-y) * .35); }
.section:last-child { padding-bottom: var(--section-y); }
.section-head { display: grid; gap: var(--s-5); max-width: 52rem; margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.script { padding-inline: .08em .14em; margin-inline: -.08em -.14em; }
main p { text-wrap: pretty; }

/* ---------- Pen marks + rules (same as Home) ---------- */
.pen-wrap { position: relative; display: inline-block; white-space: nowrap; }
.pen { position: absolute; pointer-events: none; overflow: visible; fill: none; }
.pen path { stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
.pen--under { left: 0; bottom: -.12em; width: 100%; height: .34em; color: var(--pink-deep); }
.pen--under path { stroke-width: 2.4; }
.rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--chianti-12); }

/* ==========================================================================
   INNER HERO (shared) — head + body left, arch composition right.
   The visual is a 600×720 box shared by the SVG plan and the two frames.
   ========================================================================== */
.ihero { position: relative; overflow: hidden; }
.ihero__stage {
  display: grid;
  grid-template-areas: "head" "visual" "body";
  gap: clamp(1.1rem, .8rem + 1.5vw, 2rem);
  padding-top: clamp(1.25rem, .8rem + 2.5vw, 3rem);
  padding-bottom: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.ihero__head { grid-area: head; display: grid; justify-items: start; gap: .6rem; }
.ihero__body { grid-area: body; display: grid; justify-items: start; gap: var(--s-5); }
.ihero__visual { grid-area: visual; }
.ihero__eyebrow { color: var(--chianti-80); }
.ihero__role { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chianti-60); }
.ihero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.9rem, 1.5rem + 5.6vw, 7rem);
  line-height: 1; letter-spacing: -.03em; color: var(--chianti);
  margin-top: .25rem;
}
.ihero__title .script { font-size: 1.12em; }
.ihero__title--solo .script { font-size: 1.45em; }   /* one-word script title (Metodo) */
.ihero__title--long { font-size: clamp(2.7rem, 1.2rem + 4.2vw, 5.4rem); }   /* longer titles stay on 2 lines */
.ihero__line { display: block; }
.ihero__lead { max-width: 30em; font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); }
.ihero__meta { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60); }
.ihero__actions { display: grid; justify-items: start; gap: .7rem; }
.ihero__note { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60); }

.ihero__visual { position: relative; width: 100%; aspect-ratio: 600 / 720; max-width: 34rem; justify-self: center; }
.ihero__plan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--chianti); pointer-events: none; }
.plan__lines { fill: none; stroke: currentColor; stroke-linecap: round; }
.plan__lines path { stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; }
.plan__lines .faint { opacity: .2; }
.plan__lines .axis { opacity: .3; }
.plan__labels { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; fill: var(--chianti); opacity: .6; }

.ihero__frame { position: absolute; margin: 0; }
.ihero__m, .ihero__clip { width: 100%; height: 100%; }
.ihero__clip { position: relative; overflow: hidden; background: var(--pink-soft); box-shadow: 0 30px 60px -36px rgba(85, 18, 18, .45); }
.ihero__clip img { width: 100%; height: 100%; object-fit: cover; }
.ihero__frame--main { left: 18%; top: 8.33%; width: 58%; height: 80.5%; }            /* 108,60 → 456,640 */
.ihero__frame--main .ihero__clip { border-radius: 999px 999px 4px 4px; }
.ihero__frame--win { left: 0; top: 54%; width: 33%; height: 32%; z-index: 2; }
.ihero__frame--win .ihero__clip { border-radius: 50% 50% 6px 6px / 20% 20% 6px 6px; border: 6px solid var(--white); }

@media (max-width: 767px) {
  .ihero__stage { padding-top: 1.1rem; gap: 1rem; }
  /* title, then the arch photo — both on the first screen */
  .ihero__visual { aspect-ratio: auto; height: clamp(17rem, calc(100svh - 21rem), 27rem); max-width: none; }
  .ihero__plan { display: none; }
  .ihero__frame--main { left: 20%; top: 0; width: 60%; height: 100%; }
  .ihero__frame--win { left: 0; top: auto; bottom: 5%; width: 34%; height: 42%; }
  .ihero__actions .btn { width: 100%; text-align: center; justify-content: center; }
  .ihero__actions { justify-items: stretch; width: 100%; }
}
@media (min-width: 1080px) {
  .ihero__stage {
    grid-template-areas: "head visual" "body visual";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;          /* head ends at the middle, body starts there → centred */
    column-gap: clamp(2rem, 5vw, 6rem);
    min-height: calc(100svh - var(--header-h));
    align-content: center;
  }
  .ihero__head { align-self: end; }
  .ihero__body { align-self: start; padding-top: var(--s-4); }
  .ihero__visual {
    width: auto; max-width: 100%;
    height: min(calc(100svh - var(--header-h) - 4rem), 52rem);
    justify-self: end; align-self: center;
  }
}

/* Siti web: the hero visual is a large mockup instead of the arch */
.ihero__visual--mock { aspect-ratio: auto; max-width: none; padding: 3.2rem 1.5rem 2.6rem 0; }
.ihero__visual--mock .ihero__plan { inset: 0 -1rem 0 -1rem; width: calc(100% + 2rem); }
.ihero__caption {
  position: absolute; left: 0; bottom: 0;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60);
}
@media (min-width: 1080px) {
  .ihero--mock .ihero__stage { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .ihero--mock .ihero__title { font-size: clamp(3.2rem, 1rem + 4.3vw, 5.6rem); }
  .ihero__visual--mock { height: auto; align-self: center; width: 100%; }
}
@media (max-width: 767px) {
  .ihero__visual--mock { height: auto; padding: 0 0 2rem; }
  .ihero__visual--mock .ihero__plan { display: none; }
}

/* Pre-hide only until motion.js is ready (3s safety in <head>) */
.js-motion:not(.motion-ready) .ihero__title,
.js-motion:not(.motion-ready) .ihero__frame,
.js-motion:not(.motion-ready) .ihero__plan { opacity: 0; }

/* ==========================================================================
   PROSSIMA TAVOLA (shared closing)
   ========================================================================== */
.next-tav__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.next-tav__cta { display: grid; justify-items: start; gap: var(--s-4); }
.next-tav__q { font-family: var(--font-serif); font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); color: var(--chianti); line-height: 1.1; }
.next-tav__link {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .4rem 1.5rem;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-top: 1px solid var(--chianti); border-bottom: 1px solid var(--chianti-12);
  color: var(--chianti);
}
.next-tav__label { grid-column: 1 / -1; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chianti-60); }
.next-tav__name { font-family: var(--font-serif); font-size: clamp(2.4rem, 1.4rem + 4.4vw, 6rem); line-height: 1; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.next-tav__tav { font-size: .75rem; letter-spacing: .08em; color: var(--pink-deep); }
.next-tav__arrow { font-size: clamp(2rem, 1.4rem + 2.4vw, 4rem); line-height: 1; transition: translate .7s var(--ease-soft); }
@media (hover: hover) {
  .next-tav__link:hover .next-tav__arrow { translate: .6rem 0; }
  .next-tav__link:hover .next-tav__name { font-style: italic; }
}
@media (max-width: 479px) { .next-tav__cta .btn { width: 100%; text-align: center; justify-content: center; } }

/* ==========================================================================
   METODO
   ========================================================================== */
.intro { padding-top: clamp(1rem, 2vw, 2rem); }
.intro__text {
  font-family: var(--font-serif); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem);
  line-height: 1.28; letter-spacing: -.01em; color: var(--chianti); max-width: 30em;
}

.phases__grid { display: grid; gap: var(--s-7); }
.phases__index, .phases__visual { display: none; }
.phases__list { display: grid; gap: clamp(4rem, 3rem + 4vw, 7rem); }
.phase-block { display: grid; gap: var(--s-4); max-width: 38rem; scroll-margin-top: calc(var(--header-h) + 2rem); }
.phase-block > p:not([class]) { color: var(--chianti-80); font-size: var(--fs-lead); line-height: 1.65; max-width: 62ch; }
.phase-block__img { margin: 0 0 var(--s-3); aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-card) var(--radius-card); overflow: hidden; width: min(100%, 26rem); }
.phase-block__img img { width: 100%; height: 100%; object-fit: cover; }
.phase-block__num {
  font-family: var(--font-serif); font-style: italic; font-variant-numeric: lining-nums;
  font-size: clamp(3.8rem, 3rem + 3vw, 5.5rem); line-height: 1; color: var(--pink-deep);
}
.phase-block__time { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--chianti-60); }
.phase-block__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); color: var(--chianti); line-height: 1.05; margin-bottom: var(--s-2); }
.phase-block__steps { display: grid; gap: .7rem; margin-top: var(--s-2); }
.phase-block__steps li, .keep li { position: relative; padding-left: 1.6rem; color: var(--chianti-80); line-height: 1.55; }
.phase-block__steps li::before, .keep li::before { content: ""; position: absolute; left: 0; top: .72em; width: .9rem; height: 1px; background: var(--chianti); }
.phase-block__close { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); color: var(--chianti); margin-top: var(--s-3); }
.keep {
  display: grid; gap: .6rem; margin-top: var(--s-3);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--chianti-12); border-left: 3px solid var(--pink);
  border-radius: 0 var(--radius-card) var(--radius-card) 0; background: var(--white);
}
.keep__label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-deep); }
.keep ul { display: grid; gap: .45rem; }

@media (min-width: 1080px) {
  .phases__grid { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
  .phase-block__img { display: none; }
  .phase-block { min-height: 70vh; align-content: center; }
  .phases__index { display: block; position: sticky; top: calc(var(--header-h) + 3rem); padding-left: 1.4rem; }
  .phases__index ol { display: grid; gap: 1.1rem; }
  .phases__index a { display: flex; gap: .8rem; align-items: baseline; font-family: var(--font-serif); font-size: 1.35rem; color: var(--chianti); opacity: .35; transition: opacity .5s var(--ease-soft); }
  .phases__index a .mono { font-size: .72rem; letter-spacing: .06em; }
  .phases__index a.is-active { opacity: 1; font-style: italic; }
  .phases__index a:hover, .phases__index a:focus-visible { opacity: 1; }
  .phases__line { position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 1px; background: var(--chianti-12); }
  .phases__line span { position: absolute; inset: 0; background: var(--chianti); transform-origin: 50% 0; transform: scaleY(0); }
  html:not(.js-motion) .phases__line span { transform: none; }

  .phases__visual { display: block; position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .pvis { position: relative; padding-bottom: 2.5rem; }
  .pvis__arch {
    position: relative; aspect-ratio: 3 / 4;
    width: min(100%, calc((100svh - var(--header-h) - 8rem) * .75));   /* fits column AND viewport */
    margin-left: auto; border-radius: 999px 999px 6px 6px; overflow: hidden; background: var(--pink-soft);
    isolation: isolate; outline: 1px solid var(--chianti-12); outline-offset: 6px;
    box-shadow: 0 30px 60px -36px rgba(85, 18, 18, .45);
  }
  .pvis__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  .pvis__img.is-on { opacity: 1; }
  .pvis__num {
    position: absolute; z-index: 3; left: -1.6rem; bottom: 1.2rem; overflow: hidden; padding: .1em .15em .05em 0;
    font-family: var(--font-serif); font-style: italic; font-variant-numeric: lining-nums;
    font-size: clamp(6rem, 8vw, 9rem); line-height: 1.1; color: var(--pink);
    text-shadow: 0 2px 30px rgba(85, 18, 18, .25);
  }
  .pvis__num span { display: block; }
  .pvis__label { position: absolute; right: 0; bottom: 0; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60); }
}
html:not(.js-motion) .pvis__img:not(.is-on) { display: none; }

/* Patti — cards with line icons + subtle hover lift */
.pacts__grid { display: grid; gap: var(--s-4); }
.pact {
  display: grid; gap: var(--s-3); align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--white); border: 1px solid var(--chianti-12); border-radius: var(--radius-card);
  transition: translate .6s var(--ease-soft), box-shadow .6s var(--ease-soft);
}
.pact p { color: var(--chianti-80); max-width: 62ch; }
.pact__icon { width: 3rem; height: 3rem; color: var(--chianti); fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s-2); }
.pact__icon .f { opacity: .35; }
@media (hover: hover) {
  .pact:hover { translate: 0 -6px; box-shadow: 0 26px 50px -30px rgba(85, 18, 18, .35); }
}
@media (min-width: 640px) { .pacts__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) {
  .pacts__grid { grid-template-columns: repeat(6, 1fr); }
  .pact { grid-column: span 2; }
  .pact:nth-child(4) { grid-column: 2 / span 2; }
}

.closing__text {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.9rem); line-height: 1.12; letter-spacing: -.015em;
  color: var(--chianti); max-width: 22em;
}

/* ==========================================================================
   CHI SONO
   ========================================================================== */
.facts__grid { display: grid; gap: var(--s-6); }
.facts__head { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); color: var(--chianti); display: flex; gap: .8rem; align-items: baseline; }
.facts__head .mono { font-size: .8rem; letter-spacing: .08em; color: var(--pink-deep); }
.facts__body { display: grid; gap: var(--s-6); }
.facts__photo { margin: 0; display: grid; gap: .6rem; }
.facts__frame { aspect-ratio: 16 / 9; border-radius: var(--radius-card); }
.facts__photo figcaption, .howto__img figcaption { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60); }
.facts__list { display: grid; }
.fact { position: relative; display: grid; gap: .35rem; padding-block: 1.25rem; }
.fact:last-child { border-bottom: 1px solid var(--chianti-12); }
.fact dt { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--chianti-60); }
.fact dd { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.3; color: var(--chianti); max-width: 34em; }
@media (min-width: 768px) { .fact { grid-template-columns: 14rem 1fr; gap: 2rem; align-items: baseline; } }
@media (min-width: 1080px) {
  .facts__grid { grid-template-columns: minmax(12rem, 1fr) 3fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .facts .facts__head { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.howto__head { margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
.howto .container { display: grid; }
.howto__block { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; max-width: 46rem; margin-bottom: clamp(3rem, 2.5rem + 3vw, 5.5rem); }
.howto__block p { font-size: var(--fs-lead); line-height: 1.7; color: var(--chianti-80); max-width: 62ch; }
.howto__n { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; line-height: 1.2; color: var(--pink-deep); border-top: 1px solid var(--chianti); padding-top: .4rem; text-align: left; }
.howto__quote {
  position: relative; max-width: 18em; margin: 0 0 clamp(3rem, 2.5rem + 3vw, 5.5rem);
  font-family: var(--font-serif); font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; color: var(--chianti);
}
.howto__qmark { position: absolute; left: -.05em; top: -.45em; font-size: 2.2em; color: var(--pink); line-height: 1; }
.howto__quote { padding-top: .5em; }
.howto__img { margin: 0 0 clamp(3rem, 2.5rem + 3vw, 5.5rem); display: grid; gap: .6rem; width: min(78%, 26rem); }
.howto__img--r { justify-self: end; }
.howto__frame { aspect-ratio: 4 / 5; border-radius: var(--radius-card); }
.howto__frame--arch { border-radius: 999px 999px var(--radius-card) var(--radius-card); }
@media (min-width: 1080px) {
  /* explicit rows: i · quote · ii · [photo | iii] · [iv | photo] */
  .howto .container { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
  .howto__head { grid-area: 1 / 1 / 2 / -1; }
  .howto .container > :nth-child(2) { grid-area: 2 / 2 / 3 / span 7; }   /* i */
  .howto__quote { grid-area: 3 / 1 / 4 / span 10; }
  .howto .container > :nth-child(4) { grid-area: 4 / 5 / 5 / span 7; }   /* ii */
  .howto__img--l { grid-area: 5 / 1 / 6 / span 4; width: 100%; }
  .howto .container > :nth-child(6) { grid-area: 5 / 6 / 6 / span 7; }   /* iii */
  .howto__img--r { grid-area: 6 / 9 / 7 / span 4; width: 100%; }
  .howto .container > :nth-child(8) { grid-area: 6 / 2 / 7 / span 6; }   /* iv */
  .howto__block { margin-bottom: clamp(3rem, 2.5rem + 3vw, 5.5rem); }
}

/* ==========================================================================
   SITI WEB — zig-zag rows, big N°, screenshot scrolls inside the frame
   ========================================================================== */
.sites__list { display: grid; gap: clamp(5rem, 3.5rem + 6vw, 10rem); }
.site-row { display: grid; gap: var(--s-6); align-items: center; scroll-margin-top: calc(var(--header-h) + 2rem); }
.site-row__meta { display: grid; gap: .5rem; justify-items: start; max-width: 30rem; }
.site-row__num {
  font-family: var(--font-serif); font-style: italic; font-variant-numeric: lining-nums;
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); line-height: .9; color: var(--pink-deep); margin-bottom: .4rem;
}
.site-row__kicker { font-size: .72rem; letter-spacing: .04em; color: var(--chianti-60); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.site-row__badge { padding: .15rem .6rem; border-radius: 999px; background: var(--pink-soft); color: var(--chianti); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.site-row__name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); line-height: 1.05; color: var(--chianti); margin-top: .2rem; }
.site-row__place { color: var(--chianti-80); font-size: var(--fs-small); }
.site-row__text { color: var(--chianti-80); max-width: 52ch; margin-top: .5rem; line-height: 1.6; }
.site-row__visit { margin-top: .8rem; }
@media (min-width: 900px) {
  .site-row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 6rem); }
  .site-row:nth-child(even) .site-row__media { order: 2; }
}

/* Mockups */
.mock { position: relative; padding: 0 9% 9% 0; }
.mock__browser { border-radius: .75rem; overflow: hidden; background: var(--white); border: 1px solid var(--chianti-12); box-shadow: 0 30px 60px -30px rgba(85, 18, 18, .35); transition: box-shadow .9s var(--ease-soft); }
.mock__bar { display: flex; align-items: center; gap: 5px; height: 1.75rem; padding-inline: .75rem; background: var(--pink-soft); border-bottom: 1px solid var(--chianti-12); }
.mock__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(85, 18, 18, .22); }
.mock__bar span { margin-left: .6rem; padding: .1rem .7rem; border-radius: var(--radius-pill); background: var(--white); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .04em; color: var(--chianti-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.mock__phone { position: absolute; right: 0; bottom: 0; width: 26%; padding: 4px; border-radius: 1.1rem; background: var(--chianti-lo); box-shadow: 0 24px 40px -20px rgba(59, 10, 10, .55); }
.mock__screen { aspect-ratio: 16 / 10; overflow: hidden; }
.mock__pscreen { aspect-ratio: 390 / 844; overflow: hidden; border-radius: .85rem; }
.mock__shot, .mock__pshot { display: block; width: 100%; height: auto; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); }
/* short (non full-page) screenshots: fill the frame, gentle zoom instead of scroll */
.mock--short .mock__shot, .mock--short .mock__pshot { height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) {
  .site-row:hover .mock__shot, .mock--hero:hover .mock__shot { transform: translateY(var(--shift)); transition-duration: 7s; }
  .site-row:hover .mock__pshot, .mock--hero:hover .mock__pshot { transform: translateY(var(--shift-m)); transition-duration: 7s; transition-delay: .3s; }
  .site-row:hover .mock--short .mock__shot { transform: scale(1.04); transition-duration: 2.5s; }
  .site-row:hover .mock__browser { box-shadow: 0 40px 70px -30px rgba(85, 18, 18, .4); }
}
/* touch: slow auto-scroll while in view (JS adds .is-inview) */
@keyframes shot-scroll { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(var(--s)); } }
@media (hover: none) {
  .mock--scroll.is-inview:not(.mock--short) .mock__shot  { --s: var(--shift);   animation: shot-scroll 14s ease-in-out infinite alternate; }
  .mock--scroll.is-inview:not(.mock--short) .mock__pshot { --s: var(--shift-m); animation: shot-scroll 14s 1s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  .mock__shot, .mock__pshot { animation: none !important; transition: none !important; transform: none !important; }
}

/* ==========================================================================
   CONSULENZA
   ========================================================================== */
.steps__wrap { position: relative; }
.steps__list { position: relative; display: grid; gap: var(--s-5); }
.steps__line { position: absolute; left: 2.2rem; top: 1rem; bottom: 1rem; width: 1px; background: var(--chianti-12); }
.steps__line span { position: absolute; inset: 0; background: var(--chianti); transform-origin: 50% 0; transform: scaleY(0); }
html:not(.js-motion) .steps__line span { transform: none; }
.step {
  position: relative; display: grid; gap: var(--s-3); align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); padding-left: 4.5rem;
  background: var(--white); border: 1px solid var(--chianti-12); border-radius: var(--radius-card);
}
.step__n { position: absolute; left: 1.1rem; top: 1.2rem; font-family: var(--font-serif); font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--pink-deep); background: var(--white); padding-block: .2rem; }
.step__icon { width: 3rem; height: 3rem; fill: none; stroke: var(--chianti); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.step__icon .f { opacity: .35; }
.step__text { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); line-height: 1.2; color: var(--chianti); max-width: 16em; }
@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
  .steps__line { left: 0; right: 0; top: 3.4rem; bottom: auto; width: auto; height: 1px; }
  .steps__line span { transform-origin: 0 50%; transform: scaleX(0); }
  .step { padding-left: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); padding-top: 6rem; min-height: 22rem; }
  .step__n { left: auto; right: 1.5rem; top: 1.5rem; font-size: clamp(3.5rem, 5vw, 5rem); background: none; }
  .step__icon { position: absolute; top: 1.6rem; left: 1.6rem; background: var(--white); }
}

.booking__head { justify-items: center; text-align: center; margin-inline: auto; }
.booking__sheet {
  position: relative; max-width: 68rem; margin-inline: auto;
  background: var(--white); border: 1px solid var(--chianti-12); border-radius: var(--radius-card);
  box-shadow: 0 40px 80px -40px rgba(85, 18, 18, .4);
}
.booking__sheet::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--chianti-12); border-radius: calc(var(--radius-card) - 6px); pointer-events: none; }
.booking__bar {
  display: flex; justify-content: space-between; padding: 1.1rem 1.6rem;
  border-bottom: 1px solid var(--chianti-12);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60);
}
.booking__cal { position: relative; z-index: 1; min-height: 38rem; display: grid; padding: 1.5rem 1.5rem 7rem; }
.booking__cal.is-live { display: block; min-height: 44rem; overflow: auto; }
.booking__placeholder {
  place-self: center; display: grid; gap: .6rem; text-align: center; padding: 3.5rem 2rem; max-width: 32rem;
  color: var(--chianti-80); border-radius: var(--radius-card);
  background:
    linear-gradient(var(--chianti-12) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--chianti-12) 1px, transparent 1px) 0 0 / 28px 28px;
}
.booking__ph-title { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); color: var(--chianti); }
.tblock {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: grid; grid-template-columns: repeat(3, auto);
  border-top: 1px solid var(--chianti); border-left: 1px solid var(--chianti);
  background: var(--white); border-radius: 0 0 calc(var(--radius-card) - 6px) 0;
  font-family: var(--font-mono); text-transform: uppercase; color: var(--chianti);
}
.tblock > div { padding: .55rem .9rem; border-right: 1px solid var(--chianti-12); }
.tblock > div:last-child { border-right: 0; }
.tblock dt { font-size: .55rem; letter-spacing: .12em; color: var(--chianti-60); }
.tblock dd { font-size: .75rem; letter-spacing: .08em; margin-top: .15rem; }
.tblock__sign { font-family: var(--font-serif); font-size: 1.05rem !important; letter-spacing: .2em !important; }
.booking__alt { display: grid; justify-items: center; gap: var(--s-4); margin-top: var(--s-7); text-align: center; }
.booking__alt .mono { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60); }
.booking__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
@media (max-width: 767px) {
  .booking__cal { min-height: 24rem; padding: 1rem 1rem 6rem; }
  .booking__btns { width: 100%; }
  .booking__btns .btn { width: 100%; text-align: center; justify-content: center; }
  .tblock { position: relative; right: auto; bottom: auto; margin: 0 10px 10px; grid-template-columns: repeat(3, 1fr); border-right: 1px solid var(--chianti); border-radius: 0 0 calc(var(--radius-card) - 6px) calc(var(--radius-card) - 6px); }
  .tblock dd { font-size: .65rem; }
  .tblock > div { padding: .5rem .6rem; }
  .tblock__sign { letter-spacing: .08em !important; }
  .booking__cal { padding-bottom: 1.5rem; }
}

/* ---------- Privacy (legal text) ---------- */
.legal { display: grid; gap: 1rem; max-width: 44rem; }
.legal__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: 1; color: var(--chianti); margin-top: .5rem; }
.legal__meta { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chianti-60); margin-bottom: 1rem; }
.legal h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); color: var(--chianti); margin-top: 1.5rem; }
.legal p, .legal li { color: var(--chianti-80); line-height: 1.7; max-width: 62ch; }
.legal ul { display: grid; gap: .4rem; padding-left: 1.2rem; list-style: disc; }