/* ==========================================================================
   SIMIDEA — Homepage (bozza 01)
   Palette ripresa dal sito attuale: ink #1C1C1C · orange #FF9900 · off-white #F9F9F9
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens */
:root {
  /* brand */
  --ink:        #1c1c1c;
  --ink-deep:   #0a0908;
  --orange:     #ff9900;
  --orange-lit: #ffb545;
  --orange-deep:#c26a00;
  --cream:      #f9f9f9;
  --sand:       #f3ece4;
  --brown:      #6b4423;

  /* surfaces */
  --bg:         var(--cream);
  --fg:         var(--ink);
  /* 55% dava 3,64:1 sul fondo chiaro: sotto il minimo AA per il testo
     normale. A 66% sono 5,2:1 e resta comunque un grigio, non nero. */
  --muted:      color-mix(in srgb, var(--ink) 66%, transparent);
  --hairline:   color-mix(in srgb, var(--ink) 12%, transparent);

  /* type */
  --f-display: "Anton", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-head:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* layout */
  --pad:      clamp(1.25rem, 5vw, 5rem);
  --maxw:     1400px;
  --radius:   clamp(18px, 2.2vw, 32px);
  --radius-s: 14px;

  /* motion */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur:       .8s;
}

/* -------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
  text-wrap: balance;
}

p, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }

::selection { background: var(--orange); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200; padding: .75rem 1.25rem;
  background: var(--ink); color: var(--cream);
  border-radius: 0 0 12px 12px; font-size: .875rem;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* le sezioni scure ribaltano i token di testo secondario */
.hero, .work, .photo, .contact, .footer, .menu, .srv-testa, .stacco, .libri, .on-dark {
  --muted:    color-mix(in srgb, var(--cream) 64%, transparent);
  --hairline: color-mix(in srgb, var(--cream) 16%, transparent);
}

/* -------------------------------------------------- 3. Helpers */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-head);
  font-size: clamp(.68rem, .64rem + .12vw, .78rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: currentColor; border-radius: 2px;
}

.section-title {
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 6rem);
  letter-spacing: -.045em;
}
.section-lead {
  max-width: 46ch;
  font-size: clamp(1.02rem, .97rem + .4vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
}

.grain {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: .15; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* i percorsi dello sprite non dichiarano più fill (serve all'intro, che deve
   poterlo azzerare per tracciare il contorno): glielo diamo qui */
svg use { fill: currentColor; }

/* ==========================================================================
   3a. Intro al caricamento — logo neon tracciato
   Lunghezze dei percorsi misurate sul posto: marchio 1671, wordmark 1932.
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink-deep);
  /* nascosto per difetto: si mostra solo se il JS lo attiva, così un
     errore o il JS disabilitato non lasciano la pagina coperta */
  display: none;
}
html.intro-on .intro { display: grid; }

.intro__stage {
  display: grid; justify-items: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--orange);
}
/* L'intro mostra solo la lampadina: la scritta resta nell'header e nel
   footer, dove il marchio e' completo. */
.intro__mark { overflow: visible; }   /* il bagliore non va tagliato */
.intro__mark { width: clamp(112px, 15vw, 190px); height: auto; }

/* fase 1 — il tubo si traccia */
.intro__mark use {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro__mark use { stroke-dasharray: 1671; stroke-dashoffset: 1671; }

html.intro-draw .intro__mark use {
  animation: traccia 1.05s cubic-bezier(.5, 0, .3, 1) forwards;
}
@keyframes traccia { to { stroke-dashoffset: 0; } }

/* fase 2 — accensione: il tubo si riempie e il neon sfarfalla */
html.intro-on-light .intro__mark use {
  animation: accendi .78s steps(1, end) forwards;
}
/* stroke-dashoffset va ridichiarato in ogni fotogramma: questa animazione
   sostituisce `traccia` e senza di esso la proprietà tornerebbe al valore
   di base (1671), ri-nascondendo il tubo appena tracciato. */
@keyframes accendi {
  0%   { stroke-dashoffset: 0; fill: rgb(255 153 0 / 0);   stroke: var(--orange); }
  10%  { stroke-dashoffset: 0; fill: rgb(255 240 214 / 1); stroke: #fff5e2; }
  17%  { stroke-dashoffset: 0; fill: rgb(255 153 0 / .22); stroke: var(--orange); }
  26%  { stroke-dashoffset: 0; fill: rgb(255 240 214 / 1); stroke: #fff5e2; }
  33%  { stroke-dashoffset: 0; fill: rgb(255 153 0 / .45); stroke: var(--orange); }
  42%, 100% { stroke-dashoffset: 0; fill: rgb(255 243 224 / 1); stroke: #fff6e6; }
}

/* Il bagliore sta sul contenitore, non sugli SVG: dentro un SVG il filtro
   viene tagliato dal viewport dell'elemento e il logo risultava troncato
   sul lato destro. Su un div non c'è alcun ritaglio. */
html.intro-on-light .intro__stage {
  animation: bagliore .78s steps(1, end) forwards;
}
@keyframes bagliore {
  0%   { filter: none; }
  10%  { filter: drop-shadow(0 0 7px rgb(255 153 0 / .95)) drop-shadow(0 0 26px rgb(255 153 0 / .6)); }
  17%  { filter: drop-shadow(0 0 3px rgb(255 153 0 / .3)); }
  26%  { filter: drop-shadow(0 0 8px rgb(255 153 0 / .95)) drop-shadow(0 0 30px rgb(255 153 0 / .65)); }
  33%  { filter: drop-shadow(0 0 4px rgb(255 153 0 / .4)); }
  42%, 100% { filter: drop-shadow(0 0 9px rgb(255 153 0 / .9)) drop-shadow(0 0 34px rgb(255 153 0 / .55)); }
}

/* alone dietro al logo, che cresce con l'accensione */
.intro__stage::before {
  content: "";
  position: absolute; left: 50%; top: 45%;
  width: 46vmax; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 153 0 / .3) 0%, rgb(255 153 0 / 0) 62%);
  opacity: 0; pointer-events: none;
}
html.intro-on-light .intro__stage::before { animation: alone .85s var(--ease) forwards; }
@keyframes alone { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* fase 3 — lo strato si ritira */
html.intro-out .intro {
  animation: intro-via .6s var(--ease) forwards;
  pointer-events: none;
}
@keyframes intro-via {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-on .intro { display: none; }
}

/* -------------------------------------------------- 3b. Cursore */
/* Il cursore è "la luce": un punto con un anello che lo insegue.
   L'arancione compare solo dove c'è qualcosa da toccare. */
.cursor { --c: var(--cream); }
.cursor[data-surface="light"] { --c: var(--ink); }

.cursor__ring,
.cursor__dot {
  position: fixed; top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
  transition: opacity .4s var(--ease), background-color .4s var(--ease),
              border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.cursor[data-on="true"] .cursor__ring { opacity: 1; }
.cursor[data-on="true"] .cursor__dot  { opacity: 1; }

.cursor__ring {
  width: 34px; height: 34px;
  border: 1.3px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.cursor__dot {
  width: 7px; height: 7px;
  background: var(--c);
}

/* sopra un elemento cliccabile: si accende */
.cursor[data-state="link"] .cursor__ring {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 13%, transparent);
}
.cursor[data-state="link"] .cursor__dot { background: var(--orange); }

/* sopra una foto: anello neutro, leggibile su qualsiasi immagine */
.cursor[data-state="media"] .cursor__ring {
  border-color: rgb(249 249 249 / .8);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .16), inset 0 0 0 1px rgb(0 0 0 / .1);
}
.cursor[data-state="media"] .cursor__dot {
  background: #f9f9f9;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .18);
}

/* il puntatore di sistema sparisce solo se il nostro è davvero attivo */
html.has-cursor,
html.has-cursor * { cursor: none !important; }

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* trattino del numero in arancione. Il glifo ha margini laterali propri:
   li recupero, altrimenti il numero sembra scritto con gli spazi. */
.sep { color: var(--orange); margin-inline: -.07em; }

/* -------------------------------------------------- 4. Buttons */
.btn {
  --btn-bg:      var(--ink);
  --btn-fg:      var(--cream);
  --btn-fill:    var(--orange);   /* colore che sale in hover */
  --btn-fill-fg: var(--ink);      /* testo sopra quel riempimento */
  --btn-ring:    0 0 #0000;       /* bordo, se previsto */
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.05rem 1.85rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-head);
  font-size: .9rem; font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--btn-ring);
  transition: color .35s var(--ease), box-shadow .45s var(--ease),
              transform .45s var(--ease);
  will-change: transform;
}
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible {
  color: var(--btn-fill-fg);
  box-shadow: var(--btn-ring), 0 12px 30px -16px rgb(0 0 0 / .55);
}

.btn--orange {
  --btn-bg: var(--orange); --btn-fg: var(--ink);
  --btn-fill: var(--ink);  --btn-fill-fg: var(--cream);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-fill: var(--ink);  --btn-fill-fg: var(--cream);
  --btn-ring: inset 0 0 0 1.4px currentColor;
}
/* su fondo scuro il ghost si riempie di panna, non di nero */
.on-dark .btn--ghost, .work .btn--ghost, .photo .btn--ghost, .contact .btn--ghost {
  --btn-fill: var(--cream); --btn-fill-fg: var(--ink-deep);
}

.btn .ico { width: 1em; height: 1em; transition: transform .45s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }

/* -------------------------------------------------- 5. Nav */
.nav {
  position: fixed; inset: clamp(.75rem, 1.6vw, 1.25rem) 0 auto;
  z-index: 100;
  display: flex; justify-content: center;
  padding-inline: var(--pad);
  pointer-events: none;
}

.nav__inner {
  pointer-events: auto;
  width: 100%; max-width: var(--maxw);
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem .5rem .5rem 1.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-deep) 32%, transparent);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .2),        /* filo di luce sul bordo */
    inset 0 0 0 1px rgb(255 255 255 / .12),
    0 14px 44px -24px rgb(0 0 0 / .85);
  color: var(--cream);
  transition: background .6s var(--ease), box-shadow .6s var(--ease),
              color .6s var(--ease), padding .5s var(--ease),
              max-width .6s var(--ease);
}

/* stato: pagina chiara sotto la nav */
.nav[data-theme="light"] .nav__inner {
  background: color-mix(in srgb, #fff 62%, transparent);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    inset 0 0 0 1px rgb(28 28 28 / .1),
    0 14px 40px -26px rgb(0 0 0 / .4);
}

/* scorrendo si assottiglia e si stringe: resta sempre visibile */
.nav[data-compact="true"] .nav__inner {
  max-width: 1120px;
  padding: .3rem .3rem .3rem 1.1rem;
}
.nav[data-compact="true"] .nav__logo svg { height: 22px; }
.nav[data-compact="true"] .nav__logo .mark { height: 25px; }
.nav[data-compact="true"] .nav__links a { padding-block: .45rem; }
.nav[data-compact="true"] .nav__cta { padding: .62rem 1.15rem; font-size: .8rem; }
.nav[data-compact="true"] .nav__burger { width: 40px; height: 40px; }

.nav__logo { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.nav__logo svg { height: 26px; width: auto; color: currentColor; transition: height .5s var(--ease); }
.nav__logo .mark { height: 30px; transition: height .5s var(--ease); }

.nav__links {
  display: flex; align-items: center; gap: .35rem;
  margin: 0 auto;              /* il margin-block di default alzava la pill */
  list-style: none; padding: 0;
}
.nav__links a {
  position: relative;
  display: block; padding: .6rem .95rem;
  border-radius: 999px;
  font-family: var(--f-head); font-size: .85rem; font-weight: 600;
  letter-spacing: -.005em;
  opacity: .78;
  transition: opacity .35s var(--ease), background .35s var(--ease),
              padding .5s var(--ease);
}
.nav__links a:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.nav__links a[aria-current="true"] { opacity: 1; }
.nav__links a[aria-current="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: .34rem;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--orange);
}

.nav__cta { flex: 0 0 auto; padding: .82rem 1.4rem; font-size: .85rem; transition: padding .5s var(--ease), font-size .5s var(--ease); }

.nav__burger {
  display: none;
  width: 46px; height: 46px; border-radius: 50%;
  align-items: center; justify-content: center;
  transition: width .5s var(--ease), height .5s var(--ease);
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.nav__burger span {
  display: block; width: 17px; height: 1.6px; border-radius: 2px;
  background: currentColor; position: relative;
  transition: transform .4s var(--ease);
}
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease);
}
.nav__burger span::before { top: -5.5px; }
.nav__burger span::after  { top: 5.5px; }
.nav__burger[aria-expanded="true"] span { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(-90deg); }
.nav__burger[aria-expanded="true"] span::after  { transform: scaleX(0); }

/* con sei voci il menu si avvicina troppo al pulsante: stringo la spaziatura */
@media (max-width: 1100px) {
  .nav__links { gap: .1rem; }
  .nav__links a { padding-inline: .62rem; }
}

/* menu mobile */
.menu {
  position: fixed; inset: 0; z-index: 99;
  display: grid; align-content: center; gap: .25rem;
  padding: 6rem var(--pad) 3rem;
  background: var(--ink-deep); color: var(--cream);
  clip-path: circle(0% at calc(100% - 3.5rem) 2.6rem);
  transition: clip-path .8s var(--ease);
  visibility: hidden;
}
.menu[data-open="true"] { clip-path: circle(150% at calc(100% - 3.5rem) 2.6rem); visibility: visible; }
.menu a {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 11vw, 4.5rem);
  line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase;
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu[data-open="true"] a { opacity: 1; transform: none; }
.menu[data-open="true"] a:nth-child(1) { transition-delay: .18s; }
.menu[data-open="true"] a:nth-child(2) { transition-delay: .24s; }
.menu[data-open="true"] a:nth-child(3) { transition-delay: .30s; }
.menu[data-open="true"] a:nth-child(4) { transition-delay: .36s; }
.menu[data-open="true"] a:nth-child(5) { transition-delay: .42s; }
.menu a:hover { color: var(--orange); }
.menu__foot {
  margin-top: 2.5rem; display: grid; gap: .3rem;
  font-size: .95rem; opacity: .7;
}
.menu__foot a { font: inherit; text-transform: none; letter-spacing: 0; }

/* -------------------------------------------------- 6. Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(7rem, 15vh, 10.5rem) 0 clamp(1.4rem, 3vh, 2.4rem);
  background:
    linear-gradient(176deg, #15120f 0%, var(--ink-deep) 46%, #070605 100%);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}

/* un solo alone caldo, basso a sinistra: l'arancione resta un accento,
   non un fondale */
.hero__glow {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 6% 104%,  rgb(255 153 0 / .40) 0%, rgb(255 153 0 / 0) 58%),
    radial-gradient(70% 58% at 34% 118%, rgb(255 122 0 / .20) 0%, rgb(255 122 0 / 0) 62%),
    radial-gradient(50% 44% at 92% -10%, rgb(255 170 60 / .13) 0%, rgb(255 170 60 / 0) 58%);
  animation: breathe 16s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes breathe {
  from { opacity: .72; transform: scale(1)    translate3d(0, 0, 0); }
  to   { opacity: 1;   transform: scale(1.07) translate3d(0, -2%, 0); }
}

/* marchio come filigrana, tagliato dal bordo destro */
.hero__watermark {
  position: absolute; z-index: -1;
  right: -9vw; top: 47%;
  translate: 0 -50%;
  width: min(54vw, 640px); height: auto;
  color: var(--cream);
  opacity: .05;
  pointer-events: none;
}

.hero__inner {
  align-self: center;
  display: grid;
  justify-items: start;
  gap: clamp(.9rem, 1.7vw, 1.4rem);
}

.hero h1 {
  font-family: var(--f-head);
  font-size: clamp(2.7rem, .7rem + 7.4vw, 7.6rem);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.045em;
}
.hero h1 .line { display: block; }
.hero h1 .line > span { display: block; }
.hero h1 em { font-style: normal; color: var(--orange); margin-left: -.04em; }

.hero__lead {
  max-width: 42ch;
  margin-top: clamp(.2rem, .6vw, .5rem);
  font-size: clamp(1.02rem, .96rem + .42vw, 1.28rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: clamp(.5rem, 1.2vw, 1rem);
}

/* riga di piede: servizi + invito a scorrere */
.hero__foot { align-self: end; }
.hero__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.hero__meta ul {
  display: flex; flex-wrap: wrap;
  gap: .5rem clamp(1rem, 2.4vw, 2.2rem);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--f-head);
  font-size: clamp(.66rem, .62rem + .12vw, .76rem);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 54%, transparent);
}
.hero__meta li { display: flex; align-items: center; gap: .55rem; }
.hero__meta li::before {
  content: ""; flex: 0 0 auto;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--orange);
}

/* -------------------------------------------------- 8. Manifesto */
.manifesto {
  padding: clamp(6rem, 15vh, 12rem) 0 clamp(4rem, 9vh, 8rem);
  background: var(--cream);
}
.manifesto__text {
  font-family: var(--f-head);
  font-size: clamp(1.7rem, .7rem + 4.2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  max-width: 20ch;
}
.manifesto__text .w {
  display: inline-block;
  opacity: .12;
  transition: opacity .55s var(--ease), filter .55s var(--ease);
  filter: blur(2px);
}
.manifesto__text .w.on { opacity: 1; filter: blur(0); }
.manifesto__text em { font-style: normal; color: var(--orange); }
/* l'arancione arriva quando la parola si accende, non prima */
.manifesto__text .w:not(.on) { color: var(--ink); }

.manifesto__grid {
  margin-top: clamp(3rem, 7vw, 6rem);
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}
.manifesto__cell h3 {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  font-weight: 700; letter-spacing: -.02em;
  margin-bottom: .55rem;
}
.manifesto__cell p { font-size: .97rem; color: var(--muted); line-height: 1.6; }
.manifesto__cell .num {
  display: block; margin-bottom: 1.1rem;
  font-family: var(--f-display); font-size: .8rem;
  letter-spacing: .2em; color: var(--orange);
}

/* -------------------------------------------------- 9. Servizi (card impilate) */
.services {
  padding: clamp(4rem, 9vh, 8rem) 0 0;
  background: var(--cream);
}
.services__head {
  display: grid; gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.services__head .section-title { max-width: 14ch; }

.stack {
  display: grid;
  grid-auto-rows: 1fr;          /* righe uguali = nessuna card che spunta da dietro */
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-bottom: 14vh;
}

.card {
  position: sticky;
  top: clamp(5.5rem, 12vh, 8.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, .62fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  min-height: clamp(360px, 54vh, 520px);
  padding: clamp(1.6rem, 3.2vw, 3.2rem);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 80px -50px rgb(0 0 0 / .7);
  transform-origin: 50% 0;
}
.card--brand { background: var(--orange); color: var(--ink); }

.card__body { display: grid; gap: 1.1rem; align-content: center; }
.card__num {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem);
  line-height: .8;
  color: color-mix(in srgb, currentColor 22%, transparent);
}
.card h3 {
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.4rem);
  letter-spacing: -.04em;
}
.card p {
  max-width: 44ch;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: clamp(.97rem, .94rem + .2vw, 1.08rem);
}
.card__tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .3rem 0 0; }
.card__tags li {
  padding: .42rem .85rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  font-size: .78rem; font-weight: 500;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

.card__media {
  position: relative;
  height: 100%;
  min-height: clamp(200px, 30vh, 380px);
  border-radius: calc(var(--radius) - 8px);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.card__media img.fit-left { object-position: 50% 48%; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.06);       /* il minimo che copre lo scorrimento parallasse */
  will-change: transform;
}

/* -------------------------------------------------- 10. Lavori (scroll orizzontale) */
.work {
  position: relative;
  background: var(--ink-deep);
  color: var(--cream);
}
.work__pin {
  position: sticky; top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding-block: clamp(5.5rem, 12vh, 8rem) clamp(2rem, 5vh, 4rem);
  overflow: hidden;
}
.work__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.2rem;
}
.work__head h2 { font-size: clamp(2rem, 1rem + 4.2vw, 4.4rem); }
.work__count {
  font-family: var(--f-head); font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}
.work__count b { color: var(--orange); font-variant-numeric: tabular-nums; }

.work__viewport { overflow: hidden; }
.work__track {
  display: flex; gap: clamp(1rem, 2vw, 1.8rem);
  align-items: center;      /* senza questo lo stretch ignora max-height */
  height: 100%;
  padding-inline: var(--pad);
  will-change: transform;
}

.work__track::after {           /* Chrome ignora il padding di fine su un flex scrollabile */
  content: ""; flex: 0 0 var(--pad); height: 1px;
}

.project {
  position: relative; flex: 0 0 auto;
  /* Le foto sono 1080x1350: la card prende il loro formato, cosi' l'immagine
     entra intera invece di essere ritagliata dal riquadro. */
  aspect-ratio: 4 / 5;
  height: 100%;
  max-height: 780px;
  width: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #171310;
  isolation: isolate;
  box-shadow: 0 30px 70px -44px rgb(0 0 0 / .9);
}

.project__img { position: absolute; inset: 0; overflow: hidden; }
.project__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Niente zoom a riposo: con le foto a 4:5 nella card a 4:5 il ritaglio e'
     zero, e uno scale(1.08) avrebbe tagliato 4% per lato, cioe' il bordo dei
     marchi che nelle foto arrivano quasi a filo (es. "Chiara Moroni"). */
  transform: scale(1);
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
  filter: saturate(.94);
}
.project:hover .project__img img { transform: scale(1.06); filter: saturate(1.06); }
.project::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Solo un velo appena accennato in basso, per staccare la foto dal fondo.
       Il buio che serve alla didascalia sta sotto la didascalia stessa. */
    linear-gradient(180deg, rgb(10 9 8 / 0) 58%, rgb(10 9 8 / .16) 100%);
}

/* La velatura e' agganciata al blocco di testo, non alla card: un gradiente a
   tutta altezza non puo' insieme lasciare libero il marchio a meta' foto e
   proteggere la didascalia (misurato: 2,59:1 sul titolo di "Chiara Moroni",
   dove la foto in basso e' quasi bianca). Cosi' invece il velo cresce da solo
   quando il titolo va su due righe. */
.project__meta {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: grid; gap: .55rem;
  padding: clamp(1.2rem, 2.4vw, 2rem);
}
.project__meta::before {
  content: ""; position: absolute; z-index: -1;
  inset: -2rem 0 0 0;
  background: linear-gradient(180deg,
    rgb(10 9 8 / 0) 0%, rgb(10 9 8 / .42) 30%,
    rgb(10 9 8 / .84) 62%, rgb(10 9 8 / .97) 100%);
}
.project__tag {
  justify-self: start;
  padding: .36rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 92%, transparent);
  color: var(--ink);
  font-family: var(--f-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.project h3 {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem);
  line-height: .95; letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;      /* una riga sola, come le card dal titolo corto */
}
.project p {
  font-size: .92rem;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  max-width: 34ch;
}

.project--cta {
  display: grid; place-content: center; gap: 1.4rem;
  justify-items: center; text-align: center;
  padding: 2rem;
  background: var(--orange);
  color: var(--ink);
}
.project--cta::after { display: none; }
.project--cta h3 { font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); }

.work__progress {
  position: absolute; left: var(--pad); right: var(--pad);
  bottom: clamp(1rem, 2.4vh, 2rem);
  height: 2px; border-radius: 2px;
  background: rgb(255 255 255 / .12);
  overflow: hidden;
}
.work__progress i {
  display: block; height: 100%; width: 100%;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* -------------------------------------------------- 11. Fotografia */
.photo {
  position: relative;
  padding: clamp(6rem, 14vh, 11rem) 0;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.photo__head {
  display: grid; gap: 1.3rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* niente max-width qui: a 40ch il titolo andava su tre righe invece di due */
.photo__head .section-title { max-width: 14ch; }
.photo__head .section-lead { max-width: none; }
/* una frase per riga, interruzione sul punto */
.photo__head .section-lead span { display: block; }
@media (max-width: 720px) {
  .photo__head .section-lead span { display: inline; }
}
.photo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.4rem);
}

.shot {
  position: relative;
  aspect-ratio: 3 / 4;        /* tutte le tessere della stessa misura */
  border-radius: var(--radius-s);
  overflow: hidden;
  background: #100e0c;
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;          /* il ritaglio viene dalla tessera, non dal file */
  transition: transform 1s var(--ease), filter 1s var(--ease);
  filter: grayscale(.18);
}
.shot:hover img { transform: scale(1.05); filter: grayscale(0); }

.photo__cta { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: flex; justify-content: center; }

/* -------------------------------------------------- 12. Processo */
.process {
  padding: clamp(6rem, 14vh, 11rem) 0;
  background: var(--cream);
}
.process__head { display: grid; gap: 1.3rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.steps {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px transparent, 0 26px 50px -34px rgb(0 0 0 / .4);
}
.step__n {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.4rem;
  border-radius: 50%;
  background: var(--orange); color: var(--ink);
  font-family: var(--f-head); font-weight: 800; font-size: .95rem;
}
.step h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); margin-bottom: .6rem; letter-spacing: -.03em; }
.step p { color: var(--muted); font-size: .97rem; }

/* -------------------------------------------------- 13. Dicono di noi */
/* Sabbia fra il bianco del processo e il nero della CTA: tre sezioni chiare
   di fila si impastavano, questa da' il cambio di passo prima del finale. */
.reviews {
  padding: clamp(6rem, 14vh, 11rem) 0;
  background: var(--sand);
}
.reviews__head { display: grid; gap: 1.3rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.reviews__head .section-title { max-width: 16ch; }
/* Il titolo deve stare su una riga. Con la scala normale ci sta fino a 390px,
   sotto andava a capo: qui, e solo qui, la base della clamp scende. Restringere
   la scala a tutte le larghezze avrebbe reso questo titolo 5px piu' piccolo
   degli altri ovunque, per un problema che esiste solo sui telefoni stretti. */
@media (max-width: 400px) {
  .reviews__head .section-title { font-size: clamp(1.9rem, .9rem + 5.4vw, 6rem); }
}
/* Carosello: la pista e' un contenitore che scorre davvero (overflow-x + snap).
   Cosi' lo swipe sul telefono, la rotella orizzontale sul trackpad e le frecce
   della tastiera funzionano da soli; le frecce e i pallini sono solo un altro
   modo di muovere lo stesso scroll. */
.carosello { position: relative; }
.carosello__pista {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* spazio per l'ombra sollevata delle card, altrimenti la taglia l'overflow */
  padding: .4rem .4rem 1.4rem;
  margin: -.4rem -.4rem -1rem;
}
.carosello__pista::-webkit-scrollbar { display: none; }
.carosello__pista:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.review {
  flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.6rem)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 1000px) {
  .review { flex-basis: calc((100% - clamp(1rem, 2vw, 1.6rem)) / 2); }
}
@media (max-width: 660px) {
  .review { flex-basis: 100%; }
}

.carosello__comandi {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.carosello__freccia {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.carosello__freccia svg { width: 20px; height: 20px; }
.carosello__freccia:hover {
  background: var(--orange);
  box-shadow: inset 0 0 0 1.5px transparent;
  transform: translateY(-2px);
}
.carosello__freccia:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* una sola pagina: i comandi non servono */
.carosello--unico .carosello__comandi { display: none; }

.carosello__punti { display: flex; gap: .5rem; }
.carosello__punti button {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: background .4s var(--ease), width .4s var(--ease);
}
.carosello__punti button[aria-current="true"] {
  width: 26px; border-radius: 999px;
  background: var(--orange);
}
.carosello__punti button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.review {
  position: relative;
  margin: 0;                    /* <figure> porta margini suoi */
  display: grid;
  grid-template-rows: auto 1fr auto;   /* la firma resta in fondo anche a testi corti */
  gap: 1.1rem;
  min-height: 100%;                    /* stessa altezza: la detta la card piu' alta */
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.review:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px transparent, 0 26px 50px -34px rgb(0 0 0 / .4);
}

.review__stars {
  color: var(--orange);
  font-size: .95rem; letter-spacing: .14em;
}
.review blockquote {
  margin: 0;
  font-size: 1.02rem; line-height: 1.66;
  text-wrap: pretty;
}
.review figcaption {
  display: grid; gap: .15rem;
  padding-top: .9rem;
  border-top: 1px solid var(--hairline);
}
.review__who  { font-family: var(--f-head); font-weight: 700; font-size: .98rem; }
.review__what { color: var(--muted); font-size: .86rem; }

/* una sola pagina: i comandi non servono */
.carosello--unico .carosello__comandi { display: none; }

.carosello__punti { display: flex; gap: .5rem; }
.carosello__punti button {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: background .4s var(--ease), width .4s var(--ease);
}
.carosello__punti button[aria-current="true"] {
  width: 26px; border-radius: 999px;
  background: var(--orange);
}
.carosello__punti button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }


/* -------------------------------------------------- 14. CTA contatti */
.contact {
  position: relative;
  padding: clamp(6rem, 16vh, 12rem) 0;
  background: #050403;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  /* Il neon e' misurato sulla larghezza: a 200px fissi, su un telefono i due
     lati si incontrerebbero al centro e slaverebbero il testo. */
  --lato:   clamp(30px, 11vw, 200px);
  --capo:   clamp(70px, 15vh, 160px);
  --anello: clamp(46px,  8vw, 120px);
  --alone:  clamp(120px, 28vw, 420px);
  /* lo "scudo": l'ellisse scura che protegge il testo dall'alone */
  /* Attenzione: in un radial-gradient queste percentuali sono il RAGGIO, non
     il diametro. A 64% l'ellisse arrivava sopra i bordi e spegneva il neon. */
  --scudo-w: 42%;
  --scudo-h: 34%;
}

/* Sfondo "neon perimetrale": una cornice di luce che corre lungo i quattro lati
   e si ingrossa negli angoli, su un interno nero.

   Il trucco sta tutto nella maschera. Un'ellisse "closest-side" tocca il 100%
   a meta' dei lati, ma nei vertici il raggio normalizzato arriva a ~1.41: li'
   la maschera e' gia' piena molto prima, quindi la luce entra molto piu' dentro.
   Sono gli angoli a diventare piu' spessi da soli, senza disegnarli a mano. */
.contact__mesh {
  position: absolute; inset: 0;
  z-index: -3;
  /* Un'ombra interna per lato, cosi' ogni bordo ha la sua tonalita' di
     arancione; negli angoli se ne sovrappongono due e la luce si ingrossa
     da sola. Le ultime due sono l'alone che entra verso il centro. */
  box-shadow:
    inset 0 0 0 2px rgb(255 153 0 / .95),
    inset 0 0 26px -4px rgb(255 153 0 / .92),
    inset  var(--lato) 0 80px calc(-1 * var(--lato) + 20px) var(--orange),
    inset calc(-1 * var(--lato)) 0 80px calc(-1 * var(--lato) + 20px) var(--orange),
    inset 0  var(--capo) 70px calc(-1 * var(--capo) + 15px) #ff8400,
    inset 0 calc(-1 * var(--capo)) 70px calc(-1 * var(--capo) + 15px) var(--orange),
    inset 0 0 var(--anello) calc(-1 * var(--anello) / 6) rgb(255 153 0 / .9),
    inset 0 0 var(--alone) calc(-1 * var(--alone) / 4.6) rgb(255 153 0 / .5);
}
.contact__mesh::after {
  content: ""; position: absolute; inset: 0;
  box-shadow:
    inset 0 0 0 2px rgb(255 132 0 / .95),
    inset 0 0 26px -4px rgb(255 132 0 / .92),
    inset  var(--lato) 0 80px calc(-1 * var(--lato) + 20px) var(--orange),
    inset calc(-1 * var(--lato)) 0 80px calc(-1 * var(--lato) + 20px) var(--orange),
    inset 0  var(--capo) 70px calc(-1 * var(--capo) + 15px) #ff8400,
    inset 0 calc(-1 * var(--capo)) 70px calc(-1 * var(--capo) + 15px) #ffa524,
    inset 0 0 var(--anello) calc(-1 * var(--anello) / 6) rgb(255 132 0 / .9),
    inset 0 0 var(--alone) calc(-1 * var(--alone) / 4.6) rgb(255 132 0 / .5);
  opacity: 0;
  will-change: opacity;
  animation: neon-respiro 19s ease-in-out infinite alternate;
}
@keyframes neon-respiro { from { opacity: 0; } to { opacity: 1; } }

/* Scudo: senza, su schermi stretti i due aloni laterali si incontrano sotto
   il paragrafo e il contrasto crolla (misurato: 1,99:1 a 390px). */
.contact::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse var(--scudo-w) var(--scudo-h) at 50% 50%,
    rgb(5 4 3 / .94) 0%, rgb(5 4 3 / .82) 44%, rgb(5 4 3 / .38) 74%, rgb(5 4 3 / 0) 100%);
}

/* Su schermi stretti il testo occupa quasi tutta la larghezza: lo scudo si
   allarga oltre il riquadro, ma resta basso per non mangiare il neon sopra e sotto. */
@media (max-width: 760px) {
  .contact { --scudo-w: 86%; --scudo-h: 50%; }
}

/* Grana: toglie il banding del conic e da' il grado "fotografico". */
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.contact__inner { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); justify-items: center; text-align: center; }
.contact h2 {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1rem + 9vw, 8.5rem);
  line-height: .95; letter-spacing: -.01em;
  text-transform: uppercase;
  max-width: 16ch;
}
.contact h2 em { font-style: normal; color: var(--orange); }
.contact__lead { max-width: 48ch; color: color-mix(in srgb, var(--cream) 80%, transparent); font-size: clamp(1rem, .96rem + .35vw, 1.2rem); }
.contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.contact__direct {
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.6rem);
  justify-content: center;
  margin-top: 1rem;
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(.95rem, .9rem + .3vw, 1.15rem);
}
.contact__direct a { position: relative; padding-bottom: .2rem; }
.contact__direct a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.4px; background: var(--orange);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.contact__direct a:hover::after { transform: scaleX(1); transform-origin: left; }

/* -------------------------------------------------- 15. Footer */
.footer {
  background: var(--ink-deep);
  color: color-mix(in srgb, var(--cream) 70%, transparent);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid rgb(255 255 255 / .08);
  font-size: .92rem;
}
.footer__top {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.footer__logo {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--cream);
}
.footer__logo svg { height: 26px; width: auto; }
.footer__logo .mark { height: 31px; }
.footer__brand p { margin-top: 1.1rem; max-width: 32ch; line-height: 1.6; }
.footer h4 {
  font-family: var(--f-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 1rem;
}
.footer__top > * { min-width: 0; }   /* senza questo la mail lunga sfonda la griglia */
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer ul a { overflow-wrap: anywhere; }
.footer a:hover { color: var(--cream); }
/* link legali: stessa riga del copyright, a destra */
.footer__legali {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem 1.15rem;
}
.footer__legali a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / .18);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__legali a:hover { color: var(--cream); border-bottom-color: var(--orange); }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgb(255 255 255 / .08);
  font-size: .82rem;
  color: color-mix(in srgb, var(--cream) 50%, transparent);
}

/* -------------------------------------------------- 16. Reveal */
/* Entrata: dissolvenza + risalita + una velatura appena percettibile.
   La sfocatura resta piccola (5px) perché su testo è la parte più costosa
   da comporre: basta a dare profondità senza pesare. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(5px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }

[data-reveal="fade"]  { transform: none; }
[data-reveal="zoom"], [data-reveal="mask"] { filter: none; }
/* Variante senza sfocatura. Serve dove sotto c'e' del vetro: un filter su un
   antenato (o sull'elemento stesso) crea un nuovo "backdrop root" e il
   backdrop-filter smette di vedere lo sfondo. Vale anche per blur(0), che e'
   comunque un filter: per questo la regola copre anche lo stato .is-in. */
[data-reveal="soft"], [data-reveal="soft"].is-in { filter: none; }
[data-reveal="right"] { transform: translate3d(-32px, 0, 0); }

/* maschera per riga di testo: il figlio sale da sotto il taglio.
   NB: niente clip-path sull'elemento osservato, altrimenti
   IntersectionObserver lo considera di area zero e non scatta mai. */
[data-reveal="mask"] {
  opacity: 1; transform: none;
  overflow: hidden;              /* ripiego per browser vecchi */
  overflow: clip;
  overflow-clip-margin: .16em;   /* discendenti e sporgenze non tagliati */
}
[data-reveal="mask"] > * {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal="mask"].is-in > * { transform: none; }

/* righe ricavate dai <br> nei titoli di sezione */
.lines { display: block; }
.lines .line {
  display: block;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: .16em;
}
.lines .line > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 110ms);
}
.lines.is-in .line > span { transform: none; }

[data-reveal="zoom"] {
  opacity: 0; transform: scale(1.05);
  transition: opacity 1s var(--ease), transform 1.3s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal="zoom"].is-in { opacity: 1; transform: none; }

/* -------------------------------------------------- 17. Responsive */
@media (max-width: 1200px) {
  .card { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

/* sotto gli 880px il riquadro diventerebbe una fascia schiacciata:
   meglio nessuna immagine che un ritaglio sbagliato */
@media (max-width: 880px) {
  .card { grid-template-columns: 1fr; align-content: center; }
  .card__media { display: none; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; margin-left: auto; }
  .nav__inner { padding: .5rem .5rem .5rem 1.1rem; }

  .photo__grid { grid-template-columns: repeat(2, 1fr); }

  .work__pin { height: auto; position: static; padding-bottom: 4rem; }
  .work__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .work__viewport::-webkit-scrollbar { display: none; }
  .work__track { transform: none !important; height: auto; padding-bottom: .5rem; }
  .project { scroll-snap-align: center; width: 84vw; height: auto; max-height: none; }
  .project h3 { white-space: normal; }
  .work__progress { display: none; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .hero__foot { display: none; }   /* su mobile appesantisce: i servizi hanno la loro sezione */
}

@media (max-width: 520px) {
  .card { min-height: auto; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------- 18. Motion ridotto */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], [data-reveal="mask"] > *, .lines .line > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .manifesto__text .w { opacity: 1; filter: none; }
  .carosello__pista { scroll-behavior: auto; }
  .work__pin { position: static; height: auto; }
  .work__viewport { overflow-x: auto; }
  .work__track { transform: none !important; height: auto; }
  .card { position: static; }
}


/* ==========================================================================
   20. PAGINA SERVIZI  (servizi.html)
   Impaginazione editoriale, volutamente diversa dalle card impilate della
   home: qui serve un indice leggibile, non un secondo effetto scenico.
   ========================================================================== */
.srv-testa {
  position: relative;
  background: linear-gradient(176deg, #15120f 0%, var(--ink-deep) 52%, #070605 100%);
  color: var(--cream);
  padding: clamp(9rem, 22vh, 14rem) 0 clamp(4rem, 9vh, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
/* Alone caldo come in home, ma dalla parte opposta: qui sale dal fianco
   destro, dove il titolo lascia spazio vuoto. Cosi' la testata non e' la copia
   della hero, e il calore riempie il vuoto invece di stare sotto al testo. */
.srv-testa__glow {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(50% 76% at 101% 54%, rgb(255 153 0 / .44) 0%, rgb(255 153 0 / 0) 62%),
    radial-gradient(62% 72% at 87% 106%, rgb(255 122 0 / .24) 0%, rgb(255 122 0 / 0) 64%),
    radial-gradient(44% 54% at 6% -16%,  rgb(255 170 60 / .12) 0%, rgb(255 170 60 / 0) 58%);
  animation: breathe 16s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.srv-testa .shell { display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); }
/* Stesso carattere del titolo della hero in home (Archivo 800, non Anton):
   la testata di una pagina interna deve suonare come quella principale. */
.srv-testa__titolo {
  font-family: var(--f-head);
  font-size: clamp(2.6rem, .7rem + 7vw, 7rem);
  font-weight: 800;
  line-height: .93; letter-spacing: -.045em;
  max-width: 18ch;
}
.srv-testa__titolo em { font-style: normal; color: var(--orange); }
/* Sui telefoni piu' stretti "a come ti vedono." andava a capo e il titolo
   diventava di tre righe: qui, e solo qui, la base della clamp scende. */
@media (max-width: 400px) {
  .srv-testa__titolo { font-size: clamp(1.9rem, .4rem + 7vw, 7rem); }
}
.srv-testa__lead {
  max-width: 54ch;
  font-size: clamp(1.02rem, .97rem + .4vw, 1.28rem);
  line-height: 1.62;
  color: var(--muted);
}

.srv {
  background: var(--cream);
  padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(6rem, 14vh, 10rem);
}

/* Indice appiccicato a sinistra + flusso dei blocchi a destra.
   Prima la colonna di sinistra era vuota per tre quarti: adesso porta la
   cifra dell'area corrente e la navigazione, e il contenuto sta piu' largo.
   Zero altezza in piu' per l'effetto: usa lo spazio che c'era gia'. */
.srv__griglia {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.srv__indice {
  position: sticky;
  top: clamp(6.5rem, 13vh, 9rem);
}

/* La cifra dell'area corrente. Quando cambia, quella che esce sale e
   svanisce, quella che entra arriva da sotto sfocata e si accende: e' lo
   stesso gesto del marchio nell'intro, ridotto a un numero. */
.srv__cifra {
  position: relative;
  height: .84em;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  line-height: .84;
  color: var(--orange);
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: .3em;
}
.srv__cifra span { position: absolute; left: 0; top: 0; display: block; }
.srv__cifra-uscita { opacity: 0; }
.srv__cifra.cambia .srv__cifra-uscita  { animation: cifra-via    .5s var(--ease) forwards; }
.srv__cifra.cambia .srv__cifra-entrata { animation: cifra-arriva .6s var(--ease) forwards; }
@keyframes cifra-via {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-.5em); }
}
@keyframes cifra-arriva {
  from { opacity: 0; transform: translateY(.5em); filter: blur(7px);
         text-shadow: 0 0 34px rgb(255 153 0 / .95), 0 0 12px rgb(255 214 150 / .9); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0);
         text-shadow: 0 0 0 rgb(255 153 0 / 0); }
}

/* Binario con il segmento acceso che scorre sull'area corrente. */
.srv__salti { position: relative; padding-left: 1.15rem; }
.srv__salti ol { list-style: none; margin: 0; padding: 0; }
.srv__salti::before {
  content: ""; position: absolute; left: 0; top: .45rem; bottom: .45rem;
  width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.srv__salti::after {
  content: ""; position: absolute; left: 0;
  top: var(--rail-top, 0px); height: var(--rail-h, 0px);
  width: 2px; border-radius: 2px;
  background: var(--orange);
  box-shadow: 0 0 14px rgb(255 153 0 / .65);
  transition: top .45s var(--ease), height .45s var(--ease);
}
.srv__salto {
  display: flex; align-items: baseline; gap: .65rem;
  width: 100%; padding: .55rem 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(.9rem, .86rem + .2vw, 1rem);
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.srv__salto-num {
  flex: 0 0 auto;
  font-size: .7rem; letter-spacing: .12em;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
  transition: color .4s var(--ease);
}
.srv__salto:hover { color: var(--ink); transform: translateX(3px); }
.srv__salto:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.srv__salto[aria-current="true"] { color: var(--ink); }
.srv__salto[aria-current="true"] .srv__salto-num { color: var(--orange); }

.srv__voce {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.4rem);
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
  border-top: 1px solid var(--hairline);
}
.srv__voce:first-of-type { border-top: 0; padding-top: 0; }
/* la barra e' sempre visibile: senza questo un'ancora finisce sotto di lei */
.srv__voce { scroll-margin-top: clamp(6rem, 12vh, 8rem); }

@media (max-width: 900px) {
  .srv__griglia { grid-template-columns: 1fr; }
  /* l'indice laterale non ci sta: al suo posto le aree diventano una
     fisarmonica, così i sei titoli restano tutti a vista (vedi main.js) */
  .srv__indice { display: none; }

  .srv__capo { cursor: pointer; }
  .srv__capo h2 { flex: 1; min-width: 0; }
  .srv__tasto {
    display: flex; align-items: center; gap: 1rem;
    width: 100%; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .srv__tasto > span:first-child { flex: 1; min-width: 0; }
  /* il segno: un piu' che diventa meno ruotando una delle due barre */
  .srv__segno {
    position: relative; flex: 0 0 auto;
    width: 1.1rem; height: 1.1rem;
    transition: transform .45s var(--ease);
  }
  .srv__segno::before,
  .srv__segno::after {
    content: ""; position: absolute; inset: 50% 0 auto 0;
    height: 2px; margin-top: -1px; border-radius: 2px;
    background: var(--orange);
    transition: transform .45s var(--ease), opacity .3s var(--ease);
  }
  .srv__segno::after { transform: rotate(90deg); }
  .is-aperta .srv__segno::after { transform: rotate(0deg); opacity: 0; }
  .is-aperta .srv__segno { transform: rotate(180deg); }

  .srv__corpo {
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease);
    margin-top: 0;
  }
  .is-aperta .srv__corpo { opacity: 1; margin-top: clamp(.9rem, 3vw, 1.3rem); }
}

.srv__capo { display: flex; align-items: baseline; gap: clamp(.7rem, 1.8vw, 1.2rem); }
.srv__num {
  flex: 0 0 auto;
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(.78rem, .74rem + .2vw, .92rem);
  letter-spacing: .14em;
  color: var(--orange);
  /* allinea il numero alla prima riga del titolo, non alla sua base */
  transform: translateY(-.15em);
}
/* Anton, scelta del cliente: i titoli delle aree tornano al display condensato. */
.srv__capo h2 {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1rem + 3.1vw, 3.5rem);
  line-height: .95; letter-spacing: -.012em;
  text-transform: uppercase;
}

.srv__corpo { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); align-content: start; }
.srv__corpo p {
  /* niente cap sulla misura: la descrizione usa tutta la colonna */
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  line-height: 1.68;
  color: var(--muted);
}
.srv__lista {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
}
.srv__lista li {
  padding: .44rem .9rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
  font-family: var(--f-head); font-size: .84rem; font-weight: 600;
  transition: box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.srv__lista li:hover {
  background: var(--orange);
  box-shadow: inset 0 0 0 1px transparent;
  color: var(--ink);
}


/* -------------------------------------------------- 22. Stacco: i tre patti */
.stacco {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(5rem, 12vh, 8rem) 0;
  overflow: hidden;
  isolation: isolate;
}
/* L'alone e' anche il fondo che il vetro sfoca: senza qualcosa dietro, una
   card translucida e' indistinguibile da un rettangolo grigio. Per questo
   copre anche la fascia delle card, non solo l'angolo in alto. */
.stacco__glow {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46% 54% at 88% 4%,   rgb(255 153 0 / .30) 0%, rgb(255 153 0 / 0) 62%),
    radial-gradient(58% 60% at 104% 52%, rgb(255 122 0 / .20) 0%, rgb(255 122 0 / 0) 64%),
    radial-gradient(52% 52% at 12% 96%,  rgb(255 153 0 / .17) 0%, rgb(255 153 0 / 0) 64%),
    radial-gradient(44% 44% at 54% 108%, rgb(255 170 60 / .12) 0%, rgb(255 170 60 / 0) 62%);
  animation: breathe 18s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.stacco__testa { display: grid; gap: 1.1rem; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.stacco h2 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.75rem, .9rem + 3.1vw, 3.8rem);
  line-height: 1.08; letter-spacing: -.035em;
  max-width: 24ch;
}
.stacco h2 em { font-style: normal; color: var(--orange); }
@media (max-width: 440px) {
  .stacco h2 { font-size: clamp(1.3rem, .25rem + 5.2vw, 3.8rem); }
}

.patti {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
@media (max-width: 1000px) { .patti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:  660px) { .patti { grid-template-columns: 1fr; } }

/* Vetro. NIENTE filter sulla card ne' sui suoi antenati, o il backdrop-filter
   si spegne. Il bordo alto chiaro e' il riflesso: e' quello che la fa leggere
   come vetro invece che come trasparenza. */
.patto {
  position: relative;
  display: grid; align-content: start; gap: .7rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--radius);
  background: rgb(255 255 255 / .055);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .2),
    inset 0 0 0 1px rgb(255 255 255 / .1),
    0 22px 50px -36px rgb(0 0 0 / .8);
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .patto { background: rgb(255 255 255 / .09); }
}
.patto:hover {
  transform: translateY(-6px);
  background: rgb(255 255 255 / .085);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    inset 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent),
    0 34px 60px -34px rgb(0 0 0 / .9);
}

/* La luce segue il cursore dentro la card: e' il concetto del muro acceso,
   ridotto a un riquadro. --px/--py li aggiorna il JS. */
.patto__luce {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle var(--pr, 220px) at var(--px, 50%) var(--py, 0%),
    rgb(255 153 0 / .22) 0%, rgb(255 153 0 / .07) 45%, rgb(255 153 0 / 0) 72%);
  transition: opacity .45s var(--ease);
}
.patto:hover .patto__luce, .patto:focus-within .patto__luce { opacity: 1; }

.patto__n {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.2rem + .8vw, 2.1rem);
  line-height: 1;
  color: var(--orange);
}
.patto h3 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem);
  line-height: 1.22; letter-spacing: -.02em;
}
.patto p {
  font-size: .97rem; line-height: 1.62;
  color: color-mix(in srgb, var(--cream) 74%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .patto__luce { display: none; }
}

/* -------------------------------------------------- 23. Domande */
.faq {
  background: var(--cream);
  padding: clamp(5rem, 12vh, 8rem) 0;
}
.faq__griglia {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq__testa { display: grid; gap: 1.1rem; }
/* piu' piccolo del titolo di sezione standard e su due righe: qui comanda
   l'elenco a destra, il titolo lo accompagna */
.faq__testa .section-title {
  /* dimensionato perche' "ci fanno sempre." stia in una riga nella colonna
     stretta: a 3,1rem andava a capo e il titolo diventava di tre righe */
  font-size: clamp(1.55rem, .9rem + 1.6vw, 2.3rem);
  max-width: 14ch;
}
.faq__lista { max-width: none; }
/* A una colonna prima delle aree: sotto i 1060px la colonna di sinistra
   diventa troppo stretta e il titolo passa a tre righe. Verificato a 16
   larghezze fra 360 e 1920px. */
@media (max-width: 1060px) {
  .faq__griglia { grid-template-columns: 1fr; }
  .faq__testa { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
}

/* <details> nativo: apertura, tastiera e lettori di schermo funzionano già */
.faq__voce {
  border-top: 1px solid var(--hairline);
}
.faq__voce:last-child { border-bottom: 1px solid var(--hairline); }
.faq__voce summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  letter-spacing: -.01em;
  transition: color .35s var(--ease);
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary:hover { color: var(--orange); }
.faq__voce summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
/* segno + che diventa − da aperto */
.faq__voce summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--orange), var(--orange)) center/14px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center/2px 14px no-repeat;
  transition: transform .4s var(--ease), background-size .4s var(--ease);
}
.faq__voce[open] summary::after { transform: rotate(180deg); background-size: 14px 2px, 0 2px; }
.faq__risposta { padding-bottom: clamp(1.1rem, 2.2vw, 1.5rem); }
.faq__risposta p {
  max-width: 58ch;
  font-size: 1rem; line-height: 1.65;
  color: var(--muted);
}


/* ==========================================================================
   24. PAGINA PROGETTI  (progetti.html)
   Righe alternate: la foto cambia lato a ogni progetto. Diverso dallo scroll
   orizzontale della home, che resta l'anteprima; qui ogni lavoro ha spazio
   per dire qual era il problema.
   ========================================================================== */
/* quarta posizione dell'alone: qui e' centrato in basso */
.op-testa__glow {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(52% 66% at 46% 112%, rgb(255 153 0 / .38) 0%, rgb(255 153 0 / 0) 60%),
    radial-gradient(40% 50% at 8% 88%,   rgb(255 122 0 / .18) 0%, rgb(255 122 0 / 0) 62%),
    radial-gradient(40% 52% at 96% 10%,  rgb(255 170 60 / .12) 0%, rgb(255 170 60 / 0) 58%);
  animation: breathe 17s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

.opere {
  background: var(--cream);
  padding: clamp(4rem, 10vh, 7rem) 0 clamp(6rem, 14vh, 10rem);
}

/* Griglia, non piu' righe alternate: con dodici progetti le righe grandi
   avrebbero portato la pagina oltre i 13.000px. Qui si scorre l'intero
   portfolio in poche schermate e ogni scheda dice settore, nome e il perche'
   in una riga. */
.lavori {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}
/* la colonna centrale scende: la griglia respira invece di sembrare una tabella */
.lavori > :nth-child(3n + 2) { margin-top: clamp(1.5rem, 4vw, 4rem); }

@media (max-width: 1000px) {
  .lavori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lavori > :nth-child(3n + 2) { margin-top: 0; }
  .lavori > :nth-child(2n)     { margin-top: clamp(1.2rem, 3vw, 2.6rem); }
}
@media (max-width: 620px) {
  .lavori { grid-template-columns: 1fr; }
  .lavori > :nth-child(n) { margin-top: 0; }
}

.lavoro { display: grid; gap: .55rem; }
.lavoro__foto {
  aspect-ratio: 4 / 5;            /* il formato delle foto, non un ritaglio */
  border-radius: var(--radius);
  overflow: hidden;
  background: #171310;
  margin-bottom: .55rem;
  box-shadow: 0 24px 54px -42px rgb(0 0 0 / .75);
}
.lavoro__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
  filter: saturate(.97);
}
.lavoro:hover .lavoro__foto img { transform: scale(1.05); filter: saturate(1.06); }

.lavoro__settore {
  font-family: var(--f-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange);
}
.lavoro h2 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.3rem);
  line-height: 1; letter-spacing: -.01em;
  text-transform: uppercase;
}
.lavoro__testo {
  font-size: .95rem; line-height: 1.58;
  color: var(--muted);
}
.lavoro__aree {
  margin-top: .15rem;
  font-family: var(--f-head); font-size: .78rem; font-weight: 600;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}
.lavoro__aree a {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 20%, transparent);
  transition: color .35s var(--ease), box-shadow .35s var(--ease);
}
.lavoro__aree a:hover {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--orange);
}


/* ==========================================================================
   25. PAGINA STUDIO  (studio.html)
   ========================================================================== */
/* quinta posizione dell'alone: in alto a sinistra */
.st-testa__glow {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(50% 68% at 2% 6%,   rgb(255 153 0 / .34) 0%, rgb(255 153 0 / 0) 60%),
    radial-gradient(44% 56% at 22% -12%, rgb(255 122 0 / .20) 0%, rgb(255 122 0 / 0) 62%),
    radial-gradient(42% 54% at 94% 104%, rgb(255 170 60 / .14) 0%, rgb(255 170 60 / 0) 60%);
  animation: breathe 19s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

/* --- chi c'e' dietro: stessa ossatura a due colonne delle altre pagine */
/* --- blog: indice --------------------------------------------------------- */
/* Niente arancione sui testi piccoli su fondo chiaro: non arriva al contrasto
   minimo. L'accento resta sui trattini e sulle frecce. */
.blog { background: var(--cream); padding: clamp(4.5rem, 11vh, 7.5rem) 0; }
.blog .shell { display: grid; gap: clamp(1.4rem, 3.5vw, 2.4rem); }

.evidenza {
  /* stessa griglia di "chi c'e' dietro" e del nome: etichetta e data a
     sinistra, titolo e sommario a destra, invece di mezza scatola vuota */
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.1rem, 3vw, 2.6rem);
  padding: clamp(1rem, 1.6vw, 1.4rem);
  border-radius: var(--radius);
  background: var(--sand);
  color: inherit; text-decoration: none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.evidenza:hover, .evidenza:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -42px rgb(0 0 0 / .4);
}
.evidenza__eti {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-head); font-weight: 700;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.evidenza__eti::before { content: ""; width: 20px; height: 2px; background: var(--orange); }
@media (max-width: 900px) { .evidenza { grid-template-columns: 1fr; gap: 1rem; } }
.evidenza__corpo {
  display: grid; gap: .85rem; align-content: center;
  padding: clamp(.6rem, 2.5vw, 1.8rem) clamp(.6rem, 2.5vw, 1.6rem);
}
.evidenza__foto { border-radius: calc(var(--radius) - 10px); overflow: hidden; background: var(--hairline); }
.evidenza__foto img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s var(--ease);
}
.evidenza:hover .evidenza__foto img { transform: scale(1.03); }
@media (max-width: 900px) { .evidenza__foto img { aspect-ratio: 16 / 10; } }
.evidenza h2 {
  margin: 0;
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.55rem, 1rem + 2.3vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.03em; max-width: 22ch;
}
.evidenza__sommario {
  margin: 0; max-width: 62ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem); line-height: 1.65; color: var(--muted);
}

.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .85rem;
  margin: 0;
  font-family: var(--f-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
}
.post__area { color: var(--muted); }

.posts {
  display: grid; gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 920px) { .posts { grid-template-columns: 1fr; grid-auto-rows: auto; } }

.post {
  /* solo testo: la foto resta all'articolo in evidenza, cosi' la gerarchia
     tra il pezzo nuovo e gli altri si vede senza bisogno di spiegarla */
  display: grid; align-content: start; height: 100%;
  border-radius: var(--radius-s);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: inherit; text-decoration: none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.post:hover, .post:focus-visible {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent),
              0 24px 50px -38px rgb(0 0 0 / .45);
}
.post__testo {
  display: grid; gap: .6rem; align-content: start;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
.post h3 {
  margin: 0;
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.05rem, .92rem + .55vw, 1.3rem);
  line-height: 1.25; letter-spacing: -.02em;
}
.post__sommario { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.post__vai {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .15rem;
  font-family: var(--f-head); font-weight: 700; font-size: .8rem;
}
.post__vai .ico { width: 1em; height: 1em; color: var(--orange); transition: transform .45s var(--ease); }
.post:hover .post__vai .ico,
.evidenza:hover .post__vai .ico { transform: translateX(4px); }

/* --- blog: il singolo articolo -------------------------------------------- */
.art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
  margin: 0;
  font-family: var(--f-head); font-weight: 700;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
}
.art-meta .post__area { color: color-mix(in srgb, var(--cream) 58%, transparent); }
.art-titolo {
  margin: 0;
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.85rem, 1rem + 3.2vw, 3.5rem);
  line-height: 1.08; letter-spacing: -.035em; max-width: 21ch;
}

.art-corpo { background: var(--cream); padding: clamp(3.5rem, 9vh, 6rem) 0; }
.art-corpo .shell { display: grid; gap: clamp(2rem, 5vw, 3rem); }

.art-foto { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--hairline); }
.art-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 700px) { .art-foto img { aspect-ratio: 4 / 3; } }

/* testo a sinistra, indice appiccicato a destra */
.art-griglia {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(210px, 23vw, 300px));
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 900px) { .art-griglia { grid-template-columns: 1fr; } }
/* nella colonna stretta la cifra non deve diventare enorme */
.art-indice .srv__cifra { font-size: clamp(3.6rem, 6vw, 6rem); }

/* la colonna di lettura: 68 caratteri e' la misura oltre la quale l'occhio
   fatica a ritrovare l'inizio della riga successiva */
.prosa { display: grid; gap: 1.15rem; max-width: 68ch; }
.prosa p { margin: 0; font-size: clamp(1.02rem, .98rem + .35vw, 1.17rem); line-height: 1.76; }
.prosa h2 {
  margin: 1.5rem 0 -.25rem;
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.22rem, 1rem + .95vw, 1.65rem);
  line-height: 1.25; letter-spacing: -.025em;
}
.prosa ul { margin: 0; padding-left: 1.25rem; display: grid; gap: .55rem; }
.prosa li { font-size: clamp(1rem, .96rem + .3vw, 1.12rem); line-height: 1.7; }
.prosa strong { font-weight: 600; }
.prosa em { font-style: italic; }

.art-torna { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: .88rem; }
.art-torna a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline); padding-bottom: .12rem;
  transition: border-color .35s var(--ease);
}
.art-torna a:hover { border-bottom-color: var(--orange); }

.altri { background: var(--sand); padding: clamp(3.5rem, 8vh, 5.5rem) 0; }
.altri .shell { display: grid; gap: clamp(1.3rem, 3vw, 1.9rem); }
.altri__titolo {
  margin: 0;
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); letter-spacing: -.025em;
}

/* --- la striscia dei progetti ------------------------------------------- */
.striscia {
  background: var(--cream);
  padding: clamp(4.5rem, 11vh, 7rem) 0;
  overflow: hidden;
}
.striscia__testa { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 4.5vw, 3rem); }
.striscia__testa .section-title { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.1rem); max-width: 14ch; }
.striscia__testa .section-title em { font-style: normal; color: var(--orange); }

/* il nastro esce dai margini della shell: e' il punto, deve sembrare
   che continui oltre lo schermo */
.striscia__nastro { position: relative; }
/* le due sfumature ai lati nascondono il taglio netto delle foto */
.striscia__nastro::before,
.striscia__nastro::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(40px, 8vw, 140px); pointer-events: none;
}
.striscia__nastro::before { left: 0;  background: linear-gradient(90deg, var(--cream), transparent); }
.striscia__nastro::after  { right: 0; background: linear-gradient(270deg, var(--cream), transparent); }

.striscia__pista {
  --passo: clamp(.6rem, 1.4vw, 1.1rem);
  display: flex; gap: var(--passo);
  width: max-content; margin: 0; padding: 0; list-style: none;
  animation: scorri 72s linear infinite;
  will-change: transform;
}
.striscia__pista:hover { animation-play-state: paused; }
.striscia__pista img {
  display: block;
  height: clamp(190px, 23vw, 300px); width: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-s);
}
/* meta' esatta: dodici foto piu' i dodici passi che le separano */
@keyframes scorri {
  to { transform: translate3d(calc(-50% - var(--passo) / 2), 0, 0); }
}

.striscia__coda { margin-top: clamp(2rem, 4.5vw, 3rem); }

@media (prefers-reduced-motion: reduce) {
  /* niente movimento automatico: il nastro si scorre a mano */
  .striscia__nastro { overflow-x: auto; }
  .striscia__pista { animation: none; }
}

/* --- il nome ------------------------------------------------------------ */
/* Fondo sabbia per non mettere due sezioni chiare identiche di fila: la
   pagina alterna scuro, sabbia, crema, scuro, crema, scuro. */
.nome {
  background: var(--sand);
  padding: clamp(4.5rem, 11vh, 7.5rem) 0;
  overflow: hidden;
}
.nome .shell { display: grid; gap: clamp(2.4rem, 6vw, 4rem); }
/* stessa griglia di "chi c'e' dietro": titolo a sinistra, testo a destra */
.nome__griglia {
  display: grid; gap: clamp(1.4rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, clamp(280px, 30vw, 420px)) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .nome__griglia { grid-template-columns: 1fr; } }
.nome__testa { display: grid; gap: 1.1rem; }
.nome h2 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.1rem);
  line-height: 1.08; letter-spacing: -.035em;
  /* il limite va sul titolo, non sul contenitore: ch si misura sul font
     dell'elemento, e sul contenitore varrebbe quello del corpo del testo */
  max-width: 13ch;
}
.nome h2 em { font-style: normal; color: var(--orange); }
/* contenitore di riferimento: la parola qui sotto si misura su questa
   colonna, non sulla finestra */
.nome__corpo { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); container-type: inline-size; }
.nome__corpo p:not(.nome__parola) {
  font-size: clamp(1rem, .96rem + .35vw, 1.16rem);
  line-height: 1.72; color: var(--muted); max-width: 62ch;
}

/* la parola, una volta sola e grande quanto la colonna: l'arancione mostra
   l'idea che sta dentro il nome, senza bisogno di spiegarlo */
.nome__parola {
  margin: 0;
  font-family: var(--f-display);
  /* in Anton l'avanzamento di "SIMIDEA" vale circa 3,1 volte il corpo:
     il corpo si ricava dalla larghezza della colonna invece di indovinarlo.
     La riga con clamp e' la riserva per i browser senza container query. */
  font-size: clamp(2.4rem, 13vw, 9rem);
  font-size: calc(100cqi / 2.95);
  margin-top: clamp(.6rem, 1.6vw, 1.2rem);
  line-height: .82; letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nome__parola em { font-style: normal; color: var(--orange); }

.chi { background: var(--cream); padding: clamp(4.5rem, 11vh, 8rem) 0; }
.chi__griglia {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.chi__testa { display: grid; gap: 1.1rem; }
.chi__testa .section-title { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.1rem); max-width: 12ch; }
.chi__corpo { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.chi__corpo p {
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  line-height: 1.68;
  color: var(--muted);
}
.chi__fatti {
  list-style: none; margin: clamp(.8rem, 2vw, 1.4rem) 0 0; padding: clamp(1.4rem, 3vw, 2rem) 0 0;
  border-top: 1px solid var(--hairline);
  display: grid; gap: clamp(1.2rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.chi__fatti li { display: grid; gap: .3rem; }
.chi__fatto {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.6rem);
  line-height: .9;
  color: var(--orange);
}
.chi__eti {
  font-family: var(--f-head); font-weight: 600;
  font-size: .8rem; line-height: 1.3;
  color: var(--muted);
}
@media (max-width: 1060px) {
  .chi__griglia { grid-template-columns: 1fr; }
  .chi__testa { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
}
@media (max-width: 520px) { .chi__fatti { grid-template-columns: 1fr; gap: 1.1rem; } }

/* --- i due libri */
.libri {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(5rem, 12vh, 8rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.libri__glow {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(44% 56% at 86% 8%,   rgb(255 153 0 / .26) 0%, rgb(255 153 0 / 0) 62%),
    radial-gradient(50% 52% at 10% 100%, rgb(255 122 0 / .18) 0%, rgb(255 122 0 / 0) 64%);
  animation: breathe 17s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.libri__testa { display: grid; gap: 1.1rem; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); max-width: 56ch; }
.libri h2 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.75rem, .9rem + 3.1vw, 3.8rem);
  line-height: 1.08; letter-spacing: -.035em;
}
.libri h2 em { font-style: normal; color: var(--orange); }
.libri__lead {
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  line-height: 1.66; color: var(--muted);
}
.libri__coppia {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
@media (max-width: 760px) { .libri__coppia { grid-template-columns: 1fr; } }

/* Vetro, come i patti della pagina servizi: l'alone dietro gli da' qualcosa
   da sfocare. NIENTE filter sulla card o sui suoi antenati. */
.libro {
  display: grid; align-content: end; gap: .7rem;
  color: inherit; text-decoration: none;
  min-height: clamp(210px, 24vw, 280px);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--radius);
  background: rgb(255 255 255 / .055);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .2),
    inset 0 0 0 1px rgb(255 255 255 / .1),
    0 22px 50px -36px rgb(0 0 0 / .8);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .libro { background: rgb(255 255 255 / .09); }
}
.libro:hover {
  transform: translateY(-6px);
  background: rgb(255 255 255 / .085);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    inset 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent),
    0 34px 60px -34px rgb(0 0 0 / .9);
}
.libro__eti {
  font-family: var(--f-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange);
}
.libro h3 {
  font-family: var(--f-display);
  /* ridotto perche' "Non restare a guardare" stia su una riga sola come
     "per Sempre": due titoli su una riga occupano la stessa altezza */
  font-size: clamp(1.45rem, .85rem + 1.85vw, 2.5rem);
  line-height: .96; letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.libro__sotto {
  margin: -.2rem 0 0;
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(.92rem, .9rem + .2vw, 1.02rem);
  line-height: 1.35; letter-spacing: -.01em;
  color: var(--cream);
}
.libro__testo {
  margin: .35rem 0 0;
  font-size: .95rem; line-height: 1.6; color: var(--muted);
}
.libro__vai {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .55rem;
  font-family: var(--f-head); font-weight: 700;
  font-size: .82rem; letter-spacing: -.01em;
  color: var(--orange);
}
.libro__vai .ico { width: 1em; height: 1em; transition: transform .45s var(--ease); }
.libro:hover .libro__vai .ico, .libro:focus-visible .libro__vai .ico { transform: translateX(4px); }


/* ==========================================================================
   26. POPUP PROMO  (costruito dal JS, vedi main.js)
   Riprende il materiale che il cliente pubblica sui social: pillole in vetro
   su fondo nero, testo arancione acceso, e la pillola piu' conveniente che
   brilla di piu'.
   ========================================================================== */
.promo,
.modulo {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  padding-top: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-bottom, 0px));
  background: rgb(5 4 3 / .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.promo.is-aperto,
.modulo.is-aperto { opacity: 1; }

.promo__riquadro,
.modulo__riquadro {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(1.8rem, 5vw, 2.8rem);
  border-radius: clamp(20px, 3vw, 30px);
  background: #0a0908;
  color: var(--cream);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .1),
    0 40px 90px -40px rgb(0 0 0 / .9);
  transform: translateY(18px) scale(.97);
  transition: transform .5s var(--ease);
  isolation: isolate;
}
.promo.is-aperto .promo__riquadro,
.modulo.is-aperto .modulo__riquadro { transform: none; }
/* l'alone caldo in basso, come sul materiale social */
.promo__riquadro::before,
.modulo__riquadro::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 52% at 62% 112%, rgb(255 153 0 / .42) 0%, rgb(255 153 0 / 0) 62%),
    radial-gradient(56% 44% at 14% 104%, rgb(255 122 0 / .24) 0%, rgb(255 122 0 / 0) 64%);
}

.promo__chiudi,
.modulo__chiudi {
  position: absolute; top: .9rem; right: .9rem;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .07);
  color: var(--cream);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.promo__chiudi:hover,
.modulo__chiudi:hover { background: var(--orange); color: var(--ink); }
.promo__chiudi:focus-visible,
.modulo__chiudi:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.promo__testa {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  margin-bottom: clamp(1.3rem, 3.5vw, 1.9rem);
  /* niente padding a destra: la X sta in un angolo suo, il testo e' centrato */
  padding-inline: 2.6rem;
}
.promo__titolo {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 1.2rem + 4.4vw, 3.6rem);
  line-height: .92; letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgb(255 255 255 / .22);
}
.promo__periodo {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(.9rem, .85rem + .35vw, 1.05rem);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--orange);
  text-shadow: 0 0 18px rgb(255 153 0 / .55);
}

/* padding e list-style azzerati: il rientro predefinito del browser sulle ul
   spostava le pillole di 20px rispetto al testo centrato sopra */
.promo__scaglioni {
  display: grid; gap: .65rem; margin: 0 0 clamp(1.2rem, 3vw, 1.6rem);
  padding: 0; list-style: none;
}
/* la pillola: vetro sul nero, con il testo che si accende.
   --f regola quanto e' "accesa": sale con lo sconto, come sul materiale. */
.promo__riga {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: clamp(.85rem, 2.4vw, 1.15rem) 1rem;
  border-radius: 999px;
  /* Vetro vero: l'alone del riquadro si vede attraverso, e la pillola piu'
     conveniente e' anche la piu' calda, come sul materiale social.
     Contrasto del testo misurato dentro la pillola (non nel suo riquadro, che
     essendo a bordi tondi include gli angoli di fondo): 14,9-15,8:1. */
  background: rgb(255 255 255 / calc(.04 + var(--f) * .06));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / calc(.16 + var(--f) * .3)),
    inset 0 0 0 1px color-mix(in srgb, var(--orange) calc(10% + var(--f) * 38%), rgb(255 255 255 / .1));
  font-family: var(--f-display);
  font-size: clamp(1.05rem, .85rem + 1.1vw, 1.5rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  /* piu' sale lo sconto, piu' il testo va verso il bianco caldo: cosi' la
     pillola piu' conveniente e' anche la piu' leggibile, non la meno */
  color: color-mix(in srgb, #ffd9a0 calc(var(--f) * 100%), var(--orange-lit));
  text-shadow: 0 0 calc(10px + var(--f) * 20px) rgb(255 153 0 / calc(.45 + var(--f) * .4));
}
.promo__stella { color: var(--orange); font-size: .8em; }
.promo__freccia { color: color-mix(in srgb, var(--cream) 55%, transparent); text-shadow: none; }
.promo__sconto { color: #fff0d6; }

.promo__azioni { display: flex; justify-content: center; margin-bottom: .2rem; }
.promo__azioni .btn { justify-content: center; }


@media (prefers-reduced-motion: reduce) {
  .promo, .promo__riquadro { transition: none; }
  .promo__riquadro { transform: none; }
}

/* ==========================================================================
   27. ANTEPRIMA — blocco temporaneo
   Nasconde tutto dalla sezione "Progetti recenti" in giù, senza rimuovere
   nulla dal markup. Si disattiva togliendo data-preview dal <body>.
   ========================================================================== */
body[data-preview] #progetti,
body[data-preview] #foto,
body[data-preview] #studio,
body[data-preview] #contatti,
body[data-preview] .footer { display: none; }

/* la sezione Servizi chiude la pagina: un po' d'aria sotto l'ultima card */
body[data-preview] .stack { padding-bottom: clamp(5rem, 12vh, 9rem); }

/* --- modulo contatti ----------------------------------------------------- */
/* Vive dentro la stessa sovrapposizione del popup promo: stesso riquadro,
   stesso alone, stesso pulsante di chiusura. Lo costruisce il JS al primo
   clic, quindi nelle quattro pagine c'e' solo il bottone. */
.modulo__riquadro { width: min(540px, 100%); }
.modulo__testa { display: grid; gap: .45rem; margin-bottom: clamp(1.3rem, 3.5vw, 1.8rem); padding-right: 2.6rem; }
.modulo__titolo {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.08; letter-spacing: -.03em;
}
.modulo__titolo em { font-style: normal; color: var(--orange); }
.modulo__lead { font-size: .96rem; line-height: 1.6; color: color-mix(in srgb, var(--cream) 64%, transparent); }

.modulo__campi {
  display: grid; gap: .85rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.1rem;
}
.campo--largo { grid-column: 1 / -1; }
@media (max-width: 520px) { .modulo__campi { grid-template-columns: 1fr; } }

.campo { display: grid; gap: .4rem; min-width: 0; }
.campo label {
  font-family: var(--f-head); font-weight: 700;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}
.campo input {
  width: 100%; padding: .85rem 1rem;
  border: 0; border-radius: 12px;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13);
  color: var(--cream);
  font-family: var(--f-body); font-size: .98rem;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.campo input::placeholder { color: rgb(249 249 249 / .34); }
.campo input:focus {
  outline: none;
  background: rgb(255 255 255 / .09);
  box-shadow: inset 0 0 0 1.5px var(--orange);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff9f7a; }

.campo textarea {
  width: 100%; padding: .85rem 1rem;
  border: 0; border-radius: 12px;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13);
  color: var(--cream);
  font-family: var(--f-body); font-size: .98rem; line-height: 1.55;
  resize: vertical; min-height: 5.2em;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.campo textarea::placeholder { color: rgb(249 249 249 / .34); }
.campo textarea:focus {
  outline: none;
  background: rgb(255 255 255 / .09);
  box-shadow: inset 0 0 0 1.5px var(--orange);
}
.campo__facolt {
  font-weight: 500; letter-spacing: .06em;
  color: color-mix(in srgb, var(--cream) 36%, transparent);
}

/* la trappola non deve vedersi ne' ricevere il focus */
.modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.modulo__invia { width: 100%; justify-content: center; }
.modulo__msg { margin: .85rem 0 0; min-height: 1.2em; font-size: .88rem; line-height: 1.45; }
.modulo__msg[data-stato="ok"]     { color: #7fdca4; }
.modulo__msg[data-stato="errore"] { color: #ff9f7a; }
.modulo__nota {
  margin: .9rem 0 0;
  font-size: .76rem; line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 48%, transparent);
}
.modulo__nota a { color: inherit; text-decoration: underline; }
.modulo__nota a:hover { color: var(--orange); }

/* a invio riuscito restano solo il titolo e il messaggio */
.modulo[data-fatto="true"] .modulo__campi,
.modulo[data-fatto="true"] .modulo__invia,
.modulo[data-fatto="true"] .modulo__nota,
.modulo[data-fatto="true"] .modulo__lead { display: none; }