/* =========================================================================
   STRATIGO — Homepage
   Layout, type scale and component vocabulary follow DESIGN.md.
   The palette is STRATIGO's own, sampled from the brand screenshots — it
   replaces the reference's warm-dark colours, including its "never pure
   white / never pure black" rule, which the brand does not observe.
   ========================================================================= */

/* I token di design sono in assets/css/tokens.css: serve anche all'editor,
   che non carica questo foglio. */



/* Light surfaces flip the text colour rather than introducing greys. */
.zone--light {
  --fg:    var(--st-ink);
  --fg-72: rgba(10, 10, 44, .72);
  --fg-54: rgba(10, 10, 44, .56);
  --fg-38: rgba(10, 10, 44, .42);
  --fg-14: rgba(10, 10, 44, .14);
  --fg-07: rgba(10, 10, 44, .07);
  --line:  rgba(10, 10, 44, .16);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

/* The canvas colour lives on <html> so the fixed stage can sit above
   section backgrounds without needing a background of its own. */
/* overflow-x uses `clip`, not `hidden`: `hidden` would turn the element into
   a scroll container and break `position: sticky` inside the zoom stages. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--spacing-24));
  -webkit-text-size-adjust: 100%;
  background: var(--st-ink);
  overflow-x: clip;
}

body {
  margin: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ol, ul, figure, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: var(--spacing-12);
  left: var(--spacing-12);
  z-index: 90;
  padding: var(--spacing-10) var(--spacing-18);
  border: 1px solid var(--st-white);
  border-radius: var(--radius-buttons-outlined);
  background: var(--st-ink);
  color: var(--st-white);
  font-size: var(--spacing-12);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------- type primitives */

.display {
  font-family: var(--font-title);
  font-size: clamp(38px, 7vw, 118px);
  line-height: var(--leading-display);   /* 0.9 — the sculptural signature */
  font-weight: var(--weight-title);
  letter-spacing: normal;
  text-transform: uppercase;
  text-wrap: balance;
}

.heading {
  font-family: var(--font-title);
  font-size: clamp(31px, 4.4vw, 74px);
  line-height: var(--leading-heading);   /* 0.9 */
  font-weight: var(--weight-title);
  text-transform: uppercase;
  text-wrap: balance;
}

/* The system's only conversational voice: 29px / 400 / mixed case. */
.body {
  font-size: clamp(18px, 1.55vw, var(--text-body));
  line-height: var(--leading-body);      /* 1.26 */
  font-weight: var(--font-weight-regular);
  text-transform: none;
  text-align: left;
}

.micro {
  font-size: var(--spacing-10);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg-54);
}

.legal {
  font-family: var(--font-arial);
  font-size: 8px;
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--fg-54);
}

.accent { color: var(--st-blue-400); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  font-size: var(--spacing-12);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg-72);
}
.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--st-blue-400);
  flex: none;
}

/* --------------------------------------------------------------- dividers */

.rule-dashed {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--rule);
}

/* ---------------------------------------------------------------- buttons */

/* Pill Button (Filled) — the one solid action surface, max one per section. */
.btn-filled {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-14) var(--spacing-24);
  border: 1px solid var(--st-white);
  border-radius: var(--radius-buttons-pill);
  background: var(--st-white);
  color: var(--st-ink);
  font-size: var(--spacing-14);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn-filled:hover,
.btn-filled:focus-visible { background: transparent; color: var(--st-white); }
.btn-filled .arrow { transition: transform .25s var(--ease); }
.btn-filled:hover .arrow { transform: translateX(4px); }

.btn-filled--submit { width: 100%; justify-content: space-between; }
.btn-filled__lead { width: 22px; height: 1px; background: currentColor; flex: none; }
.btn-filled--submit .arrow { margin-left: auto; }

/* Outlined Ghost Button — the secondary vocabulary. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  padding: 7.5px var(--spacing-18);
  border: 1px solid currentColor;
  border-radius: var(--radius-buttons-outlined);
  background: transparent;
  color: var(--fg);
  font-size: var(--spacing-12);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.btn-ghost:hover,
.btn-ghost:focus-visible { background: var(--st-white); color: var(--st-ink); }
.btn-ghost .arrow { transition: transform .25s var(--ease); }
.btn-ghost:hover .arrow { transform: translateX(4px); }

.btn-ghost--lg { padding: var(--spacing-14) var(--spacing-24); font-size: var(--spacing-14); }

.dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.arrow { width: 20px; height: 12px; flex: none; }

.link-underline { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-accent { color: var(--st-blue-400); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ navigation */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--spacing-31);
  padding: 0 var(--gutter);
  color: var(--st-white);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck {
  background: rgba(10, 10, 44, .82);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, .12);
}

.nav__brand { display: inline-flex; align-items: center; gap: var(--spacing-12); margin-right: auto; }
.mark { width: 26px; height: 29px; }
.nav__wordmark {
  font-family: var(--font-title); font-weight: var(--weight-title);
  font-size: var(--spacing-14); line-height: 1; text-transform: uppercase;
}

.nav__links { display: flex; align-items: center; gap: var(--spacing-24); }
.navlink {
  padding-bottom: 4px;
  font-size: var(--spacing-12);
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  border-bottom: 1px dashed transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.navlink:hover { color: var(--st-white); }
.navlink.is-active { color: var(--st-white); border-bottom-color: var(--st-blue-400); }

/* Hamburger — 44px so it stays a comfortable touch target. */
.burger {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--st-white);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease);
}
.burger:hover,
.burger:focus-visible { background: var(--st-white); color: var(--st-ink); }

/* Same button, two bars crossed in one cell. */
.burger--close { gap: 0; }
.burger--close span { grid-area: 1 / 1; }
.burger--close span:nth-child(1) { transform: rotate(45deg); }
.burger--close span:nth-child(2) { transform: rotate(-45deg); }

/* ---------------------------------------------------------- overlay menu */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-24) var(--gutter) var(--spacing-41);
  background: var(--st-ink);
  color: var(--st-white);
  animation: overlay-in .35s var(--ease) both;
}
.overlay[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--nav-h) - var(--spacing-24));
}
.overlay__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-14); }
.overlay__nav > a {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-24);
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: clamp(28px, 5.2vw, 64px);
  line-height: var(--leading-heading);
  text-transform: uppercase;
  transition: color .2s var(--ease);
}
.overlay__nav > a:hover { color: var(--st-blue-400); }
.overlay__idx { font-size: var(--spacing-12); color: var(--fg-38); flex: none; }

/* ================================================================ sottomenu
   Un livello, in due forme: tendina nella barra fissa, blocco indentato
   nell'overlay a tutta pagina.                                              */

/* ---------------------------------------------------------- barra: tendina */

.navlink-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Il pulsante che apre la tendina: piccolo, accanto al link, con una
   freccetta disegnata col bordo. Resta un <button> vero, quindi raggiungibile
   da tastiera e annunciato con il suo stato. */
.navlink__toggle {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.navlink__toggle span {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.navlink__toggle:hover,
.navlink__toggle:focus-visible { color: var(--st-blue-400); }
.navlink__toggle[aria-expanded='true'] span { transform: translateY(1px) rotate(-135deg); }

.subnav {
  position: absolute;
  top: calc(100% + var(--spacing-12));
  left: 0;
  z-index: 70;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-cards);
  background: rgba(10, 10, 44, .94);
  backdrop-filter: blur(12px);

  /* Chiusa: invisibile e non raggiungibile. Non si usa display:none perché
     la transizione non partirebbe. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

/* Si apre al passaggio del mouse, con il fuoco da tastiera dentro il gruppo,
   o quando il pulsante la dichiara aperta. */
.navlink-group:hover > .subnav,
.navlink-group:focus-within > .subnav,
.navlink-group.is-open > .subnav {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Un ponte invisibile fra il link e il pannello: senza, spostando il mouse
   verso la tendina si attraversa un vuoto e la tendina si chiude. */
.navlink-group::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--spacing-12);
  display: none;
}
.navlink-group:hover::after { display: block; }

.subnav__link {
  padding: var(--spacing-10) var(--spacing-12);
  border-radius: 8px;
  color: rgba(255, 255, 255, .78);
  font-size: var(--spacing-12);
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.subnav__link:hover,
.subnav__link:focus-visible {
  color: var(--st-white);
  background: rgba(255, 255, 255, .08);
}
.subnav__link.is-active { color: var(--st-blue-400); }

/* ------------------------------------------------- overlay: blocco annidato */

.overlay__sub {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  margin: var(--spacing-10) 0 0 calc(var(--spacing-24) + 2.4em);
}

.overlay__sublink {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fg-72);
  transition: color .2s var(--ease);
}
.overlay__sublink:hover,
.overlay__sublink:focus-visible { color: var(--st-white); }
.overlay__sublink.is-active { color: var(--st-blue-400); }

@media (max-width: 860px) {
  .overlay__sub { margin-left: var(--spacing-31); }
}


/* ------------------------------------------------------- edge label (90°) */

.edge-label {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  padding-right: var(--spacing-24);
  font-size: var(--spacing-10);
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  white-space: nowrap;
  pointer-events: none;
  mix-blend-mode: difference;
}

/* ------------------------------------------------ the mark's stage (fixed)
   It sits above section backgrounds and below section content, so every
   section paints its own colour behind it and its text stays on top.       */

#fox-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--fox-color, #8fb6ff);
  opacity: var(--fox-o, .42);
  transform: translateX(calc(var(--fox-x, 0px) * var(--fox-xk, 1)));
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), color 1.1s var(--ease);
}
/* No will-change here on purpose: the SVG's own geometry is rewritten every
   frame, so pinning a full-viewport fixed layer in GPU memory buys nothing
   and costs a re-raster of that layer on phones. */

/* Everything the reader looks at sits above the stage. */
.hero__inner, .info-card, .reveal > *, .section-head,
.zoom, .contact__lead, .form-card, .footer__row { position: relative; z-index: 2; }

/* --------------------------------------------------- background structure */

.grid-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 104px 104px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}
.grid-field--soft { opacity: .6; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + var(--spacing-31)) var(--gutter) var(--spacing-45);
  overflow: hidden;
  color: var(--st-white);
  background:
    radial-gradient(26% 24% at 58% 20%, rgba(219, 110, 9, .22) 0%, transparent 70%),
    radial-gradient(52% 46% at 66% 44%, var(--st-blue-600) 0%, transparent 66%),
    radial-gradient(40% 36% at 14% 18%, var(--st-blue-700) 0%, transparent 70%),
    linear-gradient(180deg, #23257e 0%, var(--st-blue-800) 100%);
}

.hero__inner { display: flex; flex-direction: column; gap: var(--spacing-41); margin-top: auto; }

.tag-pill {
  align-self: flex-start;
  padding: 7.5px var(--spacing-18);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-buttons-outlined);
  font-size: var(--spacing-10);
  line-height: 1.2;
  text-transform: uppercase;
}

.hero .display { max-width: 15ch; }

.hero__foot {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-45);
  flex-wrap: wrap;
  padding-top: var(--spacing-18);
}
.hero__body { max-width: 58ch; flex: 1 1 34ch; }

/* Keep the paragraph clear of the info card, which is absolutely positioned
   over this row at these widths. */
@media (min-width: 861px) {
  .hero__foot { padding-right: calc(232px + var(--spacing-45)); }
}

/* Hero Overlay Info Card */
.info-card {
  position: absolute;
  right: var(--gutter);
  bottom: var(--spacing-45);
  width: 232px;
  padding: var(--card-padding);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-cards);
  background: rgba(10, 10, 44, .38);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.info-card__kicker { color: var(--st-blue-400); }
.info-card__title { font-family: var(--font-title); font-weight: var(--weight-title); font-size: var(--text-subheading); line-height: var(--leading-subheading); text-transform: uppercase; }

/* ------------------------------------------------------- void-mode reveal */

.reveal {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  align-items: center;
  gap: var(--element-gap);
  padding: var(--spacing-68) var(--gutter);
  color: var(--st-white);
  background:
    radial-gradient(46% 40% at 50% 48%, #141754 0%, transparent 72%),
    var(--st-ink);
}
.reveal__label { font-size: var(--spacing-12); line-height: 1.2; text-transform: uppercase; color: var(--fg-72); }
.reveal__label--r { text-align: right; }
.reveal__scroll { position: absolute; left: 0; right: 0; bottom: var(--spacing-31); text-align: center; }

/* --------------------------------------------------------------- sections */

.zone { position: relative; overflow: clip; }
.zone--light { background: var(--st-light); color: var(--st-ink); }
.zone--ink {
  color: var(--st-white);
  background:
    radial-gradient(40% 34% at 72% 26%, #16195c 0%, transparent 70%),
    var(--st-ink);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  padding: clamp(var(--spacing-68), 9vw, 148px) var(--gutter) 0;
}
.section-head .heading { max-width: 20ch; }
.section-head__body { max-width: 46ch; color: var(--fg-72); }

/* ====================================================== ZOOM SEQUENCE ====
   A tall runway with a pinned stage. Each item owns a slice of the runway:
   it zooms (or flips) into its own grid cell and then stays put, so the
   grid builds up as you scroll and is complete at the end. Scroll position
   alone decides every transform, so scrolling back up unbuilds it exactly.
   ===================================================================== */

/* Flow layout is the default: items stacked in normal document order. The
   pin is added back further down, but only where the finished grid actually
   fits one viewport — a 2 x 3 grid needs far more height than a 3 x 2 one,
   and neither fits a landscape phone. main.js animates the items either
   way, driving them from the runway when pinned and from their own position
   in the viewport when not. */

.zoom { --items: 1; --cols: 1; }

.zoom__runway { height: auto; }

.zoom__stage {
  position: static;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-18);
  padding: var(--spacing-41) var(--gutter) 0;
}
.zoom__rail, .zoom__count { display: none; }

.zoom__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-18);
}
.zoom__count {
  font-size: var(--spacing-12);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg-54);
  font-variant-numeric: tabular-nums;
}

/* The finished layout. Items sit in their final cells from the start —
   only opacity and transform hold them back until their turn. */
.zoom__deck {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--spacing-18);
}
.zoom__deck > * { will-change: transform, opacity; }

/* Shared by every pinned variant below. */
.zoom.is-pinned .zoom__runway { height: calc(var(--items) * 48vh + 100vh); }
.zoom.is-pinned .zoom__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--nav-h) + var(--spacing-18)) var(--gutter) var(--spacing-41);
}
.zoom.is-pinned .zoom__deck { grid-auto-rows: minmax(0, 1fr); }
.zoom.is-pinned .zoom__deck--flip { grid-auto-rows: auto; }
.zoom.is-pinned .zoom__rail { display: block; }
.zoom.is-pinned .zoom__count { display: block; }
.zoom.is-pinned .zcard { height: 100%; min-height: 0; }

/* The flip needs a shared vanishing point on the container. Panels size to
   their content and sit centred rather than stretching down the stage. */
.zoom__deck--flip { perspective: 1600px; grid-auto-rows: auto; align-content: center; }
.zoom__deck--flip > * { transform-origin: center center; backface-visibility: hidden; }

.zoom__rail { height: 1px; background: var(--fg-14); }
.zoom__fill { display: block; height: 100%; width: 0; background: var(--st-blue-400); }

/* ------------------------------------------------------------ service card */

.zcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: clamp(var(--spacing-18), 1.8vw, var(--spacing-31));
  border-radius: var(--radius-cards);
  background: var(--st-navy);
  color: var(--st-white);
}
/* The corner bloom from the brand cards — blue on odd, warm on even. */
.zcard::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -38%;
  right: -12%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(110, 173, 255, .30) 0%, transparent 70%);
}
.zcard--warm::after { background: radial-gradient(circle, rgba(255, 128, 0, .24) 0%, transparent 70%); }

.zcard__ghost {
  position: absolute;
  z-index: -1;
  right: var(--spacing-12);
  bottom: -.18em;
  font-size: clamp(88px, 8vw, 132px);
  line-height: .8;
  color: rgba(255, 255, 255, .06);
  pointer-events: none;
  user-select: none;
}

.zcard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: auto;
}
.zcard__index { font-size: var(--spacing-12); line-height: 1.2; text-transform: uppercase; color: var(--st-blue-400); }
.zcard--warm .zcard__index { color: var(--st-orange); }
.zcard__flag { font-size: var(--spacing-10); line-height: 1.2; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

.zcard__rule {
  width: 41px;
  height: 2px;
  margin-bottom: var(--spacing-18);
  background: var(--st-blue-400);
}
.zcard--warm .zcard__rule { background: var(--st-orange); }

.zcard__title {
  font-family: var(--font-title);
  font-size: clamp(18px, 1.5vw, var(--text-heading-sm));
  line-height: var(--leading-heading-sm);
  font-weight: var(--weight-title);
  text-transform: uppercase;
  margin-bottom: var(--spacing-12);
}
/* Museum-label voice: uppercase 500 everywhere except the 29px body. */
.zcard__text {
  font-size: var(--spacing-12);
  line-height: 1.6;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

/* ---------------------------------------------------------- model panels */

.model {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-18);
  padding: clamp(var(--card-padding), 2.6vw, var(--spacing-41));
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
}
.model--with {
  background:
    radial-gradient(70% 60% at 78% 8%, rgba(52, 64, 166, .55) 0%, transparent 68%),
    rgba(15, 20, 74, .74);
}
.model--for {
  background:
    radial-gradient(70% 60% at 78% 8%, rgba(219, 110, 9, .40) 0%, transparent 68%),
    rgba(38, 26, 58, .74);
}

.model__badge {
  align-self: center;
  padding: var(--spacing-10) var(--spacing-24);
  border: 1px solid var(--st-blue-400);
  border-radius: var(--radius-buttons-pill);
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: var(--spacing-14);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--st-white);
}
.model--for .model__badge { border-color: var(--st-orange); }

.model__lead {
  text-align: center;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--fg-72);
  max-width: 74ch;
  margin: 0 auto var(--spacing-8);
}

.model__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-14);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-10);
  padding: clamp(var(--spacing-18), 1.8vw, var(--spacing-31)) var(--spacing-18);
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: rgba(255, 255, 255, .05);
  text-align: center;
}
.tile__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(110, 173, 255, .16);
  color: var(--st-blue-400);
}
.model--for .tile__ico { background: rgba(255, 128, 0, .16); color: var(--st-orange); }
.tile__ico svg { width: 22px; height: 22px; }

.tile__title {
  font-family: var(--font-title);
  font-size: var(--spacing-14);
  line-height: 1.2;
  font-weight: var(--weight-title);
  text-transform: uppercase;
}
.tile__text {
  font-size: var(--spacing-10);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg-72);
}

/* ----------------------------------------------------------------- contact */

.contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: start;
  gap: clamp(var(--spacing-45), 5vw, 96px);
  padding: clamp(var(--spacing-68), 9vw, 148px) var(--gutter);
  overflow: hidden;
  color: var(--st-white);
  background:
    radial-gradient(24% 22% at 46% 18%, rgba(219, 110, 9, .16) 0%, transparent 70%),
    radial-gradient(48% 44% at 26% 42%, var(--st-blue-600) 0%, transparent 68%),
    linear-gradient(180deg, var(--st-blue-800) 0%, #1c1c6b 100%);
}

.contact__lead { display: flex; flex-direction: column; gap: var(--spacing-24); align-items: flex-start; }
.contact__lead .heading { max-width: 14ch; }
.contact__body { max-width: 44ch; color: var(--fg-72); }
.contact__lead .btn-ghost { margin-top: var(--spacing-18); }

/* ------------------------------------------------------------- form card */

.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-18);
  padding: clamp(var(--card-padding), 2.4vw, var(--spacing-41));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-cards);
  background: rgba(66, 90, 185, .28);
  backdrop-filter: blur(8px);
}
.form-card__title { font-family: var(--font-title); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: var(--weight-title); text-transform: uppercase; }
.form-card__sub { font-size: var(--spacing-12); line-height: 1.4; text-transform: uppercase; color: var(--fg-72); }

.form { display: flex; flex-direction: column; gap: var(--spacing-24); margin-top: var(--spacing-8); }

.field { display: flex; flex-direction: column; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-18); }

/* Labels are present for assistive tech; the placeholder carries the visual. */
.field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Input Field (Underline Only) — no boxes, just a line. */
.field__input {
  width: 100%;
  padding: 1px 2px var(--spacing-10);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-inputs);
  background: transparent;
  color: var(--st-white);
  font-family: inherit;
  font-size: var(--spacing-14);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  transition: border-color .25s var(--ease);
}
/* The visible label lives in the placeholder, so it has to clear AA. */
.field__input::placeholder { color: rgba(255, 255, 255, .66); text-transform: uppercase; }
.field__input:focus { outline: none; border-bottom-color: var(--st-blue-400); }
.field__input--area { resize: vertical; min-height: 76px; line-height: 1.5; }

.field__legend { font-size: var(--spacing-10); line-height: 1.2; text-transform: uppercase; color: var(--fg-72); margin-bottom: var(--spacing-12); }

.chips { border: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-9); }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 7.5px var(--spacing-14);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-buttons-outlined);
  font-size: var(--spacing-10);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg-72);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chip:hover span { border-color: var(--st-white); color: var(--st-white); }
.chip input:checked + span { background: var(--st-white); border-color: var(--st-white); color: var(--st-ink); }
.chip input:focus-visible + span { outline: 1px solid var(--st-white); outline-offset: 3px; }

.consent { display: flex; align-items: flex-start; gap: var(--spacing-12); cursor: pointer; }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent__box {
  width: 14px; height: 14px; margin-top: 1px; flex: none;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-inputs);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.consent input:checked + .consent__box { background: var(--st-blue-400); border-color: var(--st-blue-400); }
.consent input:focus-visible + .consent__box { outline: 1px solid var(--st-white); outline-offset: 3px; }
.consent__text { font-size: var(--spacing-10); line-height: 1.4; text-transform: uppercase; color: var(--fg-72); }

.form-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--spacing-18);
  font-size: var(--spacing-10); line-height: 1.2; text-transform: uppercase; color: var(--fg-72);
}
.form-card__meta li { display: inline-flex; align-items: center; gap: var(--spacing-6); }
.meta__ico { color: var(--fg-38); }

/* ------------------------------------------------------------------ footer */

.footer { padding: 0 var(--gutter) var(--spacing-31); background: var(--st-ink); color: var(--st-white); }
.footer__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--spacing-24); flex-wrap: wrap; padding-top: var(--spacing-24);
}
.footer__brand { font-size: var(--spacing-12); line-height: 1.2; text-transform: uppercase; color: var(--fg-72); }

/* ---------------------------------------------------------- scroll reveal */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- responsive
   The zoom grid reflows: 3x2 on desktop, 2x3 on tablet, a plain stack on
   phones. Below each sequence's threshold the pin and the transforms are
   dropped entirely and the items just sit one under the other.            */

/* Column counts. Whether the grid is pinned is decided by main.js from the
   media queries in each section's data-zoom-pin, so the two can't disagree. */

@media (min-width: 700px)  { #servizi .zoom { --cols: 2; } }
@media (min-width: 1024px) { #servizi .zoom { --cols: 3; } #modelli .zoom { --cols: 2; } }

/* Two columns means three rows of cards, which is the tightest the labels
   get — they run a notch tighter there. */
@media (min-width: 700px) and (max-width: 1023px) {
  #servizi .zcard { padding: var(--spacing-18); }
  #servizi .zcard__rule { margin-bottom: var(--spacing-12); }
  #servizi .zcard__text { line-height: 1.45; }
  
}

@media (max-width: 1100px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__lead .heading { max-width: 18ch; }
}

@media (max-width: 860px) {
  /* No room to push the object aside — it stays centred and steps back. */
  :root { --nav-h: 72px; --fox-xk: 0; }
  .edge-label { display: none; }
  .nav__links { display: none; }
  .info-card { position: static; width: 100%; max-width: 260px; margin-top: var(--spacing-31); }
  .hero__foot { gap: var(--spacing-24); }
  .hero .display { max-width: none; }
  .reveal { grid-template-columns: 1fr; align-content: space-between; }
  .reveal__label--r { text-align: left; }
  .zoom__runway { height: auto; }
  .model__lead { text-align: left; }
  .model__badge { align-self: flex-start; }
  .zcardLast{
    margin-bottom: 100px;
  }
  .model--ultimo{
    margin-bottom: 100px;
  }
  
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer__row { flex-direction: column; align-items: flex-start; gap: var(--spacing-12); }
  .model__grid { grid-template-columns: minmax(0, 1fr); }
  /* Icon on the left, title stacked over its text on the right. A grid,
     not a row of flex items: the tile's three children are the icon, the
     title and the text, with no wrapper to flex, so a row would sit all
     three side by side and crush the two text columns. */
  .tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'ico title' 'ico text';
    align-content: center;
    justify-items: start;
    text-align: left;
    column-gap: var(--spacing-14);
    row-gap: var(--spacing-6);
  }
  .tile__ico { grid-area: ico; align-self: center; width: 36px; height: 36px; }
  .tile__ico svg { width: 18px; height: 18px; }
  .tile__title { grid-area: title; }
  .tile__text { grid-area: text; }
}

/* --------------------------------------------------------- reduced motion
   The preference is about motion, not about content: the sequences still
   reveal themselves as you scroll, they just fade up in place instead of
   flying in, and nothing pins or moves on its own. Items are NOT forced
   visible here — main.js fades them, and with no JS at all they simply
   stay visible, which is the right fallback either way.                    */

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

  .zoom__runway { height: auto; }
  .zoom__stage { position: static; height: auto; padding-top: var(--spacing-41); }
  .zoom__deck { grid-auto-rows: auto; margin-bottom: var(--spacing-24); }
  .zcard { height: auto; min-height: 240px; }
  .zoom__rail, .zoom__count { display: none; }
}

/* =========================================================================
   PARTE WORDPRESS
   Tutto ciò che la home statica non aveva: pagine interne, elenchi, prosa
   dell'editor, commenti, form di ricerca, esiti del form contatti e barra di
   amministrazione. Il vocabolario è quello di sopra — stesse card, stessi
   filetti tratteggiati, stesso maiuscoletto — così le pagine interne restano
   coerenti con la home.
   ========================================================================= */

/* ------------------------------------------------------ barra di WordPress
   La barra admin è fissa in alto e occuperebbe lo stesso spazio della nav:
   la nav e l'overlay scendono sotto di essa. */

body.admin-bar .nav { top: 32px; }
body.admin-bar .overlay { top: 32px; }
body.admin-bar { --wp-bar: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
  body.admin-bar .overlay { top: 46px; }
  body.admin-bar { --wp-bar: 46px; }
}

/* ------------------------------------------------------------------- logo */

.nav__logo {
  width: auto;
  height: auto;
  max-width: 170px;
  max-height: 30px;
}

/* --------------------------------------------------- testata pagine interne
   L'hero della home in versione corta: stesso fondo, stessa griglia, la
   volpe sempre dietro. */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 56vh;
  padding: calc(var(--nav-h) + clamp(var(--spacing-45), 8vw, 128px)) var(--gutter) clamp(var(--spacing-41), 5vw, var(--spacing-68));
  overflow: hidden;
  color: var(--st-white);
  background:
    radial-gradient(26% 24% at 58% 20%, rgba(219, 110, 9, .22) 0%, transparent 70%),
    radial-gradient(52% 46% at 66% 44%, var(--st-blue-600) 0%, transparent 66%),
    radial-gradient(40% 36% at 14% 18%, var(--st-blue-700) 0%, transparent 70%),
    linear-gradient(180deg, #23257e 0%, var(--st-blue-800) 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  width: 100%;
}

.page-hero__title { max-width: 20ch; }
.page-hero__body { max-width: 52ch; color: var(--fg-72); }
.page-hero__meta { color: var(--st-blue-200); }

.page-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  flex-wrap: wrap;
  padding-top: var(--spacing-12);
}

/* La 404 è la banda di respiro: il marchio al punto più vicino, da solo. */
.page-hero--404 {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  background:
    radial-gradient(46% 40% at 50% 48%, #141754 0%, transparent 72%),
    var(--st-ink);
}
.page-hero--404 .page-hero__title { max-width: 16ch; }

/* ------------------------------------------------------ zone di contenuto */

.zone--prosa { padding: clamp(var(--spacing-68), 8vw, 128px) var(--gutter); }
.zone--elenco { padding: clamp(var(--spacing-45), 6vw, 96px) var(--gutter) clamp(var(--spacing-68), 8vw, 128px); }
.zone--prosa > *, .zone--elenco > * { position: relative; z-index: 2; }

/* --------------------------------------------------------- prosa editoriale
   Il testo scritto nell'editor: è l'unico punto del sistema in cui la copy
   è lunga e in minuscolo, quindi qui la misura conta più della griglia. */

.prosa {
  max-width: 74ch;
  margin: 0 auto;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  font-weight: var(--font-weight-regular);
  color: var(--fg);
}

.prosa > * + * { margin-top: 1.1em; }

.prosa h1, .prosa h2, .prosa h3, .prosa h4, .prosa h5, .prosa h6 {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: 1.8em;
}
.prosa h1 { font-size: clamp(28px, 3.4vw, 46px); }
.prosa h2 { font-size: clamp(24px, 2.6vw, 36px); }
.prosa h3 { font-size: clamp(19px, 1.9vw, 26px); }
.prosa h4, .prosa h5, .prosa h6 { font-size: clamp(16px, 1.4vw, 20px); }
.prosa > :first-child { margin-top: 0; }

.prosa a { color: var(--st-blue-400); text-decoration: underline; text-underline-offset: 3px; }
.zone--light .prosa a { color: #2b39a8; }
.prosa a:hover { text-decoration-thickness: 2px; }

.prosa strong { font-weight: 600; }

.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li + li { margin-top: .4em; }
.prosa li::marker { color: var(--st-blue-400); }

.prosa blockquote {
  margin-left: 0;
  padding: var(--spacing-18) var(--spacing-24);
  border-left: 2px solid var(--st-blue-400);
  background: var(--fg-07);
  border-radius: 0 var(--radius-cards) var(--radius-cards) 0;
  font-size: 1.05em;
}
.prosa blockquote cite { display: block; margin-top: var(--spacing-10); font-size: var(--spacing-12); text-transform: uppercase; color: var(--fg-54); font-style: normal; }

.prosa code, .prosa kbd {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--fg-07);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}
.prosa pre {
  overflow-x: auto;
  padding: var(--spacing-18);
  border: var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--st-ink);
  color: var(--st-white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
}
.prosa pre code { background: none; padding: 0; }

.prosa img, .prosa iframe, .prosa video { border-radius: var(--radius-cards); }
.prosa figure { margin: 0; }
.prosa figcaption, .prosa .wp-caption-text {
  margin-top: var(--spacing-10);
  font-size: var(--spacing-12);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fg-54);
}
.prosa__cover img { width: 100%; }

.prosa hr {
  height: 0;
  border: 0;
  border-top: var(--rule);
  margin: var(--spacing-41) 0;
}

/* Le tabelle scorrono dentro sé stesse: la pagina non deve mai scorrere in
   orizzontale per colpa di una tabella larga. */
.prosa table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--spacing-14);
}
.prosa th, .prosa td {
  padding: var(--spacing-10) var(--spacing-12);
  border-bottom: var(--hairline);
  text-align: left;
}
.prosa th { text-transform: uppercase; font-size: var(--spacing-12); color: var(--fg-72); }

.prosa .alignleft { float: left; margin: 0 var(--spacing-24) var(--spacing-18) 0; max-width: 50%; }
.prosa .alignright { float: right; margin: 0 0 var(--spacing-18) var(--spacing-24); max-width: 50%; }
.prosa .aligncenter { margin-inline: auto; }

/* L'allineamento di alignwide / alignfull è passato a sections.css.
   Qui c'era un trucco full-bleed (margin-left:50% + translateX(-50%)) che
   serviva quando .prosa era una colonna stretta: ora che il contenuto è a
   tutta larghezza quel transform sposterebbe ogni sezione di mezza pagina.
   Limitava anche alignfull a 100vw meno i margini, che è la ragione per cui
   una riga inserita nell'editor non copriva mai davvero tutta la larghezza. */

.prosa .wp-block-gallery { --wp--style--unstable-gallery-gap: var(--spacing-14); }
.prosa .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-14) var(--spacing-24);
  border-radius: var(--radius-buttons-pill);
  background: var(--st-blue-400);
  color: var(--st-ink);
  font-size: var(--spacing-14);
  text-transform: uppercase;
  text-decoration: none;
}

.entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-9);
  margin-top: var(--spacing-41);
}
.entry__tags a {
  padding: 6px var(--spacing-14);
  border: var(--hairline);
  border-radius: var(--radius-buttons-outlined);
  font-size: var(--spacing-10);
  text-transform: uppercase;
  color: var(--fg-72);
  text-decoration: none;
}
.entry__tags a:hover { border-color: var(--st-blue-400); color: var(--fg); }

/* ------------------------------------------------------------- elenco post
   Le card degli articoli sono le card dei servizi: stesso fondo navy, stesso
   filetto, stesso indice in alto. */

.elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-18);
}

.zcard--post .zcard__top { margin-bottom: var(--spacing-18); }
.zcard--post .zcard__title { margin-bottom: var(--spacing-14); }
.zcard--post .zcard__title a { text-decoration: none; }
.zcard--post .zcard__text { margin-bottom: var(--spacing-18); }
.zcard--post .zcard__more { margin-top: auto; font-size: var(--spacing-12); text-transform: uppercase; }

.zcard__media {
  display: block;
  margin: calc(-1 * clamp(var(--spacing-18), 1.8vw, var(--spacing-31)));
  margin-bottom: var(--spacing-18);
  overflow: hidden;
  border-radius: var(--radius-cards) var(--radius-cards) 0 0;
}
.zcard__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.zcard--post:hover .zcard__media img { transform: scale(1.04); }

/* Nell'elenco le card non sono guidate dallo scroll come nella sequenza
   zoom: entrano con il reveal standard e restano ferme. */
.elenco [data-reveal] { will-change: auto; }

/* ------------------------------------------------------------- paginazione */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-9);
  margin-top: clamp(var(--spacing-41), 5vw, var(--spacing-68));
}
.pagination--inline { margin-top: var(--spacing-24); }

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 9px var(--spacing-14);
  border: var(--hairline);
  border-radius: var(--radius-buttons-outlined);
  font-size: var(--spacing-12);
  text-transform: uppercase;
  color: var(--fg-72);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.pagination .page-numbers:hover { color: var(--fg); border-color: var(--fg); }
.pagination .page-numbers.current {
  background: var(--st-blue-400);
  border-color: var(--st-blue-400);
  color: var(--st-ink);
}
.pagination .dots { border-color: transparent; }

/* -------------------------------------------------------- articolo → altri */

.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--spacing-18);
  max-width: 74ch;
  margin: clamp(var(--spacing-41), 5vw, var(--spacing-68)) auto 0;
}
.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-24);
  border: var(--hairline);
  border-radius: var(--radius-cards);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.post-nav__item:hover { border-color: var(--st-blue-400); background: var(--fg-07); }
.post-nav__item--next { text-align: right; }
.post-nav__title {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: var(--spacing-18);
  line-height: 1.15;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ vuoto */

.vuoto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  max-width: 60ch;
}

/* ------------------------------------------------------------- ricerca */

.cerca {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-14);
  flex-wrap: wrap;
  width: 100%;
  max-width: 480px;
}
.cerca .field__input { flex: 1 1 200px; width: auto; }
.zone--light .cerca .field__input { color: var(--fg); border-bottom-color: var(--fg-38); }
.zone--light .cerca .field__input::placeholder { color: var(--fg-54); }

/* ------------------------------------------------------- esiti del form */

.form__notice {
  padding: var(--spacing-12) var(--spacing-18);
  border: 1px solid currentColor;
  border-radius: var(--radius-cards);
  font-size: var(--spacing-12);
  line-height: 1.4;
  text-transform: uppercase;
}
.form__notice--ok { color: var(--st-blue-200); }
.form__notice--ko { color: #ffb27a; }

.form__status {
  min-height: 1em;
  font-size: var(--spacing-10);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fg-72);
}
.form__status.is-ok { color: var(--st-blue-200); }
.form__status.is-ko { color: #ffb27a; }

/* Esca per i bot: fuori dallo schermo, fuori dal flusso, fuori dal tab. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-filled[disabled] { opacity: .5; cursor: progress; }

/* --------------------------------------------------------------- commenti */

.commenti { display: flex; flex-direction: column; gap: var(--spacing-31); }
.commenti__lista { display: flex; flex-direction: column; gap: var(--spacing-18); }
.commenti__lista ol { list-style: none; padding-left: var(--spacing-24); margin-top: var(--spacing-18); display: flex; flex-direction: column; gap: var(--spacing-18); }

.commenti .comment-body {
  padding: var(--spacing-24);
  border: var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--fg-07);
}
.commenti .comment-author { display: flex; align-items: center; gap: var(--spacing-12); font-size: var(--spacing-12); text-transform: uppercase; }
.commenti .comment-author img { border-radius: var(--radius-full); }
.commenti .comment-meta { font-size: var(--spacing-10); text-transform: uppercase; color: var(--fg-54); margin: var(--spacing-8) 0 var(--spacing-12); }
.commenti .comment-meta a { color: inherit; }
.commenti .reply { margin-top: var(--spacing-12); font-size: var(--spacing-10); text-transform: uppercase; }
.commenti .reply a { color: var(--st-blue-400); }

.commenti .comment-respond { display: flex; flex-direction: column; gap: var(--spacing-18); }
.commenti .comment-form { display: flex; flex-direction: column; gap: var(--spacing-18); }
.commenti .comment-form p { display: flex; flex-direction: column; gap: var(--spacing-8); }
.commenti .comment-form label { font-size: var(--spacing-10); text-transform: uppercase; color: var(--fg-72); }
.commenti .comment-form input[type="text"],
.commenti .comment-form input[type="email"],
.commenti .comment-form input[type="url"],
.commenti .comment-form textarea {
  width: 100%;
  padding: 1px 2px var(--spacing-10);
  border: 0;
  border-bottom: 1px solid var(--fg-38);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--spacing-14);
}
.commenti .comment-form input:focus,
.commenti .comment-form textarea:focus { outline: none; border-bottom-color: var(--st-blue-400); }
.commenti .comment-form .form-submit { align-items: flex-start; }
.commenti .comment-notes, .commenti .logged-in-as { font-size: var(--spacing-10); text-transform: uppercase; color: var(--fg-54); }

/* ----------------------------------------------------------- footer esteso */

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-41);
  padding: clamp(var(--spacing-41), 5vw, var(--spacing-68)) 0 var(--spacing-41);
}
.footer__widgets { display: flex; flex-wrap: wrap; gap: var(--spacing-41); font-size: var(--spacing-12); color: var(--fg-72); }
.widget__title {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: var(--spacing-14);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--st-white);
  margin-bottom: var(--spacing-12);
}
.footer__widgets ul { display: flex; flex-direction: column; gap: var(--spacing-8); }
.footer__widgets a:hover { color: var(--st-blue-400); }

.footer__list { display: flex; flex-wrap: wrap; gap: var(--spacing-18); }
.footer__list a {
  font-size: var(--spacing-12);
  text-transform: uppercase;
  color: var(--fg-72);
  border-bottom: 1px dashed transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__list a:hover { color: var(--st-white); border-bottom-color: var(--st-blue-400); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .page-hero { min-height: 46vh; }
  .zcard__media img { height: 170px; }
  .post-nav__item--next { text-align: left; }
}

@media (max-width: 640px) {
  .prosa .alignleft, .prosa .alignright { float: none; max-width: 100%; margin: 0; }
  .cerca { flex-direction: column; align-items: stretch; }
  .cerca .btn-ghost { justify-content: center; }
}

/* ==================================================== CARD CLICCABILE ====
   Il link vive sul titolo e il suo ::after copre la scheda: un solo bersaglio
   per la tastiera, con un nome sensato, e tutta la card cliccabile col mouse.
   L'hover non usa transform: durante la sequenza zoom main.js scrive il
   transform inline su queste card, e lo stile inline vincerebbe comunque.
   ===================================================================== */

.zcard--link { transition: background .3s var(--ease); }
.zcard--link:hover { background: #050534; }

.zcard__anchor { color: inherit; text-decoration: none; }
.zcard__anchor::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--radius-cards);
}

/* Dove :has() c'è, il fuoco si vede sulla scheda intera invece che attorno
   alle sole parole del titolo. Dove non c'è, l'anello di sistema resta dov'è. */
.zcard--link:has(.zcard__anchor:focus-visible) {
  outline: 1px solid var(--st-blue-400);
  outline-offset: 3px;
}
.zcard--link:has(.zcard__anchor:focus-visible) .zcard__anchor { outline: none; }
.zcard--warm:has(.zcard__anchor:focus-visible) { outline-color: var(--st-orange); }

.zcard--link .zcard__rule { transition: width .35s var(--ease); }
.zcard--link:hover .zcard__rule { width: 72px; }

.zcard__go {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-18);
  color: var(--st-blue-400);
}
.zcard--warm .zcard__go { color: var(--st-orange); }
.zcard__go .arrow { transition: transform .3s var(--ease); }
.zcard--link:hover .zcard__go .arrow { transform: translateX(5px); }

/* ================================================ CTA DEI MODELLI ======= */

.model__cta { align-self: center; margin-top: var(--spacing-8); }
/* Il pallino resta del colore del pannello anche sopra il riempimento bianco
   dell'hover: è l'unico segno che distingue i due modelli a colpo d'occhio. */
.model__cta .dot { background: var(--st-blue-400); }
.model--for .model__cta .dot { background: var(--st-orange); }

/* =========================================== FORM DA SHORTCODE =========
   Quando lo spazio del form ospita un plugin, il markup non è nostro: qui si
   riporta quello che i plugin generano dentro il vocabolario della scheda —
   campi a sola sottolineatura, pulsante a pillola, niente cornici.
   ===================================================================== */

.form-card__plugin {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-18);
  margin-top: var(--spacing-8);
}
.form-card__plugin p { margin: 0; }
.form-card__plugin form { display: flex; flex-direction: column; gap: var(--spacing-18); }

.form-card__plugin label {
  display: block;
  font-size: var(--spacing-10);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fg-72);
}

.form-card__plugin input[type="text"],
.form-card__plugin input[type="email"],
.form-card__plugin input[type="tel"],
.form-card__plugin input[type="url"],
.form-card__plugin input[type="number"],
.form-card__plugin input[type="date"],
.form-card__plugin select,
.form-card__plugin textarea {
  width: 100%;
  margin-top: var(--spacing-8);
  padding: 1px 2px var(--spacing-10);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--radius-inputs);
  background: transparent;
  color: var(--st-white);
  font-family: inherit;
  font-size: var(--spacing-14);
  font-weight: var(--font-weight-medium);
  text-transform: inherit;
  transition: border-color .25s var(--ease);
}
.form-card__plugin textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
.form-card__plugin ::placeholder { color: rgba(255, 255, 255, .66); text-transform: uppercase; }
.form-card__plugin :is(input, select, textarea):focus {
  outline: none;
  border-bottom-color: var(--st-blue-400);
}
/* Le opzioni della tendina le disegna il sistema operativo: senza un fondo
   scuro esplicito resterebbero testo bianco su bianco. */
.form-card__plugin select option { background: var(--st-ink); color: var(--st-white); }

.form-card__plugin input[type="checkbox"],
.form-card__plugin input[type="radio"] { accent-color: var(--st-blue-400); }

.form-card__plugin input[type="submit"],
.form-card__plugin button[type="submit"] {
  align-self: flex-start;
  padding: var(--spacing-14) var(--spacing-24);
  border: 1px solid var(--st-white);
  border-radius: var(--radius-buttons-pill);
  background: var(--st-white);
  color: var(--st-ink);
  font-family: inherit;
  font-size: var(--spacing-14);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.form-card__plugin input[type="submit"]:hover,
.form-card__plugin button[type="submit"]:hover {
  background: transparent;
  color: var(--st-white);
}

/* Riscontri dei plugin più diffusi, ricondotti al filetto del tema. */
.form-card__plugin .wpcf7-response-output,
.form-card__plugin .wpforms-confirmation-container-full,
.form-card__plugin .wpforms-error-container {
  margin: 0;
  padding: var(--spacing-12) var(--spacing-18);
  border: 1px solid currentColor;
  border-radius: var(--radius-cards);
  font-size: var(--spacing-12);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--st-blue-200);
}
.form-card__plugin .wpcf7-not-valid-tip,
.form-card__plugin .wpforms-error {
  font-size: var(--spacing-10);
  text-transform: uppercase;
  color: #ffb27a;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .model__cta { align-self: flex-start; }
}