/* ============================================================
   LCP LOCALIZATIONS — Company Deck 2026 design system
   One continuous flow: a glowing spine threads every section
   together like a level map. No slide-deck breaks.
   ============================================================ */

:root {
  --bg: #120d18;
  --bg-2: #0c0811;
  --panel: #1a1322;
  --panel-2: #221830;
  --violet: #7c3aed;
  --violet-hi: #a855f7;
  --magenta: #d946ef;
  --pink: #ec4899;
  --grad: linear-gradient(100deg, var(--violet) 0%, var(--magenta) 100%);
  --ink: #ffffff;
  --ink-dim: #b9aecb;
  /* was #6e6182: only 3.37:1 on the page ground, under the 4.5 WCAG asks
     for small text. #8b7fa1 is the least bright value that clears it on the
     ground and on both panel fills. */
  --ink-faint: #8b7fa1;
  --ghost: rgba(255, 255, 255, 0.055);
  --line: rgba(168, 85, 247, 0.16);
  --sans: "Montserrat", sans-serif;
  /* one typeface across the whole site: the old mono alias now resolves
     to Montserrat, so every legacy rule inherits the unified family */
  --mono-f: var(--sans);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spine-x: clamp(16px, 3.4vw, 46px);
  /* typography scale (Company Deck 2026) */
  --text-body: 16.5px;
  --text-lead: clamp(17px, 2vw, 21px);
  --text-sub: 16px;
  --text-h-section: clamp(30px, 4.6vw, 62px);
  --text-h-display: clamp(40px, 7vw, 104px);
  --text-h-hero: clamp(40px, 7.6vw, 108px);
  --text-dnum: 15.5px;
  /* unified small-text scale: every micro label is --text-label,
     every piece of small running copy is --text-small */
  --text-label: 12px;
  --text-small: 13px;
  --track-label: 0.16em;
  --content-col: 820px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* decorative layers (ribbons, ticker, glyphs) intentionally bleed past the
   viewport — never let them create horizontal scroll.
   html ONLY: putting this on body too turns body into a second nested
   scroll container (double scrollbar, double scrolling). */
html { overflow-x: clip; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 85% 15%, rgba(124, 58, 237, 0.06), transparent 60%),
    radial-gradient(ellipse 70% 45% at 10% 70%, rgba(217, 70, 239, 0.04), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.65;
  /* NO overflow on body: html{overflow-x:clip} handles horizontal bleed.
     Any overflow value here turns body into a second scroll container
     (double scrollbar / double scrolling). */
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--magenta); color: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* author display rules (e.g. .pair-panel{display:flex}) must never override
   the hidden attribute */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.mono { font-family: var(--mono-f); font-weight: 600; }
.prose .toc.mono { font-weight: 500; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 64px); }
/* under 400px every pixel of padding costs a character on the line */
@media (max-width: 400px) { .wrap { padding: 0 16px; } }
.vio { color: var(--violet-hi); font-weight: 700; }
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.blink { animation: blink 1.2s steps(1) infinite; }

/* ============ TYPO ============ */
.big-h {
  font-weight: 900;
  font-size: var(--text-h-section);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.huge-h {
  font-weight: 900;
  font-size: var(--text-h-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ============ GHOST + EDGE ============ */
.ghost-word {
  position: absolute;
  /* positive top: sections clip overflow, a negative offset sliced the
     top of the letters (WHAT WE DO / FULL PROCESS looked cropped) */
  top: clamp(16px, 3vh, 34px); right: -2%;
  font-weight: 900;
  font-size: clamp(78px, 13vw, 200px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ghost);
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}
.edge-text {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--mono-f);
  font-size: var(--text-label);
  letter-spacing: 0.5em;
  color: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8000;
  display: flex; align-items: center; gap: 36px;
  padding: 18px clamp(22px, 5vw, 64px);
  transition: background 0.4s, padding 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  /* 0.72 let body text read straight through the bar even with the blur */
  background: rgba(38, 34, 45, 0.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding-top: 12px; padding-bottom: 12px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.nav-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav-brand img { width: 34px; height: 34px; }
.nav-brand span { font-size: 14px; font-weight: 500; letter-spacing: 0.14em; }
.nav-brand b { font-weight: 900; }
.nav-links { display: flex; gap: 30px; }
.nav-quote { display: none; }
.nav-links a {
  font-size: var(--text-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s;
  white-space: nowrap;
}
.nav-brand span, .nav-cta { white-space: nowrap; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  font-size: var(--text-label); font-weight: 800;
  letter-spacing: var(--track-label);
  padding: 13px 26px;
  background: var(--grad);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: filter 0.25s, transform 0.25s;
}
.nav-cta:hover { filter: brightness(1.18); transform: translateY(-1px); }
.nav-burger {
  display: none; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; /* touch target */
}
.nav-burger span { width: 25px; height: 2px; background: #fff; transition: transform 0.3s; }
.nav.open .nav-burger span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.open .nav-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  /* clip (not hidden): hidden still lets the -2% collage expand the mobile
     layout viewport */
  overflow: clip;
  padding: 120px 0 90px;
}
.hero-collage {
  position: absolute; inset: -2%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* fixed row height: without it each image decode resized the implicit rows (CLS 0.31) */
  grid-auto-rows: 1fr;
  gap: 6px;
  opacity: 0.4;
  filter: saturate(0.85) brightness(0.6);
}
.hero-collage img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 8, 17, 0.97) 0%, rgba(12, 8, 17, 0.82) 45%, rgba(12, 8, 17, 0.45) 100%),
    linear-gradient(0deg, var(--bg) 2%, transparent 30%);
}
.hero-ribbon {
  position: absolute;
  width: 180%; height: clamp(150px, 24vh, 260px);
  left: -40%; top: 9%;
  transform: rotate(-16deg);
  background: var(--grad);
  opacity: 0.85;
  z-index: 1;
  animation: ribbon-in 1.1s var(--ease) both;
  box-shadow: 0 0 80px rgba(124, 58, 237, 0.35);
}
.hero-ribbon.thin {
  height: 26px;
  top: calc(9% + clamp(150px, 24vh, 260px) + 26px);
  opacity: 0.5;
  animation-delay: 0.12s;
}
@keyframes ribbon-in { from { transform: rotate(-16deg) translateX(-18%); opacity: 0; } }

.hero-inner { position: relative; z-index: 3; max-width: 1280px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 64px); width: 100%; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--ink-dim);
  margin-bottom: 30px;
}
.hero-kicker .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--magenta);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(217, 70, 239, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0); }
}
.hero-h {
  font-weight: 900;
  /* --hero-fit is set by script.js from the widest translation, so the
     headline never changes size as the last line rotates */
  font-size: calc(var(--text-h-hero) * var(--hero-fit, 1));
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hl-line { display: block; overflow: hidden; }
/* entrance animates the INNER span only — the swap word (outer line)
   never carries an entrance animation, so the language glitch can
   never re-trigger a rise-from-below */
.hl-inner { display: inline-block; animation: line-rise 0.9s var(--ease) both; }
.hero-h .hl-line:nth-child(2) .hl-inner { animation-delay: 0.1s; }
.hero-h .hl-line:nth-child(3) .hl-inner { animation-delay: 0.2s; }
@keyframes line-rise { from { transform: translateY(110%); opacity: 0; } }
.hero-h .accent {
  color: #fff;
}
/* long swap words (e.g. LOCALIZZAZIONE) shrink to stay inside the viewport */
/* language glitch is driven by the Web Animations API in script.js —
   no class toggling, so it can never interact with the entrance animation */
/* Editorial tagline under the hero title: left accent + underlined key phrase */
.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: min(100%, 720px);
  margin: 0 0 22px;
  padding: 10px 0 10px 16px;
  border-left: 3px solid var(--magenta);
  font-size: clamp(12px, 1.45vw, 15px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.hero-tagline > span { display: inline; }
.hero-tagline .tag-hl {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.16em;
  background-image: var(--grad);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
}
@media (max-width: 700px) {
  .hero-tagline {
    display: block;
    letter-spacing: 0.1em;
    padding-left: 12px;
  }
}
.hero-sub {
  max-width: 540px;
  font-size: clamp(15px, 1.55vw, 18px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: rgba(185, 174, 203, 0.95);
  margin-bottom: 44px;
}
.hero-sub em { color: #fff; font-style: normal; font-weight: 700; }
.hero-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 56px; }
.btn-main {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--grad);
  padding: 16px 34px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 10px 38px rgba(124, 58, 237, 0.4);
  transition: filter 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-main:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 16px 48px rgba(217, 70, 239, 0.5); }
.btn-main span { font-weight: 900; font-size: 15px; letter-spacing: 0.18em; }
.btn-main small { font-family: var(--mono-f); font-size: var(--text-label); letter-spacing: var(--track-label); opacity: 0.85; }
.btn-line {
  font-weight: 800; font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--magenta);
  transition: color 0.25s, letter-spacing 0.3s;
}
.btn-line:hover { color: var(--magenta); letter-spacing: 0.22em; }
.hero-scroll {
  /* il ticker sotto e' ruotato di -1.1deg e scalato: il suo riquadro risale
     dentro l'hero per 38-50px secondo l'altezza dello schermo. A 26px la
     scritta finiva mezza dietro la fascia, quindi la teniamo piu' in alto. */
  position: absolute; bottom: clamp(64px, 8.5vh, 88px); left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--ink-faint);
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateX(-50%) translateY(6px); } }

/* ============ TICKER ============ */
/* the rotated+scaled ticker is wider than the viewport — the wrapper clips
   the x axis only (clip pairs with visible, so the diagonal can still bleed
   vertically over the neighbouring sections) */
.ticker-clip {
  position: relative;
  z-index: 4;
  overflow-x: clip;
  overflow-y: visible;
  margin-top: -34px;
}
.ticker {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  background: var(--grad);
  transform: rotate(-1.1deg) scale(1.02);
  box-shadow: 0 14px 50px rgba(124, 58, 237, 0.35);
}
.ticker-track {
  display: flex; gap: 48px; width: max-content;
  /* 64s: track content doubled (repeat 4) to stay seamless at 4K — same speed */
  animation: tick 64s linear infinite;
  font-weight: 800; font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  white-space: nowrap;
}
.ticker-track i { font-style: normal; opacity: 0.6; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ============ FLOW + SPINE ============ */
.flow { position: relative; }
.spine {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--spine-x);
  width: 2px;
  background: rgba(168, 85, 247, 0.12);
  z-index: 5;
}
.spine-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.65);
}
.spine-head {
  position: absolute;
  left: 50%; top: 0;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--magenta);
  box-shadow: 0 0 16px rgba(217, 70, 239, 1);
  transition: top 0.1s linear;
}
.spine-head::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1px solid rgba(217, 70, 239, 0.5);
  animation: head-ring 1.6s ease-out infinite;
}
@keyframes head-ring {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}
.node {
  position: absolute;
  left: var(--spine-x);
  top: 8px;
  width: 14px; height: 14px;
  transform: translateX(calc(-50% + 1px)) rotate(45deg);
  background: var(--bg);
  border: 2px solid rgba(168, 85, 247, 0.4);
  z-index: 6;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.node.lit {
  background: var(--magenta);
  border-color: #fff;
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.9);
}

/* blocks: no borders, no bg switches — one continuous canvas */
.block {
  position: relative;
  padding: clamp(70px, 10vh, 120px) 0 clamp(50px, 7vh, 90px);
  overflow: visible;
}
/* contain decorative bleed (rotated ribbons, ghost words, beams): without
   this the layout viewport expands on mobile and ribbons poke past the
   footer on wide screens */
.block { position: relative; overflow: clip; }
.blk { position: static; }
.blk-head { position: static; margin-bottom: clamp(36px, 5vh, 56px); }
.blk-head.center { text-align: center; }
.blk-tag {
  display: block;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  margin-bottom: 16px;
}
.blk-sub { color: var(--ink-dim); margin-top: 18px; max-width: 600px; font-size: var(--text-sub); }
.blk-head.center .blk-sub { margin-left: auto; margin-right: auto; }
.port-count { font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--ink-faint); }
.port-count b { color: var(--magenta); }

/* content clears the spine on desktop */
@media (min-width: 1001px) {
  .flow .wrap { padding-left: calc(var(--spine-x) + clamp(34px, 5vw, 72px)); }
}

/* ============ TEAMS ============ */
.two-col {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  position: relative; z-index: 2;
}
/* columns must be allowed to shrink below their content's min width */
.two-col > * { min-width: 0; }
.lead { font-size: var(--text-lead); color: var(--ink-dim); margin-bottom: 20px; }
.body-p { color: var(--ink-dim); margin-bottom: 18px; }
.body-p em { color: #fff; font-style: normal; font-weight: 800; }
.strike { color: var(--ink-faint); text-decoration-color: var(--magenta); text-decoration-thickness: 2px; }
.typed-box {
  margin-top: 26px;
  font-size: var(--text-label); letter-spacing: 0.06em;
  color: var(--violet-hi);
  border-left: 3px solid var(--violet);
  padding: 4px 0 4px 16px;
  min-height: 2em;
}
.perk-list { list-style: none; display: grid; gap: 16px; }
.perk-list li {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-left: 4px solid var(--magenta);
  padding: 22px 26px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.perk-list li:hover {
  transform: translateX(8px);
  border-color: rgba(217, 70, 239, 0.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.dnum {
  font-family: var(--mono-f);
  font-size: var(--text-dnum);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--magenta);
  margin-top: 2px;
  line-height: 1.2;
  flex-shrink: 0;
}
.perk-list h3 { font-size: 14.5px; font-weight: 900; letter-spacing: 0.1em; margin-bottom: 5px; }
.perk-list p { color: var(--ink-dim); font-size: 14px; }
.mgmt { margin-top: clamp(40px, 6vh, 64px); position: relative; z-index: 2; }
.mgmt-h {
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.mgmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mgmt-card {
  border: 1px solid var(--line);
  background: rgba(26, 19, 34, 0.7);
  padding: 22px 24px;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.mgmt-card:hover { border-color: var(--magenta); transform: translateY(-3px); }
.mgmt-card .mc-tag {
  display: inline-block;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  margin-bottom: 10px;
}
.mgmt-card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); }
@media (max-width: 760px) { .mgmt-grid { grid-template-columns: 1fr; } }


/* ============ PROCESS (steps hang on the spine) ============ */
.steps { list-style: none; display: grid; gap: clamp(22px, 3.5vh, 36px); position: relative; z-index: 2; }
.step { position: relative; }
.step-node {
  position: absolute;
  left: calc(-1 * clamp(34px, 5vw, 72px) - var(--spine-x) + var(--spine-x));
  top: 50%;
  /* anchored visually via ::before connector below */
}
.step .step-node {
  position: absolute;
  left: calc(-1 * clamp(34px, 5vw, 72px));
  transform: translate(-50%, -50%);
  top: 50%;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: var(--text-label); font-weight: 600;
  color: #fff;
  background: var(--bg);
  border: 2px solid rgba(168, 85, 247, 0.45);
  border-radius: 50%;
  z-index: 6;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, color 0.4s;
}
.step.lit .step-node {
  background: var(--grad);
  border-color: #fff;
  box-shadow: 0 0 22px rgba(217, 70, 239, 0.8);
}
.step-card {
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 26px 30px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
.step-card::before {
  content: "";
  position: absolute;
  left: -26px; top: 50%;
  width: 26px; height: 2px;
  background: rgba(168, 85, 247, 0.3);
}
.step:hover .step-card {
  transform: translateX(6px);
  border-color: rgba(217, 70, 239, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.step-card h3 { font-size: 16px; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 6px; }
.step-card p { color: var(--ink-dim); font-size: 14.5px; }

/* ============ SERVICES ============ */
/* scroll-driven services background: two light beams travel
   diagonally across the section as the page scrolls (--sp 0→1) */
.svc-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.svc-bg .beam {
  position: absolute;
  left: -25%;
  width: 150%; height: 220px;
  top: 12%;
  background: linear-gradient(100deg, transparent 0%, rgba(124, 58, 237, 0.16) 35%, rgba(217, 70, 239, 0.2) 50%, rgba(124, 58, 237, 0.16) 65%, transparent 100%);
  filter: blur(26px);
  transform: rotate(-13deg) translateX(calc((var(--sp, 0) - 0.5) * 70%));
  will-change: transform;
}
.svc-bg .beam.b2 {
  top: 58%;
  height: 130px;
  opacity: 0.7;
  transform: rotate(-13deg) translateX(calc((0.5 - var(--sp, 0)) * 90%));
}
.svc-bg .dotfield {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(168, 85, 247, 0.18) 1px, transparent 1.5px);
  background-size: 34px 34px;
  background-position: 0 calc(var(--sp, 0) * -60px);
  mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, black 20%, transparent 75%);
}

/* editorial service index — no mouse effects, scroll reveals only */
.svc-rows {
  list-style: none;
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
}
.svc-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 64px;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding: clamp(22px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--line);
}
/* solid opaque color on purpose: background-clip:text and semi-transparent
   fills both leave notch artifacts where the bold digits overlap */
.svc-row-num {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--violet-hi);
}
.svc-row h3 {
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 7px;
}
.svc-row p { color: var(--ink-dim); font-size: 14.5px; max-width: 640px; }
.svc-row-go {
  font-size: 22px;
  justify-self: end;
  color: var(--violet-hi);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.svc-row:hover .svc-row-go { opacity: 1; transform: none; }
/* Rows with a dedicated page. The anchor sits on the heading so it is a real
   focusable control with a sensible name; its ::after covers the row, so the
   whole strip stays clickable with a mouse. It used to be display:contents,
   which gave the <a> no box at all and made it unreachable by keyboard. */
.svc-row:has(.svc-link) { position: relative; }
.svc-link { color: inherit; }
.svc-link::after { content: ""; position: absolute; inset: 0; }
.svc-link:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; }
@media (max-width: 700px) {
  .svc-row { grid-template-columns: 64px minmax(0, 1fr); }
  .svc-row-go { display: none; }
  .svc-row-num { font-size: 30px; }
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  position: relative; z-index: 2;
}
.svc-card {
  position: relative;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 28px 26px 24px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.svc-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 70, 239, 0.45);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.5), 0 0 36px rgba(124, 58, 237, 0.12);
}
.svc-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 20px;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.3);
  margin-bottom: 18px;
  transition: transform 0.3s var(--ease);
}
.svc-card:hover .svc-ico { transform: rotate(-8deg) scale(1.08); }
.svc-num {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--mono-f);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--ink-faint);
}
.svc-card h3 { font-size: 15px; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 9px; text-transform: uppercase; }
.svc-card p { color: var(--ink-dim); font-size: 14px; }

/* ============ PORTFOLIO ============ */
.port-ribbon {
  position: absolute;
  width: 160%; height: clamp(110px, 16vh, 190px);
  left: -30%; top: -40px;
  transform: rotate(-12deg);
  background: var(--grad);
  opacity: 0.1;
  pointer-events: none;
}
.featured-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin-bottom: 22px;
  position: relative; z-index: 2;
}
.feat {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.22);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.feat:hover {
  transform: translateY(-6px);
  border-color: var(--magenta);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55), 0 0 38px rgba(217, 70, 239, 0.2);
}
.feat img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.feat:hover img { transform: scale(1.06); }
.feat::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 8, 17, 0.95) 0%, transparent 55%);
}
.feat-info { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; }
.feat-info span { font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--magenta); display: block; margin-bottom: 4px; }
.feat-info b { font-weight: 900; font-size: 17px; letter-spacing: 0.04em; }

.port-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px 18px;
}
.port-item { position: relative; }
.port-thumb {
  position: relative;
  aspect-ratio: 842 / 351;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.18);
  background: var(--panel);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.port-item:hover .port-thumb {
  transform: translateY(-5px);
  border-color: var(--magenta);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(217, 70, 239, 0.18);
}
.port-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.port-item:hover .port-thumb img { transform: scale(1.06); }
.port-item:hover .port-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(67, 232, 224, 0.2), transparent 40%);
  animation: slice 0.32s steps(3) 1;
  pointer-events: none;
}
@keyframes slice {
  0% { transform: translateX(-6px); clip-path: inset(10% 0 60% 0); }
  50% { transform: translateX(5px); clip-path: inset(55% 0 18% 0); }
  100% { transform: none; clip-path: inset(0 0 0 0); }
}
.port-name {
  margin-top: 10px;
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  transition: color 0.25s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.port-item:hover .port-name { color: #fff; }
.port-item.nda .port-thumb {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background:
    repeating-linear-gradient(-45deg, rgba(168, 85, 247, 0.07) 0 12px, transparent 12px 24px),
    var(--panel);
  border-style: dashed;
  border-color: rgba(168, 85, 247, 0.4);
}
.port-item.nda b { font-weight: 900; font-size: 26px; color: var(--violet-hi); }
.port-item.nda em { font-family: var(--mono-f); font-style: normal; font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--ink-faint); }
.port-item.partner .port-thumb {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(168, 85, 247, 0.12), transparent 70%),
    var(--panel);
}
.port-item.partner .port-thumb img {
  width: 62%; height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
.port-more, .svc-more { text-align: center; margin-top: clamp(36px, 5vh, 52px); position: relative; z-index: 2; }
.port-grid .port-item.extra { display: none; }
.port-grid.expanded .port-item.extra { display: block; }

/* ============ TESTIMONIALS — editorial slider ============ */
.reviews { overflow: hidden; }
.ghost-quote {
  position: absolute;
  top: -60px; left: clamp(20px, 8vw, 120px);
  font-weight: 900;
  font-size: clamp(220px, 34vw, 520px);
  line-height: 1;
  color: rgba(168, 85, 247, 0.06);
  pointer-events: none;
  user-select: none;
  font-family: var(--sans);
}
.rev-slider { position: relative; z-index: 2; max-width: 880px; }
.rev-stage { min-height: 250px; }
.rev-slide { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.rev-slide.out { opacity: 0; transform: translateY(14px); }
.rev-slide .stars {
  color: var(--magenta);
  font-size: 16px; letter-spacing: 0.34em;
  margin-bottom: 22px;
  text-shadow: 0 0 16px rgba(217, 70, 239, 0.6);
}
.rev-slide blockquote {
  font-size: clamp(20px, 2.6vw, 31px);
  font-weight: 600;
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 30px;
}
.rev-slide blockquote::before { content: "\201C"; color: var(--magenta); }
.rev-slide blockquote::after { content: "\201D"; color: var(--magenta); }
.rev-slide figcaption { display: flex; align-items: center; gap: 16px; }
.rev-ava {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-weight: 900; font-size: 19px;
  background: var(--grad);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 26px rgba(217, 70, 239, 0.4);
}
.rev-who b { display: block; font-weight: 800; font-size: 16px; }
.rev-who span { font-size: var(--text-small); color: var(--ink-faint); }
.rev-who i { color: var(--violet-hi); font-style: normal; }
.rev-ctrl {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 20px;
  margin-top: 38px;
}
.pad-btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 13px;
  color: var(--violet-hi);
  border: 2px solid rgba(168, 85, 247, 0.4);
  border-radius: 50%;
  background: rgba(26, 19, 34, 0.7);
  transition: all 0.2s;
}
.pad-btn:hover {
  color: #fff;
  border-color: var(--magenta);
  box-shadow: 0 0 22px rgba(217, 70, 239, 0.45);
  transform: scale(1.08);
}
.pad-btn:active { transform: scale(0.94); }
.rev-progress {
  flex: 1; max-width: 420px;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}
.rev-progress span {
  display: block; height: 100%; width: 0;
  background: var(--grad);
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.95), 0 0 4px rgba(168, 85, 247, 0.7);
}
.rev-counter {
  margin-top: 18px;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--ink-faint);
}

/* ============ CONTACT ============ */
.contact { text-align: center; padding-bottom: clamp(90px, 13vh, 160px); }
.contact-ribbon {
  position: absolute;
  width: 170%; height: clamp(130px, 20vh, 230px);
  left: -35%; bottom: 4%;
  transform: rotate(-15deg);
  background: var(--grad);
  opacity: 0.16;
  pointer-events: none;
}
.contact-ribbon.two { height: 30px; bottom: calc(4% - 56px); opacity: 0.1; }
.contact-inner { position: relative; z-index: 2; }
.cont-sub { color: var(--ink-dim); font-size: 17px; margin-top: 22px; }
.cont-cards {
  display: grid;
  /* min(270px,100%): a hard 270px minimum makes the grid's min-content 560px,
     which blows past narrow viewports (contact page clipped at 390/1024) */
  /* 270px made the pair need 560px, just over what the 1280 column offers,
     so the cards stacked at 1280 but not at 768 or 2560 */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 0 auto 56px;
}
.cont-card {
  position: relative;
  text-align: left;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 36px 32px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.cont-card:hover {
  transform: translateY(-7px);
  border-color: var(--magenta);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 44px rgba(217, 70, 239, 0.16);
}
.cc-tag {
  display: inline-block;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  margin-bottom: 16px;
}
.cont-card h3 { font-weight: 900; font-size: 21px; letter-spacing: 0.06em; margin-bottom: 8px; }
.cont-card p { color: var(--ink-dim); font-size: 14.5px; margin-bottom: 24px; }
.cc-go { font-size: var(--text-label); letter-spacing: var(--track-label); color: #fff; border-bottom: 2px solid var(--magenta); padding-bottom: 4px; }
.cont-direct { display: flex; gap: clamp(22px, 4vw, 52px); justify-content: center; flex-wrap: wrap; }
.under-link {
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 19px);
  padding-bottom: 6px;
  border-bottom: 3px solid var(--magenta);
  transition: color 0.25s;
}
.under-link:hover { color: var(--magenta); }

/* ============ FOOTER ============ */
.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vh, 84px) 0 30px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(32px, 5vw, 64px);
  margin-bottom: 52px;
}
.foot-brand img { width: 44px; height: 44px; margin-bottom: 18px; }
.foot-brand p { color: var(--ink-dim); font-size: 14px; max-width: 320px; margin-bottom: 18px; }
.under-link.site { font-size: var(--text-small); border-bottom-width: 2px; }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col h4 { font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--magenta); margin-bottom: 8px; }
.foot-col a, .foot-col span { color: var(--ink-dim); font-size: 14px; transition: color 0.2s; }
.foot-col a:hover { color: #fff; }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(168, 85, 247, 0.1);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--ink-faint);
}

/* ============ AMBIENT PARTICLES ============ */
#particles {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}

/* ============ TITLE WIPE REVEAL ============ */
.wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease);
}
.wipe.in-view { clip-path: inset(0 0 0 0); }

/* ============ HERO GLYPHS ============ */
.hero-glyphs { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.glyph {
  position: absolute;
  font-weight: 900;
  color: var(--violet-hi);
  opacity: 0;
  animation: glyph-float var(--dur, 12s) ease-in-out var(--delay, 0s) infinite;
  text-shadow: 0 0 22px rgba(168, 85, 247, 0.6);
  user-select: none;
}
@keyframes glyph-float {
  0%, 100% { opacity: 0; transform: translateY(16px) rotate(-3deg); }
  22%, 72% { opacity: var(--op, 0.14); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

/* ============ PORT STATS ============ */
.port-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
  position: relative; z-index: 2;
}
.pstat {
  text-align: center;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(34, 24, 48, 0.8), rgba(26, 19, 34, 0.8));
  padding: 22px 12px 18px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.pstat:hover { transform: translateY(-4px); border-color: rgba(217, 70, 239, 0.4); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.pstat b {
  display: block;
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 6px;
  line-height: 1;
}
.pstat > span { font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--ink-faint); }

/* ============ NOW PLAYING SHOWCASE ============ */
.showcase {
  position: relative;
  z-index: 2;
  height: clamp(300px, 44vw, 460px);
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.25);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  margin-bottom: 26px;
  cursor: pointer;
}
.show-bgs { position: absolute; inset: 0; }
.show-bgs img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s var(--ease), transform 6s linear;
}
.show-bgs img.on { opacity: 1; transform: scale(1.14); }
.show-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(12, 8, 17, 0.96) 4%, rgba(12, 8, 17, 0.3) 48%, transparent 75%),
    linear-gradient(100deg, rgba(124, 58, 237, 0.18), transparent 50%);
}
.show-ui {
  position: absolute; left: clamp(22px, 4vw, 48px); right: clamp(22px, 4vw, 48px); bottom: clamp(20px, 3.4vw, 38px);
  z-index: 2;
}
.show-now {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  margin-bottom: 12px;
}
.show-now .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--magenta);
  animation: pulse 1.6s infinite;
}
.show-title {
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 72px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.7);
  margin-bottom: 10px;
}
.show-tag { font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--ink-dim); margin-bottom: 18px; }
.show-bar {
  height: 3px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}
.show-bar span {
  display: block; height: 100%; width: 0;
  background: var(--grad);
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.95), 0 0 4px rgba(168, 85, 247, 0.7);
}
.show-dots {
  position: absolute; right: clamp(20px, 3.5vw, 40px); bottom: clamp(20px, 3.4vw, 38px);
  display: flex; gap: 10px;
  z-index: 3;
}
.show-dot {
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: all 0.25s;
  cursor: pointer;
}
.show-dot.on {
  background: var(--magenta);
  border-color: #fff;
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.9);
}

/* ============ TILT ============ */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt > * { transform: translateZ(24px); }

/* ============ INNER PAGES ============ */
.page-hero {
  position: relative;
  padding: clamp(150px, 22vh, 230px) 0 clamp(50px, 8vh, 90px);
  overflow: clip;
}
.page-ribbon {
  position: absolute;
  width: 170%; height: clamp(120px, 18vh, 200px);
  left: -35%; top: -30px;
  transform: rotate(-13deg);
  /* the steeper the angle, the further the band falls across a wide screen */
  background: var(--grad);
  opacity: 0.8;
  box-shadow: 0 0 70px rgba(124, 58, 237, 0.3);
  animation: ribbon-in 1s var(--ease) both;
}
.page-hero .wrap { position: relative; z-index: 2; text-align: left; }
/* Reading pages (services detail, blog posts): hero + body share one column.
   Without this, .page-hero .wrap stays 1280px while .post-wrap is 820px centered. */
main:has(.post-wrap) .page-hero .wrap,
main:has(.post-wrap) .page-body > .wrap.post-wrap {
  max-width: var(--content-col);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
main:has(.post-wrap) .page-hero {
  text-align: left;
}
main:has(.post-wrap) .page-hero .huge-h,
main:has(.post-wrap) .page-hero .post-h1,
main:has(.post-wrap) .page-hero .page-sub {
  max-width: 100%;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.page-kicker {
  display: block;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  margin-bottom: 18px;
}
/* in the page hero the gradient ribbon can pass behind the kicker —
   white + shadow keeps it readable on any background */
.page-hero .page-kicker {
  color: #fff;
  text-shadow: 0 1px 3px rgba(12, 8, 17, 0.9), 0 2px 14px rgba(12, 8, 17, 0.7);
}
.page-sub { color: var(--ink-dim); margin-top: 22px; max-width: 620px; font-size: 17px; }
.page-body { position: relative; padding-bottom: clamp(80px, 12vh, 140px); }
/* the closing CTA brings its own bottom padding; stacking both left a void */
.page-body:has(.page-cta) { padding-bottom: 0; }
.page-cta {
  /* flex con gap invece di elementi inline: il bottone ha un taglio obliquo di
     14px e con soli 4px di stacco la sua punta copriva la prima lettera del
     link accanto */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 34px;
  padding: clamp(50px, 8vh, 90px) 0 clamp(80px, 12vh, 130px);
  position: relative; z-index: 2;
}
/* inside a reading column everything else is flush left, so this is too */
.post-wrap > .page-cta { text-align: left; justify-content: flex-start; }
/* inline-block, not nowrap: la sottolineatura e' un border, quindi su un box
   inline-block resta intera anche se il testo va a capo. Con nowrap invece la
   larghezza minima del link gonfiava la colonna della griglia oltre il viewport
   (pagina servizi, 13px di sbordo a 360px). */
.btn-line { display: inline-block; }
/* under ~620px the two calls to action stop fitting side by side */
@media (max-width: 620px) {
  .page-cta { flex-direction: column; align-items: center; }
  .post-wrap > .page-cta { align-items: flex-start; }
}

/* forms */
.form-card {
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 46px);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  position: relative; z-index: 2;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
/* min-width 0: inputs have a ~217px intrinsic width that would blow the
   form-grid tracks past the viewport on mid-size screens */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field input, .field textarea, .field select { width: 100%; min-width: 0; }
/* file picker: the native control cannot be styled, so it is hidden with the
   clip technique (not display:none, which would make it unfocusable) and driven
   by its own label */
.file-pick {
  display: flex; align-items: stretch;
  border: 1px solid var(--line);
  background: rgba(12, 8, 17, 0.45);
  overflow: hidden;
}
.file-pick input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  clip-path: inset(50%);
}
.file-btn {
  flex: none;
  display: flex; align-items: center;
  padding: 0 18px;
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--violet-hi);
  background: rgba(168, 85, 247, 0.12);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.file-btn:hover { background: rgba(217, 70, 239, 0.28); color: #fff; }
.file-pick input[type="file"]:focus-visible + .file-btn { outline: 2px solid var(--magenta); outline-offset: -3px; }
.file-name {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  padding: 12px 14px;
  font-size: var(--text-small);
  color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-name.has { color: var(--ink); }

.rate-stepper {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line);
  background: rgba(12, 8, 17, 0.45);
  overflow: hidden;
}
.rate-stepper input {
  border: none !important;
  background: transparent !important;
  text-align: center;
  flex: 1;
  min-width: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.rate-stepper .rate-btn {
  flex: none;
  width: 42px;
  font-family: var(--mono-f);
  font-size: 18px;
  font-weight: 600;
  color: var(--magenta);
  background: rgba(168, 85, 247, 0.12);
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.rate-stepper .rate-btn:hover { background: rgba(217, 70, 239, 0.28); color: #fff; }
.field-count {
  font-family: var(--mono-f);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  color: var(--ink-faint);
  margin-top: 6px;
  text-align: right;
}
.field-count.warn { color: var(--magenta); }
.field label {
  font-family: var(--mono-f);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field label b { color: var(--magenta); }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 16px; /* 16px minimum: below that iOS Safari auto-zooms on focus */
  color: var(--ink);
  background: rgba(12, 8, 17, 0.7);
  border: 1px solid var(--line);
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.15);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--text-small); color: var(--ink-dim);
}
.form-check input { width: 18px; height: 18px; accent-color: var(--magenta); margin-top: 2px; flex-shrink: 0; }
.form-note { font-family: var(--mono-f); font-size: var(--text-small); color: var(--ink-faint); letter-spacing: 0.04em; margin-top: 14px; }
.form-send { margin-top: 26px; border: none; cursor: pointer; }
.form-send[disabled] { opacity: 0.6; cursor: wait; }

/* honeypot — visually gone, still in the DOM for bots */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* styled selects (match .field inputs) */
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a78bda'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 42px;
}
.field select option { background: #16101f; color: var(--ink); }

/* submit status line */
.q-msg { display: none; font-size: var(--text-small); letter-spacing: 0.04em; margin-top: 18px; line-height: 1.6; }
.q-msg.ok { display: block; color: #34d399; }
.q-msg.err { display: block; color: #f87171; }
.q-msg.err a { color: #fff; border-bottom: 1px solid #f87171; }

/* ---- "Let's Talk" quote widget (pilot / test two-step flow) ---- */
.quote-widget { max-width: 760px; margin: 0 auto 56px; position: relative; z-index: 2; text-align: left; }
.quote-widget .cont-cards { margin-bottom: 0; }
button.cont-card { font: inherit; color: inherit; cursor: pointer; width: 100%; }
.q-step.q-in { animation: q-in 0.45s var(--ease) both; }
.q-form.q-in { animation: q-in 0.45s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(16px); } }
.q-back {
  display: block;
  width: max-content;
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--ink-dim);
  background: none; border: none; cursor: pointer;
  padding: 0 0 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s, border-color 0.25s;
}
.q-back:hover { color: #fff; border-color: var(--magenta); }
.q-sub { color: var(--ink-dim); font-size: 14px; margin: 10px 0 22px; }

/* ---- language-pair multi-select (join us) ---- */
.pair-select { position: relative; }
.pair-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pair-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono-f); font-size: var(--text-label); letter-spacing: 0.06em;
  color: var(--violet-hi);
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 6px 10px;
}
.pair-pill button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); font-size: 13px; line-height: 1; padding: 0;
}
.pair-pill button:hover { color: #fff; }
.pair-toggle {
  font: inherit; font-size: 16px;
  width: 100%; text-align: left; cursor: pointer;
  color: var(--ink-faint);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a78bda'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 14px center / 15px,
    rgba(12, 8, 17, 0.7);
  border: 1px solid var(--line);
  padding: 13px 42px 13px 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.pair-toggle.has-sel { color: var(--ink); }
.pair-toggle:focus-visible, .pair-select.open .pair-toggle {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.15);
}
.pair-panel {
  position: absolute; z-index: 30;
  top: calc(100% + 8px); left: 0; right: 0;
  max-height: 320px;
  display: flex; flex-direction: column;
  background: #16101f;
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}
.pair-panel-scroll { overflow-y: auto; padding: 10px; }
.pair-group-h {
  font-family: var(--mono-f);
  font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
  padding: 12px 8px 6px;
}
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .pair-grid { grid-template-columns: 1fr; } }
.pair-item {
  display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: var(--text-small); text-align: left;
  color: var(--ink-dim);
  background: none; border: none; cursor: pointer;
  padding: 8px;
  transition: background 0.2s, color 0.2s;
}
.pair-item:hover { background: rgba(124, 58, 237, 0.12); color: #fff; }
.pair-item .box {
  flex-shrink: 0;
  width: 15px; height: 15px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center;
  font-size: 10px; color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.pair-item.sel { color: var(--violet-hi); }
.pair-item.sel .box { background: var(--magenta); border-color: var(--magenta); }
.pair-done {
  font-family: var(--mono-f); font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  background: rgba(12, 8, 17, 0.8);
  border: none; border-top: 1px solid var(--line);
  cursor: pointer;
  padding: 12px;
}
.pair-done:hover { color: #fff; }

/* contact info cards */
.info-list { display: grid; gap: 16px; }
.info-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-left: 4px solid var(--magenta);
  padding: 22px 24px;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.info-card:hover { transform: translateX(6px); border-color: rgba(217, 70, 239, 0.4); }
.info-card .ic { font-size: 21px; }
.info-card h3 {
  font-family: var(--mono-f);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  margin-bottom: 5px;
}
.info-card > div { min-width: 0; }
.info-card a, .info-card span {
  color: var(--ink-dim); font-size: 15px; transition: color 0.2s;
  /* long unbreakable strings (email address) must wrap on tiny screens */
  overflow-wrap: anywhere;
}
.info-card a:hover { color: #fff; }

/* values (join us) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-bottom: clamp(44px, 7vh, 70px);
  position: relative; z-index: 2;
}

/* blog cards */
/* card grid with featured images, mirroring the live site's blog layout */
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 22px 20px;
  position: relative; z-index: 2;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.post-card:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 70, 239, 0.45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.post-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(168, 85, 247, 0.14), transparent 70%),
    var(--panel);
  border-bottom: 1px solid var(--line);
}
.post-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.post-card:hover .post-thumb img { transform: scale(1.06); }
.post-body {
  display: flex; flex-direction: column; flex: 1;
  gap: 8px;
  padding: 20px 20px 22px;
}
.post-date {
  font-family: var(--mono-f);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: var(--magenta);
  text-transform: uppercase;
}
.post-card h3 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}
.post-card p {
  color: var(--ink-dim);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-go {
  font-family: var(--mono-f);
  font-size: var(--text-label); letter-spacing: var(--track-label);
  color: #fff;
  border-bottom: 2px solid var(--magenta);
  padding-bottom: 4px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 6px;
  transition: color 0.25s;
}
.post-card:hover .post-go { color: var(--magenta); }

/* privacy / article prose — fill the reading column, never a second centered box */
.prose {
  max-width: var(--content-col);
  position: relative; z-index: 2;
  color: var(--ink-dim);
  font-size: var(--text-body);
  line-height: 1.78;
  text-align: left;
}
.page-body > .wrap:not(.post-wrap) > .prose {
  margin-left: 0;
  margin-right: 0;
}
.post-wrap .prose {
  max-width: 100%;
}
.prose h2 {
  text-wrap: balance;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 52px 0 18px;
  padding-left: 16px;
  border-left: 4px solid var(--magenta);
}
.prose h3 { font-size: 20px; font-weight: 800; color: #fff; margin: 34px 0 10px; letter-spacing: 0.01em; }
.prose p { margin: 0 0 1.15em; }
.prose ul { list-style: none; margin: 0 0 1.15em; padding: 0; }
.prose li { margin-bottom: 10px; }
.prose a { color: var(--violet-hi); border-bottom: 1px solid rgba(168, 85, 247, 0.4); }
.prose a:hover { color: var(--magenta); }
.prose .toc {
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 26px 30px;
  margin: 30px 0 10px;
  columns: 2;
  column-gap: 40px;
  list-style: none;
}
.prose .toc li { font-size: var(--text-small); margin-bottom: 8px; break-inside: avoid; }
.prose .legal-date { font-family: var(--mono-f); font-size: var(--text-small); letter-spacing: 0.04em; color: var(--ink-faint); }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .prose .toc { columns: 1; }
}

/* ============ REVEALS ============ */
.rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--rd, 0s);
}
.rv.in-view { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .two-col { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .edge-text { display: none; }
  .spine, .node { display: none; }
  .step .step-node {
    position: static;
    transform: none;
    margin-bottom: 12px;
  }
  .step-card::before { display: none; }
}
/* mid screens: compact desktop nav so 7 items + CTA fit on one line */
@media (max-width: 1320px) {
  .nav { gap: 24px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 11.5px; letter-spacing: 0.1em; }
  .nav-brand span { font-size: 13px; }
  .nav-cta { font-size: 11px; padding: 12px 18px; }
}

/* below 1080px the nav can't fit on one line — switch to the burger menu */
@media (max-width: 1080px) {
  /* backdrop-filter on the header creates a CSS containing block that would
     trap the fixed fullscreen menu inside the nav bar — solid bg instead */
  .nav.scrolled {
    /* no blur here, so the fill has to do all the hiding: fully opaque,
       transparency buys nothing without a backdrop-filter */
    background: #221f29;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links {
    position: fixed; inset: 0;
    background: rgba(12, 8, 17, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 34px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
    z-index: -1;
  }
  .nav.open .nav-links { opacity: 1; visibility: visible; z-index: 0; }
  /* brand and burger must stay above the fullscreen overlay,
     otherwise the X can't be tapped to close the menu */
  .nav-brand, .nav-burger { position: relative; z-index: 2; }
  .nav-brand span { font-size: 14px; }
  .nav-links a { font-size: 18px; }
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  /* "Contact us" entry inside the overlay (the bar CTA is hidden) */
  .nav-quote {
    display: inline-block;
    margin-top: 12px;
    padding: 15px 34px;
    background: var(--grad);
    color: #fff;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  }
  .nav-quote::after { display: none; }
  /* lock page scroll while the menu is open — must live on html: with a
     non-visible overflow on the root, body overflow no longer reaches the
     viewport */
  html.nav-open, html.nav-open body { overflow: hidden; }
}

@media (max-width: 768px) {
  .hero-collage { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .ghost-word { font-size: 64px; opacity: 0.7; }
  .rev-card { width: 320px; }
}

/* small phones: keep buttons and pagination on one line */
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form-send { width: 100%; align-items: center; }
  .form-send span { font-size: 13px; letter-spacing: 0.1em; white-space: nowrap; }
  .form-send small { font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }
}

/* very small phones (≤380px): tighter hero so headline fits and the CTA
   stays in the first viewport */
@media (max-width: 380px) {
  .hero { padding: 100px 0 70px; }
  .hero-h { --text-h-hero: clamp(26px, 10.5vw, 40px); }
  .hero-kicker { margin-bottom: 18px; }
  .hero-sub { font-size: 15px; margin-bottom: 24px; }
  .hero-cta { gap: 14px; }
}

/* ============ BIG SCREENS (QHD / 4K) ============
   The layout caps at 1280px and looks lost on very large monitors —
   scale containers and type up so proportions match FHD. */
/* ============ LONG-FORM READING (blog posts, service pages, privacy) ============
   One narrower column for everything in the reading flow — hero title, body,
   post furniture — so the measure stays around 70-75 characters. */
main:has(.post-wrap) { --content-col: 768px; }

/* ---- the article rail ----
   Below 1560px a post is a single centred column. Above it the page is wide
   enough that one column of text leaves the screen looking empty, so the
   column grows, the type grows with it, and the space that is left over
   becomes a rail carrying the article's own sections. */
.post-aside { display: none; }
.pa-meta {
  font-family: var(--mono-f);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 22px;
}
.pa-title {
  display: block;
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 16px;
}
.pa-toc { border-left: 1px solid var(--line); padding-left: 22px; }
.pa-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pa-toc a {
  display: block;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--ink-faint);
  border-bottom: none;
  transition: color 0.2s;
}
.pa-toc a:hover { color: #fff; }
.pa-toc li.lv3 a { padding-left: 15px; }
.pa-toc li.on > a { color: var(--violet-hi); font-weight: 600; }
/* anchor jumps must not land under the fixed header */
.post-prose h2, .post-prose h3 { scroll-margin-top: 110px; }
/* the reading column is narrower than the marketing pages, so the display
   title has to scale with it: at 104px a word like LOCALIZATION ran past it */
main:has(.post-wrap) .page-hero .huge-h { font-size: clamp(30px, 4.6vw, 60px); }

.prose > *:first-child { margin-top: 0; }
.prose strong { color: #fff; font-weight: 700; }
.prose em { color: var(--ink); }
/* bullets: a small rotated square in the brand gradient, aligned to the first line */
.prose ul > li {
  position: relative;
  padding-left: 24px;
}
.prose ul > li::before {
  content: "";
  position: absolute; left: 2px; top: 0.66em;
  width: 7px; height: 7px;
  background: var(--grad);
  transform: rotate(45deg);
}
.prose ul ul { margin: 10px 0 0; }
.prose ol > li::marker { color: var(--violet-hi); font-weight: 800; }
.prose blockquote {
  margin: 30px 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--magenta);
  color: #fff;
  font-size: 17px;
  line-height: 1.6;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose figure { margin: 30px 0; }
.prose figure img { margin: 0 auto; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
/* video embeds keep their aspect ratio at every width */
.embed {
  position: relative;
  margin: 30px 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* wide tables scroll inside their own box instead of widening the page */
.table-scroll {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--line);
}
.table-scroll table { margin: 0; min-width: 480px; border: none; }
.prose th {
  background: rgba(168, 85, 247, 0.1);
  color: #fff; text-align: left; font-weight: 800;
  letter-spacing: 0.04em;
}
/* an image that is its own link should not pick up the body-link underline */
.prose a:has(> img) { border-bottom: none; display: block; }

@media (min-width: 2200px) {
  body { font-size: 19px; }
  .wrap, .hero-inner { max-width: 1760px; }
  .hero-h { --text-h-hero: 150px; }
  .big-h { font-size: 86px; }
  .huge-h { font-size: 144px; }
  .hero-sub { font-size: 22px; max-width: 760px; }
  .btn-main { padding: 22px 46px; }
  .btn-main span { font-size: 19px; }
  .btn-main small { font-size: 12px; }
  .btn-line { font-size: 16px; }
  .hero-cta { gap: 36px; }
  .hero-kicker, .hero-tagline { font-size: 14px; letter-spacing: 0.32em; }
  .blk-tag, .page-kicker { font-size: 13px; }
  .blk-sub, .cont-sub, .page-sub { font-size: 19px; }
  /* line the header up with the capped content instead of the window edge */
  .nav { padding-left: max(90px, calc((100vw - 1760px) / 2)); padding-right: max(90px, calc((100vw - 1760px) / 2)); }
  .nav-links { gap: 40px; }
  .nav-links a { font-size: 14px; }
  .nav-brand span { font-size: 16px; }
  .nav-brand img { width: 42px; height: 42px; }
  .nav-cta { font-size: 14px; padding: 16px 32px; }
  .port-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  /* long-form scales too, column and type together, so the measure stays ~72 characters */
  /* four generous columns instead of five cramped ones */
  .post-list { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
  main:has(.post-wrap) { --content-col: 980px; }
  .prose { font-size: 21px; }
  .prose h2 { font-size: 32px; }
  .prose h3 { font-size: 25px; }
  .prose h4 { font-size: 22.5px; }
  .post-h1 { font-size: 68px; }
  main:has(.post-wrap) .page-hero .huge-h { font-size: 72px; }
  .page-ribbon { transform: rotate(-7deg); top: -70px; }
  .hero-ribbon { transform: rotate(-9deg); }
  .page-sub, .cont-sub { max-width: 860px; }
  .post-nav-link b { font-size: 17px; }
  .post-card h3 { font-size: 19px; }
  .post-card p { font-size: 16px; }
  /* showcase sources are 1920px wide — cap the box so they never upscale */
  .showcase { max-width: 1800px; margin-left: auto; margin-right: auto; }
  .port-name { font-size: 15px; }
  .pstat > span { font-size: 12px; }
  .pstat b { font-size: 54px; }
  .ticker { padding: 22px 0; }
  .ticker-track span { font-size: 15px; }
  .ghost-word { font-size: clamp(120px, 14vw, 300px); }
}
@media (min-width: 3200px) {
  body { font-size: 22px; }
  .wrap, .hero-inner { max-width: 2340px; }
  .hero-h { --text-h-hero: 200px; }
  .big-h { font-size: 112px; }
  .huge-h { font-size: 190px; }
  .hero-sub { font-size: 27px; max-width: 960px; }
  .btn-main { padding: 28px 58px; }
  .btn-main span { font-size: 24px; }
  .btn-main small { font-size: 14px; }
  .btn-line { font-size: 19px; }
  .nav-links a { font-size: 16px; }
  .nav-links { gap: 52px; }
  .nav { padding-left: max(90px, calc((100vw - 2340px) / 2)); padding-right: max(90px, calc((100vw - 2340px) / 2)); }
  .nav-brand span { font-size: 18px; }
  .nav-brand img { width: 50px; height: 50px; }
  .port-grid { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
  .port-name { font-size: 17px; }
  .pstat > span { font-size: 13px; }
  .pstat b { font-size: 64px; }
  .blk-sub, .cont-sub, .page-sub { font-size: 22px; }
  .ticker-track span { font-size: 17px; }
  .page-ribbon { transform: rotate(-5deg); top: -90px; }
  .hero-ribbon { transform: rotate(-7deg); }
  .page-sub, .cont-sub { max-width: 1040px; }
  main:has(.post-wrap) { --content-col: 1180px; }
  .prose { font-size: 26px; }
  .prose h2 { font-size: 40px; }
  .prose h3 { font-size: 31px; }
  .prose h4 { font-size: 28px; }
  .post-h1 { font-size: 86px; }
  main:has(.post-wrap) .page-hero .huge-h { font-size: 92px; }
  .post-nav-link b { font-size: 21px; }
  .post-card h3 { font-size: 23px; }
  .post-card p { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   FINAL POLISH PASS
   ============================================================ */

/* custom scrollbar */
html { scrollbar-width: thin; scrollbar-color: #7c3aed var(--bg-2); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violet), var(--magenta));
  border: 2px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--magenta); }

/* keyboard focus */
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* anchors land below the fixed nav */
[id] { scroll-margin-top: 92px; }

/* ---- orchestrated hero entrance (starts when loader leaves) ---- */
.hl-inner { animation-play-state: paused; }
body.loaded .hl-inner { animation-play-state: running; }
.hero-ribbon { animation-play-state: paused; }
body.loaded .hero-ribbon { animation-play-state: running; }
.hero-kicker, .hero-tagline, .hero-sub, .hero-cta, .hero-scroll {
  opacity: 0;
  animation: fade-up 0.85s var(--ease) forwards;
  animation-play-state: paused;
}
body.loaded .hero-kicker, body.loaded .hero-tagline, body.loaded .hero-sub,
body.loaded .hero-cta, body.loaded .hero-scroll {
  animation-play-state: running;
}
.hero-kicker { animation-delay: 0.05s; }
.hero-tagline { animation-delay: 0.5s; }
.hero-sub { animation-delay: 0.62s; }
.hero-cta { animation-delay: 0.76s; }
.hero-scroll { animation-delay: 1.2s; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.hero-scroll { animation-name: fade-up; }
body.loaded .hero-scroll { animation: fade-up 0.85s var(--ease) 1.2s forwards, nudge 1.6s ease-in-out 2.2s infinite; }

/* hero content drifts away as you scroll (set by JS) */
.hero-inner { will-change: transform, opacity; }

/* ---- page wipe transition ---- */
.page-wipe {
  position: fixed; inset: 0;
  z-index: 9900;
  pointer-events: none;
  background: var(--bg-2);
  clip-path: polygon(-40% 0, -10% 0, -40% 100%, -70% 100%);
  transition: clip-path 0.4s var(--ease);
}
.page-wipe::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 55%, rgba(124, 58, 237, 0.35) 78%, rgba(217, 70, 239, 0.5) 100%);
}
.page-wipe.on {
  clip-path: polygon(-40% 0, 140% 0, 110% 100%, -70% 100%);
  pointer-events: auto;
}
.page-wipe.out {
  clip-path: polygon(150% 0, 190% 0, 160% 100%, 120% 100%);
  pointer-events: none;
}
.page-wipe.instant { transition: none; }

/* ============ BLOG POST PAGES + PAGINATION ============ */
.post-h1 {
  text-wrap: balance;
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 100%;
  text-align: left;
}
.post-hero { text-align: left; }
.post-hero .wrap {
  max-width: var(--content-col);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.post-hero .page-kicker .crumb { color: inherit; border-bottom: 1px solid rgba(217, 70, 239, 0.5); }
.post-hero .page-kicker .crumb:hover { color: var(--magenta); }
.post-wrap {
  max-width: var(--content-col);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.post-wrap > .prose,
.post-wrap > .post-prose {
  max-width: 100%;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
/* keep grids/cards inside the reading column flush left */
.post-wrap .mgmt-grid,
.post-wrap .perk-list,
.post-wrap .steps {
  max-width: 100%;
}
/* neutralize Elementor / WP leftover layout that skews title vs body */
.prose .elementor,
.prose .elementor-widget-container,
.prose .e-con,
.prose .e-con-inner,
.prose .e-con-boxed {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: inherit;
}
.prose .e-con.e-flex,
.prose .e-con-inner {
  display: block !important;
}
.prose .aligncenter,
.prose .alignnone,
.prose .alignleft,
.prose .alignright {
  display: block;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
}
.prose img {
  max-width: 100%; height: auto;
  /* square and portrait sources were filling more than a whole laptop screen
     before the article even started; cap the height and let the width follow */
  max-height: min(72vh, 760px);
  width: auto;
  display: block;
  /* flush left like every other block in the column, not centred */
  margin: 28px 0;
  border: 1px solid var(--line);
}
/* width:auto, not 100%: one post has a 240px source and blowing it up to the
   column width just made it blurry */
.post-featured { margin: 0 0 32px; width: auto; max-width: 100%; max-height: min(72vh, 760px); object-fit: cover; }
.prose .wp-caption { width: auto !important; max-width: 100%; margin: 24px auto; text-align: center; }
.prose .wp-caption img { margin: 0 auto; }
.prose .wp-caption-text, .prose figcaption {
  font-family: var(--mono-f);
  font-size: var(--text-small); letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 10px;
}
/* must stay above the body size, or a heading reads as a caption */
.prose h4 { font-size: 17.5px; font-weight: 800; color: var(--ink); margin: 26px 0 8px; }
.prose ol { margin: 0 0 1.15em; padding-left: 26px; }
.prose iframe { max-width: 100%; }
.prose table { max-width: 100%; border-collapse: collapse; margin: 20px 0; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 12px; font-size: 14px; }
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.post-nav-link {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: rgba(26, 19, 34, 0.5);
  transition: border-color 0.25s, transform 0.25s;
}
.post-nav-link:hover { border-color: var(--magenta); transform: translateY(-3px); }
.post-nav-link .mono { font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--ink-faint); }
.post-nav-link b { font-size: 14px; font-weight: 700; color: var(--ink-dim); line-height: 1.4; }
.post-nav-link:hover b { color: #fff; }
.post-nav-link.next { text-align: right; }
@media (max-width: 700px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.next { text-align: left; }
}
.pagination {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(36px, 5vh, 52px);
}
.pg-btn {
  min-width: 42px; height: 42px;
  font-family: var(--mono-f); font-size: var(--text-label);
  color: var(--ink-dim);
  background: rgba(26, 19, 34, 0.7);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pg-btn:hover:not([disabled]) { color: #fff; border-color: var(--magenta); }
.pg-btn.on { color: #fff; background: var(--grad); border-color: transparent; }
.pg-btn[disabled] { opacity: 0.35; cursor: default; }
/* phones: keep tap targets ≥42×44px; pagination may wrap to two lines */
@media (max-width: 430px) {
  .pagination { gap: 6px; }
  .pg-btn { min-width: 42px; height: 44px; font-size: 11px; }
}


/* ---- touch targets (WCAG 2.2 target size) ---- */
@media (max-width: 768px) {
  /* real padding: the column rhythm absorbs it */
  .foot-col { gap: 0; }
  .foot-col a { padding: 10px 0; }
  .under-link.site { display: inline-block; padding: 8px 0 10px; }

  /* invisible hit area: these sit in a line of text or in a fixed corner,
     so growing the box itself would move the layout */
  /* .hero-scroll e' escluso di proposito: e' gia' position:absolute, quindi fa
     da riferimento al suo ::before da solo. Forzarlo a relative lo rimetteva
     nel flusso flex dell'hero, dove rubava spazio a .hero-inner: la colonna si
     restringeva attorno alla parola piu' lunga e tutto l'hero ballava a ogni
     cambio di lingua. */
  .btn-line, .page-kicker .crumb, .info-card a, .post-go, .cc-go, .q-back {
    position: relative;
  }
  /* sul telefono la scritta flottante SCROLL non si mostra: lo schermo e' corto,
     i pulsanti dell'hero sono gia' a portata e la fascia scorrevole sta sotto */
  .hero-scroll { display: none; }

  .btn-line::before, .page-kicker .crumb::before, .info-card a::before,
  .cc-go::before, .q-back::before {
    content: "";
    position: absolute;
    left: -6px; right: -6px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  /* the carousel dots are 12px diamonds: keep the look, widen the reach */
  .show-dots { gap: 18px; }
  .show-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
  }
  .show-dot { position: relative; }
}

/* ---- spine node pop ---- */
.node.lit { animation: node-pop 0.45s var(--ease); }
@keyframes node-pop {
  50% { transform: translateX(calc(-50% + 1px)) rotate(45deg) scale(1.7); }
}
.step.lit .step-node { animation: stepnode-pop 0.5s var(--ease); }
@keyframes stepnode-pop {
  50% { transform: translate(-50%, -50%) scale(1.3); }
}

/* ---- CTA shine sweep ---- */
.btn-main { overflow: hidden; }
.btn-main::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 36%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-22deg);
  animation: shine 4s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 55% { left: -60%; }
  78%, 100% { left: 135%; }
}

/* ---- NDA tile heartbeat ---- */
.port-item.nda .port-thumb { animation: nda-glow 3.2s ease-in-out infinite; }
@keyframes nda-glow {
  50% {
    border-color: rgba(217, 70, 239, 0.75);
    box-shadow: 0 0 26px rgba(217, 70, 239, 0.22);
  }
}

/* ---- scroll-velocity skew targets ---- */
.svc-rows, .port-grid, .rev-slider { will-change: transform; }

/* ---- reduced motion safety for gated hero ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-kicker, .hero-tagline, .hero-sub, .hero-cta, .hero-scroll, .hl-inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-wipe { display: none; }
}

/* ============ BLOG POSTS ON WIDE SCREENS ============
   A single reading column leaves a 2K screen looking empty, so from 1440px up
   the shell widens, the type grows with it (the measure stays around 75
   characters) and the space left over becomes a rail listing the article's own
   sections. Keyed off .post-prose: service and privacy pages share .post-wrap
   but have no rail, and must keep their single column.
   The grid needs .has-aside, which the script adds only once the rail exists,
   so a page without JavaScript never gets an empty second column. */
@media (min-width: 1440px) {
  main:has(.post-prose) { --content-col: min(1340px, 93vw); }
  .post-prose { font-size: 19px; }
  .post-h1 { font-size: 62px; }
  .post-hero .post-h1, .post-hero .page-kicker, .post-hero .page-sub { max-width: 940px; }
  .post-wrap.has-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 88px;
    align-items: start;
  }
  .post-wrap.has-aside > * { grid-column: 1; min-width: 0; }
  .post-wrap.has-aside > .post-aside {
    display: block;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
}
@media (min-width: 2200px) {
  main:has(.post-prose) { --content-col: 1460px; }
  .post-prose { font-size: 21px; }
  .post-h1 { font-size: 74px; }
  .post-hero .post-h1, .post-hero .page-kicker, .post-hero .page-sub { max-width: 1040px; }
  .post-wrap.has-aside { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 96px; }
}
@media (min-width: 3200px) {
  main:has(.post-prose) { --content-col: 1760px; }
  .post-prose { font-size: 26px; }
  .post-h1 { font-size: 92px; }
  .post-hero .post-h1, .post-hero .page-kicker, .post-hero .page-sub { max-width: 1260px; }
  .post-wrap.has-aside { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 112px; }
}

/* ---- pagina servizi ----
   L'hero lasciava 72px prima del primo paragrafo, tre volte lo stacco che i
   paragrafi hanno fra loro. */
.svc-hero { padding-bottom: clamp(24px, 3vh, 34px); }