:root{
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #6f6f6f;
  --line: rgba(10,10,10,.12);
  --pill-bg: #f0f0f0;
  --pill-hover: #e4e4e4;
  --surface: rgba(255,255,255,.6);
  --overlay: rgba(255,255,255,.7);
  --portrait-a: #e9e9e9;
  --portrait-b: #c9c9c9;
  --accent: #ff4d2e; /* colore accento: cambia qui per ricolorare tutto il sito */
  --font: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --header-h: 84px;
}

/* ============ DARK MODE ============
   Quasi tutto il sito usa già queste variabili, quindi il tema si applica
   automaticamente ovunque. Cambia qui i valori per affinare la palette scura. */
:root[data-theme="dark"]{
  --bg: #0b0b0c;
  --fg: #f2f2f0;
  --muted: #9b9b9b;
  --line: rgba(255,255,255,.14);
  --pill-bg: #1d1d1f;
  --pill-hover: #2a2a2c;
  --surface: rgba(255,255,255,.06);
  --overlay: rgba(10,10,10,.7);
  --portrait-a: #2a2a2c;
  --portrait-b: #1a1a1b;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: auto; }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 500;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

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

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; border:none; background:none; color:inherit; }
h1,h2,h3,h4,p,ul{ margin:0; padding:0; }
ul{ list-style:none; }

/* ============ HEADER ============ */
.site-header{
  position: fixed;
  inset: 20px 20px auto 20px;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.header-left, .header-right{ display:flex; align-items:center; gap:10px; }

.icon-pill{
  width:48px; height:48px;
  border-radius: 999px;
  background: var(--pill-bg);
  display:flex; align-items:center; justify-content:center;
  font-size: 12px; letter-spacing: 2px;
  transition: background .25s ease;
}
.icon-pill:hover{ background: var(--pill-hover); }

.theme-icon{ width:18px; height:18px; color: var(--fg); }
.theme-icon--moon{ display:none; }
:root[data-theme="dark"] .theme-icon--sun{ display:none; }
:root[data-theme="dark"] .theme-icon--moon{ display:block; }

.logo-pill{
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
}

.face-avatar{
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.face-avatar:hover{ transform: scale(1.06); }
.face-avatar:active{ transform: scale(0.96); }
.face-avatar canvas{ width: 100%; height: 100%; display:block; }

.cta-pill{
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 16px 26px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: lowercase;
  transition: background .25s ease, color .25s ease;
}
.cta-pill:hover{ background: var(--fg); color: var(--bg); }
.cta-pill--large{ padding: 20px 36px; font-size: 15px; }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}

.hero-title-wrap{ position:relative; width:100%; }

.hero-title{
  position:relative;
  display:flex;
  justify-content: space-between;
  align-items:center;
  width: 100%;
  padding: 0 5vw;
  font-size: clamp(3rem, 10vw, 9rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: lowercase;
  z-index: 1;
}
.hero-title-row{ display:inline-block; }

.hero-stack{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: clamp(340px, 42vw, 620px);
  height: clamp(290px, 32vw, 460px);
  z-index: 5;
  cursor: ns-resize;
}

.hero-stack-hint{
  position:absolute;
  left:50%; bottom: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.hero-stack:hover .hero-stack-hint,
.hero-stack:focus-within .hero-stack-hint{ opacity: 1; }

.stack-card{
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: linear-gradient(160deg, hsl(var(--hue) 85% 60%), hsl(calc(var(--hue) + 30) 80% 45%));
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
  display:flex; align-items:flex-end;
  padding: 20px;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
}
.stack-card:focus-visible{ outline: 3px solid #fff; outline-offset: -6px; }
.stack-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  z-index:0;
}
/* Overlay scuro in basso: mantiene leggibile il nome sia sui gradienti
   segnaposto sia sopra una vera foto di copertina. */
.stack-card::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  border-radius: inherit;
  z-index:1;
  pointer-events:none;
}
.stack-card span{
  position:relative;
  z-index:2;
  color:#fff;
  font-weight:700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
}

.hero-badge{
  position:absolute;
  left: 30px; bottom: 30px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  z-index: 3;
}
.badge-thumb{
  width:96px; height:96px;
  border-radius: 16px;
  background: linear-gradient(160deg, hsl(var(--hue) 85% 60%), hsl(calc(var(--hue) + 30) 80% 45%));
}

.tag-pill{
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
}
.tag-pill--small{ padding: 6px 14px; font-size: 11px; }

.hero-scroll-cue{
  position:absolute;
  right: 30px; bottom: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
  z-index: 3;
}

/* ============ MARQUEE ============ */
.marquee{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track{
  display:flex;
  gap: 24px;
  white-space: nowrap;
  width: max-content;
  animation: marquee 22s linear infinite;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 600;
  text-transform: lowercase;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============ WORK ============ */
.work{ padding: 140px 5vw 60px; }
.section-label{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: lowercase;
  margin-bottom: 60px;
}

.project-reveal{
  position: relative;
  overflow: hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: 100px 0;
  cursor: pointer;
  border-radius: 24px;
  transition: background .25s ease;
}
.project-reveal:hover{ background: rgba(10,10,10,.03); }
/* Copertina reale mostrata come sfondo tenue dietro al nome gigante:
   il testo resta il protagonista, la foto dà solo atmosfera.
   L'immagine si imposta inline nell'HTML (non tramite variabile CSS) perché
   un url() dentro una custom property viene risolto rispetto al file .css,
   non rispetto alla pagina, e romperebbe il percorso relativo. */
.project-reveal-cover{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity: .16;
  z-index: 0;
}
.project-reveal h3, .project-reveal .project-reveal-hint{ position:relative; z-index:1; }
.project-reveal h3{
  font-size: clamp(3rem, 11vw, 8rem);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -.03em;
}
.project-reveal-hint{
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
  transition: opacity .2s ease;
}
.project-reveal.is-active .project-reveal-hint{ opacity: 0; }
.blur-reveal{ filter: blur(18px); opacity: 0; }

.project{ margin-bottom: 140px; }

.project-grid, .project-detail{ display: none; }
.project.is-expanded .project-grid{ display:grid; }
.project.is-expanded .project-detail{ display:grid; }

.project-grid{
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: 14px;
  margin-bottom: 60px;
}
.project-cell{
  grid-column: span 2;
  grid-row: span 1;
  border-radius: 18px;
  background: linear-gradient(160deg, hsl(var(--hue) 70% 88%), hsl(calc(var(--hue) + 20) 70% 78%));
  overflow: hidden;
}
.project-cell img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-cell--tall{ grid-row: span 2; }
.project-cell--wide{ grid-column: span 3; }
.project-cell--dark{
  background: linear-gradient(160deg, hsl(var(--hue) 40% 18%), hsl(calc(var(--hue) + 20) 40% 10%));
  display:flex; align-items:center; justify-content:center;
}
/* Nella cella scura le immagini sono lockup di logo: vanno viste intere e
   piu' piccole (object-fit:contain), non tagliate a piena copertura come le foto prodotto. */
.project-cell--dark img{
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.project-cell-label{
  color:#fff; font-weight:700; font-size:1.4rem; text-transform:lowercase; letter-spacing:-.02em;
}

.project-detail{
  grid-template-columns: 220px 1fr;
  gap: 40px;
}
.project-tabs{
  display:flex; flex-direction:column; align-items:flex-start; gap: 18px;
}
.project-tab{
  font-size: 15px;
  font-weight: 600;
  text-transform: lowercase;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color .2s ease;
}
.project-tab.is-active{ color: var(--fg); text-decoration-color: var(--fg); }

.project-panel{ display:none; max-width: 640px; }
.project-panel.is-active{ display:block; }
.project-kicker{ font-weight:700; font-size:1.3rem; text-transform:lowercase; margin-bottom:18px; line-height:1.3; }
.project-text{ color: var(--muted); font-size: 1rem; line-height:1.6; }
.project-detail-more{
  display:inline-block;
  margin-top: 32px;
  font-size: 13px;
}

/* ============ SERVICES ============ */
.services{ padding: 0 0 60px; }
.services-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 24px;
}
.service-card{
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
}
.service-index{ display:block; font-weight:700; color: var(--muted); margin-bottom: 30px; }
.service-card h3{ font-size:1.3rem; font-weight:700; text-transform:lowercase; margin-bottom:10px; }
.service-card p{ color: var(--muted); font-size:.95rem; line-height:1.5; }

/* ============ ABOUT ============ */
.about{
  padding: 0 0 60px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items:start;
}
.about-portrait{
  width:100%; aspect-ratio: 4/5;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--portrait-a), var(--portrait-b));
  background-size: cover;
  background-position: center;
}
.about-text{ font-size: clamp(1.1rem, 2vw, 1.5rem); line-height:1.5; margin-bottom: 30px; max-width: 640px; }
.about-facts li{ color: var(--muted); font-weight:600; padding: 10px 0; border-top: 1px solid var(--line); }
.about-facts li:last-child{ border-bottom: 1px solid var(--line); }

/* ============ CONTACT / FOOTER ============ */
.contact{
  padding: 0 0 60px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 40px;
}
.contact-title{
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:-.03em;
  line-height: .95;
}
.footer-bottom{
  width:100%;
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-links{ display:flex; gap: 22px; }
.footer-links a:hover{ color: var(--fg); }

/* footer minimale delle pagine progetto dedicate (senza il blocco "let's build") */
.contact-footer-minimal{ padding: 0 5vw 60px; max-width: 1400px; margin: 0 auto; }
.contact-footer-minimal .footer-bottom{ margin-top: 0; }

/* ============ FULLSCREEN MENU ============ */
.fullscreen-menu{
  position: fixed; inset:0;
  background: var(--bg);
  z-index: 300;
  display:flex; flex-direction:column;
  justify-content:center;
  padding: 8vw;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events:none;
  transition: opacity .4s ease, visibility .4s ease;
}
.fullscreen-menu.is-open{ visibility: visible; opacity:1; pointer-events:auto; }

.menu-close{
  position:absolute; top:30px; right:40px;
  font-size: 13px; font-weight:600; text-transform:lowercase;
  background: var(--pill-bg); border-radius:999px; padding: 12px 22px;
}

.menu-links{ display:flex; flex-direction:column; gap: 6px; flex-shrink:0; }
.menu-link{
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight:700;
  text-transform: lowercase;
  letter-spacing:-.03em;
  line-height: 1.05;
  overflow:hidden;
  transition: color .2s ease;
}
.menu-link:hover{ color: var(--accent); }

.subscribe{
  margin-top: 50px;
  display:flex; align-items:center; gap: 16px;
  flex-shrink:0;
}
.subscribe label{ font-weight:700; text-transform:lowercase; }
.subscribe input{
  border:none; border-bottom: 2px solid var(--fg);
  background:transparent; padding: 8px 4px; font-size:1rem; font-family:inherit; min-width:220px;
}
.subscribe input:focus{ outline:none; }
.subscribe button{ font-size:1.3rem; font-weight:700; }

.menu-strip{ margin-top: 60px; overflow:hidden; flex-shrink:0; }
.menu-strip-track{
  display:flex; gap: 16px;
  width: max-content;
  animation: stripscroll 18s linear infinite;
}
@keyframes stripscroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.strip-thumb{
  width: 120px; height: 80px;
  border-radius: 14px;
  background: linear-gradient(160deg, hsl(var(--hue) 85% 60%), hsl(calc(var(--hue) + 30) 80% 45%));
  flex-shrink:0;
}

/* ============ CONTACT MODAL ============ */
.contact-modal{
  position:fixed; inset:0;
  background: var(--overlay);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  z-index: 400;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 6vw 5vw;
  overflow-y:auto;
  visibility:hidden; opacity:0; pointer-events:none;
  transition: opacity .35s ease, visibility .35s ease;
}
.contact-modal.is-open{ visibility:visible; opacity:1; pointer-events:auto; }

.contact-modal-inner{ width:100%; max-width: 900px; position:relative; }

.modal-close{
  position:absolute; top:0; right:0;
  background: var(--pill-bg); border-radius:999px; padding: 12px 22px;
  font-size:13px; font-weight:600; text-transform:lowercase;
}

.modal-title{
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight:700; text-transform:lowercase; letter-spacing:-.02em;
}
.modal-subtitle{ color: var(--muted); font-size: 1.1rem; margin-top:10px; margin-bottom: 50px; }

.modal-block{ margin-bottom: 44px; }
.modal-block h4{ font-size: 1rem; font-weight:700; text-transform:lowercase; margin-bottom: 20px; }

.pill-group{ display:flex; flex-wrap:wrap; gap: 12px; }
.pill-toggle{
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 14px; font-weight:600; text-transform:lowercase;
  transition: background .2s ease, color .2s ease;
}
.pill-toggle.is-active{ background: var(--fg); color: var(--bg); }

.contact-form{ display:flex; flex-direction:column; gap: 16px; max-width: 640px; }
.contact-form-success{
  display:none;
  margin-top: 16px;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--pill-bg);
  font-weight: 600;
  max-width: 640px;
}
.contact-form-success.is-visible{ display:block; }
.contact-form.is-hidden{ display:none; }
.contact-form-row{ display:flex; gap: 16px; flex-wrap:wrap; }
.contact-form input, .contact-form textarea{
  flex:1;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 15px;
  background: var(--surface);
  color: var(--fg);
  resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--muted); }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--fg); }

/* ============ VISUALIZZATORE SLIDE PROGETTO (pagina dedicata) ============
   Un unico riquadro orizzontale che mostra le slide ORIGINALI del PDF di
   presentazione, intere e non ritagliate (16:9, la proporzione nativa del
   PDF): si sfoglia scrollando SOLO quando il cursore è sopra il riquadro
   (stessa logica dello stack in home), altrimenti la pagina scorre
   normalmente. Presente solo nella pagina dedicata di ogni progetto: la
   griglia teaser (.project-grid) in home resta quella con l'anteprima a celle. */
.project-slide-viewer{
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 60px;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: var(--pill-bg);
  box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);
  cursor: pointer;
}
.project-slide{
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.project-slide.is-active{ opacity: 1; pointer-events: auto; }
.project-slide img, .slide-placeholder{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: var(--pill-bg);
}
.slide-viewer-count{
  position:absolute; bottom: 20px; left:50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color:#fff;
  font-size: 12px; font-weight:600;
  padding: 6px 14px; border-radius: 999px;
  pointer-events:none;
}
.slide-viewer-hint{
  position:absolute; top: 20px; left:50%; transform: translateX(-50%);
  background: rgba(0,0,0,.4); color:#fff;
  font-size: 11px; font-weight:600; letter-spacing:.05em; text-transform:lowercase;
  padding: 6px 14px; border-radius: 999px;
  opacity: .85;
  pointer-events:none;
}
@media (max-width: 900px){
  .project-slide-viewer{ aspect-ratio: 4 / 3; border-radius: 20px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .hero-title{ flex-direction:column; align-items:center; gap: 10px; text-align:center; }
  .hero-stack{ position:relative; top:auto; left:auto; transform:none; margin: 30px auto 0; }
  .project-detail{ grid-template-columns: 1fr; }
  .project-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 110px; }
  .project-cell{ grid-column: span 1; }
  .project-cell--wide{ grid-column: span 2; }
  .about{ grid-template-columns: 1fr; }
  .about-portrait{ max-width: 280px; }
}

/* ============ PAGINA PROGETTO DEDICATA ============ */
.project-page{ padding: 140px 5vw 60px; max-width: 1400px; margin: 0 auto; }

.project-back{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight:600;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 40px;
  transition: color .2s ease;
}
.project-back:hover{ color: var(--fg); }

.project-page-head{ margin-bottom: 60px; }
.project-page-head h1{
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight:700;
  text-transform: lowercase;
  letter-spacing:-.03em;
  line-height: 1;
}
.project-page-category{
  color: var(--muted);
  font-weight:600;
  font-size: 1.1rem;
  margin-top: 12px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ VIDEO CAMPAGNA (pagina dedicata, solo se il progetto ne ha) ============ */
.project-videos{ margin: 60px 0; }
.project-videos .section-label{ margin-bottom: 30px; }
.project-videos-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.project-video-item{
  border-radius: 20px;
  overflow:hidden;
  background: var(--pill-bg);
}
.project-video-item video{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit:cover;
  display:block;
  background:#000;
}
@media (max-width: 900px){
  .project-videos-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .project-videos-grid{ grid-template-columns: 1fr; }
}

.project-page-text{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}
.project-page-block h3{
  font-size: 14px;
  font-weight:700;
  text-transform: lowercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.project-page-block p{ font-size: 1.05rem; line-height:1.6; }

.project-page-cta{
  text-align:center;
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
}
.project-page-cta h2{
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:-.02em;
  margin-bottom: 32px;
}

/* ============ LONDON CHIAIA — GALLERIA IMMERSIVA (prova speciale, solo questo progetto) ============
   Pagina scritta a mano (non generata dallo script): invece della griglia a 6
   celle + tab standard, qui foto e video sono raggruppati "a scaglioni" per
   campagna/brand, mostrati grandi in una griglia fluida, per dare più risalto
   ai contenuti via via che arrivano. I video partono in autoplay silenzioso
   e in loop, come dei Reel. */
.lc-page{ padding: 140px 5vw 60px; max-width: 1400px; margin: 0 auto; }

/* ============ PAGINE STATICHE (servizi, chi sono, cv, contatti) ============ */
.static-page{ padding: 140px 5vw 60px; max-width: 1000px; margin: 0 auto; }
.static-page .lc-hero{ margin-bottom: 60px; max-width: none; }
.static-page .lc-group{ margin-bottom: 70px; }

/* ---- CV ---- */
.cv-list{ display:flex; flex-direction:column; gap: 40px; }
.cv-item{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.cv-item:last-child{ border-bottom:none; padding-bottom:0; }
.cv-period{ font-size: 13px; font-weight:700; color: var(--muted); text-transform:lowercase; white-space:nowrap; }
.cv-item h3{ font-size: 1.3rem; font-weight:700; text-transform:lowercase; letter-spacing:-.01em; margin-bottom:6px; }
.cv-org{ color: var(--muted); font-weight:600; font-size:.95rem; margin-bottom:14px; }
.cv-item p{ font-size: 1rem; line-height:1.6; margin-bottom:14px; }
.cv-tags{ color: var(--muted); font-size: .85rem !important; line-height:1.6 !important; margin-bottom:0 !important; }
.cv-skills-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 40px;
}
.cv-skill-block h4{ font-size: 13px; font-weight:700; text-transform:lowercase; color: var(--muted); margin-bottom:16px; }
.cv-skill-block ul{ display:flex; flex-direction:column; gap:10px; }
.cv-skill-block li{ font-size: .95rem; line-height:1.4; }

@media (max-width: 640px){
  .cv-item{ grid-template-columns: 1fr; gap: 8px; }
}

.lc-hero{ margin-bottom: 90px; max-width: 720px; }
.lc-hero h1{
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight:700;
  text-transform: lowercase;
  letter-spacing:-.03em;
  line-height: 1;
}
.lc-hero-category{
  color: var(--muted);
  font-weight:600;
  font-size: 1.1rem;
  margin-top: 12px;
}
.lc-hero-text{ font-size: 1.05rem; line-height:1.6; margin-top: 24px; }

.lc-group{ margin-bottom: 90px; }
.lc-group-label{
  display:inline-block;
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight:700;
  text-transform: lowercase;
  letter-spacing: .01em;
  margin-bottom: 28px;
}

.lc-media-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
/* Ogni riquadro rispetta la proporzione NATIVA della propria foto/video (niente
   ritagli): il default è 4:5 (la maggior parte degli scatti), con varianti per
   i contenuti orizzontali (16:9) e verticali strette (9:16, i video Reel). */
.lc-media{
  position: relative;
  border-radius: 22px;
  overflow:hidden;
  background: var(--pill-bg);
  aspect-ratio: 4 / 5;
  cursor: zoom-in;
}
.lc-media--wide{ grid-column: span 2; }
.lc-media--landscape{ aspect-ratio: 16 / 9; }
.lc-media--tall{ aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
.lc-media img, .lc-media video{
  width:100%; height:100%;
  object-fit: contain;
  display:block;
}
.lc-media--video video{ background:#000; }

@media (max-width: 900px){
  .lc-media-grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 560px){
  .lc-media-grid{ grid-template-columns: 1fr; }
  .lc-media--wide{ grid-column: span 1; }
  .lc-media--tall{ max-width: 260px; }
}

/* ---- lightbox: click su una foto/video per vederlo grande, senza ritagli ---- */
.lc-lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.92);
  z-index: 500;
  display:flex; align-items:center; justify-content:center;
  padding: 6vw 5vw;
  visibility:hidden; opacity:0; pointer-events:none;
  transition: opacity .3s ease, visibility .3s ease;
}
.lc-lightbox.is-open{ visibility:visible; opacity:1; pointer-events:auto; }
.lc-lightbox-content img, .lc-lightbox-content video{
  max-width: 88vw;
  max-height: 88vh;
  width:auto; height:auto;
  display:block;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lc-lightbox-close{
  position:absolute; top: 28px; right: 5vw;
  background: rgba(255,255,255,.12);
  color:#fff;
  border-radius:999px; padding: 12px 22px;
  font-size:13px; font-weight:600; text-transform:lowercase;
}
.lc-lightbox-close:hover{ background: rgba(255,255,255,.22); }
.lc-lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width: 52px; height:52px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size: 26px;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.lc-lightbox-nav:hover{ background: rgba(255,255,255,.22); }
.lc-lightbox-prev{ left: 5vw; }
.lc-lightbox-next{ right: 5vw; }
@media (max-width: 600px){
  .lc-lightbox-close{ top:16px; right:16px; }
  .lc-lightbox-nav{ width:40px; height:40px; font-size:20px; }
  .lc-lightbox-prev{ left: 12px; }
  .lc-lightbox-next{ right: 12px; }
}

/* ============ ALTRI PROGETTI (striscia animata, pagina dedicata) ============
   Permette di raggiungere gli altri progetti direttamente da qui, senza dover
   tornare in home: scorrimento automatico continuo, in pausa al passaggio del
   mouse per poter leggere/cliccare con calma. */
.project-more{ padding: 70px 0 40px; border-top: 1px solid var(--line); }
.project-more .section-label{ padding: 0 5vw; margin-bottom: 30px; }
.project-more-strip{ overflow:hidden; }
.project-more-track{
  display:flex;
  gap: 16px;
  width: max-content;
  animation: stripscroll 40s linear infinite;
}
.project-more-strip:hover .project-more-track{ animation-play-state: paused; }
.project-more-item{
  position: relative;
  width: 220px; height: 150px;
  flex-shrink:0;
  border-radius: 18px;
  overflow:hidden;
  background: linear-gradient(160deg, hsl(var(--hue) 70% 88%), hsl(calc(var(--hue) + 20) 70% 78%));
}
.project-more-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-more-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 60%);
}
.project-more-item span{
  position:absolute; left:16px; bottom:14px; z-index:1;
  color:#fff; font-weight:700; font-size:1rem; text-transform:lowercase; letter-spacing:-.01em;
}

@media (max-width: 900px){
  .project-page-text{ grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 480px){
  .site-header{ flex-wrap: wrap; row-gap: 10px; inset: 16px 16px auto 16px; }
  .header-left, .header-right{ gap: 8px; }
  .logo-pill{ padding: 12px 16px; font-size: 12px; }
  .icon-pill{ width:42px; height:42px; }
  .face-avatar{ width:42px; height:42px; }
  .cta-pill{ padding: 12px 18px; font-size: 12px; white-space: nowrap; }
}