/* ==========================================
   DOMUS MINATO - HOME.CSS
   Stili esclusivi per la Home Page
   ========================================== */

/* --- 1. OPENING STAGE E HERO VIDEO --- */
.opening-stage { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; transform-origin: center center; pointer-events: none; }
.opening-stage > * { pointer-events: auto; }
.opening-scene { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 30; background: var(--calce); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-phase { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 1; pointer-events: none; }
.logo-big { width: 480px; }
@media(max-width:900px){ .logo-big { width: clamp(200px, 55vw, 320px); } }
.logo-big svg, .logo-big img { width: 100%; height: auto; display: block; }
.flower-layer { position: absolute; inset: 0; will-change: transform; pointer-events: none; opacity: 1; }
.flower-layer img { position: absolute; object-fit: contain; }
.flower-layer.navy-tint img { filter: brightness(0.35) saturate(1.8) hue-rotate(-10deg); }

.scroll-hint-opening { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.scroll-hint-opening .scroll-blob { background: var(--chia); color: var(--calce); padding: .7rem 1.5rem; border-radius: 50% 50% 50% 20%/40% 60% 40% 60%; font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 500; }
.scroll-hint-opening .line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--chia), transparent); animation: lp 2.2s ease-in-out infinite; }
@keyframes lp { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(.5); opacity: .2; } }
.scroll-runway { position: relative; height: 500vh; }

.hero-video { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 5; opacity: 1; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; }
.hero-video .overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,31,56,.7) 0%, rgba(5,31,56,.2) 40%, transparent 100%); z-index: 1; }
.hero-video .content { position: absolute; bottom: 15%; left: 0; right: 0; z-index: 2; color: var(--calce); padding: 0 var(--space-md); max-width: var(--max-width); margin: 0 auto; }
.hero-video h1 { margin-bottom: var(--space-sm); }
.hero-video h1 em { font-style: italic; color: var(--vesta); }
.hero-video .subtitle { color: rgba(245,242,229,.8); margin-bottom: var(--space-md); }

/* --- 2. SEZIONE CHI SIAMO (Isola) --- */
.chi-siamo-section { background: var(--poseidone); height: 100vh; padding: clamp(4rem, 8vh, 7rem) 0; position: relative; overflow: hidden; display: flex; align-items: center; flex: 0 0 140vw !important; width: 140vw !important; }
.chi-siamo-inner { display: grid; grid-template-columns: 26% 1fr 28%; align-items: center; gap: clamp(4rem, 8vw, 9rem); padding: 0 clamp(4rem, 7vw, 8rem); width: auto; min-width: 140vw; max-width: none; margin: 0; }
@media(max-width:900px){ .chi-siamo-inner { grid-template-columns: 1fr; padding: 0 var(--space-md); } }

.island-blob { flex: 0 0 35%; position: relative; min-height: 70vh; }
@media(max-width:900px){ .island-blob { flex: none; height: 50vh; width: 100%; } }
.island-blob-clip { position: absolute; inset: 0; border-radius: 45% 55% 50% 50%/40% 45% 55% 60%; overflow: hidden; }
.isl-scene { position: absolute; inset: 0; }
.isl-layer { position: absolute; inset: 0; will-change: transform; }
.isl-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#islBase { transform: scale(1.15); transform-origin: center; }
#islMountains { transform: scale(0.77); transform-origin: center top; mask-image: linear-gradient(to bottom, black 55%, transparent 90%); -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 90%); }
.isl-onde-up { position: absolute; inset: 0; }
.isl-onde-up img { object-position: center center; }
.isl-onde-down { position: absolute; top: 62.6%; bottom: 0; left: 0; right: 0; height: auto; }
.isl-onde-down img { object-position: center top; }

.chi-center { text-align: left; padding: var(--space-md) 0; }
.chi-center .chi-overtitle { margin-bottom: var(--space-sm); color: var(--vesta); }
.chi-center .chi-h1 { margin-bottom: var(--space-md); color: var(--calce); }
.chi-center .chi-h2 { margin-bottom: var(--space-md); max-width: 46ch; color: rgba(245,242,229,.8); }
.chi-cta { margin-top: 0; }

.chi-right { padding: var(--space-md) 0; }
.chi-accordion { display: flex; flex-direction: column; gap: 0; }
.chi-acc-item { border-top: 1px solid rgba(245,242,229,.1); }
.chi-acc-item:last-child { border-bottom: 1px solid rgba(245,242,229,.1); }
.chi-acc-trigger { width: 100%; background: none; border: none; color: var(--calce); font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 300; letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 0; cursor: pointer; transition: color .3s ease; text-align: left; }
.chi-acc-trigger:hover { color: var(--vesta); }
.chi-acc-icon { font-size: 1.4rem; font-weight: 200; color: var(--vesta); transition: transform .4s cubic-bezier(.23,1,.32,1); flex-shrink: 0; margin-left: 1rem; }
.chi-acc-trigger[aria-expanded="true"] .chi-acc-icon { transform: rotate(45deg); }
.chi-acc-body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.23,1,.32,1), padding .5s ease; }
.chi-acc-body.open { max-height: 300px; padding-bottom: 1.2rem; }
.chi-acc-body p { color: rgba(245,242,229,.75); font-size: clamp(1.125rem, 1.2vw, 1.25rem); line-height: 1.75; margin-bottom: 1rem; max-width: 65ch; }

/* --- 3. IL METODO DOMUS MINATO --- */
.metodo-section { background: var(--calce); padding: var(--space-lg) var(--space-md); position: relative; overflow: visible; z-index: 1; }
.metodo-layout { display: grid; grid-template-columns: minmax(380px, 38%) 1fr; align-items: center; gap: clamp(4rem, 8vw, 10rem); padding: 0 clamp(4rem, 7vw, 8rem); width: auto; min-width: 100%; max-width: none; }
.metodo-layout .metodo-header { text-align: left; margin-bottom: 0; }
.metodo-layout .metodo-desc { margin-left: 0; text-align: left; max-width: 44ch; color: rgba(5,31,56,.8); }
.metodo-layout .metodo-title { text-align: left; line-height: .92; color: var(--poseidone); white-space: nowrap; }
.metodo-layout .metodo-cta { margin-left: 0; margin-right: auto; }
@media(max-width:900px){ .metodo-layout { grid-template-columns: 1fr; padding: 0 var(--space-md); } }

.metodo-overtitle { font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--vesta); margin-bottom: var(--space-xs); }
.metodo-ring { display: grid; grid-template-columns: minmax(320px, 1fr) auto minmax(320px, 1fr); grid-template-rows: auto auto; gap: clamp(1rem, 2vw, 2.5rem); max-width: 1300px; margin: 0 auto; align-items: center; justify-content: center; justify-items: center; }
.metodo-layout .metodo-ring { max-width: none; width: 100%; gap: clamp(1.5rem, 2.5vw, 3rem); }
.metodo-layout .metodo-ring .m-tree-stack { width: clamp(300px, 38vw, 560px); }
@media(max-width:900px){ .metodo-ring { grid-template-columns: 1fr; grid-template-rows: auto; } }

.m-phase--tl { grid-column: 1; grid-row: 1; } .m-phase--tr { grid-column: 3; grid-row: 1; }
.m-phase--bl { grid-column: 1; grid-row: 2; } .m-phase--br { grid-column: 3; grid-row: 2; }
@media(max-width:900px){ .m-phase--tl, .m-phase--tr, .m-phase--bl, .m-phase--br { grid-column: 1; } }

.m-tree { grid-column: 2; grid-row: 1/3; display: flex; align-items: center; justify-content: center; position: relative; }
@media(max-width:900px){ .m-tree { grid-column: 1; grid-row: auto; order: -1; } }
.m-tree-stack { position: relative; width: clamp(260px, 32vw, 460px); aspect-ratio: 1; }
.m-tree-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s cubic-bezier(.23,1,.32,1); }
.m-tree-layer.active { opacity: 1; }

.m-phase { position: relative; padding: clamp(.8rem, 1.5vw, 1.2rem) 0; width: 100%; }
.m-phase-head { display: flex; align-items: center; gap: clamp(.5rem, 1vw, .8rem); cursor: default; }
.m-phase--tl .m-phase-head, .m-phase--bl .m-phase-head { flex-direction: row-reverse; text-align: right; }
@media(max-width:900px){ .m-phase--tl .m-phase-head, .m-phase--bl .m-phase-head { flex-direction: row; text-align: left; } }

.m-num { font-family: var(--font-mono); font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 500; line-height: 1; align-self: center; transition: color .4s ease; color: rgba(5,31,56,.08); }
.m-kanji { font-family: var(--font-japanese) !important; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 400; line-height: 1; transition: color .4s ease; color: rgba(5,31,56,.08); }
.m-label-wrap { flex: 1; min-width: 0; }
.m-name { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 400; color: var(--poseidone); line-height: 1.15; transition: color .3s ease; position: relative; display: inline-block; padding: .1em .3em; margin: -.1em -.3em; white-space: nowrap; letter-spacing: -.01em; }
.m-sub { font-family: var(--font-mono); font-size: clamp(.75rem, .9vw, .9rem); font-weight: 400; font-style: normal; color: rgba(5,31,56,.5); margin-top: .25rem; text-transform: uppercase; letter-spacing: .15em; }

/* Colori specifici delle fasi */
[data-color="poseidone"]:hover .m-num, [data-color="poseidone"].active .m-num, [data-color="poseidone"]:hover .m-kanji, [data-color="poseidone"].active .m-kanji { color: var(--poseidone); }
[data-color="vesta"]:hover .m-num, [data-color="vesta"].active .m-num, [data-color="vesta"]:hover .m-kanji, [data-color="vesta"].active .m-kanji { color: var(--vesta); }
[data-color="chia"]:hover .m-num, [data-color="chia"].active .m-num, [data-color="chia"]:hover .m-kanji, [data-color="chia"].active .m-kanji { color: var(--chia); }
[data-color="hanami"]:hover .m-num, [data-color="hanami"].active .m-num, [data-color="hanami"]:hover .m-kanji, [data-color="hanami"].active .m-kanji { color: var(--hanami); }

.m-plus { background: none; border: none; color: rgba(5,31,56,.4); font-size: 1.3rem; font-weight: 300; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .3s ease; line-height: 1; padding: 0; margin-left: .5rem; vertical-align: middle; }
.m-plus:hover, .m-phase.active .m-plus { color: var(--vesta); }
.m-phase.active .m-plus { transform: rotate(45deg); }

.m-blob { position: absolute; z-index: 50; max-width: 500px; width: clamp(300px, 36vw, 500px); aspect-ratio: 1/.9; opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .4s cubic-bezier(.23,1,.32,1), transform .4s cubic-bezier(.23,1,.32,1); }
.m-blob::before { content: ''; position: absolute; inset: 0; -webkit-mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; z-index: -1; background: var(--blob-color); }
.m-blob p { position: relative; padding: clamp(2.5rem, 4vw, 3.5rem) clamp(3rem, 5vw, 4rem); display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; font-size: clamp(1rem, 1.1vw, 1.15rem); color: var(--calce); line-height: 1.75; max-width: 42ch; font-family: var(--font-body); font-weight: 400; }
.m-blob.open { opacity: 1; transform: scale(1); pointer-events: auto; }

.m-blob--poseidone { --blob-color: var(--poseidone); top: 100%; left: 0; transform-origin: top left; } .m-blob--poseidone p { color: var(--calce); }
.m-blob--hanami { --blob-color: var(--hanami); top: 100%; right: 0; transform-origin: top right; } .m-blob--hanami p { color: var(--poseidone); } .m-blob--hanami::before { transform: scaleX(-1); }
.m-blob--vesta { --blob-color: var(--vesta); bottom: 100%; left: 0; transform-origin: bottom left; } .m-blob--vesta p { color: var(--poseidone); } .m-blob--vesta::before { transform: scaleY(-1); }
.m-blob--chia { --blob-color: var(--chia); bottom: 100%; right: 0; transform-origin: bottom right; } .m-blob--chia p { color: var(--poseidone); } .m-blob--chia::before { transform: scale(-1,-1); }

@media(max-width:900px){ .m-blob { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin-top: .8rem; max-width: 100%; width: 100%; aspect-ratio: auto; } .m-blob::before { border-radius: 24px; -webkit-mask-image: none; mask-image: none; } .m-blob p { padding: 1.5rem 2rem; } }

/* --- 4. MAGAZINE (Echoes of Minato) --- */
.blog-border-top { position: relative; width: 100%; line-height: 0; z-index: 3; margin-top: clamp(-8vw, -6vw, -4vw); margin-bottom: -1px; pointer-events: none; }
.blog-border-top img { width: 100%; height: auto; display: block; transform: scaleY(-1); transform-origin: center; }

.blog-h-panel { background: var(--poseidone) !important; color: var(--calce); position: relative; z-index: 200; }
.blog-strip-text { flex: 0 0 clamp(240px, 25vw, 360px); color: var(--calce); }
.blog-overtitle { font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--vesta); margin-bottom: var(--space-xs); }
.blog-h1 { font-family: var(--font-display); font-size: clamp(3.6rem, 6.8vw, 6rem); font-weight: 300; font-style: italic; letter-spacing: -.01em; color: var(--calce); margin-bottom: .6rem; line-height: .95; }
.blog-h2 { font-family: var(--font-body); font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 300; font-style: normal; color: rgba(245,242,229,.7); line-height: 1.65; max-width: 40ch; margin-bottom: 1.2rem; }

.blog-h-panel .blog-card { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; -webkit-mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: var(--notte); aspect-ratio: 1/1; transition: transform .5s cubic-bezier(.23,1,.32,1); }
.blog-h-panel .blog-card:hover { transform: scale(1.04); }
.blog-h-panel .blog-card--featured { background: var(--chia); }
.blog-h-panel .blog-card-img { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; padding: clamp(2rem, 3vw, 3.5rem); }
.blog-h-panel .blog-card--featured .blog-card-img { background: transparent !important; }
.blog-h-panel .blog-card-title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.8vw, 2rem); color: var(--calce); line-height: 1.1; text-shadow: 0 2px 12px rgba(3,21,38,.6); max-width: 80%; }
.blog-h-panel .blog-card--featured .blog-card-title { color: var(--poseidone); text-shadow: none; }
.blog-h-panel .blog-card-body { position: absolute; inset: 0; background: rgba(5,31,56,.85); padding: clamp(2rem, 3vw, 3.5rem); display: flex; align-items: center; opacity: 0; transition: opacity .35s ease; color: var(--calce); font-family: var(--font-body); }
.blog-h-panel .blog-card:hover .blog-card-body { opacity: 1; }
.blog-h-panel .blog-card--featured:hover .blog-card-body { background: rgba(76,204,179,.95); color: var(--poseidone); }

.blog-card-featured-wrap { position: relative; display: block; text-decoration: none; color: inherit; width: 100%; height: 88vh; cursor: pointer; transition: transform .5s cubic-bezier(.23,1,.32,1); overflow: visible; }
.blog-card-featured-wrap:hover { transform: scale(1.02); }
.bcf-photo-blob { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--poseidone); z-index: 1; filter: grayscale(100%); transition: filter 2s ease; }
.blog-card-featured-wrap:hover .bcf-photo-blob { filter: grayscale(0%); transition: filter 1s ease; }
.bcf-cream-blob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64%; aspect-ratio: 1/1; -webkit-mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: rgba(245,242,229,.78); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 10%; }
.bcf-overline { font-family: var(--font-mono); font-size: .78vw; letter-spacing: .18em; color: var(--vesta); margin: 0 0 .9vw 0; text-transform: none; font-weight: 500; white-space: nowrap; line-height: 1.15; }
.bcf-title { font-family: var(--font-display); font-weight: 400; color: var(--poseidone); font-size: clamp(2.2rem, 3.4vw, 3.8rem); line-height: 1; letter-spacing: -.01em; margin: 0 0 1vw 0; }
.bcf-subtitle { font-family: var(--font-display); font-weight: 300; color: var(--poseidone); font-size: clamp(1.3rem, 1.7vw, 2rem); line-height: 1.2; letter-spacing: -.005em; margin: 0; font-style: italic; opacity: .92; }
.bcf-title, .bcf-subtitle { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); }
.blog-card-featured-wrap.is-revealed .bcf-title { opacity: 1; transform: translateY(0); transition-delay: .45s; }
.blog-card-featured-wrap.is-revealed .bcf-subtitle { opacity: .92; transform: translateY(0); transition-delay: 1.05s; }

/* --- 5. SERVIZI BASE E ALTRE SEZIONI --- */
.servizi-section { position: relative; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.servizi-section::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100vw;
  height: calc(100vw * 1000 / 1920);
  background: var(--poseidone);
  -webkit-mask-image: url(/assets/masks/mask-mercurio-services.svg);
  mask-image: url(/assets/masks/mask-mercurio-services.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: left top;
  mask-position: left top;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
/* Copre la parte di sezione non coperta dalla maschera:
   - tutto ciò che sta sotto l'altezza della sagoma (full width)
   - tutto ciò che sta a destra della larghezza della sagoma (full height) */
.servizi-section::after {
  content: "";
  position: absolute;
  left: 100vw;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--poseidone);
  z-index: 1;
  pointer-events: none;
  box-shadow: -1px 0 0 var(--poseidone);
}
.servizi-section {
  background: linear-gradient(to bottom, transparent 0, transparent calc(100vw * 1000 / 1920), var(--poseidone) calc(100vw * 1000 / 1920));
}
.servizi-mask { display: none; }
.servizi-text { position: relative; z-index: 2; margin-left: calc(100vh + 100px); padding-right: var(--space-md); max-width: 48ch; }
.servizi-overtitle { font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--vesta); margin-bottom: var(--space-xs); }
.servizi-title { font-family: var(--font-display); font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 300; color: var(--calce); line-height: .92; letter-spacing: -.025em; }
.servizi-body { font-family: var(--font-body); font-size: clamp(.95rem, 1.05vw, 1.05rem); font-weight: 300; color: rgba(245,242,229,.78); line-height: 1.7; max-width: 48ch; margin-top: var(--space-xs); }
.servizi-cards { position: relative; z-index: 2; flex: 1; }

.sv-item { border-bottom: 1px solid rgba(5,31,56,.1); }
.sv-item:first-child { border-top: 1px solid rgba(5,31,56,.1); }
.sv-trigger { width: 100%; background: none; border: none; color: var(--poseidone); font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.75rem); font-weight: 400; letter-spacing: -.005em; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; cursor: pointer; text-align: left; transition: color .3s ease; gap: 1rem; }
.sv-trigger:hover { color: var(--vesta); }
.sv-plus { font-size: 1.4rem; font-weight: 200; color: rgba(5,31,56,.3); transition: transform .4s cubic-bezier(.23,1,.32,1), color .3s ease; flex-shrink: 0; }
.sv-trigger:hover .sv-plus { color: var(--vesta); }
.sv-item.open .sv-plus { transform: rotate(45deg); color: var(--vesta); }
.sv-body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.23,1,.32,1), padding .4s ease; display: flex; align-items: center; text-align: left; }
.sv-item.open .sv-body { max-height: 250px; padding-bottom: 1.2rem; padding: 1.5rem 2vw 1.5rem 3vw; }
.sv-body p { font-size: clamp(1.05rem, 1.2vw, 1.2rem); color: rgba(5,31,56,.6); line-height: 1.6; margin-bottom: .8rem; max-width: 500px; text-align: left; margin: 0; }

.percorsi-teaser { background: var(--poseidone); color: var(--calce); padding: var(--space-xl) var(--space-md); text-align: center; position: relative; overflow: hidden; }
.percorsi-teaser::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, var(--vesta) 0%, transparent 70%); opacity: .04; top: -200px; right: -200px; }
.percorsi-header { text-align: center; margin-bottom: var(--space-lg); }
.percorsi-title { font-family: var(--font-display); font-size: clamp(3rem, 6.5vw, 6rem); font-weight: 300; color: var(--calce); letter-spacing: -.02em; line-height: .95; margin-bottom: var(--space-sm); }
.percorsi-subtitle { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 300; color: rgba(245,242,229,.85); line-height: 1.2; margin-bottom: var(--space-sm); max-width: 30ch; margin-left: auto; margin-right: auto; }

.percorsi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); max-width: var(--max-width); margin: 0 auto; text-align: left; }
.percorso-card { position: relative; cursor: pointer; transition: transform .6s cubic-bezier(.23,1,.32,1), opacity .6s ease; aspect-ratio: 1/1.05; display: flex; align-items: center; justify-content: center; }
.percorso-card .pc-top, .percorso-card .pc-bottom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 1.92s cubic-bezier(.23,1,.32,1), filter .5s ease; }
.percorso-card .pc-blob { position: absolute; inset: 0; -webkit-mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; z-index: 0; }
.percorso-card .pc-top { z-index: 3; }
.percorso-card .pc-bottom .pc-blob { transform: scaleX(-1); }
.percorso-card .pc-bottom { z-index: 2; opacity: 1; transition: transform 1.92s cubic-bezier(.23,1,.32,1); }
.percorso-card .pc-title { position: relative; z-index: 2; padding: clamp(3rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; }
.percorso-card .pc-desc { position: relative; z-index: 2; padding: clamp(5rem, 9vw, 7rem) clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: left; height: 100%; }
.percorso-card .pc-title h3, .percorso-card .pc-desc p { max-width: 72%; }
.percorso-card .pc-title .percorso-sub { max-width: 75%; }
.percorso-card .pc-middle-img { position: absolute; z-index: 4; width: clamp(80px, 14vw, 150px); height: clamp(80px, 14vw, 150px); pointer-events: none; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: opacity .4s ease .1s; }
.percorso-card .pc-middle-img img { width: 100%; height: 100%; object-fit: contain; }
.percorso-card.revealed .pc-middle-img, .percorso-card:hover .pc-middle-img { opacity: 1; }
.percorso-card .pc-overlay-top { position: absolute; inset: 0; background: rgba(3,21,38,0); transition: background .5s ease; z-index: 10; pointer-events: none; -webkit-mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); mask-image: url(https://www.domusminato.com/assets/Background_Logo_Poseidone_20260412.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

.percorso-card[data-percorso="arancio"]:hover .pc-top, .percorso-card[data-percorso="arancio"].revealed .pc-top,
.percorso-card[data-percorso="ryu"]:hover .pc-top, .percorso-card[data-percorso="ryu"].revealed .pc-top { transform: translateX(-15px); }
.percorso-card[data-percorso="arancio"]:hover .pc-bottom, .percorso-card[data-percorso="arancio"].revealed .pc-bottom,
.percorso-card[data-percorso="ryu"]:hover .pc-bottom, .percorso-card[data-percorso="ryu"].revealed .pc-bottom { transform: translateX(calc(100% - 75px)); }
.percorso-card[data-percorso="mercurio"]:hover .pc-top, .percorso-card[data-percorso="mercurio"].revealed .pc-top { transform: translateX(15px); }
.percorso-card[data-percorso="mercurio"]:hover .pc-bottom, .percorso-card[data-percorso="mercurio"].revealed .pc-bottom { transform: translateX(calc(-100% + 75px)); }

.percorsi-cards:has(.percorso-card:hover) .percorso-card:hover, .percorso-card.revealed { z-index: 100; }
.percorso-card.returning { z-index: 50; }
.percorsi-cards:has(.percorso-card:hover) .percorso-card:not(:hover):not(.revealed) .pc-top,
.percorsi-cards:has(.percorso-card:hover) .percorso-card:not(:hover):not(.revealed) .pc-bottom { filter: brightness(.5); }
.percorsi-cards:has(.percorso-card.revealed) .percorso-card:not(.revealed) .pc-top,
.percorsi-cards:has(.percorso-card.revealed) .percorso-card:not(.revealed) .pc-bottom { filter: brightness(.5); }
.percorso-card.revealed .pc-top, .percorso-card.revealed .pc-bottom { filter: none !important; }

/* Colori Card Percorsi */
.percorso-card[data-percorso="arancio"] .pc-top .pc-blob { background: var(--vesta); }
.percorso-card[data-percorso="arancio"] .pc-bottom .pc-blob { background: var(--grano); }
.percorso-card[data-percorso="ryu"] .pc-top .pc-blob { background: var(--chia); }
.percorso-card[data-percorso="ryu"] .pc-bottom .pc-blob { background: var(--giada); }
.percorso-card[data-percorso="mercurio"] .pc-top .pc-blob { background: var(--calce); }
.percorso-card[data-percorso="mercurio"] .pc-bottom .pc-blob { background: var(--hanami); }

.percorso-card[data-percorso="arancio"] .pc-content, .percorso-card[data-percorso="arancio"] .kanji, .percorso-card[data-percorso="arancio"] h3, .percorso-card[data-percorso="arancio"] p, .percorso-card[data-percorso="arancio"] .cta-link { color: var(--poseidone); }
.percorso-card[data-percorso="ryu"] .pc-content, .percorso-card[data-percorso="ryu"] .kanji, .percorso-card[data-percorso="ryu"] h3, .percorso-card[data-percorso="ryu"] p, .percorso-card[data-percorso="ryu"] .cta-link { color: var(--poseidone); }
.percorso-card[data-percorso="mercurio"] .pc-content, .percorso-card[data-percorso="mercurio"] .kanji, .percorso-card[data-percorso="mercurio"] h3, .percorso-card[data-percorso="mercurio"] p, .percorso-card[data-percorso="mercurio"] .cta-link { color: var(--poseidone); }

/* === 4 nuove card satellite: content, digital, global, workshop ===
   Replicano l'animazione di mercurio (top scorre a destra, bottom a sinistra). */
.percorso-card[data-percorso="content"]:hover .pc-top, .percorso-card[data-percorso="content"].revealed .pc-top,
.percorso-card[data-percorso="digital"]:hover .pc-top, .percorso-card[data-percorso="digital"].revealed .pc-top,
.percorso-card[data-percorso="global"]:hover .pc-top, .percorso-card[data-percorso="global"].revealed .pc-top,
.percorso-card[data-percorso="workshop"]:hover .pc-top, .percorso-card[data-percorso="workshop"].revealed .pc-top { transform: translateX(15px); }
.percorso-card[data-percorso="content"]:hover .pc-bottom, .percorso-card[data-percorso="content"].revealed .pc-bottom,
.percorso-card[data-percorso="digital"]:hover .pc-bottom, .percorso-card[data-percorso="digital"].revealed .pc-bottom,
.percorso-card[data-percorso="global"]:hover .pc-bottom, .percorso-card[data-percorso="global"].revealed .pc-bottom,
.percorso-card[data-percorso="workshop"]:hover .pc-bottom, .percorso-card[data-percorso="workshop"].revealed .pc-bottom { transform: translateX(calc(-100% + 75px)); }

.percorso-card[data-percorso="content"] .pc-top .pc-blob { background: var(--chia); }
.percorso-card[data-percorso="content"] .pc-bottom .pc-blob { background: var(--giada); }
.percorso-card[data-percorso="digital"] .pc-top .pc-blob { background: var(--grano); }
.percorso-card[data-percorso="digital"] .pc-bottom .pc-blob { background: var(--gaia); }
.percorso-card[data-percorso="global"] .pc-top .pc-blob { background: var(--giada); }
.percorso-card[data-percorso="global"] .pc-bottom .pc-blob { background: var(--chia); }
.percorso-card[data-percorso="workshop"] .pc-top .pc-blob { background: var(--hanami); }
.percorso-card[data-percorso="workshop"] .pc-bottom .pc-blob { background: var(--vesta); }

/* Colori testo: poseidone su tutti i fondi chiari; calce su gaia (terra scura) per leggibilità del desc */
.percorso-card[data-percorso="content"] .pc-content, .percorso-card[data-percorso="content"] .kanji, .percorso-card[data-percorso="content"] h3, .percorso-card[data-percorso="content"] p, .percorso-card[data-percorso="content"] .cta-link { color: var(--poseidone); }
.percorso-card[data-percorso="digital"] .pc-content, .percorso-card[data-percorso="digital"] .kanji, .percorso-card[data-percorso="digital"] h3, .percorso-card[data-percorso="digital"] .cta-link { color: var(--poseidone); }
.percorso-card[data-percorso="digital"] .pc-bottom p, .percorso-card[data-percorso="digital"] .pc-bottom .cta-link { color: var(--calce); }
.percorso-card[data-percorso="global"] .pc-content, .percorso-card[data-percorso="global"] .kanji, .percorso-card[data-percorso="global"] h3, .percorso-card[data-percorso="global"] p, .percorso-card[data-percorso="global"] .cta-link { color: var(--poseidone); }
.percorso-card[data-percorso="workshop"] .pc-content, .percorso-card[data-percorso="workshop"] .kanji, .percorso-card[data-percorso="workshop"] h3, .percorso-card[data-percorso="workshop"] p, .percorso-card[data-percorso="workshop"] .cta-link { color: var(--poseidone); }

.percorsi-cards:has(.percorso-card:hover) .percorso-card:not(:hover):not(.revealed) { transform: scale(.88); }
.percorsi-cards:has(.percorso-card.revealed) .percorso-card:not(.revealed) { transform: scale(.88); }
.percorso-card:hover { transform: scale(1.06); z-index: 100; transition-delay: 0s; }
.percorso-card .kanji { margin-bottom: .3rem; font-size: clamp(2rem, 3vw, 2.8rem); }
.percorso-card h3 { margin-bottom: .4rem; font-family: var(--font-display); font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.percorso-card .percorso-sub { font-family: var(--font-mono); font-style: normal; font-size: clamp(.7rem, .85vw, .8rem); margin-bottom: 0; line-height: 1.5; text-transform: uppercase; letter-spacing: .12em; }

/* --- 7. CONTATTI HOME --- */
.contatti { background: var(--poseidone); color: var(--calce); padding: var(--space-xl) 0; }
.contatti .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.contatti-text h2 { margin-bottom: var(--space-xs); } 
.contatti-text .subtitle { color: rgba(245,242,229,.8); margin-bottom: var(--space-md); } 
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,229,.65); }
.form-group input, .form-group select, .form-group textarea { background: rgba(245,242,229,.06); border: 1px solid rgba(245,242,229,.12); color: var(--calce); font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; padding: .9rem 1.1rem; border-radius: 30% 70% 70% 30%/80% 20% 80% 20%; transition: border-color .3s ease, background .3s ease; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--vesta); background: rgba(245,242,229,.1); }
.form-group textarea { min-height: 120px; resize: vertical; border-radius: 24px; }
.form-group select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffb238' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form-group select option { background: var(--poseidone); color: var(--calce); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-checkbox { display: flex; align-items: flex-start; gap: .8rem; font-size: .8rem; color: rgba(245,242,229,.5); cursor: pointer; }
.form-checkbox input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 1px solid rgba(245,242,229,.2); border-radius: 4px; flex-shrink: 0; margin-top: 2px; cursor: pointer; transition: all .3s ease; }
.form-checkbox input[type="checkbox"]:checked { background: var(--vesta); border-color: var(--vesta); }
.btn-submit { align-self: flex-start; font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--poseidone); background: var(--vesta); border: none; padding: 1rem 2.5rem; cursor: pointer; border-radius: 50% 50% 50% 20%/50% 50% 50% 50%; transition: transform .3s ease, box-shadow .3s ease; }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,178,56,.25); }

/* --- 8. H-SCROLL (DISPOSIZIONE ORIZZONTALE) --- */
.h-scroll-track > aside.nuvole-drago-vertical { flex: 0 0 auto; height: 100vh; padding: 0; }
.h-scroll-track > section { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(4rem, 8vh, 7rem); padding-bottom: clamp(4rem, 8vh, 7rem); }
.h-scroll-track .contatti { height: 100vh; padding: clamp(4rem, 8vh, 7rem) 0; }
.h-scroll-track .magazine-border-left { flex: 0 0 auto; height: 100vh; width: clamp(80px, 8vw, 140px); background-image: url(https://www.domusminato.com/assets/nuvole-drago-bordo_chia_20260412.png); background-size: auto 100%; background-position: center; background-repeat: no-repeat; transform: rotate(90deg) scaleX(-1); transform-origin: center; }
.nuvole-drago-vertical { flex: 0 0 auto; width: clamp(180px, 14vw, 280px); height: 100vh; background: var(--calce); overflow: hidden; position: relative; }
.nuvole-drago-vertical img { position: absolute; top: 50%; left: 50%; height: auto; width: 100vh; max-width: none; transform: translate(-50%,-50%) rotate(90deg); transform-origin: center; }
.h-scroll-wrapper { position: relative; overflow: hidden; width: 100%; }
.h-scroll-track { display: flex; flex-direction: row; flex-wrap: nowrap; will-change: transform; width: max-content; }
.h-scroll-track > section, .h-scroll-track > .footer { flex: 0 0 100vw; min-height: 100vh; width: 100vw; scroll-snap-align: start; }
.h-scroll-track .blog-strip { flex: 0 0 clamp(420px, 45vw, 720px); min-height: 100vh; height: 100vh; display: flex; align-items: center; }
.h-scroll-track .blog-strip-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg) var(--space-md); height: 100%; justify-content: center; }
.h-scroll-track .blog-strip-text { flex: 0 0 auto; text-align: left; }
.h-scroll-track .blog-carousel { flex: 1; flex-direction: column; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; gap: clamp(1rem, 1.5vw, 1.5rem); width: 100%; }
.h-scroll-track .blog-card { flex: 0 0 auto; width: 100%; max-width: 280px; }
.h-scroll-track .blog-border-top { display: none; }
.h-scroll-track section { position: relative; z-index: auto; }

.tao-divider { flex: 0 0 auto; width: clamp(560px, 44vw, 880px); height: 100vh; display: block; }
.tao-divider--echoes { width: clamp(280px, 22vw, 440px) !important; z-index: 150; }
.tao-divider svg { width: 100%; height: 100%; display: block; }
.blog-h-panel { background: var(--poseidone) !important; color: var(--calce); position: relative; z-index: 200; }
.tao-divider--echoes-servizi { flex: 0 0 auto; width: clamp(560px, 44vw, 880px) !important; height: 100vh; display: block; z-index: 155; }

/* ==========================================
   AGGIORNAMENTO FIORE SERVIZI
   ========================================== */

.servizi-text {
  max-width: none !important; 
}

.servizi-flower-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  perspective: 1000px;
  flex: 1; 
  min-width: 800px; 
}
/* Palcoscenico del fiore: contenitore relative per le flower-petal absolute. */
.flower-stage {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  min-width: 700px;
}
/* Testo introduttivo dentro il flower-wrapper: tra H2 (fuori) e le cards (a destra). */
.servizi-intro {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  width: clamp(700px, 50vw, 960px);
  padding: 0 clamp(2rem, 3vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
.servizi-intro .servizi-body {
  margin-top: 0;
  max-width: none;
}
.servizi-intro-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vesta);
  text-decoration: none;
  padding: .9rem 0;
  border-bottom: 1px solid var(--vesta);
  transition: color .3s ease, border-color .3s ease, letter-spacing .3s ease;
}
.servizi-intro-cta:hover {
  color: var(--calce);
  border-color: var(--calce);
  letter-spacing: .28em;
}

.flower-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(320px, 28vw, 400px); 
  aspect-ratio: 1 / 1.05; 
  
  --radius: calc(clamp(250px, 20vw, 380px) - 10px);
  --scale-closed: 0.70;
  --scale-hover: 0.76;
  
  transform: translate(-50%, -50%) 
             rotate(var(--angle, 0deg)) 
             translateY(var(--radius, 0px)) 
             rotate(calc(var(--angle, 0deg) * -1)) 
             scale(var(--scale-closed));
             
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease;
  z-index: 10;
  cursor: pointer;
  will-change: transform;
}

.flower-petal .percorso-card {
    width: 100%;
    height: 100%;
}

.petal-center {
  --radius: 0px !important;
  --scale-closed: 0.90;
  --scale-hover: 0.96;
}

.flower-petal:not(.is-active) .pc-middle-img {
  opacity: 0;
  pointer-events: none;
}

/* Quando la petala è chiusa, il percorso-sub non deve occupare spazio:
   altrimenti il gruppo H3 + sub è centrato contando anche la riga vuota,
   e l'H3 risulta visivamente più in alto del vero centro. */
.flower-petal:not(.is-active) .percorso-sub {
  display: none;
}

/* Nelle petale chiuse il titolo è molto grande: servono più spazio
   orizzontale e niente max-width, altrimenti il testo viene tagliato. */
.flower-petal:not(.is-active) .pc-title {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
}
.flower-petal:not(.is-active) .pc-title h3 {
  max-width: 100%;
}

.flower-petal:not(.is-active):hover {
  z-index: 20;
  transform: translate(-50%, -50%) 
             rotate(var(--angle, 0deg)) 
             translateY(var(--radius, 0px)) 
             rotate(calc(var(--angle, 0deg) * -1)) 
             scale(var(--scale-hover));
  animation: petal-breath 1.5s ease-in-out infinite alternate;
}

@keyframes petal-breath {
  0% { filter: drop-shadow(0 4px 10px rgba(3, 21, 38, 0.2)); }
  100% { filter: drop-shadow(0 12px 24px rgba(3, 21, 38, 0.4)); transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(var(--radius, 0px)) rotate(calc(var(--angle, 0deg) * -1)) scale(var(--scale-hover)) rotate(2deg); }
}

.flower-petal.is-active {
  cursor: default;
}

.flower-petal .pc-blob {
    opacity: 1 !important;
    visibility: visible !important;
}


/* --- FIX COMPORTAMENTO CARD E BOTTONE CHIUDI --- */

/* Nascondiamo la X di default */
.close-petal {
    position: absolute;
    top: -40px;
    right: 0;
    width: 30px;
    height: 30px;
    background: var(--vesta);
    color: var(--poseidone);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 110;
}

/* Mostriamo la X solo quando la card è attiva */
.flower-petal.is-active .close-petal {
    opacity: 1;
    visibility: visible;
    top: -20px; /* Effetto entrata */
}

/* Blocchiamo gli hover nativi dei percorsi che sdoppiano la card al solo passaggio del mouse */
.flower-petal .percorso-card .pc-top,
.flower-petal .percorso-card .pc-bottom {
    transition: transform 0.9s cubic-bezier(.22, 1.05, .36, 1) !important;
    transform: none !important; /* Forza chiusura */
}

/* Le alette si aprono SOLO con la classe .revealed — slide laterale con micro rotazione j-pop */
.flower-petal .percorso-card.revealed .pc-top {
    transform: translateX(-15px) rotate(-1deg) !important;
}
.flower-petal .percorso-card.revealed .pc-bottom {
    transform: translateX(calc(100% - 75px)) rotate(2deg) !important;
    transition: transform 0.95s cubic-bezier(.22, 1.05, .36, 1) 0.08s !important;
}

/* Override per le satelliti che si aprono nella direzione opposta:
   il top scorre a destra, il bottom rivela a sinistra. */
.flower-petal .percorso-card[data-percorso="mercurio"].revealed .pc-top,
.flower-petal .percorso-card[data-percorso="content"].revealed .pc-top,
.flower-petal .percorso-card[data-percorso="digital"].revealed .pc-top,
.flower-petal .percorso-card[data-percorso="global"].revealed .pc-top,
.flower-petal .percorso-card[data-percorso="workshop"].revealed .pc-top {
    transform: translateX(15px) rotate(1deg) !important;
}
.flower-petal .percorso-card[data-percorso="mercurio"].revealed .pc-bottom,
.flower-petal .percorso-card[data-percorso="content"].revealed .pc-bottom,
.flower-petal .percorso-card[data-percorso="digital"].revealed .pc-bottom,
.flower-petal .percorso-card[data-percorso="global"].revealed .pc-bottom,
.flower-petal .percorso-card[data-percorso="workshop"].revealed .pc-bottom {
    transform: translateX(calc(-100% + 75px)) rotate(-2deg) !important;
    transition: transform 0.95s cubic-bezier(.22, 1.05, .36, 1) 0.08s !important;
}

/* --- VOLO AL CENTRO — arrivo elegante con micro-overshoot --- */
.flower-petal.is-active {
    --radius: 0px !important;
    transform: translate(-50%, -50%) 
               rotate(var(--angle, 0deg)) 
               translateY(0px) 
               rotate(calc(var(--angle, 0deg) * -1)) 
               scale(1) !important;
    z-index: 100;
    transition: transform 0.75s cubic-bezier(.22, 1.08, .36, 1) 0s !important;
}

/* Ritorno al raggio — discesa lenta dopo la chiusura delle alette */
.flower-petal:not(.is-active) {
    transition: transform 0.7s cubic-bezier(.5, 0, .2, 1) 0.35s;
}

/* === CONTENUTO INTERNO: fioritura in cascata === */

/* H3 nelle petale chiuse → font grande, fermo */
.flower-petal:not(.is-active) h3 {
    font-size: clamp(3rem, 6vw, 4.5rem);
    transform: translateY(0);
    transition: font-size .5s cubic-bezier(.22, 1.05, .36, 1), transform .5s cubic-bezier(.22, 1.05, .36, 1), opacity .4s ease;
}

/* H3 nella petala attiva → sale con fade-up elegante */
.flower-petal.is-active h3 {
    font-size: clamp(1.35rem, 1.7vw, 1.7rem);
    transform: translateY(0);
    transition: font-size .55s cubic-bezier(.22, 1.05, .36, 1) .35s,
                transform .55s cubic-bezier(.22, 1.05, .36, 1) .35s;
}

/* Sub e desc partono invisibili con micro offset */
.flower-petal .percorso-sub,
.flower-petal .pc-desc {
    opacity: 0;
    transform: translateY(14px);
}

.flower-petal.is-active .percorso-sub,
.flower-petal.is-active .pc-desc {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
    transition: opacity .6s ease .55s, transform .7s cubic-bezier(.22, 1.05, .36, 1) .55s;
}
.flower-petal.is-active .percorso-sub {
    display: block !important;
}

/* Cascata dentro il desc: <p> prima, CTA dopo */
.flower-petal .pc-desc p,
.flower-petal .pc-desc .cta-link {
    opacity: 0;
    transform: translateY(10px);
}
.flower-petal.is-active .pc-desc p {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease .75s, transform .6s cubic-bezier(.22, 1.05, .36, 1) .75s;
}
.flower-petal.is-active .pc-desc .cta-link {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease .95s, transform .6s cubic-bezier(.22, 1.05, .36, 1) .95s;
    position: relative;
    display: inline-block;
}
/* Sottolineatura che scorre da sinistra sulla CTA — tocco j-pop */
.flower-petal .pc-desc .cta-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .5s cubic-bezier(.22, 1.05, .36, 1);
}
.flower-petal.is-active .pc-desc .cta-link::after {
    width: 100%;
    transition: width .7s cubic-bezier(.22, 1.05, .36, 1) 1.15s;
}
.flower-petal.is-active .pc-desc .cta-link:hover::after {
    animation: cta-underline-pulse 1.2s ease-in-out infinite;
}
@keyframes cta-underline-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* Close petal: entrata con rotazione elegante */
.close-petal {
    transform: rotate(-90deg) scale(.6);
    transition: opacity .35s ease, visibility .35s ease, transform .55s cubic-bezier(.22, 1.2, .36, 1), top .45s cubic-bezier(.22, 1.08, .36, 1);
}
.flower-petal.is-active .close-petal {
    transform: rotate(0deg) scale(1);
    transition: opacity .35s ease .65s, visibility 0s linear .65s, transform .55s cubic-bezier(.22, 1.2, .36, 1) .65s, top .45s cubic-bezier(.22, 1.08, .36, 1) .65s;
}

/* Inchino delle altre petale — più dolce, blur più lieve */
.servizi-flower-wrapper.has-active .flower-petal:not(.is-active) {
    filter: brightness(0.35) blur(3px);
    opacity: 0.45;
    pointer-events: none;
    transition: filter .7s cubic-bezier(.5, 0, .2, 1), opacity .7s cubic-bezier(.5, 0, .2, 1);
}

/* ==========================================
   MEDIA QUERIES GLOBALI
   ========================================== */

@media(max-width:900px){ 
  .h-scroll-track { flex-direction: column; width: 100%; }
  .h-scroll-track > section, .h-scroll-track > .footer { flex: 0 0 auto; width: 100%; min-height: auto; }
  .h-scroll-track .blog-strip { flex: 0 0 auto; height: auto; min-height: auto; }
  .h-scroll-track .blog-carousel { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .nuvole-drago-vertical { display: none; }
  .tao-divider { display: none; }

  .servizi-section { height: auto; min-height: 100vh; flex-direction: column; }
  .servizi-text { margin-left: 0; padding: calc(100vw + 2rem) 1.5rem var(--space-md); max-width: none; }
  .servizi-title { font-size: clamp(2.8rem, 8vw, 4rem); }
  .servizi-cards { width: 100%; padding: 0 1.5rem; }

  .chi-siamo-section, .metodo-section, .h-scroll-track > section { width: 100% !important; flex: 0 0 auto !important; height: auto; min-height: auto; }
  .chi-siamo-inner, .metodo-layout, .servizi-content, .contatti .container { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.5rem; }
  .island-blob { height: 50vh; min-height: 40vh; }
  .percorsi-cards { grid-template-columns: 1fr; }
  .metodo-ring { grid-template-columns: 1fr; grid-template-rows: auto; }
  .m-phase--tl, .m-phase--tr, .m-phase--bl, .m-phase--br { grid-column: 1; }
  .m-tree { grid-column: 1; grid-row: auto; order: -1; }
  .m-phase--tl .m-phase-head, .m-phase--bl .m-phase-head { flex-direction: row; text-align: left; }
  .m-blob { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin-top: .8rem; max-width: 100%; width: 100%; aspect-ratio: auto; }
  .m-blob::before { border-radius: 24px; -webkit-mask-image: none; mask-image: none; }
  .m-blob p { padding: 1.5rem 2rem; }
  .contatti .container { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media(min-width:901px) {
  /* Assicuriamo che la traccia accetti larghezze dinamiche */
  .h-scroll-track {
     width: max-content !important;
  }

  /* FIX RIGIDO PER IL FIORE DEI SERVIZI */
  .h-scroll-track #servizi {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 220vw !important; 
    width: 220vw !important; 
    overflow: hidden !important; 
  }

  /* Testo servizi: overtitle + H2, centrati verticalmente. */
  #servizi .servizi-text {
    position: relative;
    z-index: 10; 
    margin-left: calc(100vh + 5vw) !important; 
    flex-shrink: 0;
    width: auto;
  }
  #servizi .servizi-text h2,
  #servizi .servizi-title {
    min-width: max-content;
  }

  /* Il palcoscenico del fiore */
  .servizi-flower-wrapper {
    position: relative;
    z-index: 20;
    height: 100vh;
    width: 80vw; 
    min-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* REGOLAZIONI STANDARD DEL RESTO DELLA TRACCIA */
  .chi-siamo-section { flex: 0 0 140vw !important; width: 140vw !important; padding: 6vh 0; }
  .metodo-section { flex: 0 0 140vw !important; width: 140vw !important; padding: 6vh 0; }
  .h-scroll-track > section { padding-top: 6vh; padding-bottom: 6vh; }
  .chi-siamo-inner { grid-template-columns: 20vw 1fr 22vw; column-gap: 0; row-gap: 0; padding: 0 5vw; min-width: 140vw; }
  .island-blob { height: 76vh; min-height: 76vh; }
  .chi-center { padding: 0; margin-left: 50px; }
  .chi-right { padding: 0; margin-left: calc(-15vw - 50px); }
  .chi-center .chi-h1 { font-size: 7.8vw; line-height: .92; letter-spacing: -.01em; margin-bottom: 2.2vw; }
  .chi-center .chi-h2 { font-size: 1.1vw; line-height: 1.55; max-width: 32vw; margin-bottom: 2.2vw; }
  .chi-overtitle { font-size: .75vw; letter-spacing: .25em; margin-bottom: 1.5vw; }
  .chi-acc-trigger { font-size: 1.4vw; padding: 1vw 0; }
  .chi-acc-body p { font-size: .95vw; line-height: 1.7; max-width: 18vw; margin-bottom: .8vw; }
  .chi-acc-icon { font-size: 1.2vw; }
  .metodo-layout { grid-template-columns: 28vw 1fr; gap: 6vw; padding: 0 5vw; min-width: 140vw; }
  .metodo-title { font-size: 6.6vw; line-height: .95; }
  .metodo-desc { font-size: 1.05vw; line-height: 1.7; max-width: 28vw; margin-top: 1.8vw; }
  .metodo-overtitle { font-size: .75vw; letter-spacing: .25em; margin-bottom: 1.2vw; }
  .metodo-cta { margin-top: 2vw; }
  .metodo-layout .metodo-ring { gap: 1.8vw; }
  .metodo-layout .metodo-ring .m-tree-stack { width: 32vw; }
  .m-name { font-size: 1.7vw; } .m-sub { font-size: .7vw; letter-spacing: .15em; }
  .m-num { font-size: 2.6vw; } .m-kanji { font-size: 2.4vw; }
  .m-blob p { font-size: .9vw; line-height: 1.7; }
  .nuvole-drago-vertical { width: 14vw; min-width: 14vw; }
  .h-scroll-track .blog-strip { flex: 0 0 44vw; }
  .h-scroll-track .blog-strip-inner { padding: 5vh 3vw; gap: 3vw; }
  .blog-h1 { font-size: 3.2vw; line-height: .95; margin-bottom: 1vw; }
  .blog-h2 { font-size: .95vw; max-width: 22vw; line-height: 1.55; }
  .blog-overtitle { font-size: .75vw; letter-spacing: .25em; }
  .blog-card { max-width: 18vw; }
  .blog-card-title { font-size: 1vw; }
  
  /* WEDDING SECTION e altre section generiche */
  .h-scroll-track .servizi-section:not(#servizi) { 
    flex: 0 0 100vw !important; width: 100vw !important; height: 100vh; 
  }
  .sv-trigger { font-size: 1.5vw; padding: 1vw 0; }
  .sv-body p { font-size: .95vw; line-height: 1.7; max-width: 32vw; margin-bottom: .8vw; }
  .h-scroll-track .contatti { flex: 0 0 110vw !important; width: 110vw; padding: 6vh 0; }
  .contatti .container { grid-template-columns: 1fr 1fr; gap: 6vw; padding: 0 5vw; max-width: none; }
  .contatti-text h2 { font-size: 6.6vw; line-height: .95; }
  .form-group label { font-size: .7vw; letter-spacing: .18em; }
  .form-group input, .form-group select, .form-group textarea { font-size: 1vw; padding: 1vw 1.2vw; }
  .btn-submit { font-size: .8vw; letter-spacing: .2em; padding: 1.1vw 2.4vw; }
  .h-scroll-track p { font-size: 1.05vw; line-height: 1.7; }
  .h-scroll-track h2 { font-size: 6.6vw; line-height: .92; }
  .h-scroll-track h3 { font-size: 1.5vw; }
  .h-scroll-track .cta-link { font-size: .8vw; letter-spacing: .18em; padding: .9vw 0; gap: .6vw; }
  .h-scroll-track .label { font-size: .75vw; letter-spacing: .2em; }
  .h-scroll-track .percorsi-teaser { flex: 0 0 140vw !important; width: 140vw; height: 100vh; padding: 6vh 5vw; display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 6vw; overflow: hidden; }
  .h-scroll-track .percorsi-header { flex: 0 0 32%; max-width: 32%; text-align: left; margin-bottom: 0; }
  .h-scroll-track .percorsi-header h2.percorsi-title { font-size: 6.6vw; line-height: .95; margin-bottom: 1vw; text-align: left; }
  .h-scroll-track .percorsi-header .percorsi-subtitle { font-size: 1.75vw; line-height: 1.2; margin-bottom: 1.5vw; max-width: 30ch; margin-left: 0; margin-right: 0; }
  .h-scroll-track .percorsi-header .percorsi-desc { font-size: 1.05vw; line-height: 1.7; max-width: 38ch; margin: 0 0 2vw 0; text-align: left; }
  .h-scroll-track .percorsi-cta { display: inline-flex; margin-top: 0; }
  .h-scroll-track .percorsi-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; max-width: none; }
  .h-scroll-track .percorso-card { max-width: 100%; }
  
  .blog-h-panel { flex: 0 0 140vw !important; width: 140vw !important; height: 100vh; padding: 6vh 0; display: flex; align-items: center; }
  .blog-h-panel .blog-layout { display: grid; grid-template-columns: minmax(380px, 38%) 1fr; align-items: center; gap: clamp(4rem, 8vw, 10rem); padding: 0 clamp(4rem, 7vw, 8rem); width: 100%; max-width: 100%; }
  .blog-h-panel .blog-strip-text { text-align: left; }
  .blog-h-panel .blog-h1 { font-size: 6.6vw; line-height: .92; margin-bottom: 1vw; color: var(--calce); }
  .blog-h-panel .blog-h2 { font-size: 1.1vw; line-height: 1.55; color: rgba(245,242,229,.8); max-width: 40ch; margin-bottom: 2vw; }
  .blog-h-panel .blog-overtitle { font-size: .75vw; letter-spacing: .25em; color: var(--vesta); margin-bottom: 1.5vw; }
  .blog-h-panel .blog-carousel { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 2vw; width: 100%; overflow: visible; margin-left: -50px; }
  .blog-h-panel .blog-card { max-width: 100%; height: auto; }
}


/* ========================================================================
   LENIS SMOOTH SCROLL + LONG-FORM VERTICAL LAYOUT
   Solo desktop ≥ 901px. Mobile sarà gestito in seconda battuta.
   ========================================================================= */

/* Impostazioni base Lenis (Lenis aggiunge classi .lenis e .lenis-smooth al <html>) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (min-width: 901px) {

  /* ========= WRAPPER PRINCIPALE ========= */
  #smooth-wrapper {
    position: relative;
    width: 100%;
    z-index: 10;
  }

  /* ========= SEZIONI VERTICALI (1 viewport) ========= */
  .vsec {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  /* ========= MACRO-SEZIONI ORIZZONTALI (pin + scrub) =========
     La sezione è alta N viewport (ReservedHeight) nel flow verticale.
     Il figlio .hsec-pin è 100vh ed è PINNATO da ScrollTrigger.
     La track interna .hsec-track è larga N * 100vw e scorre in X. */
  .hsec {
    position: relative;
    width: 100vw;
    /* height è calcolata via JS: (data-slides) * 100vh */
  }
  .hsec-pin {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .hsec-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
  }
  .hslide {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  /* ========= TIPOGRAFIA COMUNE ========= */
  .overtitle {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--vesta);
    margin: 0 0 var(--space-xs);
  }
  .display-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 300;
    color: var(--calce);
    line-height: .92;
    letter-spacing: -.025em;
    margin: 0;
  }
  .body-lead {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.25vw, 1.3rem);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(245,242,229,.82);
    margin: 0;
  }
  .cta-major {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vesta);
    text-decoration: none;
    padding: .9rem 0;
    border-bottom: 1px solid var(--vesta);
    transition: color .3s ease, border-color .3s ease, letter-spacing .3s ease;
    margin-top: var(--space-sm);
  }
  .cta-major:hover {
    color: var(--calce);
    border-color: var(--calce);
    letter-spacing: .28em;
  }

  /* ========= REVEAL ANIMATIONS (data-reveal) ========= */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
  [data-reveal][data-reveal-delay="1"] { transition-delay: .12s; }
  [data-reveal][data-reveal-delay="2"] { transition-delay: .24s; }
  [data-reveal][data-reveal-delay="3"] { transition-delay: .36s; }

  /* ============================================================
     SEZIONE 1 — OPENING LOGO
     ============================================================ */
  .vsec-opening-logo { background: var(--calce); }
  .vsec-opening-logo .opening-logo-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    transform-origin: center center;
    overflow: visible;
  }
  .vsec-opening-logo .logo-phase {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  .vsec-opening-logo .logo-big { width: clamp(280px, 25vw, 480px); }
  .vsec-opening-logo .logo-big img { width: 100%; height: auto; display: block; }
  .vsec-opening-logo .flower-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .vsec-opening-logo #flowerBG { z-index: 1; }
  .vsec-opening-logo #flowerMid { z-index: 2; }
  .vsec-opening-logo #flowerFG { z-index: 4; }
  .vsec-opening-logo .scroll-hint-opening {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
  }
  .vsec-opening-logo .scroll-blob {
    background: var(--chia);
    color: var(--poseidone);
    padding: .6rem 1.3rem;
    border-radius: 50% 50% 50% 20%/40% 60% 40% 60%;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .25em;
    text-transform: uppercase;
  }
  .vsec-opening-logo .scroll-hint-opening .line {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, var(--chia), transparent);
  }

  /* ============================================================
     SEZIONE 2 — OPENING HERO (video fisso trasparente)
     ============================================================ */
  .vsec-opening-hero {
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .vsec-opening-hero .hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,31,56,.75) 0%, rgba(5,31,56,.25) 45%, transparent 85%);
    pointer-events: none;
  }
  .vsec-opening-hero .hero-content {
    position: relative;
    z-index: 2;
    color: var(--calce);
    padding: 0 var(--space-md) 18vh;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
  }
  .vsec-opening-hero .hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5.5vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0 0 var(--space-sm);
  }
  .vsec-opening-hero .hero-h1 em {
    font-style: italic;
    color: var(--vesta);
  }
  .vsec-opening-hero .hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.3rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(245,242,229,.85);
    max-width: 62ch;
    margin: 0;
  }

  /* ============================================================
     SERVIZI — Slide 1: maschera mercurio + H2
     ============================================================ */
  .hslide-servizi-mask {
    background: linear-gradient(to bottom,
      transparent 0,
      transparent calc(100vw * 1000 / 1920),
      var(--poseidone) calc(100vw * 1000 / 1920));
    display: flex;
    align-items: center;
  }
  .hslide-servizi-mask .servizi-mask-layer {
    position: absolute;
    left: 0; top: 0;
    width: 100vw;
    height: 100vh;
    background: var(--poseidone);
    -webkit-mask-image: url(/assets/masks/mask-mercurio-services.svg);
    mask-image: url(/assets/masks/mask-mercurio-services.svg);
    -webkit-mask-size: 100vw calc(100vw * 1000 / 1920);
    mask-size: 100vw calc(100vw * 1000 / 1920);
    -webkit-mask-position: left top;
    mask-position: left top;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
  }
  .hslide-servizi-mask .servizi-mask-text {
    position: relative;
    z-index: 2;
    padding-left: calc(100vh + 6vw);
    padding-right: var(--space-md);
  }

  /* ============================================================
     SERVIZI — Slide 2: testo + CTA
     ============================================================ */
  .hslide-servizi-text {
    background: var(--poseidone);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4rem, 10vw, 12rem);
  }
  .hslide-servizi-text .intro-block {
    max-width: 72ch;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.5vw, 1.5rem);
    align-items: flex-start;
  }

  /* ============================================================
     SERVIZI — Slide 3: flower wrapper (riusa .flower-petal esistente)
     ============================================================ */
  .hslide-servizi-flower {
    background: var(--poseidone);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hslide-servizi-flower .flower-stage {
    position: relative;
    width: 80vw;
    min-width: 900px;
    height: 100%;
  }

  /* ============================================================
     WEDDING — Slide 1: title
     ============================================================ */
  .hslide-wedding-title {
    background: var(--poseidone);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4rem, 8vw, 10rem);
  }
  .hslide-wedding-title .wedding-title-block {
    max-width: 80ch;
  }
  .hslide-wedding-title .display-title {
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: .95;
  }

  /* ============================================================
     WEDDING — Slide 2: text + CTA
     ============================================================ */
  .hslide-wedding-text {
    background: var(--poseidone);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4rem, 10vw, 12rem);
  }
  .hslide-wedding-text .intro-block {
    max-width: 72ch;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.5vw, 1.5rem);
    align-items: flex-start;
  }

  /* ============================================================
     WEDDING — Slide 3: lista servizi accordion
     ============================================================ */
  .hslide-wedding-services {
    background: var(--calce);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4rem, 8vw, 10rem);
  }
  .hslide-wedding-services .wedding-services-list {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
  }
  .hslide-wedding-services .sv-item {
    border-bottom: 1px solid rgba(5,31,56,.12);
  }
  .hslide-wedding-services .sv-item:first-child {
    border-top: 1px solid rgba(5,31,56,.12);
  }

  /* ============================================================
     CHI SIAMO — Slide 1: isola + testo
     ============================================================ */
  .hslide-chi-intro {
    background: var(--poseidone);
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    padding: 0 clamp(2rem, 4vw, 4rem);
    gap: clamp(2rem, 4vw, 4rem);
  }
  .hslide-chi-intro .island-blob {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 80vh;
    max-width: 80vh;
    justify-self: end;
  }
  .hslide-chi-intro .chi-center {
    max-width: 60ch;
  }
  .hslide-chi-intro .chi-center .display-title .wave-word {
    color: var(--chia);
    font-style: italic;
  }

  /* ============================================================
     CHI SIAMO — Slide 2: accordion
     ============================================================ */
  .hslide-chi-accordion {
    background: var(--poseidone);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4rem, 8vw, 10rem);
  }
  .hslide-chi-accordion .chi-accordion {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
  }

  /* ============================================================
     METODO — Slide 1: intro header
     ============================================================ */
  .hslide-metodo-intro {
    background: var(--calce);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4rem, 8vw, 10rem);
  }
  .hslide-metodo-intro .metodo-header {
    max-width: 72ch;
  }
  .hslide-metodo-intro .display-title { color: var(--poseidone); }
  .hslide-metodo-intro .body-lead { color: rgba(5,31,56,.75); }
  .hslide-metodo-intro .overtitle { color: var(--poseidone); }
  .hslide-metodo-intro .cta-major { color: var(--poseidone); border-bottom-color: var(--poseidone); }
  .hslide-metodo-intro .cta-major:hover { color: var(--vesta); border-bottom-color: var(--vesta); }

  /* ============================================================
     METODO — Slide 2: ring con albero + 4 fasi
     ============================================================ */
  .hslide-metodo-ring {
    background: var(--calce);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hslide-metodo-ring .metodo-ring {
    position: relative;
    width: 80vh;
    height: 80vh;
    max-width: 900px;
    max-height: 900px;
  }

  /* ============================================================
     METODO — Slide 3: chiusura manifesto
     ============================================================ */
  .hslide-metodo-outro {
    background: var(--calce);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(4rem, 8vw, 10rem);
  }
  .hslide-metodo-outro .metodo-outro {
    max-width: 64ch;
    text-align: center;
  }
  .hslide-metodo-outro .display-title { color: var(--poseidone); }
  .hslide-metodo-outro .body-lead { color: rgba(5,31,56,.75); }
  .hslide-metodo-outro .overtitle { color: var(--poseidone); }
  .hslide-metodo-outro .cta-major { color: var(--poseidone); border-bottom-color: var(--poseidone); }
  .hslide-metodo-outro .cta-major:hover { color: var(--vesta); border-bottom-color: var(--vesta); }

  /* ============================================================
     ECHOES OF MINATO — 1 viewport
     ============================================================ */
  .vsec-echoes {
    background: var(--poseidone);
    display: flex;
    align-items: center;
  }
  .vsec-echoes .echoes-layout {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
  }
  .vsec-echoes .echoes-text {
    max-width: 50ch;
  }
  .vsec-echoes .echoes-feature {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    justify-self: end;
    width: 100%;
    max-width: 70vh;
  }
  .vsec-echoes .bcf-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }
  .vsec-echoes .bcf-photo-blob {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 45% 55% 48% 52%/40% 45% 55% 60%;
    filter: grayscale(0.4);
    transition: filter 1s ease, transform .9s cubic-bezier(.22,1,.36,1);
  }
  .vsec-echoes .bcf-wrap:hover .bcf-photo-blob {
    filter: grayscale(0);
    transform: scale(1.02);
  }
  .vsec-echoes .bcf-cream-blob {
    position: absolute;
    left: 8%;
    bottom: 8%;
    width: 62%;
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    background: var(--calce);
    border-radius: 55% 45% 55% 45%/60% 50% 50% 40%;
    z-index: 2;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
  }
  .vsec-echoes .bcf-overline {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gaia, #8c4227);
    margin: 0 0 .5rem;
    line-height: 1.4;
  }
  .vsec-echoes .bcf-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    font-weight: 300;
    color: var(--poseidone);
    line-height: 1.1;
    margin: 0 0 .5rem;
  }
  .vsec-echoes .bcf-subtitle {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 300;
    color: rgba(5,31,56,.75);
    margin: 0;
    font-style: italic;
  }

  /* ============================================================
     CONTATTI — 1 viewport (form a due colonne con testo)
     ============================================================ */
  .vsec-contatti {
    background: var(--calce);
    display: flex;
    align-items: center;
    overflow-y: auto;
  }
  .vsec-contatti .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(2rem, 4vh, 4rem) var(--space-md);
    width: 100%;
    display: grid;
    grid-template-columns: 45% 55%;
    gap: clamp(3rem, 5vw, 6rem);
    align-items: start;
  }
  .vsec-contatti .contatti-text {
    max-width: 48ch;
  }
  .vsec-contatti .display-title { color: var(--poseidone); }
  .vsec-contatti .body-lead { color: rgba(5,31,56,.78); }
  .vsec-contatti .overtitle { color: var(--vesta); }

} /* end @media (min-width: 901px) */


/* ========================================================================
   MOBILE FALLBACK (<901px) — layout verticale impilato
   Temporaneo: mobile definitivo verrà sviluppato dopo desktop.
   Obiettivo: fare vedere tutto il contenuto in scroll nativo verticale,
   senza orizzontale, senza pin, senza smooth scroll.
   ========================================================================= */
@media (max-width: 900px) {

  html, body { overflow-x: hidden; }
  body { height: auto; }

  /* Hero video fisso: riduci impatto, diventa decorativo */
  .hero-video { height: 100vh; }

  /* Smooth wrapper: scroll nativo, sezioni in flow normale */
  #smooth-wrapper {
    position: relative;
    width: 100%;
    z-index: 10;
  }

  /* ========= SEZIONI VERTICALI: sempre 100vh ========= */
  .vsec {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
  }

  /* ========= MACRO-SEZIONI ORIZZONTALI → VERTICALI IMPILATE =========
     Ogni .hslide diventa una sezione 100vh impilata.
     .hsec-pin perde il pin, diventa flex column. */
  .hsec {
    width: 100vw;
    height: auto !important; /* annulla l'altezza impostata dal JS */
  }
  .hsec-pin {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: visible;
  }
  .hsec-track {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    transform: none !important; /* anche se JS prova a settare x */
  }
  .hslide {
    flex: 0 0 auto;
    width: 100%;
    min-height: 100vh;
    height: auto;
    position: relative;
  }

  /* ========= BACKGROUNDS delle sezioni (necessari su mobile, perché
     le regole di colore sono dentro @media min-width:901px) ========= */
  .vsec-opening-logo { background: var(--calce); }
  .vsec-opening-hero { background: transparent; }
  .hslide-servizi-mask {
    background: linear-gradient(to bottom,
      transparent 0,
      transparent calc(100vw * 1000 / 1920),
      var(--poseidone) calc(100vw * 1000 / 1920));
  }
  .hslide-servizi-text,
  .hslide-servizi-flower,
  .hslide-wedding-title,
  .hslide-wedding-text,
  .hslide-chi-intro,
  .hslide-chi-accordion {
    background: var(--poseidone);
  }
  .hslide-wedding-services,
  .hslide-metodo-intro,
  .hslide-metodo-ring,
  .hslide-metodo-outro,
  .vsec-contatti {
    background: var(--calce);
  }
  .vsec-echoes { background: var(--poseidone); }

  /* ========= TIPOGRAFIA: ridimensiona per mobile ========= */
  /* I colori base sono ereditati dal desktop (color: calce/poseidone),
     ma su mobile le regole desktop sono fuori media query. Li riapplico qui. */
  .display-title {
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--calce);
    font-family: var(--font-display);
    font-weight: 300;
    margin: 0;
  }
  .body-lead {
    font-size: clamp(.95rem, 4vw, 1.1rem);
    line-height: 1.65;
    color: rgba(245,242,229,.82);
    font-family: var(--font-body);
    font-weight: 300;
    margin: 0;
  }
  .overtitle {
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vesta);
    font-family: var(--font-mono);
    font-weight: 500;
    margin: 0 0 var(--space-xs);
  }
  .cta-major {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vesta);
    font-family: var(--font-mono);
    font-weight: 500;
    text-decoration: none;
    padding: .9rem 0;
    border-bottom: 1px solid var(--vesta);
    margin-top: var(--space-sm);
  }

  /* Inversioni su slide con background chiaro */
  .hslide-wedding-services .display-title,
  .hslide-wedding-services .body-lead,
  .hslide-wedding-services .overtitle,
  .hslide-metodo-intro .display-title,
  .hslide-metodo-intro .body-lead,
  .hslide-metodo-ring .display-title,
  .hslide-metodo-outro .display-title,
  .hslide-metodo-outro .body-lead,
  .vsec-contatti .display-title,
  .vsec-contatti .body-lead {
    color: var(--poseidone);
  }
  .vsec-contatti .body-lead { color: rgba(5,31,56,.78); }
  .hslide-metodo-intro .body-lead,
  .hslide-metodo-outro .body-lead { color: rgba(5,31,56,.75); }
  .hslide-metodo-intro .overtitle,
  .hslide-metodo-outro .overtitle,
  .vsec-contatti .overtitle { color: var(--vesta); }
  .hslide-metodo-intro .cta-major,
  .hslide-metodo-outro .cta-major {
    color: var(--poseidone);
    border-bottom-color: var(--poseidone);
  }

  /* Padding comune slide: interno generoso mobile */
  .hslide-servizi-mask,
  .hslide-servizi-text,
  .hslide-servizi-flower,
  .hslide-wedding-title,
  .hslide-wedding-text,
  .hslide-wedding-services,
  .hslide-chi-intro,
  .hslide-chi-accordion,
  .hslide-metodo-intro,
  .hslide-metodo-ring,
  .hslide-metodo-outro {
    padding: clamp(4rem, 12vh, 6rem) 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  /* ============================================================
     OPENING LOGO (mobile) — centrato e scalato sul viewport
     Sovrascrivo il fitStage() del JS con regole esplicite.
     ============================================================ */
  .vsec-opening-logo .opening-logo-stage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .vsec-opening-logo .logo-phase {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 3;
  }
  .vsec-opening-logo .logo-big {
    width: clamp(200px, 55vw, 320px);
  }
  /* Fiori: nascondo i fiori posizionati in px assoluti basati su 1920×1080
     (appaiono tagliati e fuori scala). Lascio solo un decoro semplice. */
  .vsec-opening-logo .flower-layer {
    opacity: .5;
    transform: scale(.4);
    transform-origin: center center;
  }
  .vsec-opening-logo .scroll-hint-opening {
    bottom: 4vh;
  }

  /* ============================================================
     OPENING HERO (mobile) — tagline leggibile
     ============================================================ */
  .vsec-opening-hero .hero-content {
    padding: 0 1.5rem 15vh;
    max-width: 100%;
  }
  .vsec-opening-hero .hero-h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.05;
  }
  .vsec-opening-hero .hero-subtitle {
    font-size: clamp(.9rem, 3.5vw, 1.05rem);
  }

  /* ============================================================
     SERVIZI slide 1 — maschera mercurio mobile
     ============================================================ */
  .hslide-servizi-mask {
    padding-top: 60vw;
  }
  .hslide-servizi-mask .servizi-mask-layer {
    position: absolute;
    left: 0; top: 0;
    width: 100vw;
    height: calc(100vw * 1000 / 1920);
    background: var(--poseidone);
    -webkit-mask-image: url(/assets/masks/mask-mercurio-services.svg);
    mask-image: url(/assets/masks/mask-mercurio-services.svg);
    -webkit-mask-size: 100vw calc(100vw * 1000 / 1920);
    mask-size: 100vw calc(100vw * 1000 / 1920);
    -webkit-mask-position: left top;
    mask-position: left top;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
  }
  .hslide-servizi-mask .servizi-mask-text {
    position: relative;
    z-index: 2;
    padding-left: 0;
    padding-right: 0;
  }

  /* ============================================================
     OPENING HERO mobile — gradient overlay e content
     ============================================================ */
  .vsec-opening-hero .hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,31,56,.85) 0%, rgba(5,31,56,.45) 50%, transparent 100%);
    pointer-events: none;
  }
  .vsec-opening-hero .hero-content {
    position: relative;
    z-index: 2;
    color: var(--calce);
    padding: 0 1.5rem 15vh;
    max-width: 100%;
  }
  .vsec-opening-hero .hero-h1 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--calce);
    font-size: clamp(2rem, 8vw, 3rem);
    margin: 0 0 var(--space-sm);
  }
  .vsec-opening-hero .hero-h1 em { font-style: italic; color: var(--vesta); }
  .vsec-opening-hero .hero-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(245,242,229,.85);
    font-size: clamp(.9rem, 3.5vw, 1.05rem);
    margin: 0;
  }

  /* ============================================================
     ECHOES (mobile) — layout e featured card
     ============================================================ */
  .vsec-echoes .echoes-layout {
    display: grid;
    grid-template-columns: 1fr;
    padding: 4rem 1.5rem;
    gap: 2rem;
    align-items: center;
  }
  .vsec-echoes .echoes-feature {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 60vh;
    max-width: 80vw;
    justify-self: center;
    width: 100%;
  }
  .vsec-echoes .bcf-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }
  .vsec-echoes .bcf-photo-blob {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 45% 55% 48% 52%/40% 45% 55% 60%;
    filter: grayscale(.4);
  }
  .vsec-echoes .bcf-cream-blob {
    position: absolute;
    left: 8%;
    bottom: 8%;
    width: 62%;
    padding: 1.2rem;
    background: var(--calce);
    border-radius: 55% 45% 55% 45%/60% 50% 50% 40%;
    z-index: 2;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
  }
  .vsec-echoes .bcf-overline {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gaia, #8c4227);
    margin: 0 0 .3rem;
    line-height: 1.4;
  }
  .vsec-echoes .bcf-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--poseidone);
    line-height: 1.1;
    margin: 0 0 .3rem;
  }
  .vsec-echoes .bcf-subtitle {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 300;
    color: rgba(5,31,56,.75);
    margin: 0;
    font-style: italic;
  }

  /* ============================================================
     CHI SIAMO slide 1 mobile — layout stacked
     ============================================================ */
  .hslide-chi-intro {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2rem;
    padding: 4rem 1.5rem;
  }
  .hslide-chi-intro .island-blob {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 45vh;
    max-width: 70vw;
    justify-self: center;
  }
  .hslide-chi-intro .chi-center {
    text-align: center;
    max-width: 100%;
  }
  .hslide-chi-intro .display-title .wave-word {
    color: var(--chia);
    font-style: italic;
  }

  /* ============================================================
     SERVIZI slide 3 — flower wrapper mobile
     Su mobile il sistema a 6 petali non ha senso a 320-400px.
     Transformo in grid 2 colonne 3 righe, card piatte, niente 
     satellite-rotation.
     ============================================================ */
  .hslide-servizi-flower {
    padding: clamp(4rem, 8vh, 6rem) 1rem;
  }
  .hslide-servizi-flower .flower-stage {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .hslide-servizi-flower .flower-petal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    aspect-ratio: 1;
  }
  .hslide-servizi-flower .flower-petal.petal-center {
    grid-column: 1 / span 2;
    aspect-ratio: 2 / 1;
  }
  /* Card interna riempie il petalo */
  .hslide-servizi-flower .percorso-card {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }
  .hslide-servizi-flower .close-petal { display: none; }

  /* ============================================================
     WEDDING (mobile)
     ============================================================ */
  .hslide-wedding-title .display-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  .hslide-wedding-services .wedding-services-list {
    padding: 0;
  }
  .hslide-wedding-services .sv-trigger {
    font-size: 1rem;
    padding: 1rem 0;
  }

  /* ============================================================
     CHI SIAMO (mobile) — isola sopra, testo sotto
     ============================================================ */
  .hslide-chi-intro {
    grid-template-columns: 1fr;
    padding: 4rem 1.5rem;
    gap: 2rem;
  }
  .hslide-chi-intro .island-blob {
    max-height: 50vh;
    max-width: 70vw;
    justify-self: center;
  }
  .hslide-chi-intro .chi-center {
    text-align: center;
  }
  .hslide-chi-accordion .chi-accordion {
    padding: 0;
  }

  /* ============================================================
     METODO (mobile)
     ============================================================ */
  .hslide-metodo-intro .metodo-header {
    max-width: 100%;
  }
  /* Ring: metti albero in alto, fasi sotto in lista */
  .hslide-metodo-ring .metodo-ring {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .hslide-metodo-ring .m-tree {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 60vw;
    height: auto;
    align-self: center;
  }
  .hslide-metodo-ring .m-phase {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
  }

  /* ============================================================
     ECHOES (mobile) — testo sopra, feature sotto
     ============================================================ */
  .vsec-echoes .echoes-layout {
    grid-template-columns: 1fr;
    padding: 4rem 1.5rem;
    gap: 2rem;
  }
  .vsec-echoes .echoes-feature {
    max-height: 50vh;
    max-width: 80vw;
    justify-self: center;
  }

  /* ============================================================
     CONTATTI (mobile)
     ============================================================ */
  .vsec-contatti {
    min-height: auto;
    height: auto;
    padding: 0;
    overflow-y: visible;
  }
  .vsec-contatti .container {
    grid-template-columns: 1fr;
    padding: 4rem 1.5rem;
    gap: 2rem;
  }
  .vsec-contatti .form-row {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }

  /* Hamburger sopra tutto */
  .hamburger { z-index: 200; }

  /* Reveal animations: attiva subito su mobile (no scroll-trigger) */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

}  /* end @media (max-width: 900px) */