/* The home in the style «Metamorfosi» (piano 18). Colours only from tokens.css: every section
   carries its theme (data-theme) and the tokens follow it. With WebGL (html.gl-on) the sections
   are transparent and metamorfosi.js draws their colours behind them, with a liquid edge;
   without it each section paints its own background (base.css). */

.meta-gl { position: fixed; left: 0; top: 0; z-index: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; pointer-events: none; }
.meta-home main, .meta-home .site-footer { position: relative; z-index: 1; }
.meta-home main { transition: opacity .55s var(--ease-standard), transform .9s var(--ease-standard); }
.meta-home main.away { opacity: 0; transform: scale(.965); pointer-events: none; }
.gl-on main section[data-shape], .gl-on main .theme-block[data-theme], .gl-on .site-footer[data-theme] { background: transparent; }
.no-gl .meta-gl { display: none; }
/* The header shows the theme of the section under it (data-theme from the script); it goes
   up while scrolling down and comes back while scrolling up. */
.meta-home .site-header { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color: transparent; transition: transform var(--dur-section) var(--ease-standard), background var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard); }
.meta-home .site-header.is-away:not(.is-open) { transform: translateY(-110%); }

/* Introduction: the particles write «voxaris», then become the voice. */
.meta-intro { position: fixed; inset: 0; z-index: 60; pointer-events: none; color: var(--text); transition: opacity .7s var(--ease-standard); }
.meta-intro.gone { opacity: 0; }
.meta-count { position: absolute; left: max(var(--s-5), calc((100vw - var(--page)) / 2)); bottom: clamp(18px, 4vh, 40px); font: 200 clamp(3.4rem, 8vw, 8rem)/1 var(--font-display); font-stretch: 62%; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.meta-tag { position: absolute; left: 0; right: 0; top: calc(50% + clamp(70px, 13vh, 130px)); text-align: center; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.meta-tag span { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(6px); transition: opacity .7s, transform .9s var(--ease-standard), filter .7s; transition-delay: calc(var(--i) * 28ms); }
.meta-intro.say .meta-tag span { opacity: 1; transform: none; filter: none; }
.intro-on .site-header, .intro-on .mh-cue { opacity: 0; transform: translateY(-24px); }
.meta-home .site-header { transition: transform var(--dur-section) var(--ease-standard), opacity .8s var(--ease-standard), background var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard); }

/* Cursor: a precise dot and a ring that follows, with a label on the things that open. */
.has-cursor, .has-cursor * { cursor: none !important; }
.meta-cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; mix-blend-mode: difference; display: none; opacity: 0; transition: opacity .3s; }
.has-cursor .meta-cursor { display: block; }
.meta-cursor.on { opacity: 1; }
.meta-cursor .dot, .meta-cursor .ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.meta-cursor .dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--paper); }
.meta-cursor .ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.meta-cursor .ring i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--paper); transition: transform var(--dur-section) var(--ease-standard), background var(--dur-ui); }
.meta-cursor .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-stretch: 112%; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.05; color: var(--ink); opacity: 0; transition: opacity .25s; }
.meta-cursor.big .ring i { transform: scale(1.95); background: var(--paper); }
.meta-cursor.big .ring b { opacity: 1; }
.meta-cursor.big .dot { opacity: 0; }

/* Things that appear after the introduction, one after the other. */
.mh-in { transition: opacity 1s var(--ease-standard), transform 1.2s var(--ease-standard); transition-delay: var(--d, 0ms); }
.meta-js .mh-in { opacity: 0; transform: translateY(24px); }
.meta-js.ready .mh-in { opacity: 1; transform: none; }
.mh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; }

/* 01 · Hero: title that breathes, the form in the first screen. */
.mh-hero { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: grid; align-content: center; gap: var(--s-5); padding: var(--s-5) 0 var(--s-7); }
.mh-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.mh-hero-copy { width: min(58%, 800px); display: grid; gap: var(--s-4); }
.mh-kinetic { font-size: clamp(3rem, 5.4vw, 6rem); line-height: .93; letter-spacing: -0.028em; margin: var(--s-2) 0 var(--s-2); }
.mh-kinetic .row { display: block; white-space: nowrap; overflow: hidden; padding: 0.04em 0.2em 0.1em 0; margin: -0.04em -0.2em -0.1em 0; }
.mh-kinetic .ch { display: inline-block; transform-origin: 0 100%; transition: transform 1.15s var(--ease-standard), opacity .5s; transition-delay: calc(var(--i) * 36ms + var(--rd, 0ms)); }
.meta-js .mh-kinetic .ch { opacity: 0; transform: translateY(112%) rotate(7deg); }
.meta-js.ready .mh-kinetic .ch { opacity: 1; transform: none; }
.mh-kinetic .serif-row { position: relative; padding-bottom: 0.3em; }
.mh-kinetic .serif { font-size: 1.12em; line-height: .85; }
.uwave { position: absolute; left: 0; bottom: -0.02em; width: 4.1em; height: 0.34em; overflow: visible; transition: opacity 1.2s .9s; }
.meta-js .uwave { opacity: 0; }
.meta-js.ready .uwave { opacity: 1; }
.uwave path { fill: none; stroke: var(--accent-text); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mh-sub { margin: 0; font: 650 clamp(1.15rem, 1.6vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -0.015em; }
.mh-hero .lead { margin: 0; }
.mh-dock .call-form { margin: 0; }
.mh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.mh-cue { position: absolute; left: max(var(--s-5), calc((100vw - var(--page)) / 2)); bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-12); font-weight: 650; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); transition: opacity .8s; }
.mh-cue i { position: relative; width: 64px; height: 1px; overflow: hidden; background: var(--line-strong); }
.mh-cue i::after { content: ""; position: absolute; inset: 0; background: var(--text); transform: translateX(-100%); animation: mh-cue 2.2s var(--ease-emph) infinite; }
@keyframes mh-cue { 60%, 100% { transform: translateX(100%); } }

/* The sample call next to the voice: tabs for the six sectors, lines written live, then what
   the assistant understood. A night card in both themes. */
.mh-talk, .mh-talkbox { border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); padding: var(--s-4) var(--s-4) var(--s-3); }
.mh-talk { position: absolute; right: max(var(--s-5), calc(25vw - min(220px, 19vw))); top: max(var(--s-5), calc(40vh - 300px)); z-index: 3; width: min(440px, 38vw); opacity: 0; transform: translateY(30px) scale(.94); transform-origin: 80% 100%; transition: opacity .5s var(--ease-standard), transform .8s var(--ease-standard); }
.mh-talk.show { opacity: 1; transform: none; }
.mh-talk-head { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-14); color: var(--text-soft); }
.mh-talk-head .mh-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--verm); animation: mh-ping 1.6s infinite; }
@keyframes mh-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verm) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 12px transparent; } }
.mh-talk-head .ttl { flex: 1; font-weight: 650; color: var(--text); }
.mh-talk-head .tm { font-variant-numeric: tabular-nums; }
.mh-talk-head .x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); cursor: pointer; }
.mh-talk-head .x .icon { width: 16px; height: 16px; }
.bars { display: flex; align-items: center; gap: 3px; height: 22px; }
.bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent-text); transform: scaleY(.15); }
.mh-talk-tabs { display: flex; gap: 6px; margin-top: var(--s-3); overflow-x: auto; scrollbar-width: none; }
.mh-talk-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 0 12px 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--text-soft); font-size: var(--fs-12); font-weight: 620; cursor: pointer; }
.mh-talk-tab .icon { width: 16px; height: 16px; color: var(--c); }
.mh-talk-tab[aria-selected="true"] { color: var(--on-scv); background: var(--c); border-color: transparent; }
.mh-talk-tab[aria-selected="true"] .icon { color: var(--on-scv); }
.mh-talk .lines, .mh-talkbox .lines { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 236px; margin-top: var(--s-3); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, black 16%); mask-image: linear-gradient(to bottom, transparent, black 16%); }
.msg { flex: none; max-width: 88%; padding: 9px 13px 10px; border-radius: 18px; font-size: 15px; line-height: 1.42; animation: mh-pop .55s var(--ease-standard); }
@keyframes mh-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.msg .who { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; font-stretch: 120%; letter-spacing: 0.12em; text-transform: uppercase; opacity: .7; }
.msg.user { align-self: flex-end; background: var(--surface-2); border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: var(--text); color: var(--on-text); border-bottom-left-radius: 6px; }
.mh-receipt { margin-top: var(--s-3); border-radius: 18px; background: var(--text); color: var(--on-text); max-height: 0; overflow: hidden; padding: 0 var(--s-4); opacity: 0; transform: scale(1.12) rotate(-4deg); transition: opacity .35s, transform .7s var(--ease-spring), max-height .5s var(--ease-standard), padding .5s; }
.mh-receipt.show { max-height: 260px; padding-block: var(--s-3); opacity: 1; transform: rotate(-1.2deg); }
.rc-head { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.rc-head svg { width: 22px; height: 22px; fill: none; stroke: var(--verm); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-head path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .7s var(--ease-standard) .35s; }
.mh-receipt.show .rc-head path { stroke-dashoffset: 0; }
.rc-rows { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 10px 0 0; font-size: var(--fs-14); }
.rc-rows dt { opacity: .7; }
.rc-rows dd { margin: 0; font-weight: 620; }
.mh-talk .hint { margin-top: var(--s-2); }

/* 02 · Night: the clock rolls to 23:47. */
.mh-night { min-height: 130vh; display: flex; align-items: center; padding: 18vh 0; }
.mh-night .mh-copy { grid-column: 2; }
.mh-clock { display: flex; align-items: flex-start; height: 1em; overflow: hidden; margin: var(--s-5) 0 var(--s-4); font: 250 clamp(4.5rem, 9vw, 9.4rem)/1 var(--font-display); font-stretch: 62%; letter-spacing: -0.02em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.mh-clock .col { display: flex; flex-direction: column; transition: transform 2.4s var(--ease-standard); transition-delay: calc(var(--i) * 140ms); }
.mh-clock .col span { height: 1em; }
.mh-clock .sep { animation: mh-blink 1.1s steps(1) infinite; }
@keyframes mh-blink { 50% { opacity: .15; } }
.mh-night h2, .mh-langs h2, .mh-act h2 { font-size: clamp(2.6rem, 6.4vw, 6.9rem); margin-bottom: var(--s-5); }

/* 03 · Listening: the words light up while reading. */
.mh-listen { height: 250vh; }
.mh-stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.mh-listen-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5vw; align-items: start; padding-bottom: 22vh; }
.mh-listen h2 { font-size: clamp(2.2rem, 4.4vw, 4.6rem); margin-top: var(--s-4); }
.mh-script { font: 520 clamp(1.45rem, 2.5vw, 2.6rem)/1.24 var(--font-display); letter-spacing: -0.014em; }
.mh-script p { margin: 0; }
.mh-script .who { display: block; margin: 0 0 10px; font: 650 var(--fs-12)/1.4 var(--font-text); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.mh-script p + .who { margin-top: var(--s-6); }
.wd { opacity: .18; transition: opacity .4s var(--ease-standard); }
.wd.on { opacity: 1; }
.wd.mark { background: linear-gradient(var(--accent-text), var(--accent-text)) 0 94% / 0 .07em no-repeat; transition: opacity .4s var(--ease-standard), background-size .8s var(--ease-standard), color .5s; }
.wd.mark.on { background-size: 100% .07em; color: var(--accent-text); }
.mh-script .note { display: block; margin-top: var(--s-5); font: 400 var(--fs-14)/1.4 var(--font-text); color: var(--text-faint); }

/* Band of what it does: two rows in opposite directions, faster and slanted when scrolling. */
.mh-band { padding: 5vh 0; overflow: hidden; }
.marq { display: flex; width: max-content; white-space: nowrap; font: 820 clamp(2.6rem, 7.2vw, 7.8rem)/1.08 var(--font-display); font-stretch: 112%; letter-spacing: -0.03em; will-change: transform; }
.marq > span { display: inline-flex; align-items: center; }
.marq .st { display: inline-block; width: .42em; height: .42em; margin: 0 .42em; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.marq.r2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.01em; }

/* 04 · What it does: the cards open like a fan while scrolling. */
.mh-act { height: 240vh; }
.mh-act-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.mh-act h2 { font-size: clamp(2.4rem, 5.6vw, 6rem); }
.mh-deck { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.mh-act-card { position: relative; padding: var(--s-5); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-2); will-change: transform; }
.mh-act-card h3 { font-size: clamp(1.1rem, 1.5vw, 1.4rem); margin: 0 var(--s-5) var(--s-2) 0; }
.mh-act-card p { margin: 0 0 var(--s-4); font-size: var(--fs-14); color: var(--text-soft); }
.mh-act-card .dot { position: absolute; top: var(--s-5); right: var(--s-5); width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.mh-act-card .st { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: var(--r-pill); background: var(--text); color: var(--on-text); font-size: var(--fs-14); font-weight: 620; }
.mh-act-card .st svg { width: 18px; height: 18px; fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mh-act-card .st path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .7s var(--ease-standard) .15s; }
.mh-act-card.done .st path { stroke-dashoffset: 0; }

/* The process: a line that draws itself along the steps. */
.mh-process { padding: 16vh 0; }
.mh-process-grid { align-items: start; }
.mh-timeline li { opacity: 0; transform: translateX(-16px); transition: opacity .8s var(--ease-standard), transform 1s var(--ease-standard); transition-delay: calc(var(--i) * 160ms + 200ms); }
.mh-timeline.is-visible li { opacity: 1; transform: none; }
.mh-timeline li:not(:last-child)::after { transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease-standard); transition-delay: calc(var(--i) * 160ms + 400ms); }
.mh-timeline.is-visible li:not(:last-child)::after { transform: none; }

/* 05 · The sectors: a 3D ring to drag; the front card opens its page in its colour. */
.mh-sectors { padding: 12vh 0 10vh; overflow: hidden; }
.mh-sectors-head { display: grid; gap: var(--s-3); max-width: 680px; }
.mh-sectors h2 { font-size: clamp(2.4rem, 5.2vw, 5.6rem); margin: 0; }
.mh-stage { position: relative; height: clamp(410px, 36vw, 540px); margin-top: 1vh; perspective: 1800px; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
.mh-stage.drag { cursor: grabbing; }
.mh-wheel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.mh-card3d { --w: clamp(220px, 18.5vw, 300px); position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -0.66); width: var(--w); height: calc(var(--w) * 1.32); transform-style: preserve-3d; }
.mh-face { position: absolute; inset: 0; overflow: hidden; border-radius: 30px; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--c); color: var(--on-scv); }
.mh-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--paper); opacity: var(--veil, 0); pointer-events: none; }
.mh-face.front { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-5); text-decoration: none; box-shadow: 0 50px 90px -46px color-mix(in srgb, var(--ink) 65%, transparent); }
.mh-face.back { transform: rotateY(180deg); display: grid; place-items: center; filter: saturate(.8) brightness(.92); }
.mh-face.back .icon { width: 44%; height: 44%; color: color-mix(in srgb, var(--on-scv) 35%, transparent); stroke-width: 1.4; }
.mh-face .num { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 650; font-stretch: 125%; letter-spacing: 0.14em; }
.mh-face .num .icon { width: 44px; height: 44px; stroke-width: 1.5; }
.mh-face .txt { display: grid; gap: var(--s-2); }
.mh-face .h { font: 780 clamp(1.8rem, 2.6vw, 2.5rem)/1 var(--font-display); letter-spacing: -0.03em; }
.mh-face .p { font-size: 15px; line-height: 1.38; }
.mh-face .open { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-2); font-weight: 650; font-size: 15px; }
.mh-face .open .icon { width: 18px; height: 18px; transition: transform var(--dur-section) var(--ease-standard); }
.mh-card3d:hover .open .icon { transform: translateX(5px); }
.mh-wheel-nav { display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.round { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text); cursor: pointer; transition: background var(--dur-ui), color var(--dur-ui), transform var(--dur-section) var(--ease-spring); }
.round:hover { background: var(--text); color: var(--on-text); transform: scale(1.08); }
.round .icon { width: 22px; height: 22px; }
.mh-back { transform: rotate(180deg); }
.mh-wheel-nav .dots { display: flex; gap: 8px; }
.mh-wheel-nav .dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--line-strong); transition: width var(--dur-section) var(--ease-standard), background var(--dur-ui); }
.mh-wheel-nav .dots i.on { width: 30px; background: var(--text); }

/* 06 · Languages: the greeting changes language. */
.mh-langs { min-height: 135vh; display: flex; align-items: center; padding: 18vh 0; }
.mh-swap { position: relative; height: 1.15em; margin-top: var(--s-6); font: 300 clamp(2.8rem, 5.6vw, 5.8rem)/1 var(--font-display); font-stretch: 84%; letter-spacing: -0.02em; color: var(--accent-text); }
.mh-swap > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.mh-swap .l { display: inline-block; white-space: pre; transition: opacity .7s var(--ease-standard), filter .7s var(--ease-standard), transform .9s var(--ease-standard); transition-delay: calc(var(--i) * 32ms); }
.mh-swap .gone .l { opacity: 0; filter: blur(10px); transform: translateY(-.35em) scale(.86); }
.mh-swap .wait .l { opacity: 0; filter: blur(10px); transform: translateY(.35em) scale(1.12); transition-duration: 0s; transition-delay: 0s; }

/* 07 · How it works, trust and questions. */
.mh-how { padding: 16vh 0 10vh; }
.mh-trust { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.mh-faq { padding: 6vh 0 18vh; }

/* 08 · The last call to action, on the red. */
/* The top of the red section is the word's (metamorfosi.js, place «cta»); the call to act below it. */
.mh-cta { display: flex; align-items: flex-start; padding: 44vh 0 14vh; text-align: center; }
.mh-cta-wrap { display: grid; justify-items: center; gap: var(--s-5); }
.mh-cta .eyebrow { justify-content: center; }
.mh-cta-title { font-size: clamp(3rem, 12.5vw, 13.4rem); line-height: .9; margin: 0; }
.mh-cta-wrap > * { max-width: 100%; min-width: 0; }
.mh-cta .lead { margin: 0 auto; }
.mh-prices { margin: 0; max-width: 46ch; color: var(--text-soft); }
.mh-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* The sector opened from the ring: a page over the home, in the colour of the sector. */
.mh-scene { position: fixed; inset: 0; z-index: 35; overflow-y: auto; overscroll-behavior: contain; color: var(--text); }
.no-gl .mh-scene { background: var(--bg); }
.mh-scene-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) max(var(--s-5), calc((100vw - var(--page)) / 2)); }
.mh-scene-nav { display: flex; align-items: center; gap: var(--s-3); }
.mh-scene-nav .pos { white-space: nowrap; font-size: 13px; font-weight: 650; font-stretch: 125%; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.mh-scene-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "top call" "bottom call"; column-gap: 5vw; align-items: start; width: min(100% - 2 * var(--s-5), var(--page)); margin: 0 auto; padding: 3vh 0 10vh; }
.sc-top { grid-area: top; }
.sc-bottom { grid-area: bottom; display: grid; gap: var(--s-5); }
.sc-call { grid-area: call; padding-top: clamp(220px, 31vh, 300px); }
.s-in { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-standard), transform .9s var(--ease-standard); }
.mh-scene.in .s-in { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i, 0) * 90ms); }
.s-title { margin: var(--s-5) 0 var(--s-5); overflow: hidden; padding: 0.04em 0.1em 0.1em 0; white-space: nowrap; font-size: clamp(3.6rem, 9.4vw, 10rem); }
.s-title .ch { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease-standard); }
.mh-scene.in .s-title .ch { transform: none; transition-delay: calc(.18s + var(--i) * 34ms); }
.mh-scene .lead { color: var(--text-soft); }
.mh-scene-faq { display: grid; gap: var(--s-3); max-width: 560px; }
.mh-scene-faq div { padding: var(--s-4) var(--s-5); border-radius: 18px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.mh-scene-faq strong { display: block; margin-bottom: 4px; }
.mh-scene-faq p { margin: 0; color: var(--text-soft); font-size: var(--fs-14); }
.mh-talkbox .lines { height: 220px; }
.lock { overflow: hidden; }

/* Sector pages (A2): the first part in the vivid colour of the sector (.sector-vivid, base.css). */
.sector-hero { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: grid; align-content: center; gap: var(--s-4); padding: var(--s-6) 0 var(--s-8); }
.sector-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5vw; align-items: start; }
.sector-hero .hero-copy { display: grid; gap: var(--s-4); }
.sector-hero .eyebrow { margin: 0; }
.sector-hero .hero-copy { container-type: inline-size; }
/* The name always fits its column, also the long one-word names (Personalizzato) on phones. */
.sector-hero h1 { font-size: clamp(2.2rem, calc((100cqi - 76px) / (var(--len, 10) * .62)), 7.6rem); line-height: .92; margin: 0; }
.sector-vivid .sector-title .sector-icon { background: var(--ink); color: var(--sv); box-shadow: none; }
.sector-hero-side { padding-top: clamp(170px, 30vh, 300px); }
.sector-talk .lines { height: auto; min-height: 210px; justify-content: flex-start; -webkit-mask-image: none; mask-image: none; }
.gl-on .sector-page .section-soft { border-block: 0; }
.sector-chip span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--sc)); }

@media (max-width: 860px) {
  .mh-hero-copy { width: 100%; }
}
@media (max-width: 760px) {
  /* Shorter on the phone (owner, 4/11: «per scorrere in basso ci vuole un sacco di tempo»). */
  .mh-hero { align-content: start; padding-top: var(--s-5); }
  .mh-kinetic { font-size: clamp(2.9rem, 14.5vw, 4.5rem); }
  .mh-cue { display: none; }
  .mh-talk { position: fixed; left: 10px; right: 10px; bottom: 10px; width: auto; z-index: 45; }
  .mh-talk .lines { height: min(236px, 34svh); }
  .mh-two, .mh-listen-grid, .mh-act-grid, .mh-trust, .mh-scene-grid { grid-template-columns: minmax(0, 1fr); }
  .mh-night { padding: 12vh 0 10vh; min-height: 0; }
  .mh-listen { height: 175vh; }
  .mh-act { height: 170vh; }
  .mh-process { padding: 9vh 0; }
  .mh-how { padding: 9vh 0 6vh; }
  .mh-faq { padding: 4vh 0 10vh; }
  .mh-night .mh-copy { grid-column: 1; }
  .mh-listen-grid { gap: var(--s-5); padding-bottom: 22vh; }
  .mh-act .mh-stick { align-items: flex-start; padding-top: 12svh; }
  .mh-act h2 { font-size: clamp(2.2rem, 10.5vw, 3.3rem); margin-bottom: var(--s-4); }
  .mh-act .lead { display: none; }
  .mh-deck { grid-template-columns: 1fr; gap: 9px; }
  .mh-act-card { padding: 13px 16px; border-radius: 20px; }
  .mh-act-card p { display: none; }
  .mh-act-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
  .mh-act-card .st { font-size: 13px; padding: 5px 11px 5px 7px; }
  .mh-act-card .dot { top: 15px; right: 16px; }
  .mh-sectors { padding: 8vh 0 6vh; }
  .mh-stage { height: 470px; perspective: 1000px; }
  .mh-card3d { --w: 226px; }
  .mh-langs { padding: 12vh 0 10vh; min-height: 0; }
  .mh-cta { padding: 30vh 0 10vh; }
  .mh-scene-grid { grid-template-areas: "top" "call" "bottom"; row-gap: var(--s-5); padding-top: 26vh; }
  .sector-hero { padding-top: 16svh; }
  .sector-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sector-hero-side { padding-top: 0; }
  .sector-vivid .sector-title .sector-icon { display: none; }
  .sector-hero h1 { font-size: clamp(2.2rem, calc(100cqi / (var(--len, 10) * .62)), 4.6rem); }
  .sc-call { padding-top: 0; }
  .s-title { font-size: clamp(2.9rem, 13vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mh-in, .mh-kinetic .ch, .uwave, .mh-timeline li, .s-in, .s-title .ch { opacity: 1; transform: none; transition: none; }
  .mh-timeline li:not(:last-child)::after { transform: none; }
  .mh-cue i::after, .mh-clock .sep, .mh-talk-head .mh-dot { animation: none; }
}
:root[data-motion="reduce"] .mh-in, :root[data-motion="reduce"] .mh-kinetic .ch, :root[data-motion="reduce"] .uwave,
:root[data-motion="reduce"] .mh-timeline li, :root[data-motion="reduce"] .s-in, :root[data-motion="reduce"] .s-title .ch { opacity: 1; transform: none; transition: none; }