:root {
  --sora: #01ACED;
  --sora-deep: #0079B8;
  --night: #081A27;
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --page-bg: #FFFFFF;
  --pad: clamp(22px, 5vw, 76px);
  --header-h: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page-bg); }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  transition: background-color .08s linear;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  height: var(--header-h);
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  color: #111;
  mix-blend-mode: normal;
  transition: color .25s ease, background-color .25s ease;
}
.site-header::after {
  content: "";
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .16;
}
.site-header.is-light { color: #fff; }
.site-header.scrolled { backdrop-filter: blur(12px); background: color-mix(in srgb, var(--page-bg) 72%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 11px; justify-self: start; font-weight: 900; letter-spacing: -.04em; font-size: 20px; }
.brand-slashes { display: flex; gap: 4px; width: 25px; height: 22px; transform: skewX(-18deg); }
.brand-slashes i { flex: 1; background: var(--sora); border-radius: 2px; }
.desktop-nav { display: flex; gap: clamp(18px, 2.6vw, 42px); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.desktop-nav a, .header-cta { transition: opacity .2s ease; }
.desktop-nav a:hover, .header-cta:hover { opacity: .55; }
.header-cta { justify-self: end; font-size: 11px; font-weight: 800; letter-spacing: .06em; border: 1px solid currentColor; padding: 11px 14px; }

.scene { position: relative; background: transparent; }
.eyebrow { margin: 0 0 22px; font-size: 11px; line-height: 1; font-weight: 850; letter-spacing: .18em; color: var(--sora-deep); }
.eyebrow.light { color: #fff; opacity: .78; }

.hero {
  min-height: 100svh;
  padding: calc(var(--header-h) + 8vh) var(--pad) 8vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  align-items: center;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.hero-title { margin: 0; font-size: clamp(58px, 8.8vw, 144px); line-height: .82; letter-spacing: -.075em; font-weight: 950; }
.hero-sub { max-width: 580px; margin: 34px 0 0; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.42; letter-spacing: -.02em; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid #111; font-size: 11px; font-weight: 850; letter-spacing: .06em; transition: transform .2s ease, background .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--sora); border-color: var(--sora); color: #fff; }
.btn-ghost { background: transparent; }
.hero-mark { position: absolute; right: -8vw; top: 18%; width: min(48vw, 760px); height: 68%; transform: rotate(-7deg); }
.slash { position: absolute; width: 19%; height: 115%; top: -7%; transform: skewX(-19deg); border-radius: 8px; transform-origin: center; }
.slash-a { left: 24%; background: var(--sora); }
.slash-b { left: 53%; background: #0079B8; }
.scroll-cue { position: absolute; left: var(--pad); bottom: 24px; display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .2em; font-weight: 800; }
.scroll-cue i { width: 40px; height: 1px; background: currentColor; }
.reveal { opacity: 0; transform: translateY(24px); animation: intro .75s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-title.reveal { animation-delay: .08s; }
.hero-sub.reveal { animation-delay: .18s; }
.hero-actions.reveal { animation-delay: .28s; }
@keyframes intro { to { opacity: 1; transform: none; } }

.manifesto { min-height: 175svh; color: #fff; padding: 18vh var(--pad); overflow: hidden; }
.manifesto-inner { position: sticky; top: 12vh; min-height: 76svh; display: flex; flex-direction: column; justify-content: center; }
.manifesto-line { margin: 0; width: min(1100px, 94vw); font-size: clamp(54px, 8vw, 132px); font-weight: 950; line-height: .87; letter-spacing: -.07em; }
.line-two { position: absolute; left: 22%; top: 38%; opacity: 0; transform: translateY(90px); }
.manifesto-mark { position: absolute; right: -6vw; top: 5%; width: 34vw; height: 90%; opacity: .16; transform: rotate(10deg); }
.manifesto-mark i, .transition-slashes i, .contact-mark i { position: absolute; top: 0; width: 28%; height: 100%; background: #fff; transform: skewX(-18deg); }
.manifesto-mark i:first-child, .transition-slashes i:first-child, .contact-mark i:first-child { left: 12%; }
.manifesto-mark i:last-child, .transition-slashes i:last-child, .contact-mark i:last-child { right: 12%; }

.services { min-height: 520svh; color: #fff; }
.services-pin { position: sticky; top: 0; min-height: 100svh; padding: calc(var(--header-h) + 8vh) var(--pad) 8vh; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 6vw, 110px); align-items: center; overflow: hidden; }
.services-heading h2, .work-head h2, .inside-title h2, .contact-content h2 { margin: 0; font-size: clamp(58px, 7.6vw, 124px); line-height: .82; letter-spacing: -.07em; font-weight: 950; }
.services-intro { margin: 28px 0 0; max-width: 440px; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.6; }
.service-stack { position: relative; height: min(72svh, 680px); min-height: 480px; }
.service-card {
  --offset: 0px;
  position: absolute;
  inset: 0;
  padding: clamp(28px, 4vw, 58px);
  background: #fff;
  color: #07141d;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 2px;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  box-shadow: 0 28px 70px rgba(0,0,0,.25);
}
.service-card span { position: absolute; top: 32px; right: 34px; font-size: 12px; font-weight: 900; letter-spacing: .15em; color: var(--sora-deep); }
.service-card h3 { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 72px); line-height: .9; letter-spacing: -.06em; }
.service-card p { margin: 0; max-width: 680px; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.45; }
.service-card:nth-child(2) { background: #EAF8FE; }
.service-card:nth-child(3) { background: #BFEAFF; }
.service-card:nth-child(4) { background: #77D5FA; }
.service-card:nth-child(5) { background: var(--sora); color: #fff; }
.service-card:nth-child(5) span { color: #fff; }

.transition-scene { min-height: 135svh; color: #fff; display: grid; place-items: center; overflow: hidden; }
.transition-scene h2 { position: relative; z-index: 2; margin: 0; text-align: center; font-size: clamp(60px, 10vw, 168px); line-height: .8; letter-spacing: -.08em; font-weight: 950; }
.transition-scene h2 span { color: #BFEAFF; }
.transition-slashes { position: absolute; inset: 8% 16%; transform: rotate(18deg); opacity: .2; }

.work { min-height: 450svh; color: #0a0a0a; }
.work-pin { position: sticky; top: 0; min-height: 100svh; overflow: hidden; padding-top: calc(var(--header-h) + 5vh); }
.work-head { padding: 0 var(--pad); width: min(720px, 70vw); position: relative; z-index: 4; will-change: opacity, transform; transform-origin: left top; }
.work-head p:last-child { max-width: 560px; line-height: 1.5; }
.work-track { position: absolute; left: 0; right: auto; bottom: 5vh; display: flex; gap: 28px; padding: 0 var(--pad); width: max-content; will-change: transform; }
.project-card { width: min(68vw, 900px); flex: 0 0 auto; }
.project-visual { height: clamp(310px, 49vw, 610px); position: relative; display: grid; place-items: center; overflow: hidden; background: #DDF4FE; }
.project-visual::before, .project-visual::after { content: ""; position: absolute; width: 22%; height: 130%; top: -15%; background: var(--sora); transform: skewX(-18deg) rotate(12deg); opacity: .88; }
.project-visual::before { left: 25%; }
.project-visual::after { right: 25%; background: #0079B8; }
.project-visual span { position: absolute; left: 24px; top: 22px; font-size: 11px; font-weight: 900; letter-spacing: .16em; z-index: 2; }
.project-visual b { z-index: 2; font-size: clamp(28px, 5vw, 74px); letter-spacing: -.06em; color: rgba(0,0,0,.18); }
.project-2 .project-visual { background: #081A27; color: #fff; }
.project-2 .project-visual::before { background: #fff; opacity: .11; }
.project-2 .project-visual::after { background: var(--sora); }
.project-3 .project-visual { background: var(--sora); }
.project-3 .project-visual::before, .project-3 .project-visual::after { background: #fff; opacity: .4; }
.project-4 .project-visual { background: #EFEFEF; }
.project-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid #111; padding-top: 14px; margin-top: 10px; }
.project-meta h3 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.project-meta p { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .12em; }

.clients { min-height: 105svh; padding: 16vh 0 14vh; overflow: hidden; }
.clients-copy { padding: 0 var(--pad); }
.clients-copy h2 { margin: 0; max-width: 1180px; font-size: clamp(50px, 7vw, 116px); line-height: .84; letter-spacing: -.07em; font-weight: 950; }
.clients-copy > p:last-child { max-width: 560px; margin-top: 28px; }
.marquee { margin-top: 12vh; display: grid; gap: 12px; transform: rotate(-2deg) scale(1.02); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marqueeA 30s linear infinite; }
.marquee-track.row-b { animation-name: marqueeB; animation-duration: 34s; }
.marquee-track span { display: grid; place-items: center; min-width: 220px; height: 82px; border: 1px solid rgba(0,0,0,.28); background: rgba(255,255,255,.55); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
@keyframes marqueeA { to { transform: translateX(-50%); } }
@keyframes marqueeB { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.contact { min-height: 100svh; color: #fff; padding: 18vh var(--pad) 6vh; overflow: hidden; display: flex; align-items: center; }
.contact-content { position: relative; z-index: 3; width: 100%; }
.contact-content h2 { font-size: clamp(66px, 10vw, 170px); }
.contact-content h2 span { color: var(--sora); }
.contact-link { display: inline-block; margin-top: 48px; padding-bottom: 8px; border-bottom: 2px solid currentColor; font-size: clamp(18px, 2vw, 30px); font-weight: 850; letter-spacing: -.02em; }
.contact-bottom { margin-top: 12vh; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.3); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 11px; letter-spacing: .08em; }
.contact-mark { position: absolute; right: -8vw; top: 10%; width: 43vw; height: 90%; opacity: .09; transform: rotate(-12deg); }

@media (max-width: 900px) {
  :root { --header-h: 62px; }
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .header-cta { font-size: 9px; padding: 9px 10px; }
  .hero { grid-template-columns: 1fr; min-height: 930px; padding-top: 130px; align-items: start; }
  .hero-title { font-size: clamp(60px, 18vw, 104px); }
  .hero-mark { width: 78vw; height: 44%; top: 48%; right: -18vw; }
  .manifesto { min-height: 1250px; }
  .manifesto-inner { position: relative; top: 0; min-height: auto; padding-top: 80px; }
  .manifesto-line { font-size: clamp(50px, 15vw, 84px); }
  .line-two { position: relative; left: 0; top: auto; margin-top: 220px; opacity: 1; transform: none; }
  .manifesto-mark { width: 70vw; right: -28vw; }
  .services { min-height: auto; padding: 110px 0; }
  .services-pin { position: relative; min-height: auto; display: block; padding: 0 var(--pad); overflow: visible; }
  .services-heading { margin-bottom: 50px; }
  .service-stack { height: auto; min-height: 0; display: grid; gap: 14px; }
  .service-card { position: relative; inset: auto; min-height: 340px; transform: none !important; opacity: 1 !important; }
  .transition-scene { min-height: 720px; }
  .work { min-height: auto; padding: 110px 0; }
  .work-pin { position: relative; min-height: auto; overflow: visible; padding-top: 0; }
  .work-head { width: auto; }
  .work-track { position: relative; bottom: auto; transform: none !important; display: grid; width: auto; margin-top: 60px; }
  .project-card { width: min(88vw, 680px); }
  .clients { min-height: auto; padding-top: 110px; }
  .contact { min-height: 900px; }
}

@media (max-width: 560px) {
  .hero-title { font-size: 17vw; }
  .hero-sub { font-size: 17px; }
  .btn { width: 100%; }
  .manifesto-line { font-size: 15vw; }
  .services-heading h2, .work-head h2 { font-size: 16vw; }
  .service-card h3 { font-size: 12vw; }
  .clients-copy h2 { font-size: 14vw; }
  .marquee-track span { min-width: 170px; height: 68px; }
  .contact-content h2 { font-size: 16vw; }
}

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

/* ==========================================================
   V1 MEDIA INSERT — 2026
   Solo adattamento dei contenuti reali agli spazi originali.
   Nessuna nuova struttura di pagina.
   ========================================================== */
.project-visual.has-media { background:#0b0b0b; }
.project-visual.has-media::before,
.project-visual.has-media::after { opacity:.12; z-index:2; pointer-events:none; }
.project-visual.has-media > span { color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.45); z-index:3; }
.project-visual video,
.project-media-link,
.project-media-link img {
  width:100%; height:100%; display:block;
}
.project-visual video,
.project-media-link { position:absolute; inset:0; }
.project-visual video,
.project-media-link img { object-fit:cover; }
.project-media-link { z-index:1; }

.marquee-track .client-tile {
  min-width:260px;
  height:112px;
  padding:24px 34px;
  background:#050505;
  border-color:#1b1b1b;
}
.client-tile img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}


.contact-bottom a { text-decoration:none; }
.contact-bottom a:hover { opacity:.7; }

/* Unico fix strutturale richiesto: più respiro tra le due frasi del manifesto. */
@media (min-width: 901px) {
  .manifesto { min-height: 225svh; }
}

@media (max-width:900px) {
  .project-visual video { pointer-events:auto; }
  .marquee-track .client-tile { min-width:210px; height:92px; padding:18px 26px; }
}


/* ==========================================================
   V4 — FIX VISIVI APPROVATI 06/09/2026
   Mantiene la struttura V1, corregge solo adattamento media.
   ========================================================== */

/* 1) Manifesto: le due frasi non devono mai occupare insieme la scena. */
@media (min-width: 901px) {
  .manifesto { min-height: 245svh; }
  .manifesto-line { will-change: opacity, transform; }
  .line-one, .line-two { backface-visibility: hidden; }
}

/* 2) Lavori che parlano: tutti i video caricati sono verticali 9:16.
      Li mostriamo per intero, con controlli leggibili e senza slash sopra al filmato. */
.project-visual.has-media::before,
.project-visual.has-media::after { display: none !important; }
.project-visual.has-media {
  background: #050505;
  border: 1px solid rgba(0,0,0,.14);
}
.project-visual video {
  object-fit: contain !important;
  background: #050505;
  z-index: 1;
  pointer-events: auto;
}
.project-media-link img {
  object-fit: contain !important;
  background: #050505;
}
.project-visual.has-media > span {
  top: 14px;
  left: 14px;
  padding: 6px 8px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  text-shadow: none;
  z-index: 3;
}

@media (min-width: 901px) {
  .work-head { width: min(620px, 39vw); }
  .work-track {
    bottom: 3.5vh;
    padding-left: max(var(--pad), 56vw);
    align-items: flex-end;
  }
  .project-card {
    width: clamp(300px, 22vw, 360px);
  }
  .project-visual {
    height: auto;
    aspect-ratio: 9 / 16;
  }
  .project-meta {
    align-items: flex-start;
  }
  .project-meta p {
    max-width: 150px;
    text-align: right;
    line-height: 1.35;
  }
}


/* 4) Portfolio Francesco Rubbino: card editoriale distinta dai video.
      Niente contenitore nero/9:16: il portfolio è presentato come progetto fotografico. */
.project-portfolio {
  width: clamp(520px, 43vw, 720px) !important;
}
.portfolio-showcase {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: clamp(18px, 2vw, 30px);
  overflow: hidden;
  background: #F1F3F5;
  border: 1px solid rgba(0,0,0,.14);
}
.portfolio-index,
.portfolio-label,
.portfolio-open {
  position: absolute;
  z-index: 3;
  font-weight: 900;
  letter-spacing: .12em;
}
.portfolio-index {
  top: 18px;
  left: 18px;
  padding: 7px 9px;
  background: #050505;
  color: #fff;
  font-size: 11px;
}
.portfolio-label {
  top: 20px;
  right: 20px;
  color: #111;
  font-size: 10px;
}
.portfolio-open {
  right: 22px;
  bottom: 18px;
  color: #111;
  font-size: 10px;
  transition: transform .25s ease;
}
.portfolio-showcase:hover .portfolio-open {
  transform: translateX(5px);
}
.portfolio-collage {
  height: 100%;
  padding: 42px 0 34px;
  display: grid;
  grid-template-columns: 1.42fr .72fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.portfolio-collage img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
.portfolio-collage .portfolio-main {
  grid-row: 1 / 3;
}

/* 3) Clienti: tile uniformi, logo sempre contenuto e mai ingrandito oltre misura. */
.marquee-track .client-tile {
  flex: 0 0 210px !important;
  min-width: 210px !important;
  width: 210px !important;
  height: 90px !important;
  padding: 15px 20px !important;
  overflow: hidden !important;
  background: #050505 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.marquee-track .client-tile img {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 155px !important;
  max-height: 54px !important;
  margin: auto !important;
  object-fit: contain !important;
}
.marquee { gap: 10px; }
.marquee-track { gap: 10px; }


@media (max-width: 900px) {
  .work-track { padding: 0 var(--pad); }
  .project-portfolio { width: min(88vw, 620px) !important; }
  .portfolio-showcase { aspect-ratio: 1 / 1; padding: 14px; }
  .portfolio-label { top: 17px; right: 16px; font-size: 9px; }
  .portfolio-open { left: 16px; right: auto; bottom: 14px; font-size: 9px; }
  .portfolio-collage {
    padding: 40px 0 32px;
    grid-template-columns: 1fr;
    grid-template-rows: 1.35fr .65fr;
  }
  .portfolio-collage .portfolio-main { grid-row: auto; }
  .portfolio-collage img:nth-child(3) { display: none; }
  .project-card { width: min(78vw, 360px); }
  .project-visual { height: auto; aspect-ratio: 9/16; }
  .marquee-track .client-tile {
    flex-basis: 170px !important;
    min-width: 170px !important;
    width: 170px !important;
    height: 74px !important;
    padding: 12px 16px !important;
  }
  .marquee-track .client-tile img {
    max-width: 125px !important;
    max-height: 44px !important;
  }
}

/* ==========================================================
   V8 — MOBILE WIDTH / TYPOGRAPHY FIX 18/09/2026
   Correzione chirurgica: impedisce overflow orizzontale e
   mantiene integralmente leggibili i titoli su smartphone.
   Desktop invariato.
   ========================================================== */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .scene,
  .site-header,
  .hero,
  .manifesto,
  .services,
  .work,
  .clients,
  .contact {
    max-width: 100vw;
  }

  .hero-copy,
  .manifesto-inner,
  .services-heading,
  .work-head,
  .clients-copy,
  .contact-content {
    min-width: 0;
    max-width: 100%;
  }

  .manifesto-line {
    width: 100%;
    max-width: 100%;
  }

  .line-one,
  .line-two {
    left: 0;
    right: auto;
  }

  .contact-content h2,
  .manifesto-line,
  .hero-title,
  .services-heading h2,
  .work-head h2,
  .clients-copy h2 {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
  }

  .contact-bottom,
  .contact-bottom p,
  .contact-bottom a {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }

  /* Conserva l'impatto tipografico senza uscire dalla viewport. */
  .hero-title {
    font-size: clamp(48px, 15.2vw, 68px);
    line-height: .85;
    letter-spacing: -.068em;
  }

  .manifesto {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .manifesto-line {
    font-size: clamp(34px, 10.6vw, 49px);
    line-height: .91;
    letter-spacing: -.052em;
  }

  .services-heading h2,
  .work-head h2 {
    font-size: clamp(42px, 12.8vw, 59px);
    line-height: .86;
  }

  .clients-copy h2 {
    font-size: clamp(40px, 12vw, 56px);
    line-height: .88;
  }

  .contact {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .contact-content h2 {
    font-size: clamp(42px, 12.4vw, 58px);
    line-height: .87;
    letter-spacing: -.052em;
  }

  .contact-link {
    max-width: 100%;
    font-size: clamp(17px, 4.8vw, 21px);
  }
}