/* M&C MOTION SYSTEM — animazioni visibili, fluide e senza librerie esterne */
:root{--motion-x:50%;--motion-y:50%;--scroll-progress:0}
html{scroll-behavior:smooth}
body{background-image:radial-gradient(ellipse at 80% 10%,rgba(232,245,154,.07),transparent 28%),radial-gradient(ellipse at 12% 48%,rgba(38,132,88,.13),transparent 32%)}
/* Barra di avanzamento dello scroll */
body::after{content:"";position:fixed;z-index:999;top:0;left:0;width:100%;height:3px;transform:scaleX(var(--scroll-progress));transform-origin:left;background:linear-gradient(90deg,#b7d56b,#e8f59a,#fffbd0);box-shadow:0 0 14px #e8f59a88;pointer-events:none}
/* Hero: orbite, bagliore, grana di particelle */
.hero{isolation:isolate;overflow:visible}
.hero::before{content:"";position:absolute;z-index:-1;left:-13%;top:14%;width:min(54vw,650px);aspect-ratio:1;border:1px solid #e8f59a20;border-radius:50%;box-shadow:0 0 0 24px #e8f59a08,0 0 0 62px #e8f59a05,0 0 0 108px #e8f59a03;animation:mc-orbit-drift 16s ease-in-out infinite alternate;pointer-events:none}
.hero-art{isolation:isolate;perspective:1100px;overflow:visible}
.hero-art::after{content:"";position:absolute;z-index:-1;inset:6% 0;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#e8f59a25,transparent 64%);filter:blur(25px);animation:mc-aura 4.8s ease-in-out infinite;pointer-events:none}
.hero-art::before{content:"";position:absolute;z-index:0;inset:12% 8%;border-radius:50%;background:url('assets/logo-emblem.png') center/contain no-repeat;opacity:.105;filter:drop-shadow(0 0 18px #e8f59a35);animation:mc-logo-breathe 8s ease-in-out infinite;pointer-events:none}
.art-orbit{z-index:1;will-change:transform;transform-origin:center;box-shadow:0 0 25px #e8f59a08,inset 0 0 20px #e8f59a05}
.orbit-one{animation:mc-orbit-one 18s linear infinite,mc-orbit-pulse 5s ease-in-out infinite;border-color:#e8f59a55!important}
.orbit-two{animation:mc-orbit-two 24s linear infinite reverse;border-color:#e8f59a45!important}
.orbit-two::before,.orbit-two::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#e8f59a;box-shadow:0 0 18px 5px #e8f59a66;top:50%;left:-4px}
.orbit-two::after{top:12%;left:auto;right:10%;width:5px;height:5px;opacity:.8}
.browser-card{transform-style:preserve-3d;will-change:transform;animation:mc-card-hover 6s ease-in-out infinite,mc-card-appear 1.1s .12s both!important;box-shadow:0 30px 90px #061c1480,0 0 0 1px #e8f59a18!important;transition:box-shadow .5s,border-color .5s}
.hero-art:hover .browser-card{box-shadow:0 38px 100px #061c14a0,0 0 42px #e8f59a24!important;border-color:#e8f59a66}
.browser-content{position:relative}.browser-content::after{content:"";position:absolute;z-index:5;inset:-40% -80%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#ffffff80 49%,transparent 56%);transform:translateX(-90%) rotate(8deg);animation:mc-screen-sweep 6.5s 1.5s ease-in-out infinite}
.mini-rule{transform-origin:left;animation:mc-line-grow 1.2s .8s both}.mini-shape{transform-origin:center;animation:mc-shape-turn 30s linear infinite}
.floating-note{animation:mc-note-float 5s ease-in-out infinite,mc-note-enter .8s .5s both}.note-bottom{animation-delay:-2.2s,.75s}.art-star{transform-origin:center;animation:mc-star-spin 20s linear infinite,mc-star-twinkle 3s ease-in-out infinite}
.brand img{animation:mc-brand-in .9s .1s both,mc-brand-glow 5s 1.2s ease-in-out infinite;transition:transform .35s,filter .35s}.brand:hover img{transform:rotate(-8deg) scale(1.07);filter:drop-shadow(0 0 12px #e8f59a66)}
.hero-copy>.eyebrow{animation:mc-fade-up .7s .05s both}.hero h1{animation:mc-title-in 1.1s .12s both}.hero h1 .serif-accent{display:inline-block;animation:mc-word-in 1s .48s both}.hero-description{animation:mc-fade-up .85s .35s both}.hero-actions{animation:mc-fade-up .85s .48s both}.hero-footnote{animation:mc-fade-up .85s .62s both}.hero-copy .eyebrow::after{content:"";display:inline-block;width:clamp(20px,4vw,60px);height:1px;background:linear-gradient(90deg,#e8f59a,transparent);transform-origin:left;animation:mc-line-grow 1.1s .7s both}
.button-primary{position:relative;isolation:isolate;overflow:hidden;animation:mc-button-pulse 4s 2s ease-in-out infinite}.button-primary::after{content:"";position:absolute;z-index:-1;inset:-50% auto -50% -70%;width:45%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#ffffff90,transparent);animation:mc-button-shine 5.8s 2s ease-in-out infinite}.button-primary:hover{animation-play-state:paused;transform:translateY(-4px) scale(1.015)}
.scroll-cue span{position:relative;overflow:hidden}.scroll-cue span::after{content:"";position:absolute;inset:0;background:#e8f59a;animation:mc-scroll-line 2s ease-in-out infinite}
/* Scroll reveals: aggiunte via JS, i contenuti restano visibili senza JS */
.js-motion .reveal:not(.is-visible){opacity:0;transform:translateY(34px) scale(.985);filter:blur(5px)}
.js-motion .reveal.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0);transition:opacity .85s cubic-bezier(.2,.75,.2,1),transform .85s cubic-bezier(.2,.75,.2,1),filter .85s ease}
.services-grid>.reveal,.method-list>.reveal,.portfolio-grid>.reveal{transition-delay:var(--reveal-delay,0ms)}
/* Card spotlight segue davvero il mouse */
.service-card,.project-card,.method-step{--spot-x:50%;--spot-y:50%;position:relative;isolation:isolate}
.service-card::after,.project-card::after,.method-step::after{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),#e8f59a22,transparent 72%);transition:opacity .4s}
.service-card:hover::after,.project-card:hover::after,.method-step:hover::after{opacity:1}
.service-card>* ,.project-card>* ,.method-step>*{position:relative;z-index:1}
.service-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s!important}.service-card:hover{transform:translateY(-9px)!important;box-shadow:0 24px 60px #061c1440,0 0 0 1px #e8f59a18!important}
.project-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s!important}.project-card:hover{transform:translateY(-9px)!important;filter:saturate(1.08)}.project-visual{overflow:hidden}.project-visual::after{content:"";position:absolute;z-index:3;inset:-10% -80%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#ffffff50 50%,transparent 58%);transform:translateX(-100%);transition:none}.project-card:hover .project-visual::after{animation:mc-project-sheen 1.15s ease}
.method-step{transition:padding .35s,border-color .35s,background .35s}.method-step:hover .method-symbol{animation:mc-symbol-wiggle .65s ease}
/* Logo nella sezione studio: aloni concentrici e movimento lento */
.about-visual{isolation:isolate}.about-logo-halo{animation:mc-halo-breathe 5s ease-in-out infinite,mc-halo-rotate 34s linear infinite!important}.about-visual::after{content:"";position:absolute;inset:12%;z-index:0;border-radius:50%;background:radial-gradient(circle,#e8f59a55,transparent 68%);filter:blur(25px);animation:mc-aura 6s ease-in-out infinite;pointer-events:none}.about-logo{position:relative;z-index:2;animation:mc-logo-arrive 1.2s .1s both;filter:drop-shadow(0 15px 24px #173a2c25)}.about-visual:hover .about-logo{transform:scale(1.04) rotate(-2deg);filter:drop-shadow(0 22px 32px #173a2c38)}
.contact-form-wrap{position:relative;overflow:hidden}.contact-form-wrap::before{content:"";position:absolute;inset:-20% auto -20% -80%;width:50%;pointer-events:none;background:linear-gradient(90deg,transparent,#e8f59a13,transparent);transform:skewX(-18deg);opacity:0}.contact-form-wrap:focus-within::before{opacity:1;animation:mc-form-sweep 1.3s ease}
/* Keyframes univoci: evitano collisioni con gli stili precedenti */
@keyframes mc-orbit-drift{0%{transform:translate3d(-12px,8px,0) rotate(-12deg) scale(.96)}100%{transform:translate3d(25px,-15px,0) rotate(9deg) scale(1.04)}}
@keyframes mc-aura{0%,100%{opacity:.35;transform:scale(.88)}50%{opacity:.95;transform:scale(1.12)}}
@keyframes mc-logo-breathe{0%,100%{opacity:.055;transform:scale(.92) rotate(-5deg)}50%{opacity:.14;transform:scale(1.04) rotate(4deg)}}
@keyframes mc-orbit-one{to{rotate:360deg}}@keyframes mc-orbit-two{to{rotate:-360deg}}@keyframes mc-orbit-pulse{0%,100%{opacity:.55;scale:.97}50%{opacity:1;scale:1.035}}
@keyframes mc-card-hover{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -12px;rotate:-.3deg}}
@keyframes mc-card-appear{from{opacity:0;scale:.92;filter:blur(8px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes mc-screen-sweep{0%,42%{transform:translateX(-90%) rotate(8deg);opacity:0}50%{opacity:1}72%,100%{transform:translateX(90%) rotate(8deg);opacity:0}}
@keyframes mc-line-grow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes mc-shape-turn{to{rotate:360deg}}@keyframes mc-note-float{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes mc-note-enter{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes mc-star-spin{to{rotate:360deg}}@keyframes mc-star-twinkle{0%,100%{opacity:.55;scale:.9}50%{opacity:1;scale:1.12}}
@keyframes mc-brand-in{from{opacity:0;transform:scale(.65) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes mc-brand-glow{0%,100%{filter:drop-shadow(0 0 0 #e8f59a00)}50%{filter:drop-shadow(0 0 10px #e8f59a50)}}
@keyframes mc-fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes mc-title-in{from{opacity:0;transform:translateY(35px);filter:blur(9px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes mc-word-in{from{opacity:0;transform:translateY(18px) skewY(4deg)}to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes mc-button-pulse{0%,100%{box-shadow:0 5px 20px #e8f59a18}50%{box-shadow:0 8px 32px #e8f59a42,0 0 0 6px #e8f59a0b}}@keyframes mc-button-shine{0%,68%{left:-70%}86%,100%{left:140%}}
@keyframes mc-scroll-line{0%{transform:translateX(-110%)}65%,100%{transform:translateX(110%)}}@keyframes mc-project-sheen{to{transform:translateX(100%)}}@keyframes mc-symbol-wiggle{0%,100%{transform:rotate(0)}35%{transform:rotate(-12deg) scale(1.08)}70%{transform:rotate(9deg)}}
@keyframes mc-halo-breathe{0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.07);opacity:1}}@keyframes mc-halo-rotate{to{rotate:360deg}}@keyframes mc-logo-arrive{from{opacity:0;transform:scale(.82) rotate(-9deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes mc-form-sweep{to{left:140%}}
@media(max-width:760px){.hero::before{left:-28%;width:95vw;top:10%}.hero-art::before{inset:15% 10%;opacity:.08}.hero-art::after{inset:10% 0}.browser-card{animation-duration:7s!important}.service-card:hover,.project-card:hover{transform:translateY(-3px)!important}}
@media(hover:none){.service-card::after,.project-card::after,.method-step::after{display:none}.browser-content::after{animation-duration:9s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body::after{display:none}.hero::before,.hero-art::after,.hero-art::before,.art-orbit,.orbit-two::before,.orbit-two::after,.browser-card,.browser-content::after,.mini-rule,.mini-shape,.floating-note,.art-star,.brand img,.hero-copy>.eyebrow,.hero h1,.hero h1 .serif-accent,.hero-description,.hero-actions,.hero-footnote,.hero-copy .eyebrow::after,.button-primary,.scroll-cue span::after,.about-logo-halo,.about-visual::after,.about-logo{animation:none!important}.js-motion .reveal:not(.is-visible),.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.service-card,.project-card,.method-step,.button{transition:none!important}.contact-form-wrap::before{display:none}}

/* Rifinitura professionale: gerarchia, stati attivi e micro-interazioni accessibili */
.nav a[aria-current="location"]{color:var(--lime);position:relative}
.nav a[aria-current="location"]:not(.nav-contact)::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);animation:mc-nav-underline .35s ease both}
.brand img,.footer-brand img{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.brand:hover img,.footer-brand:hover img{transform:rotate(-5deg) scale(1.055);filter:drop-shadow(0 0 10px #e8f59a35)}
.nav-contact{transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease}
.nav-contact:hover{background:#e8f59a12;border-color:#e8f59a;color:var(--lime);transform:translateY(-1px)}
:where(a,button,input,textarea,select):focus-visible{outline:2px solid #e8f59a;outline-offset:4px}
@keyframes mc-nav-underline{from{transform:scaleX(.25);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.nav a[aria-current="location"]:not(.nav-contact)::after{animation:none}.brand:hover img,.footer-brand:hover img,.nav-contact:hover{transform:none}}


/* Motion & layout hardening: responsive-safe, composited and accessible. */
:root { --motion-ease: cubic-bezier(.2,.75,.25,1); }
html { scroll-behavior:smooth; scroll-padding-top:clamp(76px,8vw,104px); }
*,*::before,*::after { box-sizing:border-box; }
img,svg,video,canvas { max-width:100%; }
img { height:auto; }
body { min-width:320px; }
main,section,header,footer,.section-wrap,.header-inner,.hero-copy,.hero-art,.about-layout,.contact-section { min-width:0; }
.hero-art,.about-visual,.project-visual,.service-card,.contact-form-wrap { isolation:isolate; }
.brand img { object-fit:contain; background:transparent; }
.about-logo { object-fit:contain; border-radius:50%; }
.footer-brand img { object-fit:contain; }
.service-card,.project-card,.method-step,.button,.brand img,.footer-brand img { transition:transform .55s var(--motion-ease),border-color .35s ease,box-shadow .35s ease,filter .35s ease; }
.service-card,.project-card { will-change:transform; }
.service-card::after,.project-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(240px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(232,245,154,.10),transparent 70%); transition:opacity .35s ease; }
.service-card,.project-card { position:relative; }
@media(hover:hover) and (pointer:fine) {
 .service-card:hover,.project-card:hover { transform:translateY(-7px); }
 .service-card:hover::after,.project-card:hover::after { opacity:1; }
 .brand:hover img,.footer-brand:hover img { transform:rotate(-3deg) scale(1.04); filter:drop-shadow(0 0 14px #e8f59a38); }
 .button:hover { transform:translateY(-3px); box-shadow:0 14px 35px #00000020; }
 .method-step:hover .method-symbol { transform:rotate(12deg) scale(1.08); color:var(--lime); }
}
.method-symbol { transition:transform .45s var(--motion-ease),color .3s ease; }
.status-dot { animation:statusPulse 2.4s ease-in-out infinite; }
@keyframes statusPulse { 0%,100%{box-shadow:0 0 0 0 #e8f59a30} 50%{box-shadow:0 0 0 7px #e8f59a00} }
@keyframes floatSoft { 0%,100%{translate:0 0} 50%{translate:0 -8px} }
@keyframes shimmerLine { 0%{background-position:180% 0} 100%{background-position:-180% 0} }
.intro-band .band-mark { animation:floatSoft 5s ease-in-out infinite; }
.section-heading h2 { background-image:linear-gradient(100deg,var(--cream) 0%,var(--cream) 38%,var(--lime) 50%,var(--cream) 62%,var(--cream) 100%); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; }
.js-motion .section-heading.reveal.is-visible h2 { animation:headingGlow 1.2s .15s both; }
@keyframes headingGlow { from{background-position:100% 0} to{background-position:0 0} }
/* Avoid layout overflow at any zoom level; content wraps instead of widening the page. */
.hero,.intro-band,.section-heading,.services-grid,.method-list,.portfolio-grid,.about-layout,.contact-section,.footer-main,.footer-bottom { min-width:0; }
.hero-copy,.section-heading>div,.section-aside,.service-card,.method-step>div,.project-meta>div,.about-copy,.contact-heading,.contact-form-wrap { min-width:0; }
.hero-actions,.footer-bottom nav { flex-wrap:wrap; }
.email-link,.footer-email,.mailto-fallback,.footer-bottom a { overflow-wrap:anywhere; }
input,select,textarea,button { max-width:100%; font:inherit; }
.field input,.field select,.field textarea { min-width:0; }
.project-meta { min-width:0; }
@media(max-width:760px) {
 html { scroll-padding-top:76px; }
 .hero { overflow:clip; }
 .hero-art { max-width:100%; }
 .hero-art::before { max-width:88vw; }
 .browser-card { max-width:calc(100% - 36px); }
 .floating-note { max-width:46%; }
 .about-visual { max-width:100%; overflow:clip; }
 .contact-section { grid-template-columns:minmax(0,1fr); }
 .field-row { grid-template-columns:minmax(0,1fr); }
 .form-top { overflow-wrap:anywhere; }
 .footer-bottom nav { max-width:100%; }
}
@media(max-width:380px) {
 .section-wrap,.header-inner { width:calc(100% - 28px); }
 .brand-copy small { letter-spacing:.12em; }
 .hero h1 { font-size:clamp(35px,10.5vw,40px); overflow-wrap:normal; }
 .hero-art { height:340px; }
 .floating-note { font-size:8px; }
 .note-top { right:0; }
 .note-bottom { left:0; }
 .project-meta { gap:8px; }
 .project-meta h3 { font-size:13px; }
 .contact-form-wrap { padding-inline:14px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
 .service-card:hover,.project-card:hover,.button:hover { transform:none!important; }
}

/* Final responsive hardening: prevent zoom/viewport overflow and preserve smooth motion. */
html { scroll-padding-top: 6rem; }
*, *::before, *::after { box-sizing: border-box; }
body { min-width: 320px; max-width: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; max-width: 100%; }
p, h1, h2, h3, h4, a, li, small, label { overflow-wrap: anywhere; }
main, header, footer, section, .section-wrap, .header-inner, .hero, .hero-copy, .hero-art,
.services-grid, .portfolio-grid, .about-layout, .contact-section, .footer-main { min-width: 0; }
.hero > *, .services-grid > *, .portfolio-grid > *, .about-layout > *, .footer-main > * { min-width: 0; }
.service-card, .project-card, .contact-form-wrap, .browser-card { max-width: 100%; }
input, textarea, select { width: 100%; }
textarea { resize: vertical; }
:where(a, button, input, textarea, select) { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
@media (max-width: 760px) {
  html { scroll-padding-top: 5rem; }
  .section-wrap { width: min(100% - 2rem, 100%); }
  .header-inner { width: min(100% - 1.25rem, 100%); }
  .hero, .about-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-copy, .hero-art, .about-visual, .about-copy, .contact-form-wrap { width: 100%; min-width: 0; }
  .hero h1 { font-size: clamp(2.25rem, 9.8vw, 4.3rem); line-height: .99; letter-spacing: -.055em; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .button { max-width: 100%; }
  .hero-art { min-height: 17rem; }
  .browser-card { width: min(100%, 34rem); }
  .nav { max-width: calc(100vw - 1.5rem); }
  .footer-bottom { flex-wrap: wrap; gap: .8rem 1rem; }
  .service-card, .project-card { transform: none; }
}
@media (max-width: 420px) {
  .section-wrap { width: calc(100% - 1.25rem); }
  .header-inner { width: calc(100% - 1rem); }
  .hero h1 { font-size: clamp(2rem, 9.7vw, 2.8rem); }
  .eyebrow { font-size: .65rem; letter-spacing: .08em; }
  .button { max-width: 100%; white-space: normal; }
  .hero-art { min-height: 14rem; }
  .contact-form-wrap { padding: 1rem; }
}
@media (hover: none), (pointer: coarse) {
  .service-card:hover, .project-card:hover, .button:hover, .brand:hover img, .footer-brand:hover img { transform: none; }
  .service-card, .project-card, .button { transition-duration: .18s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Performance pass: preferenze e dispositivi compatti. */
@media (max-width: 760px) {
  .hero::before { animation-duration: 24s; }
  .hero-art::after, .about-visual::after { filter: blur(16px); }
  .browser-content::after { opacity: .55; }
  .site-glow { opacity: .45; }
  .js-motion .reveal:not(.is-visible) { filter: none; transform: translateY(18px); }
  .js-motion .reveal.is-visible { filter: none; }
}
@media (max-width: 420px) {
  .hero-art { max-width: 100%; }
  .browser-card { max-width: 100%; }
  .floating-note { max-width: 44%; }
}
@media (hover: none), (pointer: coarse) {
  .service-card, .project-card, .method-step { -webkit-tap-highlight-color: transparent; }
  .service-card:hover, .project-card:hover, .method-step:hover { transform: none; }
  .browser-card { will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Fluidity pass: animazioni aggiuntive leggere, basate soprattutto su transform/opacity ── */
:root{--mc-ease-fluid:cubic-bezier(.22,.75,.18,1)}
html{scroll-behavior:smooth;scroll-padding-top:clamp(78px,9vw,110px)}
::selection{background:#d9ed8d;color:#103d2b}
.nav a:not(.nav-contact){position:relative}
.nav a:not(.nav-contact)::after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:1px;background:var(--lime);transition:right .32s var(--mc-ease-fluid)}
.nav a:not(.nav-contact):hover::after,.nav a[aria-current="location"]::after{right:0}
.section-heading h2,.contact-heading h2,.about-copy h2{ text-wrap:balance }
.eyebrow{transition:letter-spacing .4s var(--mc-ease-fluid)}
.section-heading:hover .eyebrow,.contact-heading:hover .eyebrow{letter-spacing:.16em}
.service-card,.method-step,.contact-form-wrap,.glass-panel{backface-visibility:hidden;transform:translateZ(0)}
.service-card .service-icon,.method-symbol{transition:transform .55s var(--mc-ease-fluid),filter .55s var(--mc-ease-fluid)}
.service-card:hover .service-icon{transform:translateY(-4px) rotate(-7deg) scale(1.08);filter:drop-shadow(0 0 12px #e8f59a35)}
.method-step:hover .method-symbol{transform:rotate(12deg) scale(1.08)}
.text-link,.card-link,.email-link,.footer-email{transition:color .25s ease,letter-spacing .3s var(--mc-ease-fluid)}
.text-link:hover,.card-link:hover,.email-link:hover,.footer-email:hover{letter-spacing:.025em}
.button{transition:transform .32s var(--mc-ease-fluid),box-shadow .32s ease,background-color .32s ease,border-color .32s ease}
.button:active{transform:translateY(1px) scale(.985)}
.field input,.field select,.field textarea{transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease,transform .25s var(--mc-ease-fluid)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px #e8f59a16;transform:translateY(-1px)}
.contact-form-wrap{transition:border-color .4s ease,box-shadow .4s ease}
.contact-form-wrap:focus-within{border-color:#e8f59a65;box-shadow:0 24px 70px #031b1238,0 0 0 1px #e8f59a0c}
.form-status:not(:empty){animation:mc-status-in .35s var(--mc-ease-fluid) both}
.submit-button[disabled]{opacity:.75;cursor:progress;transform:none;animation:none}
.site-glow--one{animation:mc-glow-drift-a 22s ease-in-out infinite alternate;will-change:transform}
.site-glow--two{animation:mc-glow-drift-b 27s ease-in-out infinite alternate;will-change:transform}
@keyframes mc-status-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes mc-glow-drift-a{from{transform:translate3d(-1.5%,0,0) scale(.98)}to{transform:translate3d(2%,2%,0) scale(1.04)}}
@keyframes mc-glow-drift-b{from{transform:translate3d(1%,1%,0) scale(1.02)}to{transform:translate3d(-2%,-1.5%,0) scale(.96)}}
@media(hover:hover) and (pointer:fine){.service-card,.method-step{transition-timing-function:var(--mc-ease-fluid)}.brand:hover,.footer-brand:hover{transform:translateY(-1px)}}
@media(max-width:760px){.site-glow--one,.site-glow--two{animation-duration:34s;opacity:.07}.nav a:not(.nav-contact)::after{display:none}.service-card:hover{transform:translateY(-3px)!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;transform:none!important;filter:none!important;will-change:auto!important}}


/* M&C responsive hardening — zoom, narrow viewports, and richer motion */
html{width:100%;max-width:100%;overflow-x:clip;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,textarea,select{max-width:100%;min-width:0}
.section-wrap{min-width:0}
:where(h1,h2,h3,p,a,button,label,li,small){overflow-wrap:break-word}
:where(.hero,.header,.section-wrap,.services,.method,.contact,.footer,.service-card,.method-step,.contact-grid,.footer-main,.footer-bottom){min-width:0;max-width:100%}
:where(.service-grid,.services-grid,.method-grid,.contact-grid,.footer-main,.footer-bottom){min-width:0}
@media(max-width:900px){
  .section-wrap{width:min(100% - 40px,720px)}
  .hero{min-height:auto}
  .hero h1{font-size:clamp(2.5rem,8vw,5.5rem);line-height:.99;letter-spacing:-.055em;overflow-wrap:normal}
  .hero p{max-width:62ch}
  .service-card,.method-step{min-width:0}
}
@media(max-width:600px){
  .section-wrap{width:calc(100% - 32px)}
  html{scroll-padding-top:76px}
  .hero{padding-top:clamp(5.5rem,18vw,7.5rem);padding-bottom:3.5rem}
  .hero h1{font-size:clamp(2.35rem,11.5vw,4rem);line-height:1;letter-spacing:-.06em}
  .hero p,.section-intro,.service-card p,.method-step p{font-size: .96rem;line-height:1.7}
  .service-grid,.services-grid,.method-grid{grid-template-columns:minmax(0,1fr)!important}
  .service-card,.method-step{padding:clamp(1.15rem,5vw,1.6rem)}
  .contact-grid{grid-template-columns:minmax(0,1fr)!important;gap:1.5rem}
  #contact-form{min-width:0;width:100%}
  #contact-form input,#contact-form textarea,#contact-form select{width:100%;min-width:0}
  #contact-form > label.consent{display:flex!important;align-items:flex-start!important;gap:.7rem!important;width:100%!important}
  #contact-form > label.consent > span{flex:1 1 auto!important;min-width:0!important;font-size:.82rem;line-height:1.55}
  .footer-main,.footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
  .footer-bottom nav{display:flex;flex-wrap:wrap;gap:.7rem 1rem}
  .site-glow{max-width:75vw}
  /* Keep zoom available; avoid fixed-width layouts breaking at 200–400% zoom. */
  .header{max-width:100vw}
}
@media(min-width:601px) and (max-width:900px){
  .service-grid,.services-grid,.method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(hover:hover) and (pointer:fine){
  .service-card,.method-step,.project-card,.feature-card{transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .45s ease,box-shadow .55s ease,background .45s ease}
  .service-card:hover,.method-step:hover,.project-card:hover,.feature-card:hover{transform:translateY(-7px) scale(1.012);box-shadow:0 22px 55px #071b1430}
  .button:hover,.btn:hover,.nav-contact:hover{filter:brightness(1.08);transform:translateY(-2px)}
}
@media(prefers-reduced-motion:no-preference){
  .site-glow--one{animation:mc-glow-drift-a 18s ease-in-out infinite alternate}
  .site-glow--two{animation:mc-glow-drift-b 22s ease-in-out infinite alternate}
  .service-card,.method-step{animation:mc-card-arrive .8s both;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
  .service-card:nth-child(2),.method-step:nth-child(2){animation-delay:.08s}
  .service-card:nth-child(3),.method-step:nth-child(3){animation-delay:.16s}
  .service-card:nth-child(4),.method-step:nth-child(4){animation-delay:.24s}
}
@keyframes mc-card-arrive{from{opacity:.65;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}


/* M&C motion polish v3 — animated process rail, flowing dots and micro-interactions */
.method-list{position:relative;isolation:isolate;overflow:visible}
.method-list::before{
  content:"";position:absolute;z-index:2;left:24px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent 0%,rgba(232,245,154,.22) 8%,rgba(232,245,154,.68) 50%,rgba(232,245,154,.2) 92%,transparent 100%);
  transform:scaleY(.08);transform-origin:top;animation:mc-rail-grow 2.2s .25s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none;
}
.method-step{position:relative;isolation:isolate}
.method-step::before{
  content:"";position:absolute;z-index:4;left:18px;top:50%;width:12px;height:12px;
  border:1px solid #e8f59a;background:#103f2e;border-radius:50%;
  box-shadow:0 0 0 4px rgba(232,245,154,.055),0 0 0 rgba(232,245,154,0);
  transform:translateY(-50%) scale(.65);opacity:.65;
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
.method-step.is-visible::before{animation:mc-rail-dot-in .65s calc(var(--reveal-delay,0ms) + .25s) cubic-bezier(.16,1,.3,1) both}
.method-step:hover::before{opacity:1;transform:translateY(-50%) scale(1.12);box-shadow:0 0 0 5px rgba(232,245,154,.1),0 0 20px rgba(232,245,154,.55)}
.method-step .method-symbol{transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s ease,box-shadow .4s ease}
.method-step:hover .method-symbol{transform:rotate(-8deg) scale(1.08);background:rgba(232,245,154,.08);box-shadow:0 0 22px rgba(232,245,154,.09)}
.method-step .method-no{transition:color .35s ease}
.method-step:hover .method-no{color:var(--lime)}
/* Flowing highlight across section separators and cards */
.section-heading h2,.about-copy h2,.contact-heading h2{ text-wrap:balance }
.service-card::before,.method-step::after,.project-card::before{
  background-size:200% 100%;
}
@media(prefers-reduced-motion:no-preference){
  .status-dot,.form-indicator i{animation:mc-dot-breathe 2.4s ease-in-out infinite}
  .footnote-line,.scroll-cue span{transform-origin:left;animation:mc-line-grow 1.25s .8s cubic-bezier(.16,1,.3,1) both}
  .intro-band .band-mark{animation:mc-mark-float 5s ease-in-out infinite}
  .service-card:hover,.project-card:hover{box-shadow:0 22px 60px rgba(0,0,0,.13),inset 0 0 0 1px rgba(232,245,154,.12)}
  .button-primary::before{animation-duration:2.8s}
}
@keyframes mc-rail-grow{0%{transform:scaleY(.04);opacity:.25}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:.8}}
@keyframes mc-rail-dot-in{0%{opacity:0;transform:translateY(-50%) scale(.2);box-shadow:0 0 0 0 rgba(232,245,154,0)}70%{opacity:1;transform:translateY(-50%) scale(1.25);box-shadow:0 0 0 7px rgba(232,245,154,.1)}100%{opacity:1;transform:translateY(-50%) scale(1);box-shadow:0 0 0 4px rgba(232,245,154,.055)}}
@keyframes mc-dot-breathe{0%,100%{box-shadow:0 0 0 0 rgba(232,245,154,.08),0 0 9px rgba(232,245,154,.2)}50%{box-shadow:0 0 0 5px rgba(232,245,154,.045),0 0 17px rgba(232,245,154,.48)}}
@keyframes mc-mark-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:600px){
  .method-list::before{left:5px}
  .method-step::before{left:-1px;width:11px;height:11px}
  .method-step{padding-left:8px}
}
@media(prefers-reduced-motion:reduce){
  .method-list::before{transform:scaleY(1);animation:none;opacity:.6}
  .method-step::before,.status-dot,.form-indicator i,.footnote-line,.scroll-cue span,.intro-band .band-mark{animation:none!important}
}


/* ── Motion direction: precise, calm, premium ── */
@media(prefers-reduced-motion:no-preference){
  .hero-copy .eyebrow{animation:mc-editorial-in .8s .05s both}
  .hero-copy h1{animation:mc-editorial-in 1s .14s both}
  .hero-description{animation:mc-editorial-in .9s .28s both}
  .hero-actions{animation:mc-editorial-in .9s .4s both}
  .hero-footnote{animation:mc-editorial-in .9s .52s both}
  .hero-art .browser-card{animation:mc-browser-enter 1.15s .22s both,mc-card-hover 7s 1.4s ease-in-out infinite!important}
  .hero-art .floating-note{animation:mc-note-enter .85s .65s both,mc-note-float 6s 1.5s ease-in-out infinite}
  .hero-art .note-bottom{animation-delay:.82s,1.7s}
  .intro-band{animation:mc-band-in 1s both}
  .section-heading .eyebrow{overflow:hidden}
  .section-heading .eyebrow::after{content:"";display:block;height:1px;width:100%;background:linear-gradient(90deg,var(--lime),transparent);transform:scaleX(0);transform-origin:left;animation:mc-rule-reveal 1s .25s var(--ease, cubic-bezier(.2,.75,.2,1)) forwards}
  .service-card{transition:transform .65s cubic-bezier(.2,.75,.2,1),border-color .4s ease,background .4s ease,box-shadow .65s cubic-bezier(.2,.75,.2,1)}
  .service-card .service-number{display:inline-block;transition:transform .45s cubic-bezier(.2,.75,.2,1),letter-spacing .45s ease}
  .service-card:hover .service-number{transform:translateX(5px);letter-spacing:.22em}
  .service-card .service-icon{filter:drop-shadow(0 0 0 rgba(223,234,166,0));transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .45s ease}
  .service-card:hover .service-icon{filter:drop-shadow(0 0 10px rgba(223,234,166,.24))}
  .method-list{position:relative}
  .method-list::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(223,234,166,.8) 12%,rgba(223,234,166,.8) 88%,transparent);transform:scaleY(.02);transform-origin:top;animation:mc-process-line 2.2s .25s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}
  .method-step{position:relative}
  .method-step::before{content:"";position:absolute;left:-4px;top:0;width:8px;height:8px;border-radius:50%;background:var(--lime,#dfeaa6);box-shadow:0 0 0 4px rgba(223,234,166,.07),0 0 16px rgba(223,234,166,.38);opacity:0;transform:translateY(0) scale(.3);transition:opacity .3s ease,box-shadow .4s ease}
  .method-step.is-visible::before,.method-step:hover::before{opacity:1;animation:mc-process-dot .65s cubic-bezier(.16,1,.3,1) both}
  .method-step:hover::before{box-shadow:0 0 0 6px rgba(223,234,166,.09),0 0 22px rgba(223,234,166,.6)}
  .method-step .method-no{transition:color .35s ease,transform .45s cubic-bezier(.2,.75,.2,1)}
  .method-step:hover .method-no{color:var(--lime);transform:translateX(3px)}
  .about-logo,.about-monogram{transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .6s ease}
  .about-visual:hover .about-logo,.about-visual:hover .about-monogram{transform:scale(1.045) rotate(-2deg);filter:drop-shadow(0 12px 22px rgba(18,76,54,.14))}
  .about-circle.circle-one{animation:mc-circle-breathe 9s ease-in-out infinite}
  .about-circle.circle-two{animation:mc-circle-breathe 11s 1.2s ease-in-out infinite reverse}
  .contact-form-wrap{transition:transform .6s cubic-bezier(.2,.75,.2,1),border-color .4s ease,box-shadow .6s ease}
  .contact-form-wrap:hover{border-color:rgba(223,234,166,.27);box-shadow:0 26px 80px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.05)}
  .form-indicator i{box-shadow:0 0 0 0 rgba(223,234,166,.35);animation:mc-status-ring 2.8s ease-out infinite}
  .scroll-cue span{transform-origin:top;animation:mc-scroll-cue 2s ease-in-out infinite}
  .button-primary span{display:inline-block;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
  .button-primary:hover span{transform:translate(3px,-3px)}
}
@keyframes mc-editorial-in{from{opacity:0;transform:translateY(20px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes mc-browser-enter{from{opacity:0;transform:translateY(28px) rotateX(4deg) scale(.97)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@keyframes mc-note-enter{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mc-note-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes mc-band-in{from{opacity:.45}to{opacity:1}}
@keyframes mc-rule-reveal{to{transform:scaleX(1)}}
@keyframes mc-process-line{0%{transform:scaleY(.02);opacity:.2}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:.75}}
@keyframes mc-process-dot{0%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes mc-circle-breathe{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.035);opacity:1}}
@keyframes mc-status-ring{0%{box-shadow:0 0 0 0 rgba(223,234,166,.35)}70%{box-shadow:0 0 0 6px rgba(223,234,166,0)}100%{box-shadow:0 0 0 0 rgba(223,234,166,0)}}
@keyframes mc-scroll-cue{0%,100%{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@media(max-width:600px){
 .method-list::before{left:0}
 .method-step::before{left:-3px}
}
@media(prefers-reduced-motion:reduce){
 .hero-copy .eyebrow,.hero-copy h1,.hero-description,.hero-actions,.hero-footnote,.hero-art .browser-card,.hero-art .floating-note,.intro-band,.section-heading .eyebrow::after,.method-list::before,.method-step::before,.about-circle.circle-one,.about-circle.circle-two,.form-indicator i,.scroll-cue span{animation:none!important;filter:none!important;opacity:1!important;transform:none!important}
}


/* Visible motion suite v4: real elements, scroll entrances, editorial rhythm */
@media(prefers-reduced-motion:no-preference){
  .js-motion .reveal{opacity:0;transform:translateY(24px);filter:blur(3px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s ease;transition-delay:var(--reveal-delay,0ms)}
  .js-motion .reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
  .js-motion .service-card.reveal{transform:translateY(30px) scale(.985)}
  .js-motion .service-card.reveal.is-visible{transform:translateY(0) scale(1)}
  .hero-copy .eyebrow{animation:mc-v4-rise .75s .05s both}
  .hero-copy h1{animation:mc-v4-rise .95s .13s both}
  .hero-description{animation:mc-v4-rise .85s .25s both}
  .hero-actions{animation:mc-v4-rise .85s .36s both}
  .hero-footnote{animation:mc-v4-rise .85s .48s both}
  .hero-art .browser-card{animation:mc-v4-card-in 1.15s .2s both,mc-v4-card-float 8s 1.4s ease-in-out infinite}
  .hero-art .floating-note{animation:mc-v4-note-in .8s .65s both,mc-v4-note-float 6s 1.45s ease-in-out infinite}
  .hero-art .note-bottom{animation-delay:.82s,1.7s}
  .hero-art .art-orbit{transform-origin:center;animation:mc-v4-orbit 30s linear infinite}
  .hero-art .orbit-two{animation-direction:reverse;animation-duration:38s}
  .hero-art .art-star{transform-origin:center;animation:mc-v4-star 5s ease-in-out infinite}
  .intro-band .band-mark{animation:mc-v4-mark 5s ease-in-out infinite}
  .section-heading .eyebrow{position:relative}
  .section-heading .eyebrow::after{content:"";display:block;width:100%;height:1px;margin-top:8px;background:linear-gradient(90deg,var(--mc-lime,#dfeaa6),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1s .15s cubic-bezier(.16,1,.3,1)}
  .section-heading.reveal.is-visible .eyebrow::after{transform:scaleX(1)}
  .service-card{--spot-x:50%;--spot-y:50%}
  .service-card .service-top{transition:transform .55s cubic-bezier(.16,1,.3,1)}
  .service-card:hover .service-top{transform:translateY(-3px)}
  .service-card .service-number{display:inline-block;transition:letter-spacing .45s ease,color .45s ease}
  .service-card:hover .service-number{letter-spacing:.22em;color:var(--mc-lime,#dfeaa6)}
  .method-step{transition:background .4s ease,padding .5s cubic-bezier(.16,1,.3,1)}
  .method-step .method-symbol{transition:transform .55s cubic-bezier(.16,1,.3,1),background .4s ease,border-color .4s ease,box-shadow .4s ease}
  .method-step:hover .method-symbol{transform:rotate(45deg) scale(1.04);box-shadow:0 0 25px rgba(223,234,166,.12)}
  .method-list{position:relative}
  .method-list::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(223,234,166,.95) 12%,rgba(223,234,166,.95) 88%,transparent);transform:scaleY(0);transform-origin:top;animation:mc-v4-timeline 2.3s .25s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}
  .method-step{position:relative}
  .method-step::before{content:"";position:absolute;z-index:2;left:-4px;top:30px;width:8px;height:8px;border-radius:50%;background:var(--mc-lime,#dfeaa6);box-shadow:0 0 0 4px rgba(223,234,166,.08),0 0 16px rgba(223,234,166,.42);opacity:.35;transform:scale(.65);transition:opacity .3s ease,transform .4s ease,box-shadow .4s ease}
  .method-step.is-visible::before{opacity:1;animation:mc-v4-dot .7s cubic-bezier(.16,1,.3,1) both}
  .method-step:hover::before{opacity:1;transform:scale(1.25);box-shadow:0 0 0 7px rgba(223,234,166,.1),0 0 23px rgba(223,234,166,.65)}
  .about-circle.circle-one{animation:mc-v4-circle 10s ease-in-out infinite}
  .about-circle.circle-two{animation:mc-v4-circle 12s 1s ease-in-out infinite reverse}
  .about-sticker{animation:mc-v4-sticker 7s ease-in-out infinite}
  .form-indicator i{animation:mc-v4-pulse 2.8s ease-out infinite}
  .scroll-cue span{transform-origin:top;animation:mc-v4-scroll 2s ease-in-out infinite}
  .button-primary{overflow:hidden}
  .button-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.32) 48%,transparent 72%);transform:translateX(-130%);transition:transform .85s cubic-bezier(.16,1,.3,1);pointer-events:none}
  .button-primary:hover::after{transform:translateX(130%)}
  .email-link span,.back-top svg{transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .email-link:hover span{transform:translate(4px,-3px)}
  .back-top:hover svg{transform:translateY(-3px)}
}
@keyframes mc-v4-rise{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes mc-v4-card-in{from{opacity:0;transform:translateY(28px) rotate(-3deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}}
@keyframes mc-v4-card-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes mc-v4-note-in{from{opacity:0;translate:0 15px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes mc-v4-note-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes mc-v4-orbit{to{rotate:360deg}}
@keyframes mc-v4-star{0%,100%{scale:1;opacity:.7}50%{scale:1.16;opacity:1}}
@keyframes mc-v4-mark{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-5px);opacity:1}}
@keyframes mc-v4-timeline{0%{transform:scaleY(.02);opacity:.2}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:.82}}
@keyframes mc-v4-dot{0%{scale:.2;box-shadow:0 0 0 0 rgba(223,234,166,0)}70%{scale:1.4;box-shadow:0 0 0 7px rgba(223,234,166,.12)}100%{scale:1;box-shadow:0 0 0 4px rgba(223,234,166,.08)}}
@keyframes mc-v4-circle{0%,100%{scale:1;opacity:.6}50%{scale:1.04;opacity:1}}
@keyframes mc-v4-sticker{0%,100%{translate:0 0;rotate:0}50%{translate:0 -5px;rotate:-1deg}}
@keyframes mc-v4-pulse{0%{box-shadow:0 0 0 0 rgba(223,234,166,.35)}70%{box-shadow:0 0 0 7px rgba(223,234,166,0)}100%{box-shadow:0 0 0 0 rgba(223,234,166,0)}}
@keyframes mc-v4-scroll{0%,100%{transform:scaleY(.35);opacity:.45}50%{transform:scaleY(1);opacity:1}}
@media(max-width:600px){
 .method-list::before{left:0}
 .method-step::before{left:-3px;top:27px}
 .hero-art .browser-card{animation:mc-v4-card-in 1s .2s both}
}
@media(prefers-reduced-motion:reduce){
 .js-motion .reveal,.js-motion .service-card.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
 .hero-copy .eyebrow,.hero-copy h1,.hero-description,.hero-actions,.hero-footnote,.hero-art .browser-card,.hero-art .floating-note,.hero-art .art-orbit,.hero-art .art-star,.intro-band .band-mark,.method-list::before,.method-step::before,.about-circle.circle-one,.about-circle.circle-two,.about-sticker,.form-indicator i,.scroll-cue span{animation:none!important;filter:none!important}
 .section-heading .eyebrow::after{transform:scaleX(1)}
}


/* Colorful orb movement and scroll-reveal orchestration */
@media(prefers-reduced-motion:no-preference){
 .color-orbs .color-orb{animation-duration:18s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
 .color-orbs .orb-mint{animation-name:mc-orb-float-a}
 .color-orbs .orb-lime{animation-name:mc-orb-float-b}
 .color-orbs .orb-coral{animation-name:mc-orb-float-c}
 .color-orbs .orb-blue{animation-name:mc-orb-float-a;animation-direction:reverse}
 .color-orbs .orb-lilac{animation-name:mc-orb-float-b;animation-duration:24s}
 .color-orbs .orb-gold{animation-name:mc-orb-float-c;animation-duration:22s}
 .hero-art .art-orbit{animation:mc-color-orbit 32s linear infinite}
 .hero-art .orbit-two{animation-direction:reverse;animation-duration:41s}
 .hero-art .art-star{animation:mc-color-sparkle 4.8s ease-in-out infinite}
 .service-card:nth-child(1) .service-icon{filter:drop-shadow(0 0 10px rgba(143,227,192,.1))}
 .service-card:nth-child(2) .service-icon{filter:drop-shadow(0 0 10px rgba(201,173,255,.1))}
 .service-card:nth-child(3) .service-icon{filter:drop-shadow(0 0 10px rgba(255,157,135,.1))}
 .service-card:nth-child(1):hover .service-icon{filter:drop-shadow(0 0 15px rgba(143,227,192,.4))}
 .service-card:nth-child(2):hover .service-icon{filter:drop-shadow(0 0 15px rgba(201,173,255,.4))}
 .service-card:nth-child(3):hover .service-icon{filter:drop-shadow(0 0 15px rgba(255,157,135,.4))}
 .method-step:nth-child(1):hover .method-symbol{box-shadow:0 0 25px rgba(143,227,192,.2)}
 .method-step:nth-child(2):hover .method-symbol{box-shadow:0 0 25px rgba(145,201,255,.2)}
 .method-step:nth-child(3):hover .method-symbol{box-shadow:0 0 25px rgba(201,173,255,.2)}
 .method-step:nth-child(4):hover .method-symbol{box-shadow:0 0 25px rgba(255,157,135,.2)}
}
@keyframes mc-color-orbit{to{transform:rotate(360deg)}}
@keyframes mc-color-sparkle{0%,100%{transform:rotate(0) scale(1);opacity:.7}50%{transform:rotate(24deg) scale(1.17);opacity:1}}
@media(prefers-reduced-motion:reduce){.color-orbs .color-orb,.hero-art .art-orbit,.hero-art .art-star{animation:none!important}}


/* Final-section motion: colorful orbit, sequential steps, polished story reveal */
@media(prefers-reduced-motion:no-preference){
 .method-section::before{animation:mc-final-orbit 34s linear infinite}
 .method-section::after{animation:mc-final-orbit 42s linear infinite reverse}
 .method-step{transition:background .45s ease,padding .5s cubic-bezier(.16,1,.3,1),border-color .4s ease}
 .method-step .method-no{transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease}
 .method-step .method-symbol{transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}
 .method-step.is-visible .method-symbol{animation:mc-final-symbol-in .8s cubic-bezier(.16,1,.3,1) both}
 .method-step:nth-child(2).is-visible .method-symbol{animation-delay:.08s}
 .method-step:nth-child(3).is-visible .method-symbol{animation-delay:.16s}
 .method-step:nth-child(4).is-visible .method-symbol{animation-delay:.24s}
 .method-step:hover .method-symbol{transform:rotate(45deg) scale(1.07)}
 .method-step .step-end{transition:transform .4s cubic-bezier(.16,1,.3,1),background .35s ease}
 .method-step:hover .step-end{transform:translateX(-3px)}
 .about-visual .about-circle.circle-one{animation:mc-final-ring 12s ease-in-out infinite}
 .about-visual .about-circle.circle-two{animation:mc-final-ring 15s 1s ease-in-out infinite reverse}
 .about-visual .about-logo{transition:transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease}
 .about-visual:hover .about-logo{transform:translateY(-5px) scale(1.035);filter:drop-shadow(0 22px 28px rgba(20,75,52,.18))}
 .about-visual .about-sticker{animation:mc-final-sticker 7s ease-in-out infinite}
 .about-copy .about-lead{transition:border-color .4s ease,padding-left .4s cubic-bezier(.16,1,.3,1)}
 .about-copy:hover .about-lead{border-color:#c9adff;padding-left:24px}
 .about-copy .about-link span{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
 .about-copy .about-link:hover span{transform:translate(4px,-3px);box-shadow:0 6px 18px rgba(52,114,75,.16)}
}
@keyframes mc-final-orbit{to{transform:rotate(360deg)}}
@keyframes mc-final-symbol-in{0%{opacity:0;transform:translateY(10px) scale(.72) rotate(-12deg)}70%{opacity:1;transform:translateY(-2px) scale(1.08) rotate(4deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes mc-final-ring{0%,100%{transform:scale(1) rotate(-15deg);opacity:.65}50%{transform:scale(1.035) rotate(-8deg);opacity:1}}
@keyframes mc-final-sticker{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.5deg)}}
@media(prefers-reduced-motion:reduce){.method-section::before,.method-section::after,.method-step.is-visible .method-symbol,.about-visual .about-circle.circle-one,.about-visual .about-circle.circle-two,.about-visual .about-sticker{animation:none!important}}


/* Green-only motion palette for decorative circles across all sections */
@media(prefers-reduced-motion:no-preference){
 .color-orbs .orb-mint{animation:mc-orb-float-a 17s ease-in-out infinite}
 .color-orbs .orb-lime{animation:mc-orb-float-b 19s ease-in-out infinite}
 .color-orbs .orb-coral{animation:mc-orb-float-c 23s ease-in-out infinite}
 .color-orbs .orb-blue{animation:mc-orb-float-a 21s 2s ease-in-out infinite reverse}
 .color-orbs .orb-lilac{animation:mc-orb-float-b 24s ease-in-out infinite}
 .color-orbs .orb-gold{animation:mc-orb-float-c 20s 1s ease-in-out infinite}
 .method-section::before{animation:mc-final-orbit 34s linear infinite}
 .method-section::after{animation:mc-final-orbit 42s linear infinite reverse}
 .method-step.is-visible .method-no{animation:mc-number-pop .65s cubic-bezier(.16,1,.3,1) both}
 .method-step:nth-child(2).is-visible .method-no{animation-delay:.07s}
 .method-step:nth-child(3).is-visible .method-no{animation-delay:.14s}
 .method-step:nth-child(4).is-visible .method-no{animation-delay:.21s}
 .method-step:hover .method-no{box-shadow:0 0 0 4px color-mix(in srgb,var(--step-accent) 10%,transparent),0 6px 20px rgba(0,0,0,.16)}
 .about-section::before,.about-section::after,.intro-band::before,.services-section::before,.contact-section::before{animation:mc-site-green-breathe 12s ease-in-out infinite}
 .services-section::before,.contact-section::before{animation-delay:-4s}
 .about-section::after{animation-delay:-7s}
}
@keyframes mc-number-pop{0%{opacity:.3;transform:scale(.7)}70%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes mc-site-green-breathe{0%,100%{transform:scale(.96);opacity:.6}50%{transform:scale(1.04);opacity:1}}
@media(prefers-reduced-motion:reduce){.about-section::before,.about-section::after,.intro-band::before,.services-section::before,.contact-section::before,.method-step.is-visible .method-no{animation:none!important}}


/* Remove previous rainbow accents from all animations and hover states */
@media(prefers-reduced-motion:no-preference){
 .about-copy:hover .about-lead{border-color:#75b987}
 .about-copy .about-link span{background:linear-gradient(135deg,#d4edc9,#9bd3a8)!important}
 .method-step:nth-child(1){--step-accent:#b9e8c8}
 .method-step:nth-child(2){--step-accent:#9bd3a8}
 .method-step:nth-child(3){--step-accent:#438f60}
 .method-step:nth-child(4){--step-accent:#d4edc9}
}


/* Higher motion density: more green particles and fluid orbit motion across the page */
@media(prefers-reduced-motion:no-preference){
 .color-orbs .color-orb{animation-duration:12s!important;opacity:.27!important}
 .color-orbs .orb-mint{animation:mc-orb-float-a 11s ease-in-out infinite!important}
 .color-orbs .orb-lime{animation:mc-orb-float-b 13s ease-in-out infinite!important}
 .color-orbs .orb-coral{animation:mc-orb-float-c 15s ease-in-out infinite!important}
 .color-orbs .orb-blue{animation:mc-orb-float-a 14s 1s ease-in-out infinite reverse!important}
 .color-orbs .orb-lilac{animation:mc-orb-float-b 16s ease-in-out infinite!important}
 .color-orbs .orb-gold{animation:mc-orb-float-c 13s 1s ease-in-out infinite!important}
 .hero::before{animation:mc-orbit-drift 10s ease-in-out infinite alternate,mc-green-glow-pulse 4s ease-in-out infinite!important}
 .method-section::before{animation:mc-final-orbit 25s linear infinite!important}
 .method-section::after{animation:mc-final-orbit 31s linear infinite reverse!important}
 .about-visual .about-circle.circle-one{animation:mc-final-ring 8s ease-in-out infinite!important}
 .about-visual .about-circle.circle-two{animation:mc-final-ring 10s 1s ease-in-out infinite reverse!important}
 .status-dot,.form-indicator i{animation:mc-dot-pulse 1.8s ease-in-out infinite!important}
 .art-orbit{animation-duration:12s!important}
 .scroll-cue span{background:#9bd3a8!important}
}
@keyframes mc-green-glow-pulse{0%,100%{opacity:.5;filter:blur(0)}50%{opacity:1;filter:blur(1px)}}
@keyframes mc-dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(117,185,135,.28)}50%{box-shadow:0 0 0 7px rgba(117,185,135,0)}}
@media(prefers-reduced-motion:reduce){.status-dot,.form-indicator i{animation:none!important}}


/* Very subtle ambient drift for light-section dots; no pseudo-elements, so content remains untouched */
@media (prefers-reduced-motion: no-preference) {
  .intro-band,
  #servizi,
  .about-section,
  .contact-section {
    animation: mc-ivory-dot-drift 38s ease-in-out infinite alternate;
  }
}
@keyframes mc-ivory-dot-drift {
  from { background-position: 0 0, 12px 8px; }
  to { background-position: 18px 14px, 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-band,
  #servizi,
  .about-section,
  .contact-section { animation: none !important; }
}


/* Stability and responsive polish — final overrides */
:root {
  scroll-padding-top: 92px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
html { scroll-behavior: smooth; }
body { min-width: 320px; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
button, input, textarea, select { max-width: 100%; }
a, button { touch-action: manipulation; }
.header { isolation: isolate; }
.header-inner { min-width: 0; }
.brand { min-width: 0; }
.brand-copy { min-width: 0; }
.nav a[aria-current="location"] { color: var(--lime); }
.button:focus-visible, .nav a:focus-visible, .text-link:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}
.service-card, .method-step, .contact-form-wrap { min-width: 0; }
.service-card p, .method-step p, .about-copy p, .section-aside {
  overflow-wrap: anywhere;
}
.field input, .field textarea, .field select { min-width: 0; width: 100%; }
#contact-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#contact-form .consent input[type="checkbox"] {
  flex: 0 0 17px;
  width: 17px;
  min-width: 17px;
  height: 17px;
  margin: 4px 0 0;
}
#contact-form .consent span { min-width: 0; }
#contact-form .submit-button { max-width: 100%; }
#contact-form .form-note, #contact-form .mailto-fallback {
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .section-wrap { width: min(100% - 40px, 720px); }
  .header-inner { width: calc(100% - 40px); }
  .hero {
    min-height: auto;
    padding-top: 132px;
    padding-bottom: 86px;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .hero-copy { padding-bottom: 0; }
  .hero-art { width: 100%; max-width: 560px; margin-inline: auto; }
  .scroll-cue { bottom: 24px; }
  .intro-band { gap: 22px; }
  .section-block { padding-top: 88px; padding-bottom: 88px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card:last-child { grid-column: 1 / -1; }
  .about-layout { gap: 38px; }
  .contact-section { gap: 34px; }
}
@media (max-width: 760px) {
  :root { scroll-padding-top: 76px; }
  .header-inner { height: 72px; }
  .brand img { width: 44px; height: 44px; }
  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(232,245,154,.28);
    border-radius: 3px;
    background: rgba(11,53,39,.72);
    color: var(--cream);
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform .2s ease;
  }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav {
    position: absolute;
    top: calc(100% - 1px);
    left: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px;
    background: rgba(11,53,39,.98);
    border: 1px solid rgba(232,245,154,.18);
    box-shadow: 0 18px 35px rgba(0,0,0,.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav > a { padding: 13px 4px; border-bottom: 1px solid rgba(232,245,154,.1); }
  .nav > a:last-child { border-bottom: 0; }
  .nav .nav-contact { margin: 8px 0; padding: 12px; }
  .hero { padding-top: 118px; padding-bottom: 76px; }
  .hero h1 { font-size: clamp(40px, 10vw, 62px); }
  .hero-art { height: clamp(340px, 94vw, 440px); }
  .orbit-one { width: min(90vw, 400px); }
  .orbit-two { width: min(76vw, 340px); }
  .note-top { right: 0; top: 24px; }
  .note-bottom { left: 0; bottom: 22px; }
  .art-caption { left: 4px; right: 4px; top: 8px; }
  .intro-band { grid-template-columns: 1fr auto; gap: 12px 18px; }
  .intro-band > p:first-child { grid-column: 1 / -1; margin: 0; }
  .intro-band > p:nth-child(2) { font-size: 14px; }
  .band-mark { align-self: end; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 34px; }
  .section-aside { max-width: 560px; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card:last-child { grid-column: auto; }
  .service-card { min-height: 0; }
  .method-step { grid-template-columns: 42px 42px minmax(0, 1fr); gap: 12px; }
  .method-step .step-end { display: none; }
  .about-layout { grid-template-columns: minmax(0, 1fr); }
  .about-visual { width: 100%; max-width: 500px; margin-inline: auto; }
  .contact-section { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer-main { gap: 22px; }
  .footer-bottom { flex-wrap: wrap; gap: 14px 20px; }
  .footer-bottom nav { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .section-wrap { width: calc(100% - 32px); }
  .header-inner { width: calc(100% - 32px); }
  .nav { left: 16px; right: 16px; }
  .brand { gap: 8px; }
  .brand img { width: 38px; height: 38px; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy small { font-size: 8px; }
  .hero h1 { font-size: clamp(36px, 9.8vw, 44px); letter-spacing: -.055em; }
  .hero-actions { align-items: flex-start; gap: 14px; }
  .hero-actions .button { width: 100%; justify-content: space-between; }
  .hero-art { height: 320px; }
  .browser-card { width: 82%; }
  .browser-content { min-height: 285px; padding: 17px 18px; }
  .mini-kicker { margin-top: 34px; font-size: 6px; }
  .mini-headline { font-size: clamp(32px, 9vw, 38px); }
  .floating-note { padding: 10px 11px; font-size: 9px; }
  .note-top { top: 20px; }
  .note-bottom { bottom: 14px; font-size: 7px; }
  .section-block { padding-top: 70px; padding-bottom: 70px; }
  .section-heading h2, .about-copy h2, .contact-heading h2 { font-size: clamp(34px, 9vw, 44px); }
  .contact-form-wrap { padding: 20px 16px; }
  .form-top { gap: 12px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-motion .reveal, .js-motion .service-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* Keep decorative motion atmospheric rather than distracting */
@media (prefers-reduced-motion: no-preference) {
  .color-orbs .color-orb {
    opacity: .14 !important;
    animation-duration: 24s !important;
  }
  .color-orbs .orb-mint { animation-duration: 25s !important; }
  .color-orbs .orb-lime { animation-duration: 29s !important; }
  .color-orbs .orb-coral { animation-duration: 31s !important; }
  .color-orbs .orb-blue { animation-duration: 28s !important; }
  .color-orbs .orb-lilac { animation-duration: 33s !important; }
  .color-orbs .orb-gold { animation-duration: 30s !important; }
  .hero::before { animation-duration: 22s, 10s !important; }
  .method-section::before { animation-duration: 42s !important; }
  .method-section::after { animation-duration: 48s !important; }
  .about-visual .about-circle.circle-one { animation-duration: 13s !important; }
  .about-visual .about-circle.circle-two { animation-duration: 16s !important; }
  .art-orbit { animation-duration: 34s !important; }
}


/* Responsive quality pass: stable sizing, legible forms, and accessible motion */
:root{scroll-padding-top:88px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px}
img,svg,video,canvas{max-width:100%}
button,input,textarea,select{max-width:100%}
.header{isolation:isolate}
.header-inner,.brand,.brand-copy,.hero-copy,.hero-art,.service-card,.method-step,.about-copy,.contact-form-wrap,.field{min-width:0}
.hero-description,.service-card p,.method-step p,.about-copy p,.section-aside,.email-link,.footer-email,.mailto-fallback{overflow-wrap:anywhere}
.nav a:focus-visible,.button:focus-visible,.text-link:focus-visible,.card-link:focus-visible,.footer a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.field input,.field textarea,.field select{width:100%;min-width:0}
#contact-form .consent{display:flex;align-items:flex-start;gap:10px}
#contact-form .consent input[type=checkbox]{flex:0 0 17px;width:17px;min-width:17px;height:17px;margin:4px 0 0}
#contact-form .consent span{min-width:0}
.simple-page{min-height:100svh;padding:112px 24px 48px;display:grid;place-items:center;background:radial-gradient(ellipse at 82% 18%,rgba(142,170,86,.14),transparent 42%),radial-gradient(ellipse at 12% 85%,rgba(46,152,112,.12),transparent 40%),var(--green-deep)}
.simple-content{width:min(100%,760px);padding:clamp(24px,5vw,56px);border:1px solid rgba(232,245,154,.16);border-radius:6px;background:linear-gradient(145deg,rgba(245,248,235,.065),rgba(245,248,235,.025));box-shadow:0 24px 80px rgba(0,0,0,.16)}
.simple-brand{display:inline-flex;margin-bottom:34px}
.simple-content h1{font-size:clamp(40px,7vw,68px);line-height:1.08;letter-spacing:-.06em;margin:0 0 24px}
.simple-content h2{margin-top:30px;font-size:clamp(20px,3vw,26px)}
.simple-content p,.simple-content li{color:#c3d2c5}
.simple-content .legal-alert{padding:14px 16px;border-left:2px solid var(--lime);background:rgba(232,245,154,.055);color:var(--lime);font:10px/1.8 var(--mono);letter-spacing:.06em}
.simple-content ul{padding-left:22px}.simple-content li{margin:8px 0}
@media(max-width:900px){
.section-wrap{width:min(100% - 40px,720px)}
.header-inner{width:calc(100% - 40px)}
.hero{min-height:0;padding-top:132px;padding-bottom:82px;grid-template-columns:minmax(0,1fr);gap:28px}
.hero-copy{padding-bottom:0}.hero-art{width:100%;max-width:560px;margin-inline:auto}
.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-card:last-child{grid-column:1/-1}
.about-layout{grid-template-columns:minmax(0,1fr);gap:42px}
.about-visual{width:100%;max-width:520px;margin-inline:auto}
.contact-section{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media(max-width:700px){
:root{scroll-padding-top:76px}
.header-inner{height:72px}
.menu-toggle{display:flex;flex:0 0 44px;width:44px;height:44px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1px solid rgba(232,245,154,.28);border-radius:3px;background:rgba(11,53,39,.72);color:var(--cream);cursor:pointer}
.menu-toggle span{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .2s ease}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav{position:absolute;top:calc(100% - 1px);left:20px;right:20px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px;background:rgba(11,53,39,.98);border:1px solid rgba(232,245,154,.18);box-shadow:0 18px 35px rgba(0,0,0,.22);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav>a{padding:13px 4px;border-bottom:1px solid rgba(232,245,154,.1)}
.nav>a:last-child{border-bottom:0}.nav .nav-contact{margin:8px 0;padding:12px}
.hero{padding-top:116px;padding-bottom:76px}
.hero h1{font-size:clamp(39px,9.5vw,60px)}
.hero-art{height:clamp(330px,94vw,440px)}
.intro-band{grid-template-columns:minmax(0,1fr) auto;gap:12px 18px}
.intro-band>p:first-child{grid-column:1/-1;margin:0}
.section-block{padding-top:76px;padding-bottom:76px}
.section-heading{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:34px}
.services-grid{grid-template-columns:minmax(0,1fr)}.service-card:last-child{grid-column:auto}.service-card{min-height:0}
.method-step{grid-template-columns:28px 38px minmax(0,1fr);gap:12px}.method-step .step-end{display:none}
.about-visual{min-height:320px}
.field-row{grid-template-columns:minmax(0,1fr)}
.footer-main{grid-template-columns:minmax(0,1fr);gap:22px}
.footer-bottom{flex-wrap:wrap;gap:14px 20px}.footer-bottom nav{flex-wrap:wrap}
.simple-page{padding:92px 16px 28px}
}
@media(max-width:390px){
.section-wrap,.header-inner{width:calc(100% - 32px)}
.nav{left:16px;right:16px}
.hero h1{font-size:clamp(35px,9.3vw,42px)}
.hero-actions{align-items:stretch;flex-direction:column;gap:14px}
.hero-actions .button{width:100%;justify-content:space-between}
.hero-art{height:320px}.browser-card{width:82%}
.browser-content{min-height:275px;padding:17px 18px}
.mini-kicker{margin-top:30px;font-size:6px}
.mini-headline{font-size:clamp(30px,8.5vw,36px)}
.floating-note{padding:10px 11px;font-size:9px}
.section-heading h2,.about-copy h2,.contact-heading h2{font-size:clamp(33px,8.8vw,40px)}
.contact-form-wrap{padding:20px 15px}.form-top{flex-wrap:wrap;gap:12px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.js-motion .reveal,.js-motion .service-card.reveal{opacity:1!important;transform:none!important;filter:none!important}
}


/* M&C final polish — mobile-first containment and subtle ambient details */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
body {
  position: relative;
  background-color: #092a20;
  isolation: isolate;
}
main, header, footer, section, .section-wrap, .header-inner {
  min-width: 0;
  max-width: 100%;
}
.hero {
  width: min(100%, 1180px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
}
.hero-copy, .hero-art { min-width: 0; }
.hero h1 { overflow-wrap: normal; word-break: normal; }
.hero-art { contain: layout paint; }
.hero-art::before { max-width: 100%; }
.browser-card { max-width: 100%; }
.floating-note { max-width: min(48%, 220px); }
.color-orbs { position: fixed; inset: 0; width: 100%; height: 100%; overflow: clip; }
.site-glow { max-width: 100vw; }
#servizi, .method-section, .contact-section { overflow: clip; }
@media (max-width: 900px) {
  .hero {
    width: min(100% - 40px, 720px);
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 120px;
    padding-bottom: 74px;
    gap: 30px;
  }
  .hero-copy { width: 100%; max-width: 100%; }
  .hero h1 { max-width: 100%; font-size: clamp(36px, 7.5vw, 58px); }
  .hero-description { max-width: 100%; }
  .hero-art { width: 100%; max-width: 560px; margin: 0 auto; }
  .floating-note { max-width: 48%; }
}
@media (max-width: 520px) {
  .section-wrap { width: calc(100% - 36px); }
  .header-inner { width: calc(100% - 36px); }
  .brand { gap: 9px; }
  .brand img { display: block; width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
  .brand-copy { white-space: nowrap; }
  .hero { width: calc(100% - 36px); padding-top: 108px; gap: 26px; }
  .hero .eyebrow { flex-wrap: wrap; gap: 8px; font-size: 9px; letter-spacing: .08em; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(34px, 9.4vw, 46px); line-height: 1.06; letter-spacing: -.065em; }
  .hero-description { font-size: 14px; line-height: 1.8; margin-top: 22px; }
  .hero-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 14px; }
  .hero-actions .button { width: 100%; min-height: 58px; padding: 16px 18px; white-space: normal; }
  .hero-actions .text-link { align-self: flex-start; }
  .hero-footnote { align-items: flex-start; gap: 12px; font-size: 10px; }
  .hero-art { height: clamp(300px, 88vw, 380px); overflow: clip; }
  .art-caption { left: 0; right: 0; font-size: 8px; }
  .orbit-one { width: min(95vw, 380px); }
  .orbit-two { width: min(82vw, 320px); }
  .browser-card { width: min(82%, 340px); }
  .browser-content { min-height: 255px; padding: 16px; }
  .mini-headline { font-size: clamp(28px, 8vw, 36px); }
  .floating-note { max-width: 47%; padding: 9px 10px; font-size: 8px; }
  .note-top { right: 0; top: 30px; }
  .note-bottom { left: 0; bottom: 12px; }
  .scroll-cue { display: none; }
  .intro-band { width: calc(100% - 36px); }
  .method-step { grid-template-columns: 26px 32px minmax(0, 1fr); gap: 10px; }
  .method-step h3 { font-size: 15px; }
  .method-step p { font-size: 12px; }
  .contact-section { gap: 28px; }
  .contact-form-wrap { width: 100%; padding: 18px 14px; }
  .form-top { align-items: flex-start; flex-wrap: wrap; }
  .form-indicator { font-size: 8px; }
  .footer-main { min-width: 0; }
  .footer-email { overflow-wrap: anywhere; }
}
/* Quiet, layered motion: fine grain of light and floating linework, never layout-shifting */
@keyframes mc-ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -12px, 0) scale(1.025); }
}
@keyframes mc-line-shimmer {
  0%, 100% { opacity: .16; }
  50% { opacity: .34; }
}
@keyframes mc-card-glint {
  0%, 100% { opacity: 0; transform: translateX(-120%) rotate(18deg); }
  18%, 75% { opacity: .22; }
  55% { opacity: .08; transform: translateX(160%) rotate(18deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: mc-ambient-drift 13s ease-in-out infinite, mc-line-shimmer 9s ease-in-out infinite; }
  .hero-art::after { animation: ambient-pulse 7s ease-in-out infinite, mc-line-shimmer 11s ease-in-out infinite; }
  .art-orbit { animation: mc-line-shimmer 8s ease-in-out infinite; }
  .service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 25%, rgba(232,245,154,.11) 48%, transparent 68%);
    transform: translateX(-120%);
    opacity: 0;
  }
  .service-card:hover::after { animation: mc-card-glint 1.1s ease-out both; }
  .service-card, .method-step { transition: border-color .35s ease, background-color .35s ease, transform .35s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-art::after, .art-orbit, .service-card::after { animation: none !important; }
}


/* Fix: the process timeline must never collapse its text column on narrow screens */
.method-list { width: 100%; max-width: 100%; }
.method-step {
  width: 100%;
  min-width: 0;
  grid-template-columns: 52px 54px minmax(0, 1fr) auto !important;
}
.method-step > div:nth-child(3) {
  width: 100%;
  min-width: 0;
  grid-column: auto;
}
.method-step h3, .method-step p {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.method-symbol img {
  display: block;
  width: 70%;
  height: 70%;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(185,232,200,.2));
}
@media (max-width: 760px) {
  .method-step {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: start;
    padding: 22px 8px 22px 0 !important;
  }
  .method-step > .method-no {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 2px 0 0;
    font-size: 10px;
  }
  .method-step > .method-symbol { display: none !important; }
  .method-step > div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }
  .method-step > .step-end { display: none !important; }
  .method-step h3 { font-size: clamp(16px, 4.5vw, 20px) !important; line-height: 1.35 !important; }
  .method-step p { font-size: 14px !important; line-height: 1.75 !important; }
  .method-list::before { left: 17px !important; }
  .method-step::before { left: 13px !important; }
}
@media (max-width: 420px) {
  .method-step { grid-template-columns: 36px minmax(0, 1fr) !important; column-gap: 12px !important; }
  .method-step > .method-no { width: 32px; height: 32px; min-width: 32px; }
  .method-step h3 { font-size: 15px !important; }
  .method-step p { font-size: 13px !important; }
}

/* Keep the skip-navigation affordance available to keyboard users without showing a giant button on mobile */
.skip-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link:focus {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  clip: auto !important;
  left: 12px !important;
  top: 12px !important;
}

/* Brand-led decoration: layered logo marks, tiny green particles and slow orbital motion */
@keyframes mc-mark-float {
  0%, 100% { transform: translate3d(0,0,0) rotate(-5deg); }
  50% { transform: translate3d(0,-9px,0) rotate(5deg); }
}
@keyframes mc-particle-glow {
  0%, 100% { opacity: .12; }
  50% { opacity: .48; }
}
@media (prefers-reduced-motion: no-preference) {
  .brand img, .footer-brand img { transition: transform .45s ease, filter .45s ease; }
  .brand:hover img, .footer-brand:hover img { transform: rotate(-7deg) scale(1.06); filter: drop-shadow(0 0 12px rgba(185,232,200,.3)); }
  .method-symbol img { animation: mc-mark-float 7s ease-in-out infinite; }
  .method-step:nth-child(even) .method-symbol img { animation-delay: -3.5s; }
  .hero-art .art-star { animation: mc-mark-float 6s ease-in-out infinite; }
  .hero-art .art-orbit { animation: mc-line-shimmer 9s ease-in-out infinite; }
  .hero-art .orbit-two { animation-delay: -4s; }
  .intro-band .band-mark { text-shadow: 0 0 22px rgba(185,232,200,.18); }
  .status-dot, .form-indicator i { animation: mc-particle-glow 2.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .method-symbol img, .hero-art .art-star { animation: none !important; }
}
/* Keep every ambient orb within the viewport; no horizontal scroll or layout changes */
html, body { max-width: 100%; overflow-x: clip; }
.color-orbs { pointer-events: none; }
@media (max-width: 760px) {
  .header-inner { gap: 12px; }
  .brand { flex: 0 1 auto; }
  .menu-toggle { flex-shrink: 0; }
  .hero, .section-wrap { min-width: 0; }
  .hero-art { contain: layout paint; }
}


/* FINAL HOTFIX — timeline stabile su mobile, zoom e viewport stretti.
   motion.css viene caricato dopo styles.css: questa regola finale è intenzionale. */
@media (max-width: 1100px) {
  .method-section .section-wrap {
    width: calc(100% - 40px) !important;
    max-width: 900px !important;
    min-width: 0 !important;
  }
  .method-list {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-left: 0 !important;
  }
  .method-list::before,
  .method-step::before {
    display: none !important;
    content: none !important;
    animation: none !important;
  }
  .method-step,
  .method-step:hover {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .method-step > .method-no {
    display: grid !important;
    position: relative !important;
    z-index: 2 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    aspect-ratio: 1 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(223,234,166,.55) !important;
    border-radius: 50% !important;
    background: #103a28 !important;
    box-shadow: none !important;
    color: #e8f59a !important;
    font-size: 9px !important;
    line-height: 1 !important;
    transform: none !important;
  }
  .method-step > .method-symbol,
  .method-step > .step-end { display: none !important; }
  .method-step > div:nth-child(3) {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .method-step h3 {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 6px !important;
    font-size: clamp(15px, 2vw, 18px) !important;
    line-height: 1.4 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .method-step p {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(12px, 1.6vw, 14px) !important;
    line-height: 1.7 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}
/* Smoother, less jarring motion: animate opacity/transform only and avoid hover jumps on touch. */
.js-motion .reveal:not(.is-visible) {
  filter: none !important;
  transform: translate3d(0, 16px, 0) !important;
}
.js-motion .reveal.is-visible {
  transition: opacity .55s cubic-bezier(.22,.7,.2,1), transform .55s cubic-bezier(.22,.7,.2,1) !important;
  filter: none !important;
  transform: translate3d(0,0,0) !important;
}
@media (max-width: 760px), (pointer: coarse) {
  .service-card, .project-card, .method-step, .button {
    transition-duration: .22s !important;
  }
  .service-card:hover, .project-card:hover, .method-step:hover, .button:hover {
    transform: none !important;
    padding-left: inherit;
    padding-right: inherit;
  }
  .hero::before, .hero-art::after, .hero-art::before,
  .method-section::before, .method-section::after,
  .about-visual::after, .contact-form-wrap::before {
    animation-duration: 24s !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal:not(.is-visible), .js-motion .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}


/* SERVICES SECTION HARDENING — stable cards, no layout shifts or overflow */
#servizi {
  width: min(100% - 48px, 1180px);
  min-width: 0;
  box-sizing: border-box;
}
#servizi .section-heading { align-items: end; min-width: 0; }
#servizi .section-heading > div, #servizi .section-aside { min-width: 0; }
#servizi .services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(12px, 1.6vw, 20px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#servizi .service-card, #servizi .service-card:hover {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  justify-content: flex-start !important; position: relative !important; box-sizing: border-box !important;
  width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: clamp(20px, 2vw, 30px) !important; overflow: hidden !important; transform: none !important;
}
#servizi .service-card > * { min-width: 0; max-width: 100%; }
#servizi .service-card .service-top {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important; margin: 0 0 22px !important;
}
#servizi .service-card h3 {
  margin: 0 0 12px !important; max-width: 100% !important;
  font-size: clamp(17px, 1.45vw, 21px) !important; line-height: 1.35 !important;
  letter-spacing: -.035em !important; overflow-wrap: anywhere !important;
}
#servizi .service-card > p {
  margin: 0 0 16px !important; max-width: 100% !important; font-size: 13px !important;
  line-height: 1.75 !important; overflow-wrap: anywhere !important;
}
#servizi .service-card ul {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important;
  width: 100% !important; min-width: 0 !important; margin: 0 0 18px !important;
  padding: 0 !important; list-style: none !important;
}
#servizi .service-card li {
  display: flex !important; align-items: flex-start !important; gap: 9px !important;
  min-width: 0 !important; font-size: 12px !important; line-height: 1.55 !important; overflow-wrap: anywhere !important;
}
#servizi .service-card .card-link {
  display: inline-flex !important; align-items: center !important; align-self: flex-start !important;
  gap: 8px !important; margin-top: auto !important; padding: 12px 0 0 !important; max-width: 100% !important;
}
#servizi .service-card .card-link span { display: none !important; }
@media (max-width: 900px) {
  #servizi { width: calc(100% - 40px); }
  #servizi .section-heading { align-items: flex-start; gap: 20px; }
  #servizi .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #servizi .service-card:last-child { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) {
  #servizi { width: calc(100% - 32px); padding-top: 76px; padding-bottom: 76px; }
  #servizi .section-heading { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; margin-bottom: 28px !important; }
  #servizi .section-heading h2 { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.12 !important; }
  #servizi .section-aside { width: 100% !important; max-width: 100% !important; font-size: 13px !important; line-height: 1.7 !important; }
  #servizi .services-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 13px !important; }
  #servizi .service-card, #servizi .service-card:hover { grid-column: auto !important; padding: 22px !important; }
  #servizi .service-card .service-top { margin-bottom: 17px !important; }
  #servizi .service-card h3 { font-size: 19px !important; }
  #servizi .service-card > p { font-size: 13px !important; }
}
@media (prefers-reduced-motion: no-preference) {
  #servizi .service-card.reveal, #servizi .service-card.reveal.is-visible {
    animation: none !important; filter: none !important;
    transition: opacity .35s ease, border-color .25s ease, background-color .25s ease !important;
  }
  #servizi .service-card:hover { transform: none !important; }
}




/* CREATIVE REFINEMENT — preserve the original art direction, improve polish and motion */
:root {
  --lime: #d9ed9a;
  --green-soft: #b9e8c8;
  --green-glow: rgba(143, 205, 157, .16);
}
html { scroll-behavior: smooth; }
body {
  background-color: #0b2a20;
  background-image:
    radial-gradient(ellipse at 18% 8%, rgba(49, 111, 77, .22), transparent 36%),
    radial-gradient(ellipse at 88% 27%, rgba(114, 161, 108, .13), transparent 30%),
    linear-gradient(145deg, #0b281e 0%, #0d3325 48%, #09271d 100%);
  background-attachment: scroll;
}
.header {
  background: rgba(8, 35, 26, .68);
  border-bottom-color: rgba(217, 237, 154, .12);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.header.scrolled {
  background: rgba(8, 35, 26, .91);
  box-shadow: 0 12px 35px rgba(0,0,0,.12);
}
.hero {
  isolation: isolate;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(46px, 6.2vw, 82px);
  line-height: .99;
  letter-spacing: -.078em;
  text-wrap: balance;
}
.hero h1 .serif-accent {
  color: #c3e4b7;
  text-shadow: 0 8px 42px rgba(142, 204, 153, .08);
}
.hero-description {
  max-width: 44ch;
  color: rgba(235, 243, 231, .76);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.85;
}
.hero-art {
  filter: drop-shadow(0 25px 60px rgba(0,0,0,.10));
}
.hero-art::after {
  background: radial-gradient(ellipse at center, rgba(139, 194, 133, .13), transparent 68%);
  opacity: .9;
}
.art-orbit { border-color: rgba(197, 226, 153, .24); }
.orbit-one { box-shadow: 0 0 48px rgba(185, 232, 200, .035), inset 0 0 35px rgba(185, 232, 200, .025); }
.browser-card {
  border: 1px solid rgba(226, 240, 215, .22);
  box-shadow: 0 32px 90px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.12);
  will-change: transform;
}
.floating-note {
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.button {
  border-radius: 3px;
  letter-spacing: -.015em;
}
.button-primary {
  color: #173c2b;
  background: linear-gradient(115deg, #e0efb7 0%, #c5e5b8 54%, #b3ddbd 100%);
  box-shadow: 0 8px 28px rgba(179, 221, 189, .10);
}
.button-primary::after { opacity: .45; }
.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(179, 221, 189, .17);
}
.nav-contact {
  border: 1px solid rgba(217,237,154,.24);
  background: rgba(217,237,154,.055);
}
.intro-band {
  border-color: rgba(217,237,154,.17);
  background: linear-gradient(90deg, rgba(255,255,255,.018), rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.section-block { padding-top: clamp(84px, 10vw, 132px); padding-bottom: clamp(84px, 10vw, 132px); }
.section-heading { gap: clamp(24px, 5vw, 72px); }
.section-heading h2, .about-copy h2, .contact-heading h2 {
  text-wrap: balance;
  letter-spacing: -.075em;
}
.serif-accent {
  color: #c0e2b7;
  text-shadow: 0 8px 40px rgba(185,232,200,.06);
}
#servizi .service-card,
.service-card {
  border: 1px solid rgba(217,237,154,.14);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(242,248,230,.065), rgba(242,248,230,.018));
  box-shadow: 0 18px 55px rgba(0,0,0,.08), inset 0 1px rgba(255,255,255,.025);
  transition: transform .45s cubic-bezier(.2,.75,.25,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
#servizi .service-card:hover, .service-card:hover {
  border-color: rgba(217,237,154,.32);
  background: linear-gradient(145deg, rgba(217,237,154,.085), rgba(242,248,230,.025));
  box-shadow: 0 26px 65px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.045);
  transform: translateY(-4px);
}
#servizi .service-card .service-icon, .service-card .service-icon {
  color: #d9edb7;
  border-color: rgba(217,237,154,.22);
}
.method-section {
  background:
    radial-gradient(ellipse at 86% 8%, rgba(104, 164, 112, .13), transparent 34%),
    linear-gradient(145deg, #0e3828 0%, #0b3022 58%, #0a291e 100%);
}
.method-list { border-top-color: rgba(217,237,154,.22); }
.method-step {
  border-bottom-color: rgba(217,237,154,.14);
  transition: background .35s ease, padding .35s ease, border-color .35s ease;
}
.method-step:hover {
  background: linear-gradient(90deg, rgba(217,237,154,.045), transparent 80%);
  border-bottom-color: rgba(217,237,154,.25);
}
.about-section {
  background: linear-gradient(135deg, #edf1e4 0%, #e4eddc 52%, #dce8d6 100%);
}
.about-section::before, .about-section::after {
  border-color: rgba(20, 75, 49, .10);
}
.contact-form-wrap {
  border: 1px solid rgba(217,237,154,.17);
  background: linear-gradient(145deg, rgba(244,248,233,.055), rgba(244,248,233,.018));
  box-shadow: 0 24px 70px rgba(0,0,0,.13), inset 0 1px rgba(255,255,255,.035);
}
#contact-form input, #contact-form textarea, #contact-form select {
  background: rgba(3, 24, 17, .22);
  border-color: rgba(217,237,154,.18);
  border-radius: 3px;
}
#contact-form input:focus, #contact-form textarea:focus, #contact-form select:focus {
  border-color: rgba(217,237,154,.62);
  box-shadow: 0 0 0 3px rgba(217,237,154,.08);
}
.footer {
  background: linear-gradient(180deg, #09291e, #071f17);
  border-top-color: rgba(217,237,154,.14);
}
/* Remove only the tiny decorative rules and scattered point textures; keep the large, soft visual forms. */
.footnote-line, .scroll-cue > span { display: none !important; }
.hero-copy .eyebrow::after { display: none !important; }
body::before { opacity: .08 !important; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .service-card:hover { transform: translateY(-5px); }
  .button-primary:hover { transform: translateY(-2px); }
}
@media (max-width: 950px) {
  .hero h1 { font-size: clamp(42px, 7.2vw, 68px); }
  .section-block { padding-top: 86px; padding-bottom: 86px; }
}
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(42px, 11vw, 60px); line-height: 1.02; }
  .hero-description { font-size: 14px; line-height: 1.8; }
  .hero-art { filter: none; }
  .browser-card { box-shadow: 0 22px 55px rgba(0,0,0,.18); }
  .section-block { padding-top: 72px; padding-bottom: 72px; }
  .service-card, #servizi .service-card { box-shadow: 0 14px 36px rgba(0,0,0,.08); }
  .service-card:hover, #servizi .service-card:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ==========================================================
   SOLAR HERO — grande sole tagliato a sinistra e orbite visibili
   Questa patch è in motion.css, caricato dopo styles.css.
   ========================================================== */
.solar-background{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  z-index:0!important;
  display:block!important;
  overflow:hidden!important;
  pointer-events:none!important;
  contain:paint!important;
  isolation:isolate!important;
  background:
    radial-gradient(ellipse at 5% 45%,rgba(20,115,63,.14),transparent 46%),
    linear-gradient(180deg,#03180f 0%,#052116 48%,#03170f 100%)!important;
}
.solar-background::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(1,18,11,.13),rgba(1,18,11,.03) 48%,rgba(1,18,11,.19)),
    linear-gradient(180deg,rgba(2,16,10,.24),rgba(2,16,10,.06) 40%,rgba(2,16,10,.27))!important;
}
.solar-background__image{display:none!important}
.solar-scene{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  left:0!important;
  top:0!important;
  transform:none!important;
  z-index:2!important;
  overflow:visible!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
  contain:paint!important;
}
.solar-sun{
  position:absolute!important;
  left:0!important;
  top:44%!important;
  width:clamp(480px,58vw,940px)!important;
  height:clamp(480px,58vw,940px)!important;
  max-width:none!important;
  aspect-ratio:1!important;
  transform:translate(-50%,-50%)!important;
  z-index:4!important;
  display:block!important;
  border-radius:50%!important;
  border:1px solid rgba(186,255,205,.40)!important;
  background:
    radial-gradient(circle at 67% 28%,rgba(174,255,194,.32) 0%,transparent 17%),
    radial-gradient(circle at 66% 40%,rgba(83,220,127,.18) 0%,transparent 38%),
    radial-gradient(circle at 42% 42%,rgba(49,170,90,.06) 0 30%,rgba(1,30,17,.22) 65%,rgba(1,17,10,.86) 100%),
    radial-gradient(circle at 35% 35%,#247d49 0%,#0e542f 36%,#07351f 67%,#02160d 100%)!important;
  box-shadow:
    inset -24px -12px 45px rgba(0,0,0,.72),
    inset 12px 8px 34px rgba(161,255,186,.12),
    12px 0 48px rgba(36,174,86,.11),
    0 0 90px rgba(35,174,83,.09)!important;
  animation:mc-sun-breathe 8s ease-in-out infinite alternate!important;
  will-change:box-shadow;
}
.solar-sun::before{
  content:""!important;
  position:absolute!important;
  inset:2%!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:
    repeating-radial-gradient(ellipse at 64% 37%,transparent 0 22px,rgba(174,255,196,.04) 23px 24px,transparent 25px 39px),
    radial-gradient(ellipse at 70% 35%,rgba(153,255,177,.14),transparent 48%)!important;
  mask-image:linear-gradient(90deg,transparent 8%,#000 54%,#000 100%);
  opacity:.78!important;
}
.solar-sun::after{
  content:""!important;
  position:absolute!important;
  right:8%!important;
  top:25%!important;
  width:10%!important;
  height:10%!important;
  border-radius:50%!important;
  background:radial-gradient(circle,#c5ffd4 0%,rgba(111,251,157,.25) 23%,transparent 72%)!important;
  filter:blur(8px)!important;
  opacity:.58!important;
}
/* Le orbite hanno lo stesso fuoco del sole (x = 0) e si estendono attraverso lo schermo. */
.solar-track{
  position:absolute!important;
  left:0!important;
  top:44%!important;
  width:var(--orbit-width)!important;
  height:var(--orbit-height)!important;
  max-width:none!important;
  max-height:none!important;
  border:1px solid rgba(238,255,243,.28)!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%) rotateX(59deg)!important;
  transform-origin:50% 50%!important;
  z-index:2!important;
  display:block!important;
  opacity:1!important;
  box-shadow:0 0 12px rgba(219,255,228,.035),inset 0 0 10px rgba(219,255,228,.018)!important;
}
.solar-track--one{--orbit-width:54vw;--orbit-height:42vh}
.solar-track--two{--orbit-width:78vw;--orbit-height:58vh}
.solar-track--three{--orbit-width:108vw;--orbit-height:76vh}
.solar-track--four{--orbit-width:142vw;--orbit-height:94vh}
.solar-track--five{--orbit-width:184vw;--orbit-height:116vh}
.solar-track--six{--orbit-width:230vw;--orbit-height:138vh}
.solar-track__motion{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  border-radius:50%!important;
  animation-name:mc-planet-orbit-fixed!important;
  animation-duration:var(--orbit-duration,58s)!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-delay:var(--orbit-delay,0s)!important;
  animation-play-state:running!important;
  transform-origin:50% 50%!important;
  will-change:transform!important;
}
.solar-track--one .solar-track__motion{--orbit-duration:12s;--orbit-delay:-2s}
.solar-track--two .solar-track__motion{--orbit-duration:19s;--orbit-delay:-8s;animation-direction:reverse!important}
.solar-track--three .solar-track__motion{--orbit-duration:27s;--orbit-delay:-15s}
.solar-track--four .solar-track__motion{--orbit-duration:36s;--orbit-delay:-5s;animation-direction:reverse!important}
.solar-track--five .solar-track__motion{--orbit-duration:48s;--orbit-delay:-23s}
.solar-track--six .solar-track__motion{--orbit-duration:64s;--orbit-delay:-35s;animation-direction:reverse!important}
@keyframes mc-planet-orbit-fixed{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.planet{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  display:block!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%) rotateX(-59deg)!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  border:1px solid rgba(216,255,227,.32)!important;
  background:radial-gradient(circle at 28% 22%,#d6ffe0 0%,#73e89b 20%,#20834b 56%,#031b10 100%)!important;
  box-shadow:
    inset -7px -5px 10px rgba(0,0,0,.78),
    inset 2px 2px 6px rgba(237,255,242,.50),
    0 0 13px rgba(102,255,157,.52),
    0 0 32px rgba(48,221,112,.19)!important;
  overflow:visible!important;
}
.planet__surface{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  border-radius:50%!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 28% 22%,rgba(233,255,238,.9),rgba(145,255,177,.32) 20%,transparent 44%),
    repeating-linear-gradient(125deg,rgba(206,255,218,.18) 0 2px,transparent 2px 8px),
    radial-gradient(circle at 38% 35%,#52cb7a 0%,#187241 57%,#031b10 100%)!important;
  background-size:100% 100%,220% 100%,100% 100%!important;
  animation:mc-planet-surface-fixed 8s linear infinite!important;
  animation-play-state:running!important;
}
@keyframes mc-planet-surface-fixed{
  from{background-position:0 0,0 0,0 0}
  to{background-position:0 0,220% 0,0 0}
}
.planet--mercury{width:clamp(12px,1.1vw,19px)!important}
.planet--venus{width:clamp(17px,1.8vw,31px)!important}
.planet--earth{width:clamp(23px,2.25vw,41px)!important}
.planet--mars{width:clamp(14px,1.35vw,24px)!important}
.planet--saturn{width:clamp(25px,2.8vw,51px)!important}
.planet--jupiter{width:clamp(31px,3.3vw,60px)!important}
.planet--saturn .planet__ring{
  position:absolute!important;
  z-index:2!important;
  left:-37%!important;top:33%!important;
  width:174%!important;height:38%!important;
  border:2px solid rgba(235,255,241,.75)!important;
  border-left-color:rgba(235,255,241,.22)!important;
  border-right-color:rgba(235,255,241,.34)!important;
  border-radius:50%!important;
  transform:rotate(-24deg)!important;
  box-shadow:0 0 10px rgba(172,255,197,.32)!important;
}
@keyframes mc-sun-breathe{
  from{box-shadow:inset -24px -12px 45px rgba(0,0,0,.72),inset 12px 8px 34px rgba(161,255,186,.09),12px 0 35px rgba(36,174,86,.07),0 0 70px rgba(35,174,83,.05)}
  to{box-shadow:inset -24px -12px 45px rgba(0,0,0,.72),inset 12px 8px 34px rgba(161,255,186,.16),12px 0 60px rgba(36,174,86,.16),0 0 112px rgba(35,174,83,.13)}
}
/* Remove the old scattered decorative dots and section pseudo-orbits; keep only the designed solar system. */
.color-orbs,.color-orb,.orb-particle,.solar-star,.site-glow{display:none!important}
body::before{content:none!important;display:none!important}
.hero::before,.method-section::before,.method-section::after,.about-section::before,.about-section::after,.intro-band::before,.intro-band::after,.services-section::before,.services-section::after,.contact-section::before,.contact-section::after{content:none!important;display:none!important}
.art-star{display:none!important}
/* Keep the sun and orbits fixed to the viewport instead of drifting into the lower-right corner. */
@media(max-width:900px){
  .solar-sun{top:43%!important;width:clamp(450px,75vw,720px)!important;height:clamp(450px,75vw,720px)!important}
  .solar-track{top:43%!important;transform:translate(-50%,-50%) rotateX(61deg)!important}
  .solar-track--one{--orbit-width:78vw;--orbit-height:38vh}
  .solar-track--two{--orbit-width:106vw;--orbit-height:54vh}
  .solar-track--three{--orbit-width:140vw;--orbit-height:72vh}
  .solar-track--four{--orbit-width:178vw;--orbit-height:90vh}
  .solar-track--five{--orbit-width:220vw;--orbit-height:110vh}
  .solar-track--six{--orbit-width:260vw;--orbit-height:130vh}
}
@media(max-width:600px){
  .solar-sun{top:39%!important;width:clamp(390px,102vw,570px)!important;height:clamp(390px,102vw,570px)!important}
  .solar-track{top:39%!important;border-color:rgba(238,255,243,.23)!important;transform:translate(-50%,-50%) rotateX(63deg)!important}
  .solar-track--one{--orbit-width:95vw;--orbit-height:30vh}
  .solar-track--two{--orbit-width:130vw;--orbit-height:44vh}
  .solar-track--three{--orbit-width:165vw;--orbit-height:60vh}
  .solar-track--four{--orbit-width:205vw;--orbit-height:76vh}
  .solar-track--five{--orbit-width:248vw;--orbit-height:92vh}
  .solar-track--six{--orbit-width:290vw;--orbit-height:110vh}
  .planet--jupiter{width:35px!important}
  .planet--saturn{width:30px!important}
  .solar-track__motion{animation-duration:calc(var(--orbit-duration,58s) * 1.15)!important}
}
@media(prefers-reduced-motion:reduce){
  .solar-track__motion,.planet__surface,.planet--saturn .planet__ring,.solar-sun{animation:none!important;will-change:auto!important}
}


/* SOLAR V2 — one dimensional sun, thin 2D orbit ellipses and JavaScript-positioned dots */
.solar-background{
  position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;
  z-index:0!important;display:block!important;overflow:hidden!important;pointer-events:none!important;
  contain:paint!important;isolation:isolate!important;
  background:linear-gradient(180deg,#03180f 0%,#052116 48%,#03170f 100%)!important;
}
.solar-background::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:linear-gradient(90deg,rgba(1,18,11,.08),transparent 48%,rgba(1,18,11,.16)),
    linear-gradient(180deg,rgba(2,16,10,.18),transparent 45%,rgba(2,16,10,.23))!important;
}
.solar-background__image{display:none!important}
.solar-scene{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  left:0!important;top:0!important;transform:none!important;aspect-ratio:auto!important;
  z-index:2!important;opacity:1!important;filter:none!important;overflow:visible!important;pointer-events:none!important;
}
.solar-sun{
  position:absolute!important;left:0!important;top:44%!important;
  width:clamp(500px,59vw,900px)!important;height:clamp(500px,59vw,900px)!important;
  max-width:none!important;aspect-ratio:1!important;transform:translate(-50%,-50%)!important;
  display:block!important;border-radius:50%!important;z-index:3!important;
  border:1px solid rgba(147,239,174,.38)!important;
  background:
    radial-gradient(ellipse at 70% 30%,rgba(175,255,192,.24),transparent 24%),
    radial-gradient(ellipse at 67% 42%,rgba(62,196,106,.15),transparent 48%),
    radial-gradient(circle at 34% 36%,#257849 0%,#0f512f 34%,#07331f 65%,#02160d 100%)!important;
  box-shadow:inset -28px -12px 50px rgba(0,0,0,.74),inset 8px 8px 34px rgba(172,255,190,.12),
    14px 0 48px rgba(42,191,91,.12),0 0 90px rgba(35,174,83,.08)!important;
  animation:mc-sun-soft-pulse 10s ease-in-out infinite alternate!important;
  will-change:box-shadow;
}
.solar-sun::before{
  content:""!important;position:absolute!important;inset:2%!important;border-radius:50%!important;pointer-events:none!important;
  background:repeating-radial-gradient(ellipse at 70% 40%,transparent 0 28px,rgba(164,247,184,.035) 29px 30px,transparent 31px 50px)!important;
  opacity:.75!important;mask-image:linear-gradient(90deg,transparent 2%,#000 62%,#000 100%);
}
.solar-sun::after{content:none!important;display:none!important}
/* Orbit ellipses are flat, not perspective-transformed. All share the sun's centre at x = 0. */
.solar-track{
  position:absolute!important;left:0!important;top:44%!important;
  width:var(--orbit-width)!important;height:var(--orbit-height)!important;
  max-width:none!important;max-height:none!important;
  border:1px solid rgba(245,255,248,.30)!important;border-radius:50%!important;
  transform:translate(-50%,-50%)!important;transform-origin:center!important;
  display:block!important;opacity:1!important;z-index:5!important;
  box-shadow:0 0 7px rgba(238,255,243,.045)!important;
  overflow:visible!important;perspective:none!important;
}
.solar-track--one{--orbit-width:62vw;--orbit-height:39vh}
.solar-track--two{--orbit-width:88vw;--orbit-height:54vh}
.solar-track--three{--orbit-width:116vw;--orbit-height:69vh}
.solar-track--four{--orbit-width:148vw;--orbit-height:86vh}
.solar-track--five{--orbit-width:184vw;--orbit-height:104vh}
.solar-track--six{--orbit-width:224vw;--orbit-height:124vh}
.solar-orbit-dot{
  position:absolute!important;left:50%!important;top:50%!important;
  display:block!important;flex:none!important;border:0!important;border-radius:50%!important;
  transform:translate3d(0,0,0)!important;
  box-shadow:0 0 9px 2px rgba(93,247,139,.70),0 0 23px 6px rgba(46,206,101,.20)!important;
  will-change:transform!important;pointer-events:none!important;
}
.solar-orbit-dot--tiny{width:5px!important;height:5px!important;background:#dbffe4!important}
.solar-orbit-dot--small{width:8px!important;height:8px!important;background:#a2fdbb!important;box-shadow:0 0 9px 2px rgba(93,247,139,.76),0 0 24px 7px rgba(46,206,101,.23)!important}
.solar-orbit-dot--medium{width:12px!important;height:12px!important;background:#75f59b!important;box-shadow:0 0 12px 3px rgba(93,247,139,.72),0 0 30px 8px rgba(46,206,101,.26)!important}
.solar-orbit-dot--large{width:17px!important;height:17px!important;background:#50e985!important;box-shadow:0 0 14px 3px rgba(93,247,139,.76),0 0 32px 10px rgba(46,206,101,.28)!important}
@keyframes mc-sun-soft-pulse{
  from{box-shadow:inset -28px -12px 50px rgba(0,0,0,.74),inset 8px 8px 34px rgba(172,255,190,.09),14px 0 35px rgba(42,191,91,.08),0 0 65px rgba(35,174,83,.05)}
  to{box-shadow:inset -28px -12px 50px rgba(0,0,0,.74),inset 8px 8px 34px rgba(172,255,190,.16),14px 0 62px rgba(42,191,91,.16),0 0 100px rgba(35,174,83,.12)}
}
/* Completely remove leftover particle fields, sparkles, tiny decorative dots and pseudo-orbit rings. */
.color-orbs,.color-orb,.orb-particle,.solar-star,.site-glow{display:none!important;visibility:hidden!important}
body::before,body::after{content:none!important;display:none!important}
.hero::before,.hero::after,#servizi::before,#servizi::after,.services-section::before,.services-section::after,
.method-section::before,.method-section::after,.method-section .section-wrap::before,.method-section .section-wrap::after,
.about-section::before,.about-section::after,.about-section .section-wrap::before,.about-section .section-wrap::after,
.contact-section::before,.contact-section::after,.contact-section .section-wrap::before,.contact-section .section-wrap::after,
.intro-band::before,.intro-band::after,.hero-art .art-star,.orbit-two::before,.orbit-two::after{
  content:none!important;display:none!important;background-image:none!important;
}
@media(max-width:900px){
  .solar-sun{top:42%!important;width:clamp(460px,78vw,700px)!important;height:clamp(460px,78vw,700px)!important}
  .solar-track{top:42%!important}
  .solar-track--one{--orbit-width:78vw;--orbit-height:34vh}
  .solar-track--two{--orbit-width:106vw;--orbit-height:48vh}
  .solar-track--three{--orbit-width:138vw;--orbit-height:62vh}
  .solar-track--four{--orbit-width:174vw;--orbit-height:78vh}
  .solar-track--five{--orbit-width:214vw;--orbit-height:96vh}
  .solar-track--six{--orbit-width:256vw;--orbit-height:114vh}
}
@media(max-width:600px){
  .solar-sun{top:39%!important;width:clamp(390px,104vw,560px)!important;height:clamp(390px,104vw,560px)!important}
  .solar-track{top:39%!important;border-color:rgba(245,255,248,.24)!important}
  .solar-track--one{--orbit-width:94vw;--orbit-height:28vh}
  .solar-track--two{--orbit-width:126vw;--orbit-height:40vh}
  .solar-track--three{--orbit-width:160vw;--orbit-height:54vh}
  .solar-track--four{--orbit-width:198vw;--orbit-height:69vh}
  .solar-track--five{--orbit-width:238vw;--orbit-height:84vh}
  .solar-track--six{--orbit-width:280vw;--orbit-height:101vh}
}
@media(prefers-reduced-motion:reduce){
  .solar-sun{animation:none!important}
  .solar-orbit-dot{transition:none!important}
}

/* M&C SOLAR — final responsive composition: cropped sun + 2 flat opposite orbits */
.solar-background{
  position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;
  z-index:0!important;display:block!important;overflow:hidden!important;pointer-events:none!important;
  contain:paint!important;isolation:isolate!important;
  background:linear-gradient(180deg,#03180f 0%,#052116 48%,#03170f 100%)!important;
}
.solar-background::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:linear-gradient(90deg,rgba(1,18,11,.06),transparent 48%,rgba(1,18,11,.14)),
    linear-gradient(180deg,rgba(2,16,10,.14),transparent 45%,rgba(2,16,10,.2))!important;
}
.solar-background__image{display:none!important}
.solar-scene{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  left:0!important;top:0!important;transform:none!important;aspect-ratio:auto!important;
  z-index:2!important;opacity:1!important;filter:none!important;overflow:visible!important;pointer-events:none!important;
}
/* The only 3D object: the large sun, always centred on the left screen edge. */
.solar-sun{
  position:absolute!important;left:0!important;top:44%!important;
  width:clamp(500px,59vw,900px)!important;height:clamp(500px,59vw,900px)!important;
  max-width:none!important;aspect-ratio:1!important;transform:translate(-50%,-50%)!important;
  display:block!important;border-radius:50%!important;z-index:3!important;
  border:1px solid rgba(147,239,174,.38)!important;
  background:
    radial-gradient(ellipse at 70% 30%,rgba(175,255,192,.24),transparent 24%),
    radial-gradient(ellipse at 67% 42%,rgba(62,196,106,.15),transparent 48%),
    radial-gradient(circle at 34% 36%,#257849 0%,#0f512f 34%,#07331f 65%,#02160d 100%)!important;
  box-shadow:inset -28px -12px 50px rgba(0,0,0,.74),inset 8px 8px 34px rgba(172,255,190,.12),
    14px 0 48px rgba(42,191,91,.12),0 0 90px rgba(35,174,83,.08)!important;
  animation:mc-sun-soft-pulse 10s ease-in-out infinite alternate!important;
  will-change:box-shadow;
}
.solar-sun::before{
  content:""!important;position:absolute!important;inset:2%!important;border-radius:50%!important;pointer-events:none!important;
  background:repeating-radial-gradient(ellipse at 70% 40%,transparent 0 28px,rgba(164,247,184,.035) 29px 30px,transparent 31px 50px)!important;
  opacity:.75!important;mask-image:linear-gradient(90deg,transparent 2%,#000 62%,#000 100%);
}
.solar-sun::after{content:none!important;display:none!important}
/* Two 2D rings sharing the same centre; their dots are moved by requestAnimationFrame. */
.solar-track{
  position:absolute!important;left:0!important;top:44%!important;
  width:var(--orbit-width)!important;height:var(--orbit-height)!important;
  max-width:none!important;max-height:none!important;
  border:1px solid rgba(245,255,248,.36)!important;border-radius:50%!important;
  transform:translate(-50%,-50%)!important;transform-origin:center!important;
  display:block!important;opacity:1!important;z-index:5!important;overflow:visible!important;
  box-shadow:0 0 7px rgba(238,255,243,.05)!important;perspective:none!important;
}
.solar-track--inner{--orbit-width:clamp(650px,74vw,1450px);--orbit-height:42vh}
.solar-track--outer{--orbit-width:clamp(1050px,132vw,2500px);--orbit-height:78vh}
.solar-orbit-dot{
  position:absolute!important;left:50%!important;top:50%!important;
  display:block!important;flex:none!important;border:0!important;border-radius:50%!important;
  transform:translate(-50%,-50%)!important;will-change:transform!important;pointer-events:none!important;
  animation:none!important;
}
.solar-orbit-dot--inner{
  width:10px!important;height:10px!important;background:#a2fdbb!important;border-radius:50%!important;
  box-shadow:0 0 9px 2px rgba(93,247,139,.78),0 0 24px 7px rgba(46,206,101,.25)!important;
}
.solar-orbit-dot--outer{
  width:16px!important;height:16px!important;background:#50e985!important;border-radius:50%!important;
  box-shadow:0 0 14px 3px rgba(93,247,139,.80),0 0 32px 10px rgba(46,206,101,.31)!important;
}
@keyframes mc-sun-soft-pulse{
  from{box-shadow:inset -28px -12px 50px rgba(0,0,0,.74),inset 8px 8px 34px rgba(172,255,190,.09),14px 0 35px rgba(42,191,91,.08),0 0 65px rgba(35,174,83,.05)}
  to{box-shadow:inset -28px -12px 50px rgba(0,0,0,.74),inset 8px 8px 34px rgba(172,255,190,.16),14px 0 62px rgba(42,191,91,.16),0 0 100px rgba(35,174,83,.12)}
}
/* Hide the random particle layers, old star field and unwanted arrow-shaped decorations. */
.color-orbs,.color-orb,.orb-particle,.solar-star,.site-glow{display:none!important;visibility:hidden!important}
body::before,body::after{content:none!important;display:none!important}
.hero::before,.hero::after,#servizi::before,#servizi::after,.services-section::before,.services-section::after,
.method-section::before,.method-section::after,.method-section .section-wrap::before,.method-section .section-wrap::after,
.about-section::before,.about-section::after,.about-section .section-wrap::before,.about-section .section-wrap::after,
.contact-section::before,.contact-section::after,.contact-section .section-wrap::before,.contact-section .section-wrap::after,
.intro-band::before,.intro-band::after,.hero-art .art-star,.orbit-two::before,.orbit-two::after{
  content:none!important;display:none!important;background-image:none!important;
}
.service-card li::before,.card-link::before,.card-link::after,.card-link span::after{
  content:none!important;display:none!important;
}
.card-link{justify-content:flex-start!important}
.mini-arrow,.card-link span:empty{display:none!important}
/* All brand marks are circular, including the header logo and repeated emblem logos. */
.brand img{
  width:54px!important;height:54px!important;max-height:none!important;aspect-ratio:1/1!important;
  object-fit:cover!important;object-position:center!important;border-radius:50%!important;
  padding:2px!important;border:1px solid rgba(145,241,174,.36)!important;
  background:rgba(4,38,23,.85)!important;
  box-shadow:0 0 0 4px rgba(111,223,147,.045),0 0 18px rgba(74,210,119,.10)!important;
}
.method-symbol img,.about-orbit-core img,.footer-brand img,.about-logo{
  aspect-ratio:1/1!important;object-fit:cover!important;object-position:center!important;
  border-radius:50%!important;overflow:hidden!important;
}
.method-symbol img{width:34px;height:34px;border:1px solid rgba(145,241,174,.22);background:rgba(4,38,23,.86);padding:2px}
.about-orbit-core img{width:76%!important;height:76%!important}
.icon-refresh{display:grid!important;place-items:center!important}
.refresh-loop{display:block;width:21px;height:21px;border:1.5px solid currentColor;border-radius:50%;opacity:.9}
/* Same cropped sun and orbit geometry on phones: no full solar system scaled into view. */
@media(max-width:600px){
  .solar-sun{left:0!important;top:44%!important;width:500px!important;height:500px!important;transform:translate(-50%,-50%)!important}
  .solar-track{left:0!important;top:44%!important;transform:translate(-50%,-50%)!important}
  .solar-track--inner{--orbit-width:650px;--orbit-height:42vh}
  .solar-track--outer{--orbit-width:1050px;--orbit-height:78vh}
  .brand img{width:43px!important;height:43px!important}
  .method-symbol img{width:30px;height:30px}
}

/* Return to the original two-orbit geometry; add two evenly interpolated tracks. */
.solar-background{--solar-sun-radius:clamp(250px,29.5vw,470px)!important}
.solar-scene{filter:none!important;opacity:1!important}
.solar-sun{left:0!important;top:44%!important;z-index:3!important}
.solar-track{
  left:0!important;top:44%!important;
  width:var(--orbit-width)!important;height:var(--orbit-height)!important;
  border:0!important;border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;overflow:visible!important;
  opacity:1!important;z-index:4!important;
  background:none!important;box-shadow:none!important;perspective:none!important;
}
.solar-track::before{
  content:""!important;position:absolute!important;inset:0!important;
  border:1px solid rgba(244,255,248,.34)!important;border-radius:50%!important;
  pointer-events:none!important;background:transparent!important;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--solar-sun-radius),#000 calc(var(--solar-sun-radius) + 7px))!important;
  mask-image:radial-gradient(circle at 50% 50%,transparent 0 var(--solar-sun-radius),#000 calc(var(--solar-sun-radius) + 7px))!important;
}
/* Original proportions (74vw × 42vh to 132vw × 78vh), scaled 1.5×.
   The two intermediate paths are evenly spaced between those proportions. */
@media(min-width:601px){
  .solar-track--inner{--orbit-width:111vw!important;--orbit-height:63vh!important}
  .solar-track--two{--orbit-width:140vw!important;--orbit-height:81vh!important}
  .solar-track--three{--orbit-width:169vw!important;--orbit-height:99vh!important}
  .solar-track--outer{--orbit-width:198vw!important;--orbit-height:117vh!important}
}
.solar-orbit-dot{
  position:absolute!important;left:50%!important;top:50%!important;
  z-index:6!important;display:block!important;border:0!important;border-radius:50%!important;
  transform:translate(-50%,-50%)!important;pointer-events:none!important;
  animation:none!important;will-change:left,top!important;
}
.solar-orbit-dot--inner{width:10px!important;height:10px!important;background:#a2fdbb!important;box-shadow:0 0 9px 2px rgba(93,247,139,.78),0 0 24px 7px rgba(46,206,101,.25)!important}
.solar-orbit-dot--two{width:11px!important;height:11px!important;background:#b5ffca!important;box-shadow:0 0 10px 2px rgba(151,255,181,.9),0 0 25px 8px rgba(58,220,108,.35)!important}
.solar-orbit-dot--three{width:13px!important;height:13px!important;background:#86ffad!important;box-shadow:0 0 11px 3px rgba(120,255,164,.95),0 0 28px 9px rgba(45,219,105,.4)!important}
.solar-orbit-dot--outer{width:16px!important;height:16px!important;background:#50e985!important;box-shadow:0 0 14px 3px rgba(93,247,139,.80),0 0 32px 10px rgba(46,206,101,.31)!important}
@media(max-width:600px){
  .solar-background{--solar-sun-radius:250px!important}
  .solar-sun{left:0!important;top:44%!important;width:500px!important;height:500px!important;transform:translate(-50%,-50%)!important}
  .solar-track{left:0!important;top:44%!important;transform:translate(-50%,-50%)!important}
  .solar-track--inner{--orbit-width:650px!important;--orbit-height:42vh!important}
  .solar-track--two{--orbit-width:783px!important;--orbit-height:54vh!important}
  .solar-track--three{--orbit-width:917px!important;--orbit-height:66vh!important}
  .solar-track--outer{--orbit-width:1050px!important;--orbit-height:78vh!important}
}
@media(prefers-reduced-motion:reduce){.solar-orbit-dot{transition:none!important}}


/* Additional green light on each existing orbit; orbit geometry stays untouched. */
.solar-orbit-dot--inner-extra{
  width:8px!important;height:8px!important;background:#55e986!important;
  box-shadow:0 0 8px 2px rgba(80,255,141,.9),0 0 20px 6px rgba(40,210,99,.36)!important;
}
.solar-orbit-dot--two-extra{
  width:9px!important;height:9px!important;background:#d0ffdc!important;
  box-shadow:0 0 9px 2px rgba(192,255,207,.94),0 0 22px 7px rgba(95,236,139,.39)!important;
}
.solar-orbit-dot--three-extra{
  width:10px!important;height:10px!important;background:#6df5a0!important;
  box-shadow:0 0 10px 2px rgba(109,245,160,.94),0 0 24px 7px rgba(47,203,111,.40)!important;
}
.solar-orbit-dot--outer-extra{
  width:11px!important;height:11px!important;background:#9affb5!important;
  box-shadow:0 0 11px 3px rgba(154,255,181,.95),0 0 27px 8px rgba(54,220,115,.42)!important;
}


/* Chi siamo: remove the decorative spinning rings and captions; keep the logo only. */
.about-section .about-orbit,
.about-section .about-orbit-caption,
.about-section .about-orbit-art::before,
.about-section .about-orbit-art::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}
.about-section .about-orbit-art{
  max-width:350px!important;
  background:none!important;
}
.about-section .about-orbit-core{
  width:clamp(150px,18vw,190px)!important;
  box-shadow:0 0 18px rgba(78,226,131,.10)!important;
}


/* 3D orbital rings around the Chi siamo logo only.
   Deliberately leaves the section and its background unchanged. */
.about-section .about-orbit-art{
  perspective:900px;
  transform-style:preserve-3d;
}
.about-section .about-logo-orbit{
  position:absolute;
  left:50%;top:50%;
  display:block;
  border-radius:50%;
  box-sizing:border-box;
  pointer-events:none;
  transform-style:preserve-3d;
  backface-visibility:visible;
  border:1px solid rgba(131,244,169,.7);
  box-shadow:0 0 9px rgba(74,224,124,.13),inset 0 0 7px rgba(115,245,156,.06);
  will-change:transform;
}
.about-section .about-logo-orbit--one{
  width:92%;height:53%;
  z-index:2;
  border-color:rgba(128,244,166,.72);
  animation:mc-about-logo-orbit-one 15s linear infinite;
}
.about-section .about-logo-orbit--two{
  width:83%;height:68%;
  z-index:4;
  border-color:rgba(186,255,204,.66);
  animation:mc-about-logo-orbit-two 19s linear infinite reverse;
}
.about-section .about-logo-orbit--three{
  width:98%;height:39%;
  z-index:2;
  border-style:dashed;
  border-color:rgba(75,222,121,.66);
  animation:mc-about-logo-orbit-three 23s linear infinite;
}
.about-section .about-logo-orbit i{
  position:absolute;
  left:50%;top:0;
  display:block;
  width:7px;height:7px;
  border:1px solid rgba(236,255,241,.9);
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#9bffb8;
  box-shadow:0 0 7px 2px rgba(134,255,169,.85),0 0 17px 5px rgba(54,220,111,.35);
}
.about-section .about-logo-orbit--two i{
  width:9px;height:9px;
  background:#d3ffdf;
  box-shadow:0 0 8px 2px rgba(204,255,219,.9),0 0 20px 6px rgba(90,231,135,.32);
}
.about-section .about-logo-orbit--three i{
  width:6px;height:6px;
  background:#55e986;
  box-shadow:0 0 7px 2px rgba(80,255,141,.88),0 0 16px 5px rgba(40,210,99,.32);
}
@keyframes mc-about-logo-orbit-one{
  0%{transform:translate(-50%,-50%) rotateX(68deg) rotateY(0deg) rotateZ(0deg)}
  50%{transform:translate(-50%,-50%) rotateX(82deg) rotateY(180deg) rotateZ(180deg)}
  100%{transform:translate(-50%,-50%) rotateX(68deg) rotateY(360deg) rotateZ(360deg)}
}
@keyframes mc-about-logo-orbit-two{
  0%{transform:translate(-50%,-50%) rotateX(25deg) rotateY(68deg) rotateZ(0deg)}
  50%{transform:translate(-50%,-50%) rotateX(85deg) rotateY(214deg) rotateZ(180deg)}
  100%{transform:translate(-50%,-50%) rotateX(25deg) rotateY(428deg) rotateZ(360deg)}
}
@keyframes mc-about-logo-orbit-three{
  0%{transform:translate(-50%,-50%) rotateX(76deg) rotateY(-42deg) rotateZ(0deg)}
  50%{transform:translate(-50%,-50%) rotateX(54deg) rotateY(138deg) rotateZ(180deg)}
  100%{transform:translate(-50%,-50%) rotateX(76deg) rotateY(318deg) rotateZ(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .about-section .about-logo-orbit{animation:none!important;will-change:auto}
}

/* DESKTOP REPAIR — "Un passo alla volta": stable columns, aligned numbers, no hover layout shift.
   Desktop only; mobile/tablet rules and the page-wide solar system remain untouched. */
@media (min-width:1101px){
  .method-section .section-wrap{
    width:min(1160px,calc(100% - 80px))!important;
    max-width:1160px!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }
  .method-section .section-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px)!important;
    align-items:end!important;
    gap:clamp(32px,4.5vw,64px)!important;
    margin-bottom:clamp(42px,5vw,64px)!important;
  }
  .method-section .section-heading>div{
    min-width:0!important;
  }
  .method-section .section-heading h2{
    max-width:680px!important;
    font-size:clamp(48px,5.2vw,72px)!important;
    line-height:1.04!important;
    letter-spacing:-.075em!important;
    text-wrap:balance!important;
    overflow-wrap:normal!important;
  }
  .method-section .section-aside{
    width:100%!important;
    max-width:360px!important;
    margin:0 0 4px!important;
    font-size:14px!important;
    line-height:1.85!important;
  }
  .method-section .method-list{
    position:relative!important;
    width:100%!important;
    max-width:1040px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .method-section .method-list::before{
    display:none!important;
    content:none!important;
  }
  .method-section .method-step,
  .method-section .method-step:hover{
    display:grid!important;
    grid-template-columns:52px 58px minmax(0,1fr) 104px!important;
    align-items:center!important;
    column-gap:clamp(16px,1.8vw,24px)!important;
    row-gap:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:126px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:24px 22px!important;
    border-radius:0!important;
    transform:none!important;
    transition:background-color .24s ease,border-color .24s ease!important;
  }
  .method-section .method-step:hover{
    background:linear-gradient(90deg,rgba(143,227,192,.065),rgba(143,227,192,.018) 70%,transparent)!important;
    border-bottom-color:rgba(143,227,192,.32)!important;
  }
  .method-section .method-step::before{
    display:none!important;
    content:none!important;
  }
  .method-section .method-step>.method-no{
    display:grid!important;
    place-items:center!important;
    grid-column:1!important;
    grid-row:1!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    border:1px solid color-mix(in srgb,var(--step-accent) 58%,transparent)!important;
    border-radius:50%!important;
    background:#0c3023!important;
    box-shadow:0 0 0 4px rgba(12,48,35,.72)!important;
    color:var(--step-accent)!important;
    font-size:11px!important;
    line-height:1!important;
    transform:none!important;
  }
  .method-section .method-step>.method-symbol{
    display:grid!important;
    grid-column:2!important;
    grid-row:1!important;
    place-items:center!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  .method-section .method-step>.method-symbol img{
    display:block!important;
    width:32px!important;
    height:32px!important;
    max-width:32px!important;
    max-height:32px!important;
    object-fit:contain!important;
    margin:0!important;
    transform:none!important;
  }
  .method-section .method-step>div:nth-child(3){
    display:block!important;
    grid-column:3!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow-wrap:normal!important;
  }
  .method-section .method-step h3{
    margin:0 0 7px!important;
    max-width:100%!important;
    font-size:clamp(16px,1.35vw,20px)!important;
    line-height:1.35!important;
    letter-spacing:-.035em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .method-section .method-step p{
    width:100%!important;
    max-width:650px!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.75!important;
    color:#bfd1c5!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .method-section .method-step>.step-end{
    display:inline-flex!important;
    grid-column:4!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    max-width:104px!important;
    margin:0!important;
    white-space:nowrap!important;
    text-align:center!important;
    font-size:8px!important;
    letter-spacing:.11em!important;
    box-sizing:border-box!important;
  }
  /* Keep the entire process section within the brand's green palette. */
  .method-section .method-step:nth-child(1){--step-accent:#b9e8c8!important}
  .method-section .method-step:nth-child(2){--step-accent:#9bd3a8!important}
  .method-section .method-step:nth-child(3){--step-accent:#63b982!important}
  .method-section .method-step:nth-child(4){--step-accent:#d4edc9!important}
}