/* =========================================================
   HOME
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(var(--gutter) * 2 + 3.6rem) var(--gutter) var(--gutter);
  overflow: clip;
}
.hero__meta { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; position: relative; z-index: 2; }
.hero__star {
  position: absolute; right: -6vw; top: 10vh; width: min(46vw, 62vh); height: auto; z-index: 0;
  opacity: .9;
}
.hero__title {
  position: relative; z-index: 1;
  font-size: min(12vw, 25vh);
}
html[lang="it"] .hero__title { font-size: min(10vw, 23vh); }
.hero__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; position: relative; z-index: 2; padding-right: 90px; }
.hero__sub { max-width: 38ch; font-size: clamp(.95rem, 1.35vw, 1.3rem); font-weight: 700; line-height: 1.22; }
.scrollcue { display: inline-flex; align-items: center; gap: .6rem; font-weight: 900; text-transform: uppercase; font-size: .85rem; }
.scrollcue svg { width: 1.3rem; height: 1.3rem; transform: rotate(135deg); animation: nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 50% { transform: rotate(135deg) translate(.3rem, -.3rem); } }

@media (max-width: 800px) {
  .hero__title { font-stretch: 70%; font-size: min(18vw, 19vh); line-height: .86; }
  html[lang="it"] .hero__title { font-size: min(19vw, 17vh); }
  .hero__star { width: 78vw; right: -26vw; top: 14vh; }
}

/* ---------- Marquee band ---------- */
.band { padding: clamp(1rem, 2vw, 2rem) 0; overflow: hidden; }
.band .marquee + .marquee { margin-top: -.1em; }

/* ---------- About ---------- */
.about { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.about__text {
  font-weight: 900; font-stretch: 108%; text-transform: uppercase;
  font-size: clamp(1.6rem, 4.3vw, 4.8rem); line-height: .98; letter-spacing: -.035em;
  max-width: 26ch;
}
.about__row { display: grid; grid-template-columns: minmax(220px, .8fr) 2.2fr; gap: var(--gutter); align-items: start; }
.about__fig { display: grid; gap: .7rem; }
.about__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 3px solid var(--black); background: #000; }
.about__img img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.about__fig figcaption { font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.edu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); align-self: end; }
.edu li { border-top: 3px solid var(--black); padding-top: 1rem; display: grid; gap: .5rem; align-content: start; }
.edu b { font-size: clamp(1.6rem, 3.2vw, 3.4rem); font-weight: 900; font-stretch: 114%; text-transform: uppercase; letter-spacing: -.04em; line-height: .9; }
.edu span { font-weight: 700; font-size: clamp(.85rem, 1.1vw, 1.1rem); max-width: 28ch; }
@media (max-width: 800px) {
  .about__text { max-width: none; font-stretch: 100%; }
  .edu { grid-template-columns: 1fr; }
  .about__row { grid-template-columns: 1fr; gap: 2rem; }
  .about__fig { width: 72%; }
}

/* ---------- Section heads ---------- */
.head { padding: 0 var(--gutter); margin-bottom: clamp(2rem, 5vw, 5rem); display: grid; gap: 1.4rem; }
.services, .work { padding: clamp(4rem, 10vw, 10rem) 0 0; }
.services .h2, .work .h2 { font-size: clamp(2.6rem, 8.6vw, 9.5rem); }

.work { padding-bottom: clamp(4rem, 10vw, 10rem); }
.work__cta { padding: clamp(2rem, 4vw, 4rem) var(--gutter) 0; display: flex; justify-content: flex-end; }
.row--work { grid-template-columns: 4rem minmax(0, 2fr) minmax(0, 1fr) 2.6rem; }
@media (max-width: 800px) {
  .row--work { grid-template-columns: 3rem minmax(0, 1fr) 1.6rem; }
}

/* ---------- Process (svg path) ---------- */
.process { padding: clamp(5rem, 12vw, 12rem) 0; overflow: clip; }
.process .h2 { font-size: clamp(2.4rem, 8vw, 8.4rem); max-width: 14ch; }
.steps { position: relative; padding: 0 var(--gutter); margin-top: clamp(3rem, 8vw, 8rem); }
.steps__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.steps__bg { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.steps__path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; }
.steps__dot { fill: var(--paper); stroke: var(--red); stroke-width: 6; }
.step { position: relative; min-height: clamp(18rem, 48vh, 30rem); display: flex; align-items: center; }
.step__dot {
  position: absolute; top: 50%; width: clamp(22px, 2.4vw, 34px); aspect-ratio: 1; border-radius: 50%;
  border: 4px solid var(--red); background: var(--black); transform: translate(-50%, -50%); z-index: 1;
  transition: background .4s, transform .6s var(--out);
}
.step:nth-child(odd) .step__dot { left: 76%; }
.step:nth-child(even) .step__dot { left: 24%; }
.step.is-reached .step__dot { background: var(--red); transform: translate(-50%, -50%) scale(1.5); }
.step__body { position: relative; z-index: 2; width: min(46%, 36rem); background: var(--black); padding: 1rem 0; }
.step:nth-child(even) .step__body { margin-left: auto; }
.step__n { font-size: .85rem; font-weight: 900; opacity: .6; }
.step__body h3 {
  font-size: clamp(2.4rem, 7vw, 7.4rem); font-weight: 900; font-stretch: 118%;
  text-transform: uppercase; letter-spacing: -.045em; line-height: .88; margin: .3rem 0 .8rem;
}
html[lang="it"] .step__body h3 { font-size: clamp(2.2rem, 4.4vw, 4.8rem); }
.step__body p { font-weight: 700; font-size: clamp(.9rem, 1.2vw, 1.2rem); color: var(--paper); max-width: 34ch; }
@media (max-width: 800px) {
  /* line runs down a left lane, text sits to its right: they never cross */
  .steps { padding-left: 0; }
  .step { min-height: 20rem; align-items: flex-start; }
  .step__dot { top: 1.6rem; }
  .step:nth-child(odd) .step__dot { left: 26px; }
  .step:nth-child(even) .step__dot { left: 50px; }
  .step__body { width: 100%; margin: 0 !important; padding: .6rem var(--gutter) 0 4.6rem; background: none; }
  .step__body h3 { font-stretch: 85%; }
}

/* ---------- Collage ---------- */
.collage { position: relative; height: 170vh; overflow: hidden; contain: paint; padding: 0 var(--gutter); }
.collage__fig { position: absolute; display: block; border: 3px solid var(--black); }
.collage__fig .art { position: absolute; inset: 0; }
.f1 { left: 6%; top: 8%; width: min(38vw, 520px); aspect-ratio: 4 / 5; }
.f2 { right: 8%; top: 30%; width: min(30vw, 420px); aspect-ratio: 1; z-index: 3; }
.f3 { left: 26%; top: 58%; width: min(42vw, 600px); aspect-ratio: 16 / 11; }
.collage__text {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.collage__text span { display: block; font-size: clamp(5rem, 22vw, 26rem); white-space: nowrap; color: var(--black); mix-blend-mode: normal; }
.collage__l2 { -webkit-text-stroke: 3px var(--black); color: transparent !important; }
.collage__cta { position: absolute; right: var(--gutter); bottom: clamp(2rem, 6vw, 6rem); z-index: 4; }
@media (max-width: 800px) {
  .collage { height: 190vh; }
  .f1 { left: var(--gutter); top: 5%; width: 62vw; }
  .f2 { right: var(--gutter); top: 34%; width: 52vw; }
  .f3 { left: var(--gutter); top: 62%; width: 70vw; }
  .collage__text span { font-size: 27vw; font-stretch: 84%; }
  .collage__l2 { -webkit-text-stroke-width: 2px; }
}

/* ---------- CTA ---------- */
.cta { padding: clamp(1.5rem, 4vw, 4rem) 0; overflow: hidden; }
.cta__link { display: block; transition: color .3s; }
.cta__link:hover { color: var(--paper); }