/* ============================================================
   SPECIAL GLUE — home-sg.html
   ============================================================ */

body.sg { background: #fff; color: var(--c-sg-black); }

/* Header (dark, on hero its background is red so we make it transparent) */
.sg .site-header { background: transparent; color: #fff; transition: background-color .25s ease; }
.sg .site-header.is-scrolled { background: #000; }
/* Menu mobile aperto in cima: header nero come la tendina */
.sg .site-header:has(.nav.is-open) { background: #000; }
.sg .site-header .brand { font-size: 22px; gap: 5px; }
.sg .site-header .brand .b-sans  { font-weight: 400; color: #fff; }
.sg .site-header .brand .b-dash  { color: #FF00FF; font-weight: 400; transition: color .25s ease; } /* temp: magenta */
.sg .site-header.is-scrolled .brand .b-dash { color: #FF00FF; } /* temp: magenta */
.sg .site-header .brand .b-sep   { font-family: var(--font-display); font-style: italic; font-weight: 300; color: #fff; opacity: 1; }
.sg .site-header .brand .b-serif { font-family: var(--font-display); font-style: italic; font-weight: 300; color: #fff; }
.sg .nav { gap: 0; }
.sg .nav a {
  color: #fff;
  font-size: 17px;
  padding: 0 calc(clamp(14px, 2.4vw, 40px) / 2);
  transition: opacity .25s ease;
}
/* ---------- SEZIONI: stessa distanza label→contenuto ovunque ----------
   contenuto subito sotto la label (non centrato) e altezza data dal
   contenuto, senza minimo a viewport */
.sg .section { min-height: 0; }
.sg .section .wrap { justify-content: flex-start; }

/* ---------- 1. HERO ---------- */
.sg-hero {
  position: relative;
  /* L'hero risale sotto l'header (sticky) così il video scorre dietro
     il menu trasparente quando si è in cima alla pagina. */
  margin-top: calc(-1 * var(--header-h));
  background: var(--c-sg-black);
  color: #fff;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(clamp(24px, 4vw, 56px) + var(--header-h)) var(--pad-x) clamp(20px, 3vw, 40px);
  text-align: center;
  overflow: hidden;
}
/* Video di sfondo dell'hero (al posto del fondo magenta). */
.sg-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim per garantire leggibilità di logo, payoff e footer sul video. */
.sg-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.25) 35%,
    rgba(0,0,0,.25) 65%,
    rgba(0,0,0,.55) 100%
  );
}
.sg-hero__lockup {
  position: relative;
  z-index: 2;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sg-hero__logo {
  width: auto;
  height: auto;
  max-height: 50vh;
  max-width: 70vw;
  object-fit: contain;
}
.sg-hero__payoff {
  margin-top: clamp(16px, 2.5vw, 32px);
  text-align: left;
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: .005em;
  color: #fff;
}
.sg-hero__footer {
  position: relative;
  z-index: 2;
  padding-top: clamp(16px, 2.5vw, 32px);
  font-family: var(--font-sans-cond);
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: normal;
  font-weight: 400;
  color: #fff;
}

/* ---------- 2. CHI SIAMO (ciano) ---------- */
.sg-intro {
  background: var(--c-sg-cyan);
  color: #fff;
}
.sg-intro__grid {
  position: relative;
  text-align: center;
}
.sg-intro__text {
  min-width: 0;
  display: inline-block;
  text-align: left;
}
.sg-intro__title {
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: clamp(52px, 8vw, 128px);
  line-height: 0.9;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}
.sg-intro__title .k-black { color: #000; font-weight: 700; }
.sg-intro__title .k-brush { font-family: var(--font-brush); font-weight: 400; color: #000; letter-spacing: .01em; }
.sg-intro__tube {
  position: absolute;
  right: 1.5vw;
  top: 50%;
  transform: translateY(-30%) rotate(-35deg);
  transform-origin: center center;
  width: clamp(220px, 26vw, 400px);
  pointer-events: none;
}
.sg-intro__lead {
  text-align: left;
}

/* Animated tube + drop */
.sg-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 310;
  margin: 0 auto;
  overflow: visible;

  /* drop-emission point + tilt */
  --drop-x: 5%;
  --drop-y: 80%;
  --drop-rotate: 32deg;
}
.sg-tube { width: 100%; height: 100%; display: block; }

.sg-drop{
  position: absolute;
  left: var(--drop-x);
  top: var(--drop-y);
  width: 3.5%;
  aspect-ratio: 1 / 1.5;
  background: #fff;
  border-radius: 50% 50% 50% 50% / 70% 70% 40% 40%;
  rotate: var(--drop-rotate);
  transform-origin: 50% 0;
  animation: sg-drop-fall 3.2s cubic-bezier(.45, .05, .55, .95) infinite;
  will-change: transform, opacity;
}

@keyframes sg-drop-fall{
  0%   { transform: translateY(0)    scale(.4, .4);  opacity: 0; }
  12%  { transform: translateY(0)    scale(1, 1);    opacity: 1; }
  20%  { transform: translateY(0)    scale(1, 1.05); opacity: 1; }
  95%  { transform: translateY(500%) scale(.95, 1.1); opacity: 1; }
  100% { transform: translateY(560%) scale(.9, 1);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .sg-drop { animation: none; opacity: 1; transform: scale(1,1); }
}
.sg-intro__lead {
  margin-top: clamp(28px, 3.2vw, 44px);
  font-size: clamp(18px, 1.7vw, 24px);
  max-width: 760px;
  color: #000;
  font-weight: 300;
  line-height: 1.15;
}
.sg-intro__lead .hl { font-weight: 700; }

@media (max-width: 900px) {
  .sg-intro__tube {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 140px;
    margin: 24px auto 0;
  }
}

/* ---------- 2b. CHI SIAMO — SPECIAL GLUE + FEDERICO RAVA (white) ---------- */
.sg-about {
  background: #fff;
  color: var(--c-sg-black);
}
.sg-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

/* Titoli (SPE-CIAL GLUE / FEDERICO RAVA) */
.sg-about__title,
.sg-about__name {
  margin: 0;
  font-family: var(--font-sans-cond);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 56px);
  line-height: 0.92;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.sg-about__title { color: var(--c-sg-black); }
.sg-about__name  { color: var(--c-sg-red); }
.sg-about__dash  { color: var(--c-sg-pink); }

.sg-about__head { margin: 0 0 clamp(14px, 1.4vw, 22px); }

/* Titolo SPE-CIAL GLUE: stessa baseline del nome a destra */
.sg-about__col--left .sg-about__title {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
}

/* Foto */
.sg-about__media {
  margin: 0;
  overflow: hidden;
  background: #efeeec;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.sg-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

/* Corpo testo — dimensionato per arrivare al fondo della foto (aspect 4/5) */
.sg-about__body > p {
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.4;
  color: #141414;
}
.sg-about__body > p:last-child { margin-bottom: 0; }
.sg-about__body strong { font-weight: 700; color: var(--c-sg-black); }

@media (max-width: 900px) {
  .sg-about__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 48px);
  }
  .sg-about__media {
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
  }
}

/* ---------- 3. IN COSA CREDIAMO (fucsia) ---------- */
.sg-belief {
  background: var(--c-sg-pink);
  color: #fff;
}
.sg-belief__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: center;
}
.sg-belief__text { min-width: 0; }
.sg-belief__title {
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 140px);
  line-height: .85;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
}
.sg-belief__title span { display: block; }
.sg-belief__brain {
  width: 100%;
  max-width: 1000px;
  margin: 0;
}

/* Animated brain + plug + sparks */
.sg-cervello {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 0;
  padding-top: 78%;
  margin: 0 auto;
}
.sg-cervello img.cervello,
.sg-cervello > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Brain itself: original SVG is white; invert to black for contrast on pink bg */
.sg-cervello img.cervello { filter: invert(1); }

/* Plug + sparks in white */
.sg-cervello .fulmine path,
.sg-cervello .fulmine polygon,
.sg-cervello .presa path,
.sg-cervello .presa polygon { fill: #fff; }

/* Cable: white outline */
.sg-cervello .filo {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

@keyframes sg-lampo {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.95); }
}
.sg-cervello .fulmine1 { animation: sg-lampo 1.6s ease-in-out infinite; }
.sg-cervello .fulmine2 { animation: sg-lampo 1.6s ease-in-out infinite .4s; }
.sg-cervello .fulmine3 { animation: sg-lampo 1.6s ease-in-out infinite .8s; }

@keyframes sg-pulse-presa {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.sg-cervello .presa { animation: sg-pulse-presa 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .sg-cervello .fulmine1,
  .sg-cervello .fulmine2,
  .sg-cervello .fulmine3,
  .sg-cervello .presa { animation: none; }
}
.sg-belief__copy {
  margin-top: clamp(28px, 3.2vw, 44px);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
  max-width: 760px;
}
.sg-belief__copy p { margin: 0 0 14px; }

@media (max-width: 900px) {
  .sg-belief__grid { grid-template-columns: 1fr; }
}

/* ---------- 4. COSA FACCIAMO (white) ---------- */
.sg-services {
  background: #fff;
  color: var(--c-sg-black);
}
.sg-services__grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.sg-services__list {
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: .9;
  letter-spacing: -.015em;
  text-align: right;
}
.sg-services__list li {
  padding: 2px 0;
  color: var(--c-sg-black);
  cursor: pointer;
  transition: color .2s ease;
}
.sg-services__list li:hover,
.sg-services__list li.is-active { color: var(--c-sg-red); }
.sg-services__copy {
  font-size: clamp(16px, 1.55vw, 22px);
  font-weight: 300;
  line-height: 1.15;
  max-width: 760px;
  text-align: justify;
  color: var(--c-sg-black);
  align-self: center;
}
.sg-services__copy p { margin: 0 0 18px; }

@media (max-width: 900px) {
  .sg-services__grid { grid-template-columns: 1fr; }
}

/* ---------- 5. MANIFESTO (yellow) ---------- */
.sg-manifesto {
  background: var(--c-sg-yellow);
  color: var(--c-sg-black);
  text-align: center;
  overflow: hidden;
}
.sg-manifesto__text {
  font-size: clamp(30px, 4.8vw, 68px);
  line-height: .95;
  max-width: 1600px;
  margin: 0 auto;
  font-family: var(--font-sans-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--c-sg-black);
}
.sg-manifesto__text .w-marker,
.sg-manifesto__text .w-red,
.sg-manifesto__text .w-sans { display: inline-block; will-change: transform; }

/* ---- Reveal: word stagger on scroll into view (testo a flusso) ---- */
.sg-manifesto__text .sg-line { display: inline; }
.sg-manifesto__text .sg-word {
  display: inline-block;
  margin: 0;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .45s ease-out,
              transform .5s cubic-bezier(.2,.9,.3,1.2);
  will-change: transform, opacity;
}
.sg-manifesto__text.sg-in-view .sg-word {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* TrashHand handwritten */
.sg-manifesto__text .w-marker {
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: none;
  font-size: 1.12em;
  letter-spacing: 0;
  color: var(--c-sg-black);
  transform-origin: center 65%;
  transition: color .25s ease;
}
.sg-manifesto__text .w-marker:hover { color: var(--c-sg-red); }

@keyframes sg-wiggle {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* Red impact words */
.sg-manifesto__text .w-red {
  color: var(--c-sg-red);
  transform-origin: center;
}

/* Parole evidenziate — box rosso, testo bianco (effetto evidenziatore) */
.sg-manifesto__text .w-mark {
  display: inline-block;
  background: var(--c-sg-red);
  color: #fff;
  padding: .04em .26em .08em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Reveal-pop: le parole rosse crescono mentre si scoprono */
@keyframes sg-reveal-pop-red {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); }
  35%  { opacity: 1; transform: translateY(0)    scale(1); }
  55%  { opacity: 1; transform: translateY(0)    scale(1.22); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Barlow (regular, italic) — soft verbs */
.sg-manifesto__text .w-sans {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 700;
  font-size: .92em;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--c-sg-black);
}

/* Marker-style highlight (background) */
.sg-manifesto__text .w-underline {
  position: relative;
  background: linear-gradient(transparent 76%, var(--c-sg-pink) 76%, var(--c-sg-pink) 94%, transparent 94%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  padding: 0 .08em;
}
@keyframes sg-highlight {
  0%, 100% { background-size: 100% 100%; }
  45%      { background-size: 18% 100%; }
  55%      { background-size: 18% 100%; }
}

/* ---- Continuous quirks — start after the reveal (~3s) ---- */
.sg-manifesto__text.sg-in-view .w-marker {
  animation: sg-wiggle 5s ease-in-out 3s infinite;
}
.sg-manifesto__text.sg-in-view .w-marker:nth-of-type(2n) { animation-delay: 3.4s; }
.sg-manifesto__text.sg-in-view .w-marker:nth-of-type(3n) { animation-delay: 3.8s; }
.sg-manifesto__text.sg-in-view .w-marker:nth-of-type(5n) { animation-delay: 4.2s; }
.sg-manifesto__text.sg-in-view .w-marker:hover { animation-duration: 1.2s; }
.sg-manifesto__text.sg-in-view .w-red {
  animation: sg-reveal-pop-red 1.1s cubic-bezier(.3,.9,.4,1) both;
}
.sg-manifesto__text.sg-in-view .w-underline {
  animation: sg-highlight 4s ease-in-out 3.2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sg-manifesto__text .sg-line,
  .sg-manifesto__text .sg-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sg-manifesto__text.sg-in-view .w-marker,
  .sg-manifesto__text.sg-in-view .w-red,
  .sg-manifesto__text.sg-in-view .w-underline { animation: none; }
}

/* ---------- 6. PORTFOLIO ---------- */
.sg-portfolio {
  background: #fff;
  padding-top: 60px;
}

/* Filtri */
.sg-portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}
.sg-portfolio__filter {
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 2px solid var(--c-sg-black);
  background: transparent;
  color: var(--c-sg-black);
  border-radius: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sg-portfolio__filter:hover,
.sg-portfolio__filter.is-active { background: var(--c-sg-black); color: #fff; border-color: var(--c-sg-black); }

/* Filtri colorati per categoria — matchano le label dei progetti */
.sg-portfolio__filter[data-filter="corporate"]:hover,
.sg-portfolio__filter[data-filter="corporate"].is-active {
  background: var(--c-sg-pink);
  border-color: var(--c-sg-pink);
  color: #fff;
}
.sg-portfolio__filter[data-filter="consumer"]:hover,
.sg-portfolio__filter[data-filter="consumer"].is-active {
  background: var(--c-sg-yellow);
  border-color: var(--c-sg-yellow);
  color: var(--c-sg-black);
}

/* Grid 5×12 — masonry sfalsato che forma un rettangolo preciso.
   Ogni colonna somma esattamente 12 unità di --row-h. */
.sg-portfolio__grid {
  --row-h: clamp(40px, 4.2vw, 72px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(12, var(--row-h));
  grid-auto-flow: column;
  gap: 12px;
}
/* Filtri attivi: card uniformi in griglia rigida → rettangolo perfetto.
   Gli span v-2/3/4 vengono neutralizzati.
   10 progetti per categoria → griglia 5×2. */
.sg-portfolio__grid[data-active-filter="corporate"],
.sg-portfolio__grid[data-active-filter="consumer"] {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
}
.sg-portfolio__grid[data-active-filter="corporate"] .sg-portfolio__item,
.sg-portfolio__grid[data-active-filter="consumer"]  .sg-portfolio__item {
  grid-row: span 1;
  grid-column: span 1;
  aspect-ratio: 4 / 3;
}
@media (max-width: 900px) {
  .sg-portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: var(--row-h);
    grid-auto-flow: row dense;
  }
  .sg-portfolio__grid[data-active-filter="corporate"],
  .sg-portfolio__grid[data-active-filter="consumer"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .sg-portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sg-portfolio__grid[data-active-filter="corporate"],
  .sg-portfolio__grid[data-active-filter="consumer"] {
    grid-template-columns: 1fr;
  }
}

.sg-portfolio__item {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 2px;
  transition: opacity .25s ease, transform .25s ease;
}
.sg-portfolio__item.is-hidden { display: none; }

/* Spans verticali (in unità di --row-h) */
.sg-portfolio__item.v-2 { grid-row: span 2; }
.sg-portfolio__item.v-3 { grid-row: span 3; }
.sg-portfolio__item.v-4 { grid-row: span 4; }

/* Placeholder gradient backgrounds (in attesa delle foto) */
.sg-portfolio__item.l-yellow { background: linear-gradient(135deg, #c0a000, #6b5800); }
.sg-portfolio__item.l-cyan   { background: linear-gradient(135deg, #1e3a5f, #0a1d2f); }
.sg-portfolio__item.l-pink   { background: linear-gradient(135deg, #5a2b0c, #2b1607); }
.sg-portfolio__item.l-black  { background: linear-gradient(135deg, #232323, #4a4a4a); }
.sg-portfolio__item.l-white  { background: linear-gradient(135deg, #b48a55, #604326); }

.sg-portfolio__item .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans-cond);
  font-size: 22px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.18);
  text-align: center;
  padding: 0 16px;
}
.sg-portfolio__item > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.sg-portfolio__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}
.sg-portfolio__item:hover > img { transform: scale(1.06); }
.sg-portfolio__item:hover::after { opacity: 1; }
.sg-portfolio__label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  padding: 7px 14px;
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: clamp(13px, 1.15vw, 18px);
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sg-portfolio__brand {
  white-space: nowrap;
  color: #fff;
}
/* Parte dopo la "|" — font scritto a mano TrashHand */
.sg-portfolio__hand {
  display: inline-block;
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: -.05em;
  color: var(--c-sg-black);
}
.sg-portfolio__hand::before {
  content: "|";
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: .62em;
  letter-spacing: 0;
  vertical-align: .1em;
  margin: 0 .3em 0 0;
  opacity: .5;
}
/* Sfondo fascetta per categoria: rosso = corporate, giallo = consumer */
.sg-portfolio__item[data-cat="corporate"] .sg-portfolio__label { background: var(--c-sg-red); }
.sg-portfolio__item[data-cat="consumer"]  .sg-portfolio__label { background: var(--c-sg-yellow); }

/* ---------- 7. CLIENTI ---------- */
.sg-clients { background: #fff; padding-top: 20px; padding-bottom: 100px; }
.sg-clients__grid {
  --cgap: clamp(10px, 1.2vw, 22px);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--cgap);
  row-gap: clamp(0px, .2vw, 4px);
}
.sg-clients__cell {
  /* 14 loghi per riga su desktop → 68 loghi disposti su 5 righe (14·4 + 12);
     le righe parziali restano centrate così nessun logo finisce da solo. */
  flex: 0 0 auto;
  width: calc((100% - 13 * var(--cgap)) / 14);
  height: clamp(64px, 7vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-clients__cell img {
  max-width: 100%;
  /* I loghi quadrati hanno bisogno di un cap di altezza per non
     dominare i loghi orizzontali (limitati dalla larghezza cella). */
  max-height: 55%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Garantisce nero pieno se il PNG ha sfumature o non è perfettamente monocromo */
  filter: brightness(0) saturate(100%);
}
@media (max-width: 1100px) {
  .sg-clients__cell { width: calc((100% - 5 * var(--cgap)) / 6); }
}
@media (max-width: 900px) {
  .sg-clients__cell { width: calc((100% - 3 * var(--cgap)) / 4); }
}
@media (max-width: 560px) {
  .sg-clients__cell { width: calc((100% - 2 * var(--cgap)) / 3); }
}

/* ============================================================
   8. CONTATTI — sezione unificata "Idea Factory"
   ============================================================ */
.sg-contact {
  position: relative;
  background: var(--c-sg-black);
  color: #fff;
  padding: clamp(80px, 10vw, 160px) var(--pad-x) clamp(48px, 5vw, 80px);
  overflow: hidden;
}
/* Trama "grain" leggera per dare consistenza al nero */
.sg-contact::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(235,0,69,.10), transparent 38%),
    radial-gradient(circle at 82% 75%, rgba(0,184,255,.08), transparent 42%);
  pointer-events: none;
}
.sg-contact > .wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }

/* ---- HEAD ---- */
.sg-contact__head { max-width: 1100px; }
.sg-contact__kicker {
  margin: 0 0 clamp(20px, 2vw, 32px);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 12px;
}
.sg-contact__kicker em {
  font-family: var(--font-brush);
  font-style: normal;
  text-transform: none;
  letter-spacing: .01em;
  font-size: 22px;
  color: var(--c-sg-yellow);
}
.sg-contact__title {
  margin: 0;
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: clamp(44px, 7.2vw, 120px);
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.sg-contact__title .extra {
  font-family: var(--font-brush);
  font-weight: 400;
  color: var(--c-sg-red);
  text-transform: uppercase;
  letter-spacing: .01em;
  display: inline-block;
  transform: rotate(-2deg);
}
.sg-contact__lead {
  margin: clamp(20px, 2.4vw, 36px) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
  color: rgba(255,255,255,.78);
  max-width: 540px;
}

/* ---- BODY: bulbs + form ---- */
.sg-contact__body {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(56px, 6vw, 96px);
  align-items: stretch;
}

/* ---- BULBS area (artwork animato) ---- */
.sg-contact__bulbs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2vw, 32px);
  padding: clamp(8px, 1vw, 16px) 0;
}
.sg-contact__bulbs-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  display: flex; align-items: center; gap: 10px;
}
.sg-contact__bulbs-note .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-sg-red);
  box-shadow: 0 0 12px var(--c-sg-red);
  animation: sg-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes sg-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Installazione "lampadine" — PNG hand-drawn fisso + un solo fulmine animato
   tra le due lampadine (stesso pattern del .sg-cervello). */
.sg-lampadine {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: auto 0;
}
.sg-lampadine__art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* il PNG è nero su trasparente: invertito diventa bianco sul fondo nero */
  filter: invert(1);
  z-index: 1;
}

/* Fulmine tra le due lampadine — posizionato circa a metà tra
   il centro della lampadina A (≈32%,35%) e quella B (≈70%,64%). */
.sg-lampadine__bolt {
  position: absolute;
  left: 53%;
  top: 53%;
  width: 19.85%;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  z-index: 2;
  object-fit: contain;
  animation: sg-lampo-bolt 1.6s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes sg-lampo-bolt {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .4; transform: translate(-50%, -50%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-lampadine__bolt { animation: none; }
}

/* ---- FORM ---- */
.sg-contact__form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(32px, 3.5vw, 48px);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  position: relative;
}
/* Scotch yellow nell'angolo del form */
.sg-contact__form::before {
  content: "";
  position: absolute;
  top: -12px; left: clamp(24px, 4vw, 56px);
  width: clamp(80px, 10vw, 130px);
  height: 26px;
  background: var(--c-sg-yellow);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 6px,
      rgba(0,0,0,.05) 6px 8px
    );
  transform: rotate(-3deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  z-index: 2;
}
.sg-contact__form-label {
  margin: 0 0 8px;
  font-family: var(--font-brush);
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--c-sg-yellow);
  letter-spacing: .01em;
  transform: rotate(-1deg);
  align-self: flex-start;
}
.sg-contact__form .field {
  display: flex; flex-direction: column; gap: 6px;
}
.sg-contact__form .field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  padding: 0;
}
.sg-contact__form label {
  font-family: var(--font-sans-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.sg-contact__form input,
.sg-contact__form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(255,255,255,.18);
  color: #fff;
  font: inherit;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  padding: 6px 0 10px;
  outline: none;
  transition: border-color .2s ease;
}
.sg-contact__form input::placeholder,
.sg-contact__form textarea::placeholder {
  color: rgba(255,255,255,.22);
  font-style: italic;
}
.sg-contact__form input:focus,
.sg-contact__form textarea:focus {
  border-color: var(--c-sg-red);
}
.sg-contact__form textarea { min-height: 80px; resize: vertical; }

.sg-contact__form button {
  align-self: flex-start;
  margin-top: clamp(10px, 1.6vw, 22px);
  padding: 16px 28px;
  background: var(--c-sg-red);
  color: #fff;
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background .2s ease, transform .25s ease;
}
.sg-contact__form button .b-arrow {
  transition: transform .25s ease;
}
.sg-contact__form button:hover {
  background: var(--c-sg-black);
  transform: translateY(-2px);
}
.sg-contact__form button:hover .b-arrow { transform: translateX(6px); }
.sg-contact__form button:disabled {
  opacity: .55;
  cursor: progress;
  transform: none;
}

/* Honeypot anti-spam: fuori dallo schermo, invisibile ma non display:none
   (alcuni bot ignorano i campi display:none) */
.sg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messaggio di esito dell'invio */
.sg-contact__status {
  margin: 14px 0 0;
  min-height: 1.3em;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.sg-contact__status.is-visible {
  opacity: 1;
  transform: none;
}
.sg-contact__status.is-ok { color: #6ee7a8; }
.sg-contact__status.is-error { color: var(--c-sg-red); }

/* ---- FOOTER STRIP ---- */
.sg-contact__foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.info-cell { display: flex; flex-direction: column; gap: 8px; }
.info-cell__label {
  font-family: var(--font-sans-cond);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-sg-yellow);
}
.info-cell__value,
.info-cell a:not(.sg-contact__social a) {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  transition: color .2s ease;
}
.info-cell a:hover { color: var(--c-sg-red); }

.sg-contact__social {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.sg-contact__social a {
  width: 18px; height: 18px;
  color: #fff;
  display: inline-flex;
  opacity: .85;
  transition: opacity .18s ease, transform .18s ease;
}
.sg-contact__social a:hover { opacity: 1; transform: translateY(-2px); }
.sg-contact__social svg { width: 18px; height: 18px; fill: #fff; }
.sg-contact__social a[aria-label="YouTube"] { width: 22px; }
.sg-contact__social a[aria-label="YouTube"] svg { width: 22px; height: 16px; }

@media (max-width: 900px) {
  .sg-contact__body { grid-template-columns: 1fr; }
  .sg-contact__foot { grid-template-columns: repeat(2, 1fr); }
  .sg-contact__form .field--row { grid-template-columns: 1fr; }
  .sg-contact__bulbs { min-height: 320px; }
}
@media (max-width: 560px) {
  .sg-contact__foot { grid-template-columns: 1fr; }
}

/* ---------- Footer (SG variant left mark) ---------- */
.sg .site-footer .footer-mark {
  font-family: var(--font-sans-cond);
  font-style: normal;
  font-weight: 700;
  letter-spacing: normal;
}

/* ============================================================
   PROJECT MODAL (portfolio popup)
   ============================================================ */
html.is-modal-open, html.is-modal-open body { overflow: hidden; }

.pj-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
}
.pj-modal[hidden] { display: none; }

.pj-modal__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    rgba(8,8,10,.86);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
  cursor: pointer;
}
.pj-modal.is-open .pj-modal__backdrop { opacity: 1; }

.pj-modal__card {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100vh - clamp(24px, 8vw, 96px));
  background: #fafaf7;
  color: var(--c-sg-black);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.04);
  opacity: 0;
  transform: translateY(40px) scale(.96) rotate(-.4deg);
  transition: opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1);
  outline: none;
}
.pj-modal.is-open .pj-modal__card {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

/* --- HEADER --- */
.pj-modal__head {
  position: relative;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px) clamp(40px, 5vw, 64px);
  color: #fff;
  background: var(--c-sg-black);
  overflow: hidden;
}
.pj-modal[data-theme="yellow"] .pj-modal__head { background: #1a1a1a; }
.pj-modal[data-theme="yellow"] .pj-modal__head::before,
.pj-modal[data-theme="cyan"]   .pj-modal__head::before,
.pj-modal[data-theme="pink"]   .pj-modal__head::before,
.pj-modal[data-theme="black"]  .pj-modal__head::before,
.pj-modal[data-theme="white"]  .pj-modal__head::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .96;
  z-index: 0;
}
.pj-modal[data-theme="yellow"] .pj-modal__head::before { background: linear-gradient(115deg, var(--c-sg-yellow) 0%, #b58800 100%); }
.pj-modal[data-theme="cyan"]   .pj-modal__head::before { background: linear-gradient(115deg, var(--c-sg-cyan) 0%, #0074a1 100%); }
.pj-modal[data-theme="pink"]   .pj-modal__head::before { background: linear-gradient(115deg, var(--c-sg-pink) 0%, #ad1f5c 100%); }
.pj-modal[data-theme="black"]  .pj-modal__head::before { background: linear-gradient(115deg, #1a1a1a 0%, #3a3a3a 100%); }
.pj-modal[data-theme="white"]  .pj-modal__head::before { background: linear-gradient(115deg, #f1ece1 0%, #cfc6b5 100%); color: var(--c-sg-black); }

.pj-modal[data-theme="yellow"] .pj-modal__head,
.pj-modal[data-theme="white"]  .pj-modal__head { color: var(--c-sg-black); }

.pj-modal__head-inner { position: relative; z-index: 1; max-width: 90%; }

.pj-modal__tape {
  position: absolute;
  top: -16px;
  left: clamp(40px, 8vw, 120px);
  width: clamp(120px, 14vw, 180px);
  height: 38px;
  background: var(--c-sg-yellow);
  transform: rotate(-4deg);
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  opacity: .92;
}
.pj-modal__tape::before,
.pj-modal__tape::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 6px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.5) 0 2px,
      transparent 2px 5px
    );
}
.pj-modal__tape::before { left: 0; }
.pj-modal__tape::after  { right: 0; }
.pj-modal[data-theme="yellow"] .pj-modal__tape { background: var(--c-sg-pink); }

.pj-modal__kicker {
  margin: 0 0 14px;
  font-family: var(--font-sans-cond);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: .85;
  display: flex; align-items: center; gap: 14px;
}
.pj-modal__kicker .pj-modal__cat::after {
  content: "·";
  margin-left: 14px;
  opacity: .6;
}

.pj-modal__title {
  margin: 0;
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 84px);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.pj-modal__client {
  margin: 18px 0 0;
  font-family: var(--font-brush);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: .01em;
  opacity: .95;
  padding-bottom: 4px;
}

/* --- CLOSE --- */
.pj-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.pj-modal__close span {
  font-family: var(--font-sans-cond);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.pj-modal__close:hover { transform: scale(1.15); opacity: .85; }

/* --- BODY --- */
.pj-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px) clamp(36px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.pj-modal__body::-webkit-scrollbar { width: 8px; }
.pj-modal__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }

/* --- GALLERY (asimmetrica) --- */
.pj-modal__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 160px;
  gap: 10px;
}
.pj-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: #222;
}
.pj-tile--1 { grid-column: span 2; grid-row: span 1; }
.pj-tile--2 { grid-column: span 1; }
.pj-tile--3 { grid-column: span 1; }
.pj-tile--4 { grid-column: span 2; grid-row: span 1; height: 140px; }

.pj-tile figcaption {
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: var(--font-sans-cond);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 4px 8px;
  border-radius: 2px;
}

/* Placeholder gradients (in attesa delle foto vere) */
.g-yellow  { background: linear-gradient(135deg, #c0a000, #6b5800); }
.g-cyan-a  { background: linear-gradient(135deg, #1e3a5f, #0a1d2f); }
.g-cyan-b  { background: linear-gradient(135deg, #0095c8, #003f55); }
.g-pink    { background: linear-gradient(135deg, var(--c-sg-pink), #5a1130); }
.g-dark    { background: linear-gradient(135deg, #2c2c2c, #555); }
.g-mono    { background: linear-gradient(135deg, #cdcdcd, #6e6e6e); }
.g-gold    { background: linear-gradient(135deg, #b48a55, #604326); }
.g-bronze  { background: linear-gradient(135deg, #8a6b3a, #3f2c12); }

/* --- CONTENT --- */
.pj-modal__content { font-size: 15.5px; }
.pj-modal__lead {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.28;
  color: #1a1a1a;
}
.pj-modal__desc p {
  margin: 0 0 12px;
  font-family: var(--font-body);
  line-height: 1.55;
  color: #2a2a2a;
}

/* --- META --- */
.pj-modal__meta {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 22px 0 0;
  border-top: 2px solid var(--c-sg-black);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pj-modal__meta div { display: flex; flex-direction: column; gap: 4px; }
.pj-modal__meta dt {
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #888;
}
.pj-modal__meta dd {
  margin: 0;
  font-family: var(--font-sans-cond);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-sg-black);
}

@media (max-width: 860px) {
  /* L'header in cima è trasparente: la tendina mobile eredita "background: inherit"
     e lascia trasparire la hero. Forziamo uno sfondo nero solido. */
  .sg .nav { background: #000; }

  .pj-modal__body { grid-template-columns: 1fr; }
  .pj-modal__gallery { grid-template-rows: 200px 140px; }
  .pj-modal__meta { grid-template-columns: repeat(2, 1fr); }
  .pj-modal__close { width: 46px; height: 46px; }
  .pj-modal__close span { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .pj-modal__backdrop, .pj-modal__card { transition: none; }
  .pj-modal__card { transform: none; }
}

/* ---------- PORTFOLIO: video preview in copertina ---------- */
.sg-portfolio__preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.sg-portfolio__preview.is-playing { opacity: 1; }

/* ---------- MODAL: video (YouTube o file locale) ---------- */
.pj-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pj-media iframe,
.pj-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* ---------- MODAL: gallery foto reali ---------- */
.pj-modal__gallery {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
}
.pj-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: clamp(140px, 16vw, 210px);
  gap: 10px;
}
.pj-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: #222;
  cursor: zoom-in;
}
.pj-photo--wide { grid-column: span 2; }
.pj-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.pj-photo:hover img { transform: scale(1.05); }

/* ---------- LIGHTBOX ---------- */
.pj-lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pj-lightbox[hidden] { display: none; }
.pj-lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.pj-lightbox__close,
.pj-lightbox__nav {
  position: absolute;
  z-index: 2;
  background: none;
  color: #fff;
  border: 0;
  padding: 0;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-family: var(--font-sans-cond);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.pj-lightbox__close { top: 16px; right: 16px; font-size: 38px; }
.pj-lightbox__close:hover { transform: scale(1.15); opacity: .85; }
.pj-lightbox__nav { font-size: 46px; }
.pj-lightbox__nav--prev { left: 18px; }
.pj-lightbox__nav--next { right: 18px; }
.pj-lightbox__nav:hover { transform: scale(1.12); opacity: .85; }
@media (max-width: 860px) {
  .pj-photos { grid-auto-rows: clamp(120px, 22vw, 180px); }
  .pj-lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
}

/* ============================================================
   PROJECT MODAL — layout "deck" come la presentazione PPT
   ============================================================ */
.pj-modal[data-theme="cyan"]   { --pj-bar: var(--c-sg-cyan); }
.pj-modal[data-theme="yellow"] { --pj-bar: var(--c-sg-yellow); }
.pj-modal[data-theme="pink"]   { --pj-bar: var(--c-sg-pink); }
.pj-modal[data-theme="black"]  { --pj-bar: #1a1a1a; }
.pj-modal[data-theme="white"]  { --pj-bar: #cfc6b5; }

.pj-deck { background: #fff; }
.pj-deck__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pj-deck__scroll::-webkit-scrollbar { width: 8px; }
.pj-deck__scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 4px; }

/* --- Slide 1: copertina --- */
.pj-cover {
  position: relative;
  height: clamp(380px, 58vh, 640px);
  background: #000;
  overflow: hidden;
}
.pj-cover__media,
.pj-cover__media img,
.pj-cover__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.pj-cover__media img,
.pj-cover__media video { object-fit: cover; display: block; }
.pj-cover__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.18) 45%, rgba(0,0,0,.42));
  z-index: 1;
}
.pj-cover__inner {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 80px);
  color: #fff;
}
.pj-cover__title {
  margin: 0;
  font-family: var(--font-sans-cond);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}

/* --- Slide 2: testo --- */
.pj-slide--text {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: #fff;
}
.pj-slide__media {
  margin: 0;
  min-height: clamp(320px, 44vh, 520px);
  overflow: hidden;
  cursor: zoom-in;
}
.pj-slide__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pj-slide__copy {
  padding: clamp(24px, 3.4vw, 48px) clamp(22px, 3vw, 44px);
}
.pj-slide__hand {
  margin: 0 0 18px;
  font-family: var(--font-brush);
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.05;
  color: var(--c-sg-black);
}
.pj-slide__desc p {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #2a2a2a;
}
.pj-slide__bullets {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.pj-slide__bullets li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-sg-black);
}
.pj-slide__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 16px;
}

/* --- Video intero --- */
.pj-deck .pj-media {
  margin: 0;
  border-radius: 0;
  border-top: 6px solid #fff;
  border-bottom: 6px solid #fff;
}

/* --- Slide foto: righe con spazi bianchi tra le foto --- */
.pj-deck__photos { background: #fff; }
.pj-row {
  display: grid;
  gap: 6px;
  background: #fff;
}
.pj-row + .pj-row { margin-top: 6px; }
.pj-row--1 { grid-template-columns: 1fr; }
.pj-row--2 { grid-template-columns: 1fr 1fr; }
.pj-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.pj-row__ph {
  margin: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: #111;
}
.pj-row--1 .pj-row__ph { height: clamp(320px, 52vh, 600px); }
.pj-row--2 .pj-row__ph { height: clamp(240px, 38vh, 460px); }
.pj-row--3 .pj-row__ph { height: clamp(190px, 30vh, 360px); }
.pj-row__ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.pj-row__ph:hover img { transform: scale(1.04); }

@media (max-width: 860px) {
  .pj-cover { height: clamp(300px, 48vh, 480px); }
  .pj-slide--text { grid-template-columns: 1fr; }
  .pj-slide__media { min-height: 240px; max-height: 320px; }
  .pj-row--2, .pj-row--3 { grid-template-columns: 1fr 1fr; }
  .pj-row--1 .pj-row__ph { height: clamp(220px, 36vh, 380px); }
  .pj-row--2 .pj-row__ph, .pj-row--3 .pj-row__ph { height: clamp(140px, 24vh, 240px); }
}

/* Video locali nel modal: formato nativo, niente letterbox del box 16:9 */
.pj-media--native { aspect-ratio: auto; }
.pj-media--native video {
  position: static;
  width: 100%;
  height: auto;
}