/* ============================================================
   bg-subtle — restored to the previously-accepted state.
   The only difference vs the round-3 baseline is wave palette
   shifted a touch darker. Everything else returned to baseline.
   ============================================================ */

/* ---------- canvases ---------- */
.particles-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:-3;
}
/* OLD viewport-fixed cream canvas — hidden. Replaced by per-section .moss-canvas (below) */
.particles-canvas-cream{display:none !important}

/* MOSS · per-cream-section canvas. Navy lattice with darken blend so it
   covers cream sections + white cards but stays out of dark text.
   Canvas bleeds up/down ~11vw to cover the cream-filled paths of the
   adjacent horizon-wave SVGs (wave aspect 1440:240, cream zone ≈62% of
   wave height = ~9.9vw — adding margin so the lattice fully bridges
   the visible white). darken blend keeps the lattice invisible over
   the cosmic side of each wave, so no JS clipping is needed. */
/* IMPORTANT: kill the stacking context on .light-stage / .final-cta so the
   canvas's mix-blend-mode:darken can blend against the SIBLING wave SVGs'
   cream-filled paths (not just .light-stage's own cream). Removing isolation
   AND z-index makes both elements part of the root stacking context, so the
   canvas extends into the wave areas and the lattice naturally appears over
   any cream pixels while disappearing over cosmic-blue pixels. */
.light-stage{position:relative; overflow:visible !important; isolation:auto !important; z-index:auto !important}
.final-cta{position:relative; overflow:visible !important; isolation:auto !important; z-index:auto !important}
/* keep final-cta's tall radial blur from leaking into the footer */
.final-cta::before{
  mask-image:linear-gradient(to bottom,black 0%,black 70%,transparent 92%) !important;
  -webkit-mask-image:linear-gradient(to bottom,black 0%,black 70%,transparent 92%) !important;
}
/* canvas is a replaced element — top+bottom alone won't stretch it.
   Explicit height via calc() is required so the bleed actually applies.
   z-index:1 places it BETWEEN the wave SVGs (z:1, source-earlier) and the
   section content (z:2), so cards/text/boxes always sit on top of the
   lattice — it shows only on the cream surface itself. */
.light-stage > canvas.moss-canvas{
  position:absolute;
  top:-17vw;
  left:0;
  width:100%;
  height:calc(100% + 34vw);
  pointer-events:none;
  z-index:1;
  mix-blend-mode:darken;
}
.final-cta > canvas.moss-canvas{
  position:absolute;
  top:-17vw;
  left:0;
  width:100%;
  height:calc(100% + 17vw);
  pointer-events:none;
  z-index:1;
  mix-blend-mode:darken;
}
.light-stage > .section,
.final-cta > *:not(canvas){
  position:relative;
  z-index:2;
}
@media (prefers-reduced-motion: reduce){
  .light-stage > canvas.moss-canvas,
  .final-cta > canvas.moss-canvas{display:none}
}

/* #6 · lift critical interactive/branding elements above the cream-canvas z-index
   so particles never render over the white Parliamo button or the Liberatori brand text */
.btn-hero,
.site-cta,
.brand-mark,
.site-brand,
.site-brand-text,
.foot-brand{
  position:relative !important;
  z-index:7 !important;
}
@media (prefers-reduced-motion: reduce){
  .particles-canvas,.particles-canvas-cream{display:none}
}

/* ---------- darker cosmic background ---------- */
body{background:#06091A !important}
body::before{
  background:
    radial-gradient(ellipse 56vw 44vh at 50% 56%, oklch(0.88 0.085 178 / 0.16), transparent 60%),
    radial-gradient(ellipse 40vw 34vh at 50% 50%, oklch(0.55 0.16 270 / 0.18), transparent 62%),
    radial-gradient(ellipse 62vw 54vh at 18% 14%, oklch(0.88 0.085 178 / 0.24), transparent 58%),
    radial-gradient(ellipse 54vw 48vh at 80% 6%, oklch(0.55 0.16 260 / 0.28), transparent 58%),
    radial-gradient(ellipse 72vw 56vh at 55% 108%, oklch(0.88 0.085 178 / 0.18), transparent 58%),
    radial-gradient(ellipse 48vw 42vh at 90% 72%, oklch(0.62 0.14 280 / 0.18), transparent 58%) !important;
  filter:blur(96px) !important;
}

/* cream sections solid — typographic watermarks below provide section character */
.light-stage,
.final-cta{background:var(--bg) !important}
.light-stage::before{opacity:1}
.horizon-wave > path:first-of-type,
.horizon-wave-up > path:first-of-type{fill:#FCFCFA !important}

/* watermark approach dropped — cream sections stay clean */

/* ---------- the wheel · removed ---------- */
.stargate{display:none !important}
.hero-halo{display:none !important}
.mini-stargate{display:none !important}
.final-cta-rings{display:none !important}

/* #1 fix · the hero-top "different light" was caused by .hero::before / .hero::after
   adding a local glow + vignette on top of the body cosmic. Disabling both so the
   hero shares the same uniform cosmic backdrop as the rest of the page. */
.hero::before{display:none !important}
.hero::after{display:none !important}

/* ---------- hero · pure white lede, no meta row ---------- */
.hero-lede{color:var(--fg) !important}
.hero-lede .hl{color:var(--fg) !important; font-variation-settings:"wght" 740,"wdth" 96,"opsz" 18,"GRAD" 24 !important}
.hero-lede .hl::before{height:.16em !important; opacity:.85 !important}
.hero-cta .cta-meta-row,.cta-meta-row{display:none !important}

/* ---------- site header · centered nav, bigger links + CTA ---------- */
.site-header{
  padding:clamp(12px,.65rem + .35vw,18px) clamp(18px,1rem + .9vw,28px) !important;
  border-radius:clamp(18px,1.15rem + .45vw,26px) !important;
}
/* brand stays on the left, nav becomes absolutely centered, CTA on the right */
.site-nav{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  margin-left:0 !important;
  gap:clamp(1.15rem,.85rem + .85vw,2rem) !important;
}
.site-nav a{
  font-size:14px !important;
  font-variation-settings:"wght" 620,"wdth" 96,"opsz" 14,"GRAD" 10 !important;
  letter-spacing:.012em !important;
  color:rgba(252,252,250,0.82) !important;
  padding:9px 4px !important;
}
.site-nav a:hover{ color:var(--fg) !important; }
.site-header-sep{ display:none !important; } /* no longer needed with centered nav */
.site-cta{
  margin-left:auto !important;  /* push to right edge since nav is absolutely centered */
  padding:12px 22px !important;
  font-size:14px !important;
  font-variation-settings:"wght" 740,"wdth" 96,"opsz" 14,"GRAD" 18 !important;
  letter-spacing:.005em !important;
  gap:10px !important;
}
.site-cta svg{ width:14px !important; height:11px !important; }
.site-brand-text{ font-size:clamp(.88rem,.78rem + .22vw,1.02rem) !important; letter-spacing:.2em !important; }
.site-brand-logo{ width:clamp(30px,1.6rem + .4vw,38px) !important; }
@media (max-width:880px){
  .site-nav{ display:none !important; }
}

/* ---------- horizon waves · darker shades of blue (subtle) ---------- */
/* #2 fix · removed the blue drop-shadow filter on the wave SVG so it doesn't
   tint the cream-fill area. Keeps wave hairlines colored, but the cream stays cream. */
.horizon-wave,.horizon-wave-up{
  filter:none !important;
}
/* waves · gradient from cosmic-blue at the cosmic edge, shading lighter toward
   the cream side. Different rules per wave direction since SVG path orientations
   are inverted between horizon-wave (cosmic above) and horizon-wave-up (cosmic below). */
.horizon-wave,.horizon-wave-up{ filter:none !important; }

/* horizon-wave · cosmic above, cream below.
   Gradient: cosmic-edge (top) starts matching cosmic-blue, shades lighter/teal toward cream. */
.horizon-wave > path[stroke]{
  stroke:oklch(0.32 0.13 248) !important;
  stroke-width:1.5 !important;
  stroke-opacity:.78 !important;
  filter:none !important;
}
.horizon-wave > g > path:nth-of-type(1){stroke:oklch(0.38 0.13 240) !important; stroke-opacity:.55 !important; stroke-width:1.3 !important}
.horizon-wave > g > path:nth-of-type(2){stroke:oklch(0.45 0.13 228) !important; stroke-opacity:.42 !important; stroke-width:1.3 !important}
.horizon-wave > g > path:nth-of-type(3){stroke:oklch(0.50 0.13 216) !important; stroke-opacity:.32 !important; stroke-width:1.3 !important}
.horizon-wave > g > path:nth-of-type(4){stroke:oklch(0.54 0.13 208) !important; stroke-opacity:.26 !important; stroke-width:1.3 !important}

/* horizon-wave-up · cream above, cosmic below. Same gradient inverted (cosmic-edge at bottom). */
.horizon-wave-up > path[stroke]{
  stroke:oklch(0.32 0.13 248) !important;
  stroke-width:1.5 !important;
  stroke-opacity:.78 !important;
  filter:none !important;
}
.horizon-wave-up > g > path:nth-of-type(1){stroke:oklch(0.54 0.13 208) !important; stroke-opacity:.26 !important; stroke-width:1.3 !important}
.horizon-wave-up > g > path:nth-of-type(2){stroke:oklch(0.50 0.13 216) !important; stroke-opacity:.32 !important; stroke-width:1.3 !important}
.horizon-wave-up > g > path:nth-of-type(3){stroke:oklch(0.45 0.13 228) !important; stroke-opacity:.42 !important; stroke-width:1.3 !important}
.horizon-wave-up > g > path:nth-of-type(4){stroke:oklch(0.38 0.13 240) !important; stroke-opacity:.55 !important; stroke-width:1.3 !important}

/* ---------- sect-head · accentuated, symmetric ---------- */
.sect-title{
  font-variation-settings:"wght" 820,"wdth" 96,"opsz" 96,"GRAD" 32 !important;
  letter-spacing:-.038em !important;
}
.sect-title em{
  font-variation-settings:"wght" 360,"wdth" 92,"opsz" 96,"GRAD" -22 !important;
}
.sect-title em::after{
  height:.32em !important;
  opacity:1 !important;
  background:var(--teal-grad) !important;
  filter:drop-shadow(0 0 8px oklch(0.88 0.085 178 / 0.4));
}
.sect-title.dark em::after{filter:drop-shadow(0 0 12px oklch(0.88 0.085 178 / 0.55))}

.hero-title em::after{
  height:.3em !important;
  opacity:1 !important;
  background:var(--teal-grad) !important;
  filter:drop-shadow(0 0 10px oklch(0.88 0.085 178 / 0.5));
}

/* #4 · unified toast design — symmetric, applied to ALL eyebrow types:
   ○ caps text ○
        ─●─
   Concentric teal rings mirror on both sides + a centered teal-peak hairline
   below with a brighter spot at its midpoint. */
.sect-eyebrow,
.servizi-eyebrow,
.final-cta-eyebrow{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:9px 22px 16px 22px !important;
  font-size:10.5px !important;
  letter-spacing:.30em !important;
  text-transform:uppercase !important;
  font-variation-settings:"wght" 720,"wdth" 84,"opsz" 14,"GRAD" 10 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  background-image:
    radial-gradient(ellipse 50% 6px at 50% calc(100% - 3.5px), oklch(0.88 0.085 178 / 0.55), transparent 75%),
    linear-gradient(90deg,
      transparent 0%,
      oklch(0.88 0.085 178 / 0.25) 18%,
      oklch(0.88 0.085 178 / 0.55) 38%,
      var(--teal) 50%,
      oklch(0.88 0.085 178 / 0.55) 62%,
      oklch(0.88 0.085 178 / 0.25) 82%,
      transparent 100%) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:center bottom, center bottom 3px !important;
  background-size:60% 8px, calc(100% - 56px) 1.5px !important;
}
.sect-eyebrow{ color:var(--navy) !important; }
.sect-eyebrow.dark,
.servizi-eyebrow{ color:var(--fg) !important; }
.final-cta-eyebrow{ color:var(--navy) !important; }  /* final-CTA is on CREAM */

/* left + right rings — concentric teal, mirrored */
.sect-eyebrow::before,
.sect-eyebrow::after,
.servizi-eyebrow::before,
.servizi-eyebrow::after,
.final-cta-eyebrow::before,
.final-cta-eyebrow::after{
  content:"" !important;
  display:block !important;
  width:14px !important; height:14px !important;
  background:transparent !important;
  border:1.5px solid var(--teal) !important;
  border-radius:50% !important;
  box-shadow:
    inset 0 0 0 4px oklch(0.88 0.085 178 / 0.32),
    0 0 6px oklch(0.88 0.085 178 / 0.45) !important;
  flex-shrink:0 !important;
  position:static !important;
  margin:0 !important;
  filter:none !important;
}

/* hide existing internal pip elements; the symmetric hairline carries the accent */
.servizi-eyebrow .dot,
.final-cta-eyebrow .pulse-pip{
  display:none !important;
}

/* #5 · no pulsating light — disable every remaining pulse-animated dot/glyph */
.proof-hero-badge::before,
.servizi-panel-label .dot,
.servizi-panel-label .dot::before,
.cred-dot,
.cookie-banner-glyph .ring-outer,
.cookie-banner-glyph circle,
.pulse-pip,
[class*="pulse"]{
  animation:none !important;
}

.sect-kicker{color:var(--navy) !important; font-variation-settings:"wght" 460,"wdth" 96,"opsz" 18,"GRAD" 0 !important}
.sect-kicker.dark{color:var(--fg-2) !important}
.sect-closer em{color:var(--navy) !important; font-variation-settings:"wght" 660,"wdth" 92,"opsz" 18,"GRAD" 12 !important}

/* ---------- PROOF · "Quattro numeri. Niente racconti." ---------- */
.proof-wrap .sect-head{position:relative; z-index:2}
.proof-wrap .sect-head::before{
  content:"200M+";
  position:absolute;
  top:-1.5rem; left:50%;
  transform:translateX(-50%);
  font-size:clamp(8rem, 3rem + 12vw, 18rem);
  line-height:1;
  -webkit-text-stroke:1.5px rgba(47,65,93,0.08);
  color:transparent;
  font-variation-settings:"wght" 820,"wdth" 96,"opsz" 96,"GRAD" 32;
  letter-spacing:-.05em;
  z-index:-1; pointer-events:none; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.proof-hero{
  transform:translateY(-3px) !important;
  border-color:var(--ink) !important;
  transition:transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo) !important;
  box-shadow:
    0 24px 56px -24px rgba(20,25,43,0.22),
    0 0 0 1.5px oklch(0.88 0.085 178 / 0.42),
    inset 12px 12px 0 -10px transparent,
    inset -12px 12px 0 -10px transparent,
    inset 12px -12px 0 -10px transparent,
    inset -12px -12px 0 -10px transparent !important;
}
.proof-hero::after{opacity:1 !important}
.proof-hero::before{height:4px !important; background:var(--teal-grad) !important; background-size:200% 100%}
.proof-hero:hover{
  transform:translateY(-5px) !important;
  box-shadow:
    0 30px 70px -24px rgba(20,25,43,0.28),
    0 0 0 1.5px oklch(0.88 0.085 178 / 0.6),
    inset 14px 14px 0 -10px oklch(0.88 0.085 178 / 0.55),
    inset -14px 14px 0 -10px oklch(0.88 0.085 178 / 0.55),
    inset 14px -14px 0 -10px oklch(0.88 0.085 178 / 0.55),
    inset -14px -14px 0 -10px oklch(0.88 0.085 178 / 0.55) !important;
}

.proof-hero-num{
  font-variation-settings:"wght" 820,"wdth" 94,"opsz" 96,"GRAD" 32 !important;
  letter-spacing:-.054em !important;
}

.proof-stack .proof-item,
.proof-stack .proof-item:nth-child(1),
.proof-stack .proof-item:nth-child(2),
.proof-stack .proof-item:nth-child(3){
  background:radial-gradient(ellipse 75% 100% at 100% 100%, oklch(0.88 0.085 178 / 0.14), transparent 65%),
             linear-gradient(180deg, #FCFCFA, #FCFCFA) !important;
  border-color:var(--ink) !important;
  box-shadow:0 14px 32px -20px rgba(20,25,43,0.16) !important;
  transform:translateX(2px);
}
.proof-stack .proof-item::before{
  background:var(--teal) !important;
  box-shadow:0 0 12px oklch(0.88 0.085 178 / 0.55) !important;
}
.proof-stack .proof-item{position:relative}
.proof-stack .proof-item::after{
  content:"";
  position:absolute;
  top:10px; right:10px;
  width:14px; height:14px;
  border-top:1.5px solid var(--navy-3);
  border-right:1.5px solid var(--navy-3);
  pointer-events:none;
  transition:border-color .42s var(--ease),width .35s var(--ease),height .35s var(--ease);
}
.proof-stack .proof-item:hover::after{
  border-color:var(--ink);
  width:18px; height:18px;
}
.proof-stack .proof-item:hover{
  transform:translateX(5px) translateY(-2px);
  border-color:var(--teal) !important;
  box-shadow:0 22px 44px -22px rgba(20,25,43,0.22),0 0 0 1.5px oklch(0.88 0.085 178 / 0.4) !important;
}

/* ---------- WHY US · "Quattro cose non negoziabili."
   Cards: plain cream — no corner light cast on the boxes
   Icons: localized "cast of light" via radial highlight + drop-shadow (see .why-glyph rule)
   Center: ~96px glassmorphism disc with a navy cross on top */

.why-item,
.why-item:nth-child(1),
.why-item:nth-child(2),
.why-item:nth-child(3),
.why-item:nth-child(4){
  background:linear-gradient(155deg,#FCFCFA,#FCFCFA) !important;
  border-color:var(--rule-x) !important;
  transform:translateY(-1px);
  box-shadow:
    0 10px 26px -22px rgba(20,25,43,0.16),
    0 0 0 1px rgba(20,25,43,0.04) !important;
}

/* glass disc backdrop at grid center · ~96px (slightly bigger than the gap) */
.why-grid{position:relative}
.why-grid::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:96px; height:96px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), transparent 50%),
    rgba(252,252,250,0.32);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  border-radius:50%;
  border:1px solid rgba(47,65,93,0.32);
  box-shadow:
    0 6px 22px rgba(47,65,93,0.20),
    inset 0 1px 0 rgba(255,255,255,0.55);
  pointer-events:none;
  z-index:5;
}

/* navy + cross on top of the glass disc */
.why-grid::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:96px; height:96px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232F415D' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='22' y1='50' x2='78' y2='50'/%3E%3Cline x1='50' y1='22' x2='50' y2='78'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(47,65,93,0.30));
  pointer-events:none;
  z-index:6;
}
.why-item::before{
  border-color:var(--navy-3) !important;
  width:18px !important; height:18px !important;
}
.why-item:hover::before{
  border-color:var(--ink) !important;
  width:22px !important; height:22px !important;
}
.why-item::after{transform:scaleX(0) !important}
.why-item:hover::after{transform:scaleX(1) !important}

.why-item:hover{
  border-color:var(--ink) !important;
  transform:translateY(-3px);
  box-shadow:0 18px 40px -22px rgba(20,25,43,0.18),0 0 0 1px oklch(0.88 0.085 178 / 0.28) !important;
}

/* CAST OF LIGHT ON THE ICONS · radial highlight from top-right + soft drop-shadow.
   Each icon looks like it has a localized light hitting it from upper-right. */
.why-glyph{
  color:var(--navy) !important;
  background:radial-gradient(circle at 70% 25%, oklch(0.86 0.10 200 / 0.55), transparent 75%) !important;
  border-radius:50% !important;
  filter:drop-shadow(-2px 3px 5px oklch(0.30 0.10 240 / 0.32));
  transition:color .35s var(--ease), filter .42s var(--ease), transform .42s var(--ease), background .42s var(--ease) !important;
}
.why-item:hover .why-glyph{
  color:var(--ink) !important;
  background:radial-gradient(circle at 70% 25%, oklch(0.92 0.10 200 / 0.70), transparent 75%) !important;
  filter:drop-shadow(-3px 4px 7px oklch(0.30 0.10 240 / 0.48));
  transform:rotate(-6deg) scale(1.08) !important;
}

.why-num{
  color:var(--navy) !important;
  font-variation-settings:"wght" 620,"wdth" 84,"opsz" 14,"GRAD" -4 !important;
  letter-spacing:.14em !important;
}

.why-tagline{color:var(--navy) !important}

/* ---------- SERVICES INDEX · cosmic ---------- */
.service-row::before{opacity:.5 !important}
.service-row .service-row-side{
  background:var(--fg-out) !important;
  width:3px !important;
  box-shadow:0 0 8px oklch(0.88 0.085 178 / 0.15) !important;
}
.service-row:hover::before{opacity:1 !important}

/* ---------- final cta ---------- */
.final-cta::before{opacity:.92 !important; filter:blur(54px) !important}
.ornament{color:var(--teal) !important; opacity:1 !important; filter:drop-shadow(0 0 12px oklch(0.88 0.085 178 / 0.55))}
.final-cta h2 em::after{
  height:.32em !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 8px oklch(0.88 0.085 178 / 0.4));
}

/* ---------- SUB-PAGES · mirror the index treatment ----------
   Sub-pages (software, automazioni, lead-generation) host 3-up `.cards-3`
   groups inside `.light-stage`. Bring the same care that the index gets on
   "Quattro cose non negoziabili": cast of light on icons, gentle hover
   lift, and a teal seam accent that mirrors the index's underline cue. */

/* CAST OF LIGHT on icons sitting on cream — radial highlight from upper-right,
   soft navy drop-shadow. Mirrors `.why-glyph` on the index. */
.light-stage .card-3-glyph,
.final-cta .card-3-glyph{
  color:var(--navy) !important;
  background:radial-gradient(circle at 70% 25%, oklch(0.86 0.10 200 / 0.50), transparent 75%) !important;
  border-radius:50% !important;
  filter:drop-shadow(-2px 3px 5px oklch(0.30 0.10 240 / 0.28));
  transition:color .35s var(--ease), filter .42s var(--ease), transform .42s var(--ease), background .42s var(--ease) !important;
}
.light-stage .card-3:hover .card-3-glyph{
  color:var(--ink) !important;
  background:radial-gradient(circle at 70% 25%, oklch(0.92 0.10 200 / 0.68), transparent 75%) !important;
  filter:drop-shadow(-3px 4px 7px oklch(0.30 0.10 240 / 0.44));
  transform:rotate(-6deg) scale(1.08) !important;
}

/* card lift + teal halo on hover, mirroring `.why-item:hover` */
.light-stage .card-3{
  background:#FCFCFA !important;
  border-color:rgba(47,65,93,0.10) !important;
  box-shadow:
    0 10px 26px -22px rgba(20,25,43,0.14),
    0 0 0 1px rgba(20,25,43,0.04) !important;
  transition:border-color .42s var(--ease),transform .42s var(--ease-out-expo),box-shadow .42s var(--ease) !important;
}
.light-stage .card-3:hover{
  border-color:var(--ink) !important;
  transform:translateY(-3px) !important;
  box-shadow:
    0 18px 40px -22px rgba(20,25,43,0.18),
    0 0 0 1px oklch(0.88 0.085 178 / 0.28) !important;
}
/* keep the existing top teal seam accent, just guarantee its color */
.light-stage .card-3::before{
  background:var(--teal-grad) !important;
}

/* `.card-6` mini cards on cream — same gentle lift, no large drop-shadow */
.light-stage .card-6{
  background:#FCFCFA !important;
  transition:border-color .42s var(--ease),transform .42s var(--ease),box-shadow .42s var(--ease) !important;
}
.light-stage .card-6:hover{
  border-color:var(--ink) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 28px -20px rgba(20,25,43,0.16) !important;
}
.light-stage .card-6-icon{
  color:var(--navy) !important;
  filter:drop-shadow(-1.5px 2px 3px oklch(0.30 0.10 240 / 0.22));
  transition:color .35s var(--ease), filter .35s var(--ease) !important;
}
.light-stage .card-6:hover .card-6-icon{
  color:var(--ink) !important;
  filter:drop-shadow(-2px 3px 4px oklch(0.30 0.10 240 / 0.38));
}

/* `.section.stack-section` headings already inherit the index treatment via
   `.sect-title em`, but sub-pages sometimes use `.section h2` without an em.
   Make sure the underline accent works either way. */
.light-stage .section h2 em,
.light-stage .stack-section h2 em{
  font-style:normal !important;
  color:var(--navy) !important;
  font-variation-settings:var(--fv-accent-lg) !important;
}

/* `.dossier-wrap` (lead-gen) and other cream containers: same teal-seam top */
.light-stage .dossier-wrap{
  position:relative;
}

/* sub-page final-CTA: the eyebrow on sub-pages has no nested pulse-pip,
   so the shared `.final-cta-eyebrow` toast styling already centers the
   text — just guarantee it inherits the navy color on cream. */
.final-cta .final-cta-eyebrow{ color:var(--navy) !important; }

/* ============================================================
   GENERAL READABILITY + POLISH PASS
   Targeted improvements to typography rhythm, spacing and contrast
   across the whole site. No structural changes — just nudges.
   ============================================================ */

/* HERO LEDE · slightly larger, tighter line-height, more breathing on the wraps */
.hero-lede{
  font-size:clamp(1.08rem,1rem + .32vw,1.28rem) !important;
  line-height:1.62 !important;
  letter-spacing:-.005em !important;
  max-width:62ch !important;
}

/* HERO TITLE · ensure good word-balance and a touch more weight on the em */
.hero-title{
  line-height:1.16 !important;
  letter-spacing:-.03em !important;
  text-wrap:balance;
}
.hero-title em{
  font-variation-settings:"wght" 760,"wdth" 96,"opsz" 56,"GRAD" 28 !important;
}

/* SITE NAV · brighter cream so it reads cleanly on the dark pill */
.site-nav a{
  color:rgba(252,252,250,0.92) !important;
}
.site-nav a:hover{ color:var(--fg) !important; }

/* SECTION KICKERS (paragraphs under section titles) · readable in both contexts */
.sect-kicker{
  font-size:clamp(1rem,.92rem + .28vw,1.18rem) !important;
  line-height:1.72 !important;
}
.light-stage .sect-kicker,
.final-cta .sect-kicker{
  color:var(--navy) !important;
  opacity:.86 !important;
}
.section-dark .sect-kicker,
.hero .sect-kicker,
.cosmic-servizi .sect-kicker,
.nofare-wrap .sect-kicker{
  color:rgba(252,252,250,0.82) !important;
}
.sect-title{
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  text-wrap:balance;
}

/* SECTION CLOSERS · the orphan one-liners ("Quattro fatti.", "Ce ripetiamo
   ogni giorno.", "Sei scorciatoie. Per scelta.") need breathing room + a
   soft typographic frame. Color adapts to cream vs cosmic context. */
.sect-closer{
  margin-top:clamp(2.25rem,1.5rem + 1.4vw,3.25rem) !important;
  font-size:clamp(1.1rem,.95rem + .4vw,1.4rem) !important;
  line-height:1.4 !important;
  letter-spacing:-.015em !important;
  text-align:center;
  padding-top:clamp(1.5rem,1rem + .8vw,2.2rem) !important;
  position:relative;
}
.sect-closer::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:clamp(40px,3rem + 1vw,72px);
  height:1px;
}
.sect-closer em{
  font-style:normal !important;
  font-variation-settings:"wght" 700,"wdth" 96,"opsz" 28,"GRAD" 22 !important;
  position:relative;
}
.sect-closer em::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.05em;
  height:.16em;
  background:var(--teal-grad);
  z-index:-1;
  opacity:.55;
}
/* CREAM context (default) · navy text, navy hairline */
.light-stage .sect-closer,
.final-cta .sect-closer{
  color:var(--navy) !important;
}
.light-stage .sect-closer::before,
.final-cta .sect-closer::before{
  background:linear-gradient(90deg,transparent,var(--navy-3),transparent);
}
.light-stage .sect-closer em,
.final-cta .sect-closer em{
  color:var(--navy) !important;
}
/* COSMIC context (.section-dark or any cosmic section) · cream text, teal hairline */
.section-dark .sect-closer,
.hero .sect-closer,
.cosmic-servizi .sect-closer,
.nofare-wrap .sect-closer{
  color:rgba(252,252,250,0.94) !important;
}
.section-dark .sect-closer::before,
.hero .sect-closer::before,
.cosmic-servizi .sect-closer::before,
.nofare-wrap .sect-closer::before{
  background:linear-gradient(90deg,transparent,oklch(0.88 0.085 178 / 0.55),transparent) !important;
}
.section-dark .sect-closer em,
.hero .sect-closer em,
.cosmic-servizi .sect-closer em,
.nofare-wrap .sect-closer em{
  color:var(--fg) !important;
  font-variation-settings:"wght" 740,"wdth" 96,"opsz" 28,"GRAD" 28 !important;
}
.section-dark .sect-closer em::after,
.hero .sect-closer em::after,
.cosmic-servizi .sect-closer em::after,
.nofare-wrap .sect-closer em::after{
  opacity:.75 !important;
}

/* PROOF STACK · tighten tag-to-content rhythm */
.proof-stack .proof-item-tag{
  font-variation-settings:"wght" 720,"wdth" 88,"opsz" 14,"GRAD" 10 !important;
  letter-spacing:.04em !important;
  font-size:11px !important;
  opacity:.72 !important;
}
.proof-stack .proof-num{
  line-height:1 !important;
  letter-spacing:-.025em !important;
}
.proof-stack .proof-label{
  margin-top:6px !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
  color:var(--navy) !important;
  opacity:.82 !important;
}

/* CARD-3 BODY TEXT · bump to 14px line-height 1.66 for cream cards
   (was 13.5px / 1.62 → felt cramped on long copy) */
.light-stage .card-3 p{
  font-size:14px !important;
  line-height:1.66 !important;
}
.light-stage .card-3 h3{
  line-height:1.28 !important;
  letter-spacing:-.012em !important;
}

/* WHY ITEM · same tweaks for the why-grid copy */
.why-item p{
  font-size:14px !important;
  line-height:1.66 !important;
  color:var(--navy) !important;
  opacity:.86 !important;
}
.why-item h3,
.why-tagline{
  line-height:1.24 !important;
  letter-spacing:-.012em !important;
}

/* SERVICES INDEX (cosmic) · titles a touch tighter, ledes more readable */
.service-row-title{
  line-height:1.06 !important;
  letter-spacing:-.025em !important;
}
.service-row p,
.service-row-lede{
  line-height:1.66 !important;
  color:rgba(252,252,250,0.82) !important;
}

/* HERO CTA · bigger, more grounded — Parliamo was floating */
.btn-hero{
  font-variation-settings:"wght" 780,"wdth" 97,"opsz" 32,"GRAD" 22 !important;
  letter-spacing:-.012em !important;
}
/* small text under the CTA (if any) — give it breathing room */
.hero-cta-meta,
.cta-foot{
  margin-top:.85rem !important;
  font-size:12px !important;
  letter-spacing:.05em !important;
  color:rgba(252,252,250,0.62) !important;
}

/* FINAL CTA LEDE · pure cream + slightly more letter-spacing for the eyebrow */
.final-cta-lede{
  font-size:clamp(1.05rem,.96rem + .32vw,1.25rem) !important;
  line-height:1.65 !important;
}

/* TEXT SELECTION · use brand teal so highlights feel intentional */
::selection{
  background:oklch(0.88 0.085 178 / 0.55);
  color:var(--bg-dark);
}

/* FOCUS RINGS · accessible and on-brand */
a:focus-visible,
button:focus-visible,
.btn-hero:focus-visible,
.site-cta:focus-visible{
  outline:2px solid var(--teal) !important;
  outline-offset:3px;
  border-radius:inherit;
}

/* SECT-EYEBROW kerning fix · the wide letter-spacing was clipping at edges */
.sect-eyebrow,
.servizi-eyebrow,
.final-cta-eyebrow{
  padding-left:24px !important;
  padding-right:24px !important;
}

/* waves must paint BELOW the moss canvas (z:1) so the lattice also fills the
   cream-filled wave paths that FOLLOW a light stage (horizon-wave-up) — the
   darken blend still hides it over the cosmic side of each wave. */
.horizon-wave,.horizon-wave-up{z-index:0 !important}