/* Montserrat ospitato sul sito (SIL Open Font License): nessuna richiesta a Google. */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/montserrat-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/montserrat-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/montserrat-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/montserrat-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Nuvion Web Studio — foglio di stile unico
   Palette, tipografia e composizione derivano dall'anteprima "Nastro orbitale".
   1. Basi e token          6. Spotlight
   2. Animazioni d'ingresso 7. Identity
   3. Header, menu, footer  8. Servizi e processo
   4. Onde tra le sezioni   9. Progetti: filtri, schede, dettaglio
   5. Showcase e tessere   10. Moduli, FAQ, testi legali, cookie
   ========================================================================== */

/* ------------------------------------------------------- 1. basi e token -- */
:root {
  --coral: #f47872;
  --coral-deep: #c9483f;
  --ink: #1d1d1f;
  --ink-soft: #26262a;
  --white: #fff;
  --muted: #d9d9dc;
  --line: #ffffff26;
  --wave-h: 150px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Ingressi: distanza percorsa, durate e curva.
     --enter-x scende sui monitor stretti perche' l'elemento deve arrivare dal
     bordo dello schermo, non da molto oltre.
     La dissolvenza e' piu' breve del movimento: il testo diventa leggibile
     subito mentre lo scorrimento in posizione prosegue con calma.
     --enter-ease ha una discesa lunga e visibile: allungare la curva usata per
     gli hover darebbe uno scatto iniziale seguito da uno strascico immobile. */
  --enter-x: 150px;
  --enter-y: 46px;
  --enter-dur: 1.7s;
  --enter-fade: 1s;
  --boot-dur: 2.1s;
  --boot-fade: 1.2s;
  --enter-ease: cubic-bezier(.38, .4, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--white);
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit }
img, svg { display: block; max-width: 100% }
button { font: inherit; color: inherit }
button, a { -webkit-tap-highlight-color: transparent }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :where(a, button):focus-visible, .footer :where(a, button):focus-visible,
.floatbar :where(a, button):focus-visible, .drawer :where(a, button):focus-visible { outline-color: #18191c }
.container { width: min(1200px, calc(100% - 72px)); margin-inline: auto }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 90; background: var(--ink); color: #fff; padding: 12px 20px;
  font: 700 12px/1 Montserrat, Arial, sans-serif; text-transform: uppercase;
  letter-spacing: .12em; text-decoration: none; border-radius: 0 0 8px 8px;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0) }

/* --------------------------------------------- 2. animazioni d'ingresso -- */
/* Gli stati iniziali esistono solo se il JS è attivo: senza JS tutto è visibile.
   Due innesti, stesse regole di movimento:
     [data-enter]  parte al caricamento della pagina (hero)
     [data-reveal] parte quando l'elemento entra nello schermo
   Gli elementi dello stesso gruppo non hanno ritardi: entrano in sincrono.
   Le traslazioni laterali vengono ritagliate da body{overflow-x:clip}: nessuna
   barra di scorrimento orizzontale mentre l'elemento e' ancora fuori campo. */
.js [data-reveal],
.js [data-enter] {
  opacity: 0;
  transition: opacity var(--enter-fade) var(--enter-ease), transform var(--enter-dur) var(--enter-ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-enter] { --enter-dur: var(--boot-dur); --enter-fade: var(--boot-fade) }

.js [data-reveal="up"],
.js [data-enter="up"] { transform: translate3d(0, var(--enter-y), 0) }
.js [data-reveal="down"],
.js [data-enter="down"] { transform: translate3d(0, calc(var(--enter-y) * -1), 0) }
.js [data-reveal="left"],
.js [data-enter="left"] { transform: translate3d(calc(var(--enter-x) * -1), 0, 0) }
.js [data-reveal="right"],
.js [data-enter="right"] { transform: translate3d(var(--enter-x), 0, 0) }
.js [data-reveal="zoom"],
.js [data-enter="zoom"] { transform: scale(.955) }

.js [data-reveal].is-in,
.js.is-ready [data-enter] { opacity: 1; transform: none }

/* -------------------------------------------- 3. header, menu e footer -- */
.hero {
  position: relative; isolation: isolate;
  min-height: 415px; padding-bottom: var(--wave-h);
  background: var(--coral); color: #171719;
  display: grid; place-items: center;
}
.hero--short { min-height: 330px }
.hero--services { min-height: 400px }
.hero-inner {
  width: min(1200px, calc(100% - 72px));
  display: grid; grid-template-columns: 1fr 1.55fr 1fr;
  align-items: center; gap: 20px; padding: 45px 0 10px;
}
.hero-title {
  grid-column: 2; text-align: center; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 36px); letter-spacing: .24em; line-height: 1.42;
  font-weight: 800; margin: 0; white-space: nowrap;
}
.hero-title--wrap { white-space: normal; letter-spacing: .18em }
/* Una riga del titolo per elemento: sostituisce i <br> e permette alle righe
   di entrare una dopo l'altra. L'impaginazione resta quella di prima. */
.hero-line { display: block }
.hero-lede {
  grid-column: 2; text-align: center; margin: 18px auto 0; max-width: 620px;
  font-size: 15px; line-height: 1.7; color: #2b1f1e;
}
.logo-mark { display: block; width: 120px; height: 120px; line-height: 0; text-decoration: none }
.logo-mark img { width: 100%; height: 100%; display: block }

.nav {
  grid-column: 3; justify-self: end; display: flex; gap: 22px; align-items: center;
  text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.nav a {
  text-decoration: none; white-space: nowrap; padding: 4px 0;
  color: #fff;
  border-bottom: 2px solid transparent;
  /* La scala non sposta gli altri link: transform non rientra nel flusso. */
  transition: color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover, .nav a:focus-visible {
  color: #171719;
  border-bottom-color: currentColor;
  transform: scale(1.09);
}
.nav a[aria-current="page"] { border-bottom-color: currentColor }
.nav-toggle {
  display: none; grid-column: 3; justify-self: end;
  align-items: center; gap: 10px; background: #18191c; color: #fff;
  border: 0; border-radius: 100px; padding: 10px 16px; cursor: pointer;
  font: 700 11px/1 Montserrat, Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em;
}
.nav-toggle-bars { display: grid; gap: 3px; width: 16px }
.nav-toggle-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px }

/* Barra compatta che appare scorrendo: la composizione dell'hero resta intatta. */
.floatbar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 10px max(18px, calc(50% - 600px));
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: #f47872f2; color: #171719;
  box-shadow: 0 8px 24px #0000002e;
  transform: translate3d(0, -110%, 0);
  /* visibility toglie la barra dall'ordine di tabulazione finche' e' nascosta */
  visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.floatbar.is-visible {
  transform: none;
  visibility: visible;
  transition: transform .4s var(--ease), visibility 0s;
}
.floatbar .logo-mark { width: 40px; height: 40px }
.floatbar .nav { grid-column: auto; margin-left: auto }
.floatbar .nav-toggle { grid-column: auto; margin-left: auto }

.drawer { position: fixed; inset: 0; z-index: 80; display: none }
.drawer.is-open { display: block }
.drawer-scrim { position: absolute; inset: 0; background: #0f0f10cc; border: 0; width: 100%; cursor: pointer }
.drawer-panel {
  position: absolute; inset: 0 0 auto; background: var(--coral); color: #171719;
  padding: 22px 24px calc(34px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
  box-shadow: 0 20px 40px #00000040;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px }
.drawer-close {
  background: #18191c; color: #fff; border: 0; border-radius: 100px;
  padding: 10px 16px; cursor: pointer;
  font: 700 11px/1 Montserrat, Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em;
}
.drawer-nav { display: grid; gap: 2px; margin-top: 24px }
.drawer-nav a {
  text-decoration: none; text-transform: uppercase; font-weight: 800;
  font-size: clamp(22px, 7vw, 30px); letter-spacing: -.02em;
  padding: 12px 0; border-bottom: 1px solid #18191c26;
}
.drawer-nav a[aria-current="page"] { color: #fff }
.drawer-foot { margin-top: 26px; font-size: 13px; line-height: 1.8 }
.drawer-foot a { font-weight: 700 }

.footer {
  position: relative; background: var(--coral); color: #171719;
  /* L'onda sta SOPRA il footer (top negativo), quindi il padding non deve
     riservarne l'altezza. Al centro il corallo dell'onda comincia gia' a
     0,76 x --wave-h sopra il bordo: qui basta il respiro che manca. */
  padding: calc(var(--wave-h) * .24) 20px 48px; text-align: center;
}
.footer-brand { display: grid; justify-items: center; gap: 6px }
.footer .logo-mark { width: 104px; height: 104px; margin: 0 auto }
.footer-brand strong { font-size: 27px; text-transform: uppercase; letter-spacing: -.06em }
.footer-brand span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #3a201d }
.footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
  width: min(1000px, 100%); margin: 40px auto 0; text-align: left;
}
.footer-cols h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .22em; margin: 0 0 14px }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px }
.footer-cols a { text-decoration: none; border-bottom: 1px solid transparent }
.footer-cols a:hover { border-bottom-color: currentColor }
.footer-legal {
  margin: 38px auto 0; width: min(1000px, 100%); padding-top: 20px;
  border-top: 1px solid #18191c40; font-size: 12px; line-height: 1.8;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; text-align: left;
}
.footer-legal p { margin: 0 }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 8px 16px }
.footer-legal a { text-decoration: none; border-bottom: 1px solid #18191c66 }
.footer-legal a:hover { border-bottom-color: #171719 }

/* --------------------------------------------- 4. onde tra le sezioni --- */
/* Onde più ampie e profonde della prima anteprima, con la stessa meccanica. */
.wave { position: absolute; left: 0; width: 100%; height: var(--wave-h); pointer-events: none; z-index: 2 }
.wave svg { display: block; width: 100%; height: 100% }
.hero .wave { bottom: -1px }
.hero .wave path { fill: var(--ink) }
.wave-top-ink { top: 0 }
.wave-top-ink path { fill: var(--ink) }
.wave-rise-ink { top: calc(1px - var(--wave-h)) }
.wave-rise-ink path { fill: var(--ink) }
.wave-rise-coral { top: calc(1px - var(--wave-h)) }
.wave-rise-coral path { fill: var(--coral) }

/* ------------------------------------------ 5. showcase e tessere ------- */
.section-title {
  font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; letter-spacing: .27em;
  text-transform: uppercase; line-height: 1.3; margin: 0;
}
.section-title::after { content: ''; display: block; width: 24px; height: 2px; background: var(--coral); margin-top: 17px }
.section-title--center { text-align: center }
.section-title--center::after { margin-inline: auto }
.section-lede {
  max-width: 640px; margin: -22px auto 42px; text-align: center;
  color: #cfd0d2; font-size: 16px; line-height: 1.7;
}
.section-lede--left { margin-inline: 0; text-align: left }

.showcase { position: relative; background: var(--ink); padding: 108px 0 calc(var(--wave-h) + 72px) }
.showcase .section-title { margin-bottom: 44px }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0 }

.tile {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile > .tile-visual { display: grid; place-items: center; width: 100%; height: 100% }
.logo-tile--onda > .tile-visual { align-content: center; gap: 6px }
.logo-tile--kono > .tile-visual { align-content: center; gap: 15px }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease) }
.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 34px #00000045 }
.tile:hover img { transform: scale(1.04) }
.tile:focus-visible { outline-offset: 2px }
.tile-caption {
  position: absolute; inset: auto 0 0 0; z-index: 3; display: grid; gap: 2px;
  padding: 26px 13px 12px; color: #fff; text-align: left;
  background: linear-gradient(transparent, #0b0b0ce6);
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tile-caption strong { font-size: 13px; font-weight: 800; letter-spacing: -.01em }
.tile-caption span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #ffffffcc }
.tile:hover .tile-caption, .tile:focus-visible .tile-caption, .tile:focus-within .tile-caption { opacity: 1; transform: none }
.gallery--index .tile-caption { opacity: 1; transform: none }
.tile-label {
  position: absolute; z-index: 3; top: auto; bottom: 10px; left: 10px;
  padding: 4px 7px; border-radius: 3px; background: #1d1d1fad; color: #fff;
  font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tile-label { background: #f3746dee; color: #18191c }
.gallery--index .tile-label, .tile:hover .tile-label { bottom: auto; top: 10px }

.tile-pink { background: #f7dce0; color: #744b51 }
.tile-mint { background: #d3fae9; color: #1e5047 }
.tile-cyan { background: #a9f5f4; color: #163e4f }
.tile-gray { background: #d4d5d5; color: #273138 }
.tile-cream { background: #f8ece4; color: #4c3737 }
.tile-deep { background: #16384a; color: #e6e6cf }
.tile-ivory { background: #fffef2; color: #282a27 }
.tile-peach { background: #ffad9a; color: #45342e }
.tile-ice { background: #edfffa; color: #476e78 }
.tile-rose { background: #f4c3c4; color: #6d2529 }
.tile-aqua { background: #b9e4e4; color: #2c3f40 }
.tile-shell { background: #e7f1f1; color: #1c4a3c }
.tile-slate { background: #0f1a24; color: #cfe6e3 }

.section-action { text-align: center; margin-top: 52px }
.coral-button {
  display: inline-flex; gap: 18px; align-items: center; justify-content: center;
  text-decoration: none; border: 0; cursor: pointer;
  background: var(--coral); color: #171719; padding: 14px 24px;
  text-transform: uppercase; letter-spacing: .04em;
  font: 700 12px/1.2 Montserrat, Arial, sans-serif;
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.coral-button:hover { filter: brightness(1.07); transform: translateY(-2px) }
.coral-button span { font-size: 20px; line-height: .7 }
.ghost-button {
  display: inline-flex; gap: 14px; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; background: transparent; color: #fff;
  border: 1px solid #ffffff59; padding: 13px 22px;
  text-transform: uppercase; letter-spacing: .04em;
  font: 700 12px/1.2 Montserrat, Arial, sans-serif;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ghost-button:hover { border-color: #fff; background: #ffffff14 }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.button-row--center { justify-content: center }

/* Composizioni delle tessere riprese dall'anteprima. */
.desktop-display {
  width: 77%; aspect-ratio: 1.58; position: relative; background: #fff;
  border: 6px solid #f7f7f7; border-bottom-width: 13px; border-radius: 4px;
  box-shadow: 0 14px 30px #3d303055; transform: translateY(-9%);
}
.desktop-display::after {
  content: ''; position: absolute; top: 100%; left: 39%; width: 22%; height: 23%;
  background: linear-gradient(#bfc0c1, #e9eaeb); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
}
.desktop-display img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.web-collage { position: relative; width: 82%; height: 74% }
.web-collage-back, .web-collage-front { position: absolute; background: #fff; padding: 5px; box-shadow: 0 15px 20px #15384345 }
.web-collage-back { width: 75%; height: 54%; left: 1%; top: 3%; transform: rotate(-4deg) }
.web-collage-front { width: 82%; height: 65%; right: 0; bottom: 2%; transform: rotate(2deg) }
.web-collage img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.web-collage--store .web-collage-back { transform: rotate(3deg) }
.web-collage--store .web-collage-front { transform: rotate(-2deg) }
.device-pair { position: relative; width: 84%; height: 71% }
.device-laptop, .device-phone { position: absolute; background: #f7f7f7; box-shadow: 0 14px 22px #3f272744; overflow: hidden }
.device-laptop { left: 0; top: 18%; width: 80%; height: 60%; border: 5px solid #42464a; border-radius: 6px }
.device-phone { right: 0; top: 11%; width: 22%; height: 74%; border: 5px solid #282c30; border-radius: 10px }
.device-pair img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.device-phone img { object-position: left top }

.logo-tile .brand-wordmark { text-align: center; line-height: 1; position: relative; z-index: 1 }
.logo-tile .brand-wordmark small {
  display: block; margin-top: 13px;
  font: 600 clamp(7px, .72vw, 10px)/1.3 Montserrat, Arial, sans-serif; letter-spacing: .22em;
}
.logo-tile--orla { background: #cef8e6; color: #40594f }
.logo-tile--orla .brand-wordmark { font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 4.4vw, 62px); font-weight: 400; letter-spacing: .13em }
.logo-tile--onda { background: #ecfcf9; color: #3d7880 }
.logo-tile--onda .brand-wordmark { font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3.7vw, 50px); font-weight: 400; letter-spacing: -.05em }
.onda-emblem { width: 44px; height: 44px; border: 3px solid currentColor; border-radius: 50%; position: relative; overflow: hidden; margin: 0 auto }
.onda-emblem::after { content: ''; position: absolute; left: -5px; right: -5px; bottom: -7px; height: 25px; border: 3px solid currentColor; border-radius: 50% 50% 0 0 }
.logo-tile--colline { background: #f3cece; color: #692d3b }
.logo-tile--colline .brand-wordmark { font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 3.3vw, 47px); font-weight: 400; letter-spacing: .13em }
.logo-tile--kono { background: #ebfffa; color: #244d4c }
.logo-tile--kono .brand-wordmark { font-family: Montserrat, Arial, sans-serif; font-size: clamp(27px, 3.2vw, 45px); font-weight: 800; letter-spacing: -.07em }
.kono-symbol { width: 45px; height: 45px; border-radius: 50%; background: #61b5aa; position: relative; margin: 0 auto }
.kono-symbol::after {
  content: ''; position: absolute; top: 28px; left: 11px; width: 24px; height: 35px;
  background: #d8af84; clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ------------------------------------------------------- 6. spotlight --- */
.spotlight {
  position: relative; min-height: 504px; display: flex; align-items: center;
  margin-top: calc(1px - var(--wave-h));
  padding: calc(var(--wave-h) + 56px) 0 calc(var(--wave-h) + 44px);
  background: linear-gradient(#00121ebd, #00121ebd), url('foliage.webp') center/cover no-repeat;
}
.spotlight-inner { display: grid; grid-template-columns: 29% 71%; gap: 28px; align-items: center }
.spotlight-copy .section-title { margin-bottom: 24px }
.spotlight-copy p { font-size: 16px; line-height: 1.75; max-width: 320px; margin: 0 0 16px; color: #e6e8e8 }
.spotlight-kicker {
  font-size: 11px !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--coral) !important; margin-bottom: 14px !important;
}
.spotlight-copy .service-tags { padding-top: 4px; margin-bottom: 26px; color: #d7dada }
.spotlight-copy .service-tags span { font-size: 10px; padding: 5px 9px }
.spotlight-images figure { margin: 0 }
.spotlight-copy .coral-button { margin-top: 8px }
.spotlight-images { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.spotlight-images a, .spotlight-images img { border-radius: 14px; display: block }
/* height:auto e' necessario: l'attributo height dell'<img> vincerebbe
   sull'aspect-ratio, allungando le immagini a tutta la loro altezza. */
.spotlight-images img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover }
.spotlight-images a { overflow: hidden; transition: transform .35s var(--ease) }
.spotlight-images a:hover { transform: translateY(-4px) }
.spotlight-copy .button-row { margin-top: 8px }
.spotlight-images--grid { grid-template-columns: repeat(2, 1fr); max-width: 540px; width: 100%; justify-self: center }
.spotlight-copy .button-row .coral-button { margin-top: 0 }
.spotlight-quote {
  margin: 4px 0 20px; padding-left: 14px; border-left: 2px solid var(--coral); max-width: 320px;
  font-size: 15px; line-height: 1.6; font-style: italic; color: #fff;
}
.spotlight-quote cite { display: block; margin-top: 6px; font-size: 10px; font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #9c9da0 }

/* -------------------------------------------------------- 7. identity --- */
.identity { position: relative; background: var(--ink); padding: 138px 0 calc(var(--wave-h) + 72px) }
.identity-inner { display: grid; grid-template-columns: 44% 56%; gap: 48px; align-items: center }
.identity-art { position: relative; width: min(430px, 92%); height: 350px }
.identity-art::before { content: ''; position: absolute; inset: -33px 35px 30px 0; background: var(--coral); border-radius: 14px 0 0 0 }
.identity-panel {
  position: absolute; inset: 0 0 0 32px; overflow: hidden;
  background: linear-gradient(145deg, #29292d, #141416);
  display: grid; place-items: center; border-radius: 0 0 14px 0;
}
.identity-panel img { position: relative; width: 88%; height: auto; max-height: 80%; object-fit: contain }
.identity-copy .section-title { margin-bottom: 26px }
.identity-copy h3 { font-size: 17px; color: var(--coral); text-transform: uppercase; margin: 0 0 18px; letter-spacing: .04em }
.identity-copy p { font-size: 16px; line-height: 1.85; color: #e5e5e7; margin: 0 0 20px }
.identity-copy .fact-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: #dcdcde }
.identity-copy .fact-list li { padding-left: 20px; position: relative }
.identity-copy .fact-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--coral) }

/* ------------------------------------------ 8. servizi e processo ------- */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px }
.service-card {
  min-height: 330px; padding: 30px; border-radius: 14px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; color: #1e2326;
}
.service-num { font-size: 13px; letter-spacing: .18em; font-weight: 800 }
.service-card h3 { font-size: 27px; line-height: 1.15; letter-spacing: -.04em; margin: 30px 0 14px }
.service-card p { font-size: 16px; line-height: 1.55; margin: 0 0 16px }
.service-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; font-weight: 600 }
.service-card ul li { padding-left: 17px; position: relative }
.service-card ul li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: currentColor; opacity: .7 }
.service-tags { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 7px }
.service-tags span { font-size: 11px; font-weight: 700; border: 1px solid currentColor; border-radius: 100px; padding: 6px 10px }
.service-for { margin-top: 18px; padding-top: 16px; border-top: 1px solid currentColor; opacity: .92 }
.service-for strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px }
.service-for ul { font-weight: 500; font-size: 13px }

.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.process-step { background: #ffffffef; color: #202323; border-radius: 13px; min-height: 190px; padding: 22px }
.process-step span { font-size: 12px; font-weight: 800; color: var(--coral-deep); letter-spacing: .14em }
.process-step h3 { font-size: 18px; margin: 15px 0 10px }
.process-step p { font-size: 13px; line-height: 1.6; margin: 0 }
.services-spotlight { min-height: 400px }
.services-spotlight .spotlight-inner { display: block }
.services-spotlight .section-title { margin-bottom: 18px }
.services-spotlight .section-lede { margin: 0 0 34px; text-align: left; max-width: 620px }

.reason-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.reason-card { border: 1px solid var(--line); border-radius: 13px; padding: 26px; background: #ffffff09 }
.reason-card h3 { font-size: 17px; margin: 0 0 12px; letter-spacing: -.01em }
.reason-card p { margin: 0; font-size: 15px; line-height: 1.65; color: #cfd0d2 }

/* ------------------- 9. progetti: filtri, schede, pagina di dettaglio -- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 0 0 30px; padding: 0; list-style: none }
.filter {
  background: transparent; border: 1px solid var(--line); color: #e8e8ea; cursor: pointer;
  border-radius: 100px; padding: 10px 17px;
  font: 700 11px/1 Montserrat, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filter:hover { border-color: #fff }
.filter[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #171719 }
.filter-count { display: block; text-align: center; margin: 0 0 30px; font-size: 13px; color: #a9aaad }
.gallery .tile.is-hidden { display: none }

dialog.project-dialog {
  width: min(1120px, calc(100% - 28px)); max-height: min(88vh, 900px); padding: 0; border: 0;
  border-radius: 16px; background: #1f1f23; color: #fff; overflow: auto;
  box-shadow: 0 30px 80px #000000a6;
}
dialog.project-dialog::backdrop { background: #08080ad9 }
.dialog-head {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px 18px; background: #1f1f23f2; border-bottom: 1px solid var(--line);
}
.dialog-head h2 { margin: 0; font-size: clamp(20px, 3vw, 27px); letter-spacing: -.02em }
.dialog-head p { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #b7b8bb }
.dialog-close {
  margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #ffffff12; color: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.dialog-close:hover { background: #ffffff24 }
.dialog-body { padding: 22px 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start }
.dialog-media { position: sticky; top: 0 }
.dialog-cover { display: block; border-radius: 12px; overflow: hidden }
.dialog-cover img { display: block; width: 100%; height: auto; background: #2a2a2f; transition: transform .5s var(--ease) }
.dialog-cover:hover img { transform: scale(1.03) }
.dialog-text { display: grid; gap: 22px; min-width: 0 }
.dialog-art { border-radius: 10px; padding: 26px; display: grid; place-items: center }
.dialog-body h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .16em; color: var(--coral) }
.dialog-body p { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: #e3e3e5 }
.dialog-body ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.6; color: #e3e3e5 }
.dialog-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; border-top: 1px solid var(--line); padding-top: 20px }
.dialog-meta div span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: #9c9da0; margin-bottom: 5px }
.dialog-meta div strong { font-size: 14px; font-weight: 700 }
.dialog-note { font-size: 13px; color: #b9babd; border-left: 2px solid var(--coral); padding-left: 14px; margin: 0 }

.badge {
  display: inline-block; padding: 5px 10px; border-radius: 100px;
  font: 700 10px/1 Montserrat, Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em;
}
.badge { background: var(--coral); color: #18191c }

.project-page { position: relative; background: var(--ink); padding: 100px 0 calc(var(--wave-h) + 72px) }
.project-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 54px; align-items: start }
.project-figures { display: grid; gap: 16px }
.project-figures figure { margin: 0 }
.project-figures img { width: 100%; height: auto; border-radius: 14px; background: #2a2a2f }
.project-figures figcaption { margin-top: 9px; font-size: 12px; color: #a9aaad }
.project-art { border-radius: 14px; padding: 46px 26px; display: grid; place-items: center; min-height: 300px }
.project-aside h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--coral); margin: 0 0 12px }
.project-aside p { font-size: 15px; line-height: 1.75; color: #dfdfe1; margin: 0 0 24px }
.project-aside ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: #dfdfe1 }
.project-aside ul li { padding-left: 19px; position: relative }
.project-aside ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--coral) }
.project-facts { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 26px }
.project-facts div span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: #9c9da0; margin-bottom: 4px }
.project-facts div strong { font-size: 14px }
.palette-row { display: flex; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none }
.palette-row li { width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--line) }
.project-nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-top: 60px; border-top: 1px solid var(--line); padding-top: 26px }
.project-nav a { text-decoration: none; font: 700 12px/1 Montserrat, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid transparent; padding-bottom: 3px }
.project-nav a:hover { border-bottom-color: currentColor }

/* Racconto esteso di un progetto (es. Sametics). */
.project-story { margin-top: 90px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 90px }
.project-quote { margin: 0 auto; max-width: 860px; text-align: center }
.project-quote p { margin: 0; font-size: clamp(22px, 3vw, 36px); line-height: 1.35; font-style: italic; color: #fff }
.project-quote cite { display: block; margin-top: 18px; font-size: 11px; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--coral) }
.project-stats { list-style: none; margin: 0; padding: 26px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.project-stats li { text-align: center }
.project-stats strong { display: block; font: 800 clamp(24px, 3vw, 38px)/1.1 Montserrat, Arial, sans-serif; color: #fff; margin-bottom: 6px }
.project-stats span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #a9aaad }
.story-section { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 54px; align-items: start }
.story-copy { position: sticky; top: 110px }
.story-copy h3 { margin: 0 0 16px; font: 800 clamp(22px, 2.6vw, 32px)/1.15 Montserrat, Arial, sans-serif; color: #fff }
.story-copy p:not(.spotlight-kicker) { margin: 0; font-size: 15px; line-height: 1.75; color: #dfdfe1 }
.story-images { display: grid; gap: 14px }
.story-images figure { margin: 0 }
.story-images img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 14px; background: #2a2a2f }
.story-images figcaption { margin-top: 9px; font-size: 12px; color: #a9aaad }
.story-section--mosaic .story-images { grid-template-columns: repeat(2, 1fr) }
.story-section--mosaic .story-images figure:first-child { grid-column: 1 / -1 }
.story-section--mosaic .story-images figure:not(:first-child) img { aspect-ratio: 3 / 4 }
.story-section--split .story-images { grid-template-columns: repeat(2, 1fr) }
.story-section--split .story-images img { aspect-ratio: 2 / 3 }
/* Sezioni a tutta larghezza: testo sopra, griglia sotto. */
.story-section--screens, .story-section--phones, .story-section--products, .story-section--models { grid-template-columns: minmax(0, 1fr); gap: 30px }
.story-section--screens .story-copy, .story-section--phones .story-copy, .story-section--products .story-copy, .story-section--models .story-copy { position: static; max-width: 640px }
.story-section--screens .story-images { grid-template-columns: repeat(3, 1fr); gap: 18px }
.story-section--screens .story-images img { aspect-ratio: 16 / 10; object-position: top; border: 1px solid var(--line) }
.story-section--phones .story-images { grid-template-columns: repeat(6, 1fr); gap: 16px }
.story-section--phones .story-images img { aspect-ratio: 390 / 844; object-position: top; border: 5px solid #0b0b0c; border-radius: 26px; box-shadow: 0 0 0 1px var(--line) }
.story-section--products .story-images { grid-template-columns: repeat(4, 1fr) }
.story-section--products .story-images img { aspect-ratio: 4 / 5; background: #0b0b0c }
.story-section--models .story-images { grid-template-columns: repeat(4, 1fr) }
.story-section--models .story-images img { aspect-ratio: 3 / 4 }

/* --------------- 10. moduli, FAQ, testi legali, cookie, 404 ------------- */
.contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start }
.form { display: grid; gap: 18px }
.field { display: grid; gap: 7px }
.field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #e6e6e8 }
.field .req { color: var(--coral) }
.field input, .field select, .field textarea {
  font: 400 15px/1.5 Montserrat, Arial, sans-serif; color: #fff;
  background: #ffffff0f; border: 1px solid #ffffff33; border-radius: 9px; padding: 13px 14px;
  width: 100%; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 49%, #fff 50%), linear-gradient(-45deg, transparent 49%, #fff 50%); background-size: 7px 7px; background-position: calc(100% - 20px) 21px, calc(100% - 13px) 21px; background-repeat: no-repeat }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #ffffff66 }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral); background: #ffffff17; outline: none }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid #fff; outline-offset: 2px }
.field .hint { font-size: 12px; color: #a9aaad }
.field-error { font-size: 12px; font-weight: 700; color: #ffb3ae; min-height: 1px }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #ff8f88 }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px }
.field--check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--coral) }
.field--check label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; line-height: 1.6; color: #d8d8da }
.field--check .field-error { grid-column: 1 / -1 }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form-status { border-radius: 10px; padding: 16px 18px; font-size: 15px; line-height: 1.6 }
.form-status[hidden] { display: none }
.form-status--ok { background: #1f5c4a; border: 1px solid #47b596 }
.form-status--ko { background: #5c2320; border: 1px solid #ff8f88 }
.form-status strong { display: block; margin-bottom: 4px }
.form button[type="submit"][disabled] { opacity: .6; cursor: progress }

.contact-aside { border: 1px solid var(--line); border-radius: 14px; padding: 30px; background: #ffffff09 }
.contact-aside h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--coral); margin: 0 0 18px }
.contact-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; font-size: 15px }
.contact-list span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: #9c9da0; margin-bottom: 4px }
.contact-list a { font-weight: 700 }
.contact-aside p { font-size: 14px; line-height: 1.7; color: #cfd0d2; margin: 0 0 14px }

.faq-groups { display: grid; gap: 46px }
.faq-group h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .2em; color: var(--coral); margin: 0 0 18px }
.faq-list { display: grid; gap: 10px }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: #ffffff09; overflow: hidden }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative;
  font-size: 16px; font-weight: 700; line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg) }
.faq-item summary:hover { background: #ffffff0f }
.faq-item div { padding: 0 20px 20px; font-size: 15px; line-height: 1.75; color: #d6d7d9 }
.faq-item div p { margin: 0 0 12px }
.faq-item div p:last-child { margin: 0 }

.prose { max-width: 820px; margin-inline: auto }
.prose h2 { font-size: clamp(18px, 2vw, 22px); margin: 44px 0 14px; letter-spacing: -.01em }
.prose h3 { font-size: 16px; margin: 28px 0 10px; color: var(--coral) }
.prose p, .prose li { font-size: 15px; line-height: 1.85; color: #dcdcde }
.prose p { margin: 0 0 14px }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 9px }
.prose a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px }
.prose .updated { font-size: 13px; color: #a9aaad; margin-bottom: 30px }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px }
.prose th, .prose td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
.prose th { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #b7b8bb }
.table-scroll { overflow-x: auto; margin: 0 0 22px }
.prose .callout { border-left: 2px solid var(--coral); padding: 4px 0 4px 16px; margin: 0 0 20px; color: #cfd0d2; font-size: 14px }

.cookiebar {
  position: fixed; inset: auto 0 0; z-index: 70;
  background: #16161a; border-top: 1px solid var(--line);
  padding: 20px max(18px, calc(50% - 600px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 34px #00000059;
}
.cookiebar[hidden] { display: none }
.cookiebar-inner { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center }
.cookiebar h2 { font-size: 14px; margin: 0 0 6px }
.cookiebar p { margin: 0; font-size: 13px; line-height: 1.65; color: #c6c7ca; max-width: 720px }
.cookiebar p a { font-weight: 700 }
.cookiebar-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end }
.cookiebar .coral-button, .cookiebar .ghost-button { padding: 11px 16px; font-size: 11px }
.cookie-prefs { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 12px }
.cookie-prefs[hidden] { display: none }
.cookie-prefs label { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 13px; line-height: 1.6; color: #d8d8da }
.cookie-prefs input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--coral) }
.cookie-prefs strong { display: block; color: #fff }

.errorpage { text-align: center; max-width: 620px; margin-inline: auto }
.errorpage .code { font-size: clamp(64px, 14vw, 132px); font-weight: 800; letter-spacing: -.06em; margin: 0; line-height: 1; color: var(--coral) }

/* ------------------------------------------------------- breakpoints ---- */
@media (max-width: 1050px) {
  :root { --wave-h: 118px; --enter-x: 112px; --enter-y: 40px }
  .hero-inner { grid-template-columns: .7fr 1.6fr 1fr }
  .nav { gap: 14px; font-size: 10px }
  .gallery { gap: 11px }
  .spotlight-inner { gap: 16px }
  .spotlight-images { gap: 9px }
  .identity-inner { gap: 26px }
  .service-card { padding: 24px }
  .service-card h3 { font-size: 23px }
  .project-layout { grid-template-columns: 1fr; gap: 40px }
  .story-section { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .story-copy { position: static }
  .story-section--phones .story-images { grid-template-columns: repeat(3, 1fr) }
  .story-section--screens .story-images { grid-template-columns: repeat(2, 1fr) }
  .project-story { margin-top: 64px; gap: 64px }
  .contact-layout { grid-template-columns: 1fr; gap: 40px }
  .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 860px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cookiebar-inner { grid-template-columns: 1fr }
  .cookiebar-actions { justify-content: flex-start }
}

@media (max-width: 720px) {
  .dialog-body { grid-template-columns: minmax(0, 1fr); gap: 22px }
  .dialog-media { position: static }
  :root { --wave-h: 92px; --enter-x: 74px; --enter-y: 34px; --enter-dur: 1.45s; --boot-dur: 1.8s }
  .container, .hero-inner { width: calc(100% - 44px) }
  .hero { min-height: 330px }
  .hero--short { min-height: 270px }
  .hero-inner { grid-template-columns: auto 1fr; gap: 10px 14px; padding: 22px 0 8px }
  .hero-title { grid-column: 1 / -1; grid-row: 2; text-align: left; white-space: normal; font-size: clamp(19px, 5.4vw, 28px); letter-spacing: .15em; margin-top: 18px }
  .hero-lede { grid-column: 1 / -1; grid-row: 3; text-align: left; margin-left: 0 }
  .logo-mark { width: 56px; height: 56px }
  .nav { display: none }
  .nav-toggle { display: inline-flex; grid-column: 2; grid-row: 1 }
  .floatbar { padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top, 0px)) }
  .floatbar .logo-mark { width: 34px; height: 34px }
  .showcase { padding: 66px 0 calc(var(--wave-h) + 56px) }
  .showcase .section-title { margin-bottom: 30px }
  .section-lede { margin: -12px auto 32px; font-size: 15px }
  .gallery { gap: 9px }
  .tile { border-radius: 10px }
  .tile-caption { opacity: 1; transform: none; padding: 20px 10px 9px }
  .tile-caption strong { font-size: 11px }
  .tile-caption span { font-size: 8px }
  .tile-label { top: 7px; bottom: auto; left: 7px; padding: 3px 5px; font-size: 7px }
  .logo-tile .brand-wordmark small { font-size: 7px; margin-top: 8px }
  .onda-emblem, .kono-symbol { transform: scale(.8) }
  .desktop-display { border-width: 4px; border-bottom-width: 8px }
  .web-collage-back, .web-collage-front { padding: 3px }
  .device-laptop, .device-phone { border-width: 3px }
  .spotlight { min-height: 0; padding: calc(var(--wave-h) + 44px) 0 calc(var(--wave-h) + 34px) }
  .spotlight-inner { grid-template-columns: 1fr; gap: 26px }
  .spotlight-copy p { max-width: 600px }
  .identity { padding: 96px 0 calc(var(--wave-h) + 56px) }
  .identity-inner { grid-template-columns: 1fr; gap: 46px }
  .identity-art { height: 250px; width: min(330px, 92%) }
  .identity-art::before { inset: -20px 22px 17px 0 }
  .identity-panel { left: 22px }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .process-steps { grid-template-columns: repeat(2, 1fr) }
  .project-page { padding: 74px 0 calc(var(--wave-h) + 56px) }
  .footer { padding-bottom: 40px }
  .footer .logo-mark { width: 88px; height: 88px }
  .dialog-head { padding: 18px 18px 15px }
  .dialog-body { padding: 18px 18px 24px }
}

@media (max-width: 520px) {
  :root { --wave-h: 70px; --enter-x: 54px; --enter-y: 28px }
  .container, .hero-inner { width: calc(100% - 32px) }
  .hero { min-height: 300px }
  .hero-title { font-size: 19px; letter-spacing: .12em }
  .logo-mark { width: 44px; height: 44px }
  .nav-toggle { padding: 9px 13px; font-size: 10px }
  .showcase { padding: 54px 0 calc(var(--wave-h) + 48px) }
  .section-title { font-size: 18px; letter-spacing: .22em }
  .section-title::after { margin-top: 12px }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px }
  .logo-tile--orla .brand-wordmark { font-size: 31px }
      .logo-tile--onda .brand-wordmark { font-size: 31px }
  .logo-tile--colline .brand-wordmark { font-size: 24px }
  .logo-tile--kono .brand-wordmark { font-size: 28px }
  .logo-tile .brand-wordmark small { font-size: 6px }
  .spotlight-images { grid-template-columns: repeat(2, 1fr) }
  .project-stats { grid-template-columns: repeat(2, 1fr) }
  .story-section--products .story-images, .story-section--models .story-images, .story-section--screens .story-images { grid-template-columns: repeat(2, 1fr) }
  .story-section--phones .story-images img { border-width: 3px; border-radius: 16px }
  .story-images { gap: 9px }
  .story-images img { border-radius: 10px }
  .spotlight-images a, .spotlight-images img { border-radius: 10px }
  .identity { padding: 78px 0 calc(var(--wave-h) + 48px) }
  .identity-art { height: 215px; width: min(280px, 92%) }
  .service-grid { grid-template-columns: 1fr }
  .service-card { min-height: 0 }
  .service-card h3 { font-size: 24px; margin-top: 24px }
  .process-steps { grid-template-columns: 1fr }
  .process-step { min-height: 0 }
  .footer-cols { grid-template-columns: 1fr; gap: 24px }
  .footer-brand strong { font-size: 22px }
  .footer .logo-mark { width: 74px; height: 74px }
  .filters { gap: 7px }
  .filter { padding: 9px 13px; font-size: 10px }
  .project-figures img, .project-art { border-radius: 10px }
}

/* --------------------------------------------------- movimento ridotto -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal], .js [data-enter] { opacity: 1 !important; transform: none !important }
  .tile:hover { transform: none }
  .tile:hover img { transform: none }
  .nav a:hover, .nav a:focus-visible { transform: none }
  .coral-button:hover, .spotlight-images a:hover { transform: none }
  .floatbar { transition: none }
}

@media print {
  .floatbar, .drawer, .cookiebar, .wave, .nav-toggle, .skip-link { display: none !important }
  body { background: #fff; color: #000 }
  .showcase, .identity, .project-page { background: #fff; padding: 0 }
  .prose p, .prose li { color: #000 }
}