/* ════════════════════════════════════════════════════════════
   WAVE DIGITAL — HOME (editorial long-scroll, scenic)
   Relies on tokens.css / components.css / motion.css.
   ════════════════════════════════════════════════════════════ */

body{ overflow-x: hidden; }

/* shared section rhythm */
.h-sec{ position: relative; padding: clamp(4.5rem, 10vh, 9rem) 0; }
.h-wrap{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.h-sec.tint{ background: var(--bg-2); border-block: 1px solid var(--rule); }
.h-kicker{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--ink-3); margin-bottom: var(--s-5); }
.h-kicker .dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent); }
.h-kicker b{ color: var(--accent); }
.h-title{ font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: var(--ls-tight); color: var(--ink); margin: 0; text-wrap: balance; }
.h-title em{ font-style: italic; color: var(--accent-warm); }

/* ════════════════════════════════════════════════════════
   HERO — sv-hero (blobs + wavebox + spectrum waves)
   Uses .ds-container + classes from Servizi, unified here
   ════════════════════════════════════════════════════════ */
.sv-hero{ position:relative; overflow:hidden; padding: var(--s-10) 0 var(--s-14); }
.sv-hero-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image: linear-gradient(to bottom,#000 60%,transparent);
  mask-image: linear-gradient(to bottom,#000 60%,transparent); }
.sv-hero-blobs i{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.22; animation:svFloat 24s ease-in-out infinite; }
.sv-hero-blobs i:nth-child(1){ width:34vw; height:34vw; left:-6vw; top:-6vw; background:var(--c-blue); }
.sv-hero-blobs i:nth-child(2){ width:30vw; height:30vw; right:-5vw; top:4vw; background:var(--c-violet); animation-delay:-8s; }
.sv-hero-blobs i:nth-child(3){ width:26vw; height:26vw; left:40vw; bottom:-12vw; background:var(--c-amber); animation-delay:-15s; }
html[data-theme="dark"] .sv-hero-blobs i{ opacity:.38; }
@keyframes svFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(2vw,-3vw) scale(1.08); } 66%{ transform:translate(-3vw,2vw) scale(.93); } }
.sv-hero > .ds-container{ position:relative; z-index:1; }
.sv-eyebrow-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s-8); padding-bottom:var(--s-5); border-bottom:1px solid var(--rule-2); font-family:var(--font-mono); font-size:var(--fs-11); text-transform:uppercase; letter-spacing:var(--ls-wider); color:var(--ink-3); }
.sv-kicker{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--ink-3); text-transform:uppercase; letter-spacing:var(--ls-wider); margin-bottom:var(--s-5); }
.sv-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem) clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width:1040px){ .sv-hero-grid{ grid-template-columns:1fr; gap:var(--s-10); } }
.sv-hero-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.9rem,7vw,6.2rem); line-height:.92; letter-spacing:var(--ls-tightest); color:var(--ink); margin:0 0 var(--s-6); }
.sv-hero-title em{ font-style:italic; color:var(--c-blue); }
.sv-hero-lede{ font-size:var(--fs-lede); color:var(--ink-2); line-height:1.6; max-width:50ch; margin:0 0 var(--s-7); }
.sv-hero-lede strong{ color:var(--ink); font-weight:700; }
.sv-hero-actions{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-8); }
.sv-hero-meta{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6); padding-top:var(--s-6); border-top:1px solid var(--rule); font-family:var(--font-mono); font-size:var(--fs-11); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--ink-3); }
.sv-hero-meta b{ color:var(--ink); font-weight:700; }
/* wavebox */
.sv-wavebox{ position:relative; background:var(--bg-elev); border:1.5px solid var(--rule-2); border-radius:var(--r-24); box-shadow:var(--shadow-lg); overflow:hidden; aspect-ratio:1.18/1; }
.sv-wavebox .label{ position:absolute; top:var(--s-5); left:var(--s-5); z-index:3; display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:var(--fs-11); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--ink-3); }
.sv-wavebox .label .dot{ width:8px; height:8px; border-radius:50%; background:var(--c-blue); box-shadow:0 0 0 4px color-mix(in oklab,var(--c-blue) 26%,transparent); animation:svPulse 1.8s ease-in-out infinite; }
@keyframes svPulse{ 50%{ opacity:.4; } }
.sv-wavesvg{ position:absolute; inset:0; width:100%; height:100%; }
.sv-wavesvg .wln{ fill:none; stroke-width:2.5; stroke-linecap:round; opacity:.9; }
.sv-wave-flow{ animation:svWaveShift 9s linear infinite; }
@keyframes svWaveShift{ to{ transform:translateX(-600px); } }
.sv-counter{ position:absolute; right:var(--s-6); bottom:var(--s-5); z-index:3; text-align:right; }
.sv-counter .n{ font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,9vw,7rem); line-height:.86; letter-spacing:var(--ls-tightest); color:var(--ink); }
.sv-counter .l{ display:block; font-family:var(--font-mono); font-size:var(--fs-12); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--ink-3); margin-top:4px; }
.sv-wave-mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42%; z-index:2; color:var(--ink); opacity:.10; }
.sv-wave-mark path{ stroke-dasharray:160; stroke-dashoffset:160; animation:svDraw 2.6s cubic-bezier(.16,1,.3,1) .3s forwards; }
@keyframes svDraw{ to{ stroke-dashoffset:0; } }
/* svc-step enhancements */
.svc-step .body2{ color:var(--ink-3); font-size:var(--fs-body); line-height:1.55; margin: calc(var(--s-4) * -1) 0 var(--s-6); max-width:48ch; }
.svc-step .incl{ list-style:none; margin: 0 0 var(--s-6); padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2) var(--s-4); }
.svc-step .incl li{ font-family:var(--font-mono); font-size:var(--fs-11); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--ink-2); display:flex; align-items:center; gap:7px; }
.svc-step .incl li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--c); flex:0 0 auto; }
@media (prefers-reduced-motion:reduce){ .sv-hero-blobs i,.sv-wave-flow,.sv-wavebox .label .dot,.sv-wave-mark path{ animation:none !important; }
  .sv-wave-mark path{ stroke-dashoffset:0 !important; } }

/* ════════════════════════════════════════════════════════
   TRUST BAR
   ════════════════════════════════════════════════════════ */
.trust{ padding: clamp(2.2rem,5vh,3.4rem) 0; border-bottom: 1px solid var(--rule); }
.trust-lead{ text-align:center; font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--ink-3); margin-bottom: var(--s-6); }
.trust .marquee{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.trust-track{ display:flex; align-items:center; gap: clamp(2rem,5vw,4rem); white-space:nowrap; }
.trust-track span{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem,1.7vw,1.5rem); color: var(--ink-3); letter-spacing: var(--ls-tight); transition: color var(--dur-2); }
.trust-track span:hover{ color: var(--ink); }
.trust .marquee-track > span::after{ display: none; }
.trust-track .gem{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; }

/* ════════════════════════════════════════════════════════
   CHI SIAMO
   ════════════════════════════════════════════════════════ */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; gap: var(--s-10); } }
.about-statement{ font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem,3.6vw,3rem); line-height: 1.08; letter-spacing: var(--ls-tight); color: var(--ink); margin: var(--s-3) 0 var(--s-6); text-wrap: balance; }
.about-statement em{ font-style: italic; color: var(--accent-warm); }
.about-body p{ color: var(--ink-2); font-size: var(--fs-body-lg); line-height: 1.6; margin: 0 0 var(--s-4); max-width: 52ch; }
.about-body p strong{ color: var(--ink); }
.about-values{ display:flex; flex-wrap:wrap; gap: var(--s-2); margin-top: var(--s-6); }
.about-values li{ list-style:none; display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-2); background: var(--bg-elev); border:1px solid var(--rule-2); padding:7px 13px; border-radius: var(--r-full); }
.about-values li::before{ content:""; width:7px; height:7px; border-radius:2px; background: var(--c, var(--accent)); }
.about-figure{ position: relative; }
.about-media{ position: relative; aspect-ratio: 4/5; border-radius: var(--r-24); overflow:hidden; border:1px solid var(--rule-2);
  background: repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg-elev) 14px 28px); display:grid; place-items:center; }
.about-media .ph{ font-family: var(--font-mono); font-size: var(--fs-12); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--ink-4); }
.about-badge{ position:absolute; right: -14px; bottom: -14px; background: var(--ink); color: var(--bg); padding: var(--s-5) var(--s-6); border-radius: var(--r-16); box-shadow: var(--shadow-lg); }
.about-badge .n{ font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height:1; letter-spacing: var(--ls-tight); }
.about-badge .l{ font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); opacity:.7; margin-top:6px; }

/* ════════════════════════════════════════════════════════
   COME LAVORIAMO
   ════════════════════════════════════════════════════════ */
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--s-8); flex-wrap:wrap; margin-bottom: clamp(2rem,5vh,3.5rem); }
.work-head .h-title{ max-width: 18ch; }
.work-head p{ margin:0; color: var(--ink-3); font-size: var(--fs-body); max-width: 36ch; }
.work-track{ position: relative; display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-6); }
@media (max-width: 900px){ .work-track{ grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
@media (max-width: 540px){ .work-track{ grid-template-columns: 1fr; } }
.work-track::before{ content:""; position:absolute; left:0; right:0; top:27px; height:2px; background: repeating-linear-gradient(90deg, var(--rule-2) 0 7px, transparent 7px 15px); z-index:0; }
@media (max-width: 900px){ .work-track::before{ display:none; } }
.work-stop{ position: relative; z-index:1; }
.work-stop .node{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-family: var(--font-display); font-weight:800; font-size: 1.25rem; color:#fff; background: var(--c, var(--accent)); box-shadow: 0 0 0 8px var(--bg); margin-bottom: var(--s-5); }
.h-sec.tint .work-stop .node{ box-shadow: 0 0 0 8px var(--bg-2); }
.work-stop .tag{ font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-3); margin-bottom: 8px; }
.work-stop h4{ font-family: var(--font-display); font-weight:700; font-size: 1.3rem; letter-spacing: var(--ls-tight); color: var(--ink); margin: 0 0 8px; }
.work-stop p{ margin:0; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.5; max-width: 26ch; }

/* ════════════════════════════════════════════════════════
   SERVIZI — scrollytelling, sticky morphing blob
   ════════════════════════════════════════════════════════ */
.svc{ position: relative; }
.svc-intro{ padding: clamp(4rem,9vh,7rem) 0 0; }
.svc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width: 920px){ .svc-grid{ grid-template-columns: 1fr; } }

/* left: scrolling steps */
.svc-steps{ display:flex; flex-direction: column; }
.svc-step{ min-height: 86vh; display:flex; flex-direction: column; justify-content:center; padding-block: var(--s-10); }
@media (max-width: 920px){ .svc-step{ min-height: auto; padding-block: var(--s-8); } }
.svc-step .ix{ font-family: var(--font-mono); font-size: var(--fs-12); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--c); margin-bottom: var(--s-4); display:flex; align-items:center; gap:10px; }
.svc-step .ix b{ color: var(--ink); }
.svc-step h3{ font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,4.2vw,3.4rem); line-height: 1.0; letter-spacing: var(--ls-tight); color: var(--ink); margin: 0 0 var(--s-5); }
.svc-step h3 em{ font-style: italic; color: var(--c); }
.svc-step p{ color: var(--ink-2); font-size: var(--fs-body-lg); line-height: 1.6; margin: 0 0 var(--s-6); max-width: 46ch; }
.svc-step .points{ list-style:none; margin: 0 0 var(--s-6); padding:0; display:flex; flex-wrap:wrap; gap: var(--s-2); }
.svc-step .points li{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--ink-2); background: var(--bg-elev); border:1px solid var(--rule-2); padding:7px 12px; border-radius: var(--r-full); }
.svc-step .points li::before{ content:""; width:7px; height:7px; border-radius:2px; background: var(--c); }
.svc-step .go{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:12px; font-family: var(--font-body); font-weight:700; font-size: var(--fs-body); color: var(--ink); border:1.6px solid var(--ink); border-radius: var(--r-full); padding:8px 24px 8px 8px; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.svc-step .go::before{ content:""; position:absolute; inset:0; z-index:-1; background: var(--c); transform: translateX(-101%); transition: transform var(--dur-3) cubic-bezier(.16,1,.3,1); }
.svc-step .go:hover{ color:#fff; border-color: var(--c); }
.svc-step .go:hover::before{ transform: translateX(0); }
.svc-step .go .arr{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background: var(--c); color:#fff; transition: transform var(--dur-2) var(--ease-out), background var(--dur-2), color var(--dur-2); }
.svc-step .go:hover .arr{ transform: translateX(4px); background:#fff; color: var(--c); }
/* mobile inline graphic above each step */
.svc-step .mobile-art{ display:none; }
@media (max-width: 920px){
  .svc-step .mobile-art{ display:block; aspect-ratio: 1/1; max-width: 320px; margin: 0 0 var(--s-6); border-radius: var(--r-24); border:1px solid var(--rule-2); background: var(--bg-2); position:relative; overflow:hidden; }
}

/* right: sticky stage with morphing blob */
.svc-stage{ position: sticky; top: 0; height: 100vh; display:grid; place-items:center; }
@media (max-width: 920px){ .svc-stage{ display:none; } }
.svc-stage-inner{ position: relative; width: min(80%, 480px); aspect-ratio: 1/1; }
.svc-blob-glow{ position:absolute; inset: 4%; border-radius:50%; background: radial-gradient(circle at 50% 50%, var(--blob-c, var(--accent)), transparent 64%); opacity:.28; filter: blur(10px); transition: background var(--dur-5) var(--ease-soft); }
.svc-stage svg.blob-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.svc-blob-fill{ transition: fill var(--dur-4) var(--ease-soft); }
.svc-ring{ fill:none; stroke: var(--rule-2); stroke-width:1.3; transform-origin:center; }
.svc-ring.spin{ stroke: var(--blob-c, var(--accent)); stroke-dasharray: 2 10; opacity:.6; animation: hsSpin 30s linear infinite; }
.svc-cell{ transform-box:fill-box; transform-origin:center; }
/* per-step glyph + label crossfade */
.svc-glyphs{ position:absolute; inset:0; display:grid; place-items:center; }
.svc-glyph{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform: scale(.86); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); color:#fff; }
.svc-glyph.is-on{ opacity:1 !important; transform: none !important; }
.svc-glyph svg{ width: 34%; height:auto; }
.svc-tagline{ position:absolute; left:50%; bottom: -2.5rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-12); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--ink-3); white-space:nowrap; }
.svc-tagline b{ color: var(--blob-c, var(--accent)); }
.svc-progress{ position:absolute; right: -1.6rem; top:50%; transform: translateY(-50%); display:flex; flex-direction:column; gap:10px; }
.svc-progress i{ width:6px; height:6px; border-radius:50%; background: var(--rule-2); transition: background var(--dur-2), transform var(--dur-2); }
.svc-progress i.is-on{ background: var(--blob-c, var(--accent)); transform: scale(1.5); }

/* all-services link row */
.svc-all{ display:flex; justify-content:space-between; align-items:center; gap: var(--s-6); flex-wrap:wrap; margin-top: clamp(2rem,5vh,3.5rem); padding-top: var(--s-8); border-top: 1px solid var(--rule-2); }
.svc-all .lbl{ font-family: var(--font-display); font-weight:700; font-size: clamp(1.3rem,2.2vw,1.8rem); color: var(--ink); letter-spacing: var(--ls-tight); }
.svc-all .lbl em{ font-style:italic; color: var(--accent-warm); }
.svc-chips{ display:flex; flex-wrap:wrap; gap: var(--s-2); }
.svc-chips a{ font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--ink-2); border:1px solid var(--rule-2); padding:7px 12px; border-radius: var(--r-full); transition: all var(--dur-2) var(--ease-out); }
.svc-chips a:hover{ color:#fff; background: var(--accent); border-color: var(--accent); }

/* ════════════════════════════════════════════════════════
   CTA blocks (two different styles)
   ════════════════════════════════════════════════════════ */
/* CTA #1 — sub hero, full-bleed dark with spectrum */
.subhero{ position: relative; overflow:hidden; background: var(--bg-inverse); color: #FAFAFA; padding: clamp(4.5rem,11vh,8rem) 0; }
html[data-theme="dark"] .subhero{ background:#000; }
.subhero .spectrum-strip{ display:flex; height:7px; width:min(420px,60vw); border-radius: var(--r-full); overflow:hidden; margin-bottom: var(--s-8); }
.subhero .spectrum-strip i{ flex:1; }
.subhero h2{ font-family: var(--font-display); font-weight:800; font-size: clamp(2.4rem,5.6vw,4.6rem); line-height:1; letter-spacing: var(--ls-tightest); margin:0; color:#fff; max-width: 16ch; }
.subhero h2 em{ font-style:italic; color: var(--c-amber); }
.subhero p{ color: rgba(250,250,250,.74); font-size: var(--fs-lede); max-width: 50ch; margin: var(--s-6) 0 var(--s-8); }
.subhero .acts{ display:flex; gap: var(--s-3); flex-wrap:wrap; }
.subhero .w-btn-outline{ color:#fff; border-color: rgba(255,255,255,.4); }
.subhero .w-btn-outline::before{ background:#fff; }
.subhero .w-btn-outline:hover{ color: var(--ink); border-color:#fff; }
.subhero-orbits{ position:absolute; right:-8%; top:50%; transform: translateY(-50%); width: 46vmax; height:46vmax; pointer-events:none; opacity:.5; }
.subhero-orbits circle{ fill:none; stroke: rgba(255,255,255,.12); stroke-width:1; transform-origin:center; }
.subhero-orbits .o-spin{ stroke: rgba(255,255,255,.22); stroke-dasharray: 2 14; animation: hsSpin 50s linear infinite; }

/* CTA #2 — card style, light, with wave */
.cta2{ position:relative; padding:0; }
.cta2 .h-wrap{ max-width:none; padding-left:0; padding-right:0; }
.cta2-card{ border-radius:0; }
.cta2-card{ position: relative; overflow:hidden; border-radius: 0; padding: clamp(2.5rem,5vw,4.5rem); background: linear-gradient(120deg, var(--c-cobalt), var(--c-blue) 55%, var(--c-violet)); color:#fff; box-shadow: var(--shadow-lg); display:grid; grid-template-columns: 1.3fr .7fr; gap: var(--s-8); align-items:center; }
@media (max-width: 760px){ .cta2-card{ grid-template-columns: 1fr; } }
.cta2-card h2{ font-family: var(--font-display); font-weight:800; font-size: clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing: var(--ls-tight); margin:0 0 var(--s-4); color:#fff; max-width: 16ch; }
.cta2-card p{ margin:0 0 var(--s-6); color: rgba(255,255,255,.9); font-size: var(--fs-body-lg); max-width: 44ch; }
.cta2-card .w-btn-accent{ background:#fff; color:#141416; border-color:#fff; }
.cta2-card .w-btn-accent::before{ background:#141416; }
.cta2-card .w-btn-accent:hover{ color:#fff; border-color:#141416; }
.cta2-wave{ position:relative; min-height: 160px; }
.cta2-wave svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cta2-wave .wl{ fill:none; stroke: rgba(255,255,255,.55); stroke-width:2.5; stroke-linecap:round; stroke-dasharray: 6 0; animation: hsDash 6s linear infinite; }
.cta2-wave .wl.b{ stroke: rgba(255,255,255,.28); animation-duration: 9s; }

/* ════════════════════════════════════════════════════════
   BLOG
   ════════════════════════════════════════════════════════ */
.blog-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--s-6); flex-wrap:wrap; margin-bottom: clamp(1.6rem,4vh,2.6rem); }
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-8); }
@media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr; gap: var(--s-4); } }
.post{ display:flex; flex-direction:column; gap: var(--s-4); text-decoration:none; }
.post .media{ position:relative; aspect-ratio: 16/11; border-radius: var(--r-16); overflow:hidden; border:1px solid var(--rule-2);
  background: repeating-linear-gradient(135deg, var(--bg-2) 0 12px, var(--bg-elev) 12px 24px); display:grid; place-items:center; transition: transform var(--dur-3) var(--ease-out); }
.post:hover .media{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post .media .ph{ font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--ink-4); }
.post .media .cat{ position:absolute; top:12px; left:12px; font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color:#fff; background: var(--c, var(--accent)); padding:4px 10px; border-radius: var(--r-full); }
.post .meta{ font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--ink-3); display:flex; gap: var(--s-4); }
.post h3{ font-family: var(--font-display); font-weight:700; font-size: 1.4rem; line-height:1.18; letter-spacing: var(--ls-tight); color: var(--ink); margin:0; text-wrap: balance; }
.post:hover h3{ color: var(--c, var(--accent)); }
.post .read{ font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color: var(--ink-2); display:inline-flex; align-items:center; gap:7px; }
.post .read .arr{ transition: transform var(--dur-2) var(--ease-out); }
.post:hover .read .arr{ transform: translateX(4px); }

/* ════════════════════════════════════════════════════════
   NEWSLETTER
   ════════════════════════════════════════════════════════ */
.news{ position:relative; }
.news-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; padding: clamp(2.5rem,5vw,4rem); border:1.5px solid var(--rule-2); border-radius: var(--r-24); background: var(--bg-elev); }
@media (max-width: 820px){ .news-inner{ grid-template-columns: 1fr; gap: var(--s-8); } }
.news h2{ font-family: var(--font-display); font-weight:800; font-size: clamp(1.8rem,3.6vw,2.8rem); line-height:1.04; letter-spacing: var(--ls-tight); color: var(--ink); margin:0 0 var(--s-4); max-width: 16ch; }
.news h2 em{ font-style:italic; color: var(--accent-warm); }
.news p{ margin:0; color: var(--ink-2); font-size: var(--fs-body); max-width: 44ch; }
.news-form{ display:flex; gap: var(--s-3); }
@media (max-width: 460px){ .news-form{ flex-direction:column; } }
.news-form .w-input{ flex:1; }
.news-note{ font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); margin-top: var(--s-3); letter-spacing: var(--ls-wide); }
.news-ok{ display:none; align-items:center; gap:10px; color: var(--positive); font-weight:700; }
.news.is-sent .news-ok{ display:inline-flex; }
.news.is-sent .news-form{ display:none; }

/* ════════════════════════════════════════════════════════
   CONTATTI (form)
   ════════════════════════════════════════════════════════ */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width: 920px){ .contact-grid{ grid-template-columns: 1fr; gap: var(--s-10); } }
.contact-aside h2{ font-family: var(--font-display); font-weight:800; font-size: clamp(2rem,4.4vw,3.4rem); line-height:1; letter-spacing: var(--ls-tight); color: var(--ink); margin: var(--s-3) 0 var(--s-6); }
.contact-aside h2 em{ font-style:italic; color: var(--accent-warm); }
.contact-aside p{ color: var(--ink-2); font-size: var(--fs-body-lg); line-height:1.6; max-width: 40ch; margin:0 0 var(--s-8); }
.contact-list{ display:flex; flex-direction:column; gap: var(--s-4); }
.contact-list a, .contact-list span{ display:flex; align-items:center; gap:12px; color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--ls-wide); }
.contact-list .ic{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--rule-2); color: var(--accent); flex:0 0 auto; }
.contact-form{ background: var(--bg-elev); border:1.5px solid var(--rule-2); border-radius: var(--r-24); padding: clamp(1.8rem,3.5vw,2.8rem); display:flex; flex-direction:column; gap: var(--s-5); }
.contact-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 560px){ .contact-row{ grid-template-columns: 1fr; } }
.contact-form .submit-row{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-4); flex-wrap:wrap; }
.contact-form .priv{ font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); max-width: 30ch; letter-spacing: var(--ls-wide); }
.contact-ok{ display:none; flex-direction:column; gap: var(--s-3); align-items:flex-start; padding: var(--s-6) 0; }
.contact-ok .big{ font-family: var(--font-display); font-weight:800; font-size: 1.8rem; color: var(--ink); letter-spacing: var(--ls-tight); display:flex; align-items:center; gap:12px; }
.contact-ok .big .tick{ width:40px; height:40px; border-radius:50%; background: var(--positive); color:#fff; display:grid; place-items:center; }
.contact-form.is-sent .contact-fields{ display:none; }
.contact-form.is-sent .contact-ok{ display:flex; }

/* ════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════ */
.faq-grid{ display:grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width: 860px){ .faq-grid{ grid-template-columns: 1fr; gap: var(--s-8); } }
.faq-aside .h-title{ max-width: 12ch; }
.faq-aside p{ color: var(--ink-3); font-size: var(--fs-body); margin: var(--s-5) 0 0; max-width: 32ch; }

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.h-footer{ background: var(--bg-inverse); color: #FAFAFA; padding: clamp(3rem,7vh,5rem) 0 var(--s-8); }
html[data-theme="dark"] .h-footer{ background:#000; }
.h-footer .top{ display:flex; justify-content:space-between; gap: var(--s-8); flex-wrap:wrap; padding-bottom: var(--s-10); border-bottom:1px solid rgba(255,255,255,.12); }
.h-footer .brand .nm{ font-family: var(--font-display); font-weight:800; font-size: 1.6rem; color:#fff; letter-spacing: var(--ls-tight); }
.h-footer .brand p{ color: rgba(250,250,250,.6); font-size: var(--fs-14); margin: var(--s-3) 0 0; max-width: 32ch; }
.h-footer .cols{ display:flex; gap: clamp(2rem,5vw,4rem); flex-wrap:wrap; }
.h-footer .col h5{ font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color: rgba(250,250,250,.5); margin:0 0 var(--s-4); }
.h-footer .col a{ display:block; color: rgba(250,250,250,.82); font-size: var(--fs-14); margin-bottom: var(--s-2); transition: color var(--dur-2); }
.h-footer .col a:hover{ color:#fff; }
.h-footer .strip{ display:flex; height:6px; border-radius: var(--r-full); overflow:hidden; margin: var(--s-8) 0; }
.h-footer .strip i{ flex:1; }
.h-footer .legal{ display:flex; justify-content:space-between; gap: var(--s-4); flex-wrap:wrap; font-family: var(--font-mono); font-size: var(--fs-11); text-transform:uppercase; letter-spacing: var(--ls-wide); color: rgba(250,250,250,.5); }

/* reveal — progressive enhancement: hidden pre-state only when JS is active */
.h-reveal{ opacity:1; transform:none; }
html.wave-js .h-reveal{ opacity:0; transform: translateY(26px); transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); }
html.wave-js .h-reveal.is-in{ opacity:1 !important; transform:none !important; }
.h-reveal[data-d="1"]{ transition-delay: .07s; }
.h-reveal[data-d="2"]{ transition-delay: .14s; }
.h-reveal[data-d="3"]{ transition-delay: .21s; }
.h-reveal[data-d="4"]{ transition-delay: .28s; }
@media (prefers-reduced-motion: reduce){ .h-reveal{ opacity:1; transform:none; transition:none; } }

/* ════════════════════════════════════════════════════════
   MOBILE REFINEMENTS
   ════════════════════════════════════════════════════════ */
@media (max-width: 720px){
  /* Hero eyebrow row: hidden entirely on mobile */
  .sv-eyebrow-row{ display:none; }

  /* svc intro title: keep clear of the screen edge, centered on mobile */
  .svc-intro{ text-align:center; }
  .svc-intro .h-title{ overflow-wrap:anywhere; margin-bottom:var(--s-8); }

  /* Services — each service isolated in its own surface card */
  .svc-steps{ gap:var(--s-5); }
  .svc-step{
    background:var(--bg-elev);
    border:1px solid var(--rule-2);
    border-top:4px solid var(--c);
    border-radius:var(--r-24);
    padding:var(--s-8) var(--s-6);
    box-shadow:0 6px 26px rgba(15,18,30,.06);
  }
  .svc-step .body2{ margin-top:0; }        /* was pulled up with a negative margin → text overlapped */
  .svc-step .incl{ grid-template-columns:1fr; }

  /* "Come lavoriamo" — bold, isolated step cards */
  .work-track{ gap:var(--s-4); }
  .work-stop{
    display:grid;
    grid-template-columns:54px 1fr;
    column-gap:var(--s-5);
    row-gap:5px;
    background:var(--bg-elev);
    border:1px solid var(--rule-2);
    border-left:5px solid var(--c);
    border-radius:var(--r-24);
    padding:var(--s-5) var(--s-6);
    box-shadow:0 6px 26px rgba(15,18,30,.06);
  }
  .work-stop .node{ grid-row:1 / span 3; align-self:start; width:54px; height:54px; }
  .h-sec.tint .work-stop .node{ box-shadow:0 0 0 5px var(--bg-elev); }
  .work-stop .tag{ grid-column:2; margin-bottom:0; }
  .work-stop h4{ grid-column:2; }
  .work-stop p{ grid-column:2; max-width:none; }

  /* All-services row: stack and center on mobile */
  .svc-all{ flex-direction:column; justify-content:center; text-align:center; margin-bottom:var(--s-10); }
  .svc-chips{ justify-content:center; }
}