/* ==========================================================================
   Dornaz Vazifehaali — Portfolio
   Ricostruzione statica del sito Framer (dornazvazifehaali.com)

   Struttura del file
   1.  Font
   2.  Token di design
   3.  Reset e base
   4.  Layout (container, section)
   5.  Scala tipografica
   6.  Grain di sfondo / cursore / preloader
   7.  Navigazione
   8.  Bottoni e badge
   9.  Hero + card 3D sticky
   10. Accordion expertise
   11. Blocco About (statistiche, contatti)
   12. Card progetti (stacking)
   13. Marquee clienti
   14. FAQ
   15. Form di contatto
   16. Pagina About (journey, tech stack, process)
   17. Pagine case study
   18. Animazioni di comparsa
   ========================================================================== */

/* ---------- 1. Font ------------------------------------------------------ */

@font-face {
  font-family: 'Antonio';
  src: url('../fonts/antonio-latin-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Token di design ------------------------------------------ */

:root {
  /* colori */
  --bg: #1a1a1b;
  --white: #fff;
  --orange: #fa9e00;
  --green: #0bde66;
  --card: #303030;
  --input-bg: #333;
  --nav-bg: rgba(15, 15, 15, .9);
  --line: #5c5c5c;
  --ink: #303030;          /* testo su fondo chiaro/arancio */
  --muted: #b5b5b5;

  /* famiglie */
  --font-display: 'Antonio', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* layout */
  --container: 1200px;
  --gutter: 40px;
  --section-y: 120px;

  /* scala tipografica — desktop (>=1200px) */
  --fs-eyebrow: 32px;   --lh-eyebrow: 41.6px;
  --fs-hero: 120px;     --lh-hero: 132px;    --ls-hero: -3.6px;
  --fs-h2: 60px;        --lh-h2: 78px;
  --fs-h3: 32px;        --lh-h3: 41.6px;
  --fs-h4: 26px;        --lh-h4: 33.8px;
  --fs-body: 18px;      --lh-body: 27px;
  --fs-small: 14px;     --lh-small: 21px;
  --fs-stat: 60px;      --lh-stat: 60px;
  --fs-stat-label: 18px; --lh-stat-label: 23.4px;

  /* card 3D — rapporto 5:7 come l'originale */
  --card-w: 340px;
  --card-h: 476px;
}

/* tablet 810–1199.98px */
@media (max-width: 1199.98px) {
  :root {
    --fs-hero: 96px;   --lh-hero: 105.6px;  --ls-hero: -2.88px;
    --fs-h2: 48px;     --lh-h2: 62.4px;
    --fs-h4: 20px;     --lh-h4: 26px;
    --fs-body: 16px;   --lh-body: 24px;
    --fs-stat-label: 16px; --lh-stat-label: 20.8px;
    --card-w: 260px;
    --card-h: 364px;
  }
}

/* phone <=809.98px */
@media (max-width: 809.98px) {
  :root {
    --gutter: 20px;
    --section-y: 80px;
    --fs-eyebrow: 24px; --lh-eyebrow: 31.2px;
    --fs-hero: 56px;    --lh-hero: 61.6px;  --ls-hero: -1.68px;
    --fs-h2: 42px;      --lh-h2: 54.6px;
    --fs-h3: 24px;      --lh-h3: 31.2px;
  }
}

/* ---------- 3. Reset e base --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
}

p { margin: 0; }

::selection { background: var(--orange); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4. Layout --------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* i titoli occupano la riga intera, il paragrafo introduttivo si ferma a 500px */
.section-head .lead { margin-top: 4px; max-width: 500px; }

@media (max-width: 809.98px) {
  .section-head .lead { max-width: none; }
}

/* ---------- 5. Scala tipografica ---------------------------------------- */

/* le classi .h1–.h4 servono anche su <span>/<div>, quindi ripetono
   famiglia e maiuscolo che le regole di tag applicano solo agli heading */
.h1, .h2, .h3, .h4, .hero-word {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.h1,
.hero-word {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  font-weight: 700;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 400;
}

.h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
}

.lead { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 300; }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.orange { color: var(--orange); }

/* ---------- 6. Grain, cursore, preloader -------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .12;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  background-image: url('../img/noise-grain.gif');
  background-size: 250px;
  background-repeat: repeat;
}

/* pallino arancio che segue il mouse */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 99px;
  background: var(--orange);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity .3s ease;
}
.cursor-dot.is-visible { opacity: 1; }

@media (hover: none), (max-width: 809.98px) {
  .cursor-dot { display: none; }
}

/* preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--orange);
  animation: loader-pulse 1s ease-in-out infinite;
}

@keyframes loader-pulse {
  0%, 100% { transform: scale(.6); opacity: .5; }
  50%      { transform: scale(1.4); opacity: 1; }
}

/* ---------- 7. Navigazione ---------------------------------------------- */

.nav-wrap {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  padding: 8px 10px;
  border-radius: 28px;
  background: var(--nav-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow: hidden;
  transition: gap .45s cubic-bezier(.4, 0, .2, 1),
              padding .45s cubic-bezier(.4, 0, .2, 1),
              width .45s cubic-bezier(.4, 0, .2, 1);
}

/* gap a 0: lo spazio lo aggiunge .nav-status con il proprio margine, così
   quando è compressa non lascia un buco accanto all'avatar */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0;
  flex: none;
}

.nav-logo { display: flex; flex: none; line-height: 0; border-radius: 99px; }
.nav-avatar { width: 40px; height: 40px; border-radius: 99px; flex: none; }

/* pill "Available for work" — nascosta quando la nav è espansa */
.nav-status {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 16px;
  line-height: 24px;
  max-width: 0;
  margin-left: 0;
  padding-right: 8px;
  opacity: 0;
  overflow: hidden;
  transition: max-width .45s cubic-bezier(.4, 0, .2, 1),
              margin-left .45s cubic-bezier(.4, 0, .2, 1),
              opacity .3s ease;
}

.nav-status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--green);
  flex: none;
}
.nav-status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 99px;
  background: var(--green);
  opacity: .5;
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { transform: scale(.7); opacity: .5; }
  50%      { transform: scale(1.5); opacity: 0; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
  overflow: hidden;
  /* valore esplicito e vicino alla larghezza reale del contenuto (non "none"
     né un numero troppo abbondante): altrimenti il max-width raggiunge il
     contenuto molto prima di finire la transizione, e si sfasa rispetto a
     .nav-status che nel frattempo si sta ancora richiudendo — la somma dei
     due, per un istante, supera la larghezza finale della nav */
  max-width: 200px;
  transition: max-width .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}

.nav-links a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current='page'] { color: var(--orange); }

.nav-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 30px 4px;
  border-radius: 99px;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  white-space: nowrap;
  min-height: 40px;
  /* stesso motivo di .nav-links: max-width vicino al contenuto reale, e
     tutte le proprietà che la nav compattata azzera devono animare in
     sincrono col resto */
  max-width: 100px;
  transition: max-width .45s cubic-bezier(.4, 0, .2, 1),
              padding-inline .45s cubic-bezier(.4, 0, .2, 1),
              opacity .3s ease,
              background .2s ease,
              color .2s ease;
}
.nav-cta:hover { background: var(--orange); }

/* hamburger — solo tablet/phone */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background: var(--orange);
  flex: none;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--card);
  border-radius: 2px;
  transition: transform .3s ease, top .3s ease, bottom .3s ease;
}
.nav-toggle span:nth-child(1) { top: 16px; transform: translateX(-50%); }
.nav-toggle span:nth-child(2) { bottom: 16px; transform: translateX(-50%); }

/* stato compattato (dopo lo scroll, solo desktop) */
@media (min-width: 1200px) {
  /* :not(:hover) così, passandoci sopra, la nav si riespande con la stessa
     transizione con cui si compatta — senza dover tornare a inizio pagina */
  .nav.is-collapsed:not(:hover) { gap: 0; }
  .nav.is-collapsed:not(:hover) .nav-status { max-width: 170px; margin-left: 10px; opacity: 1; }
  .nav.is-collapsed:not(:hover) .nav-links,
  .nav.is-collapsed:not(:hover) .nav-cta { max-width: 0; opacity: 0; padding-inline: 0; margin: 0; border: 0; }
  .nav.is-collapsed:not(:hover) .nav-cta { min-height: 40px; }
}

/* tablet + phone: sempre pill + hamburger */
@media (max-width: 1199.98px) {
  .nav {
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  .nav-brand { align-self: stretch; gap: 20px; width: auto; justify-content: space-between; }
  .nav-status { max-width: 220px; margin-left: 0; opacity: 1; }
  .nav-toggle { display: block; }
  .nav-links,
  .nav-cta {
    max-width: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-block: 0;
    margin: 0;
    min-height: 0;
  }

  .nav.is-open {
    width: 300px;
    padding: 10px 10px 20px;
    gap: 20px;
  }
  .nav.is-open .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    max-height: 300px;
    opacity: 1;
  }
  .nav.is-open .nav-cta {
    width: 100%;
    max-width: 100%;
    max-height: 60px;
    opacity: 1;
    padding: 8px 30px;
    min-height: 40px;
  }
  .nav.is-open .nav-toggle span:nth-child(1) { top: 19px; width: 20px; transform: translateX(-50%) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { bottom: 19px; width: 20px; transform: translateX(-50%) rotate(-45deg); }
}

/* ---------- 8. Bottoni e badge ------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 40px 8px;
  border-radius: 99px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 400;
  text-transform: uppercase;
  min-height: 48px;
  transition: background .25s ease, color .25s ease;
}
.btn:hover { background: var(--orange); color: var(--ink); }

/* su phone il bottone è pieno e a larghezza piena */
@media (max-width: 809.98px) {
  .btn {
    width: 100%;
    background: var(--orange);
    color: var(--ink);
    min-height: 40px;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  min-height: 40px;
  padding: 4px 16px;
  border-radius: 99px;
  background: var(--orange);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 300;
}

/* cerchio arancio "Hi" / mano */
.hi-badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 99px;
  background: var(--orange);
  color: var(--ink);
  font-size: 40px;
  line-height: 1;
  z-index: 3;
}

/* "Hi" e mano che saluta si alternano in loop, come sull'originale */
.hi-badge-text,
.hi-badge-hand {
  grid-column: 1;
  grid-row: 1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.hi-badge-text { animation-name: hiTextCycle; }
.hi-badge-hand {
  display: grid;
  place-items: center;
  animation-name: hiHandCycle;
  transform-origin: 50% 20%;
}
.hi-badge-hand svg { width: 38px; height: auto; fill: currentColor; }

@keyframes hiTextCycle {
  0%, 10%   { opacity: 1; }
  22%, 78%  { opacity: 0; }
  92%, 100% { opacity: 1; }
}

@keyframes hiHandCycle {
  0%, 10%   { opacity: 0; transform: rotate(0deg); }
  18%       { opacity: 1; transform: rotate(0deg); }
  28%       { transform: rotate(18deg); }
  38%       { transform: rotate(-14deg); }
  48%       { transform: rotate(18deg); }
  58%       { transform: rotate(-6deg); }
  68%, 78%  { opacity: 1; transform: rotate(0deg); }
  90%, 100% { opacity: 0; }
}

/* social */
.socials { display: flex; gap: 10px; }
.social {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.social svg { width: 12px; height: 12px; fill: currentColor; }
.social:hover { background: var(--orange); }

/* icona social leggermente più grande in home */
.about-home .social { width: 24px; height: 24px; }
.about-home .social svg { width: 14px; height: 14px; }

/* ---------- 9. Hero + card 3D sticky ------------------------------------ */

/* il "palco" contiene hero + expertise + about: la card resta agganciata */
.stage { position: relative; }

.stage-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.stage-card-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}

/* cerchio arancio "Hi" agganciato all'angolo in basso a sinistra della card:
   segue lo spostamento orizzontale ma non la rotazione 3D */
.stage-hi {
  position: absolute;
  width: 123px;
  height: 123px;
  left: calc(50% - var(--card-w) / 2 - 61px);
  top: calc(50% + var(--card-h) / 2 - 61px);
  transform:
    translateX(var(--fx, 0px))
    rotateZ(var(--frz, 0deg))
    rotateY(var(--fry, 0deg))
    scale(var(--hi-scale, 1));
  opacity: var(--hi-opacity, 1);
  will-change: transform, opacity;
}

.flip-card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
  will-change: transform;
  /* variabili guidate da JS */
  --fx: 0px;
  --fy: 0px;
  --fs: 1;
  --fry: 0deg;
  --frz: 0deg;
  transform:
    translate3d(var(--fx), var(--fy), 0)
    scale(var(--fs))
    rotateZ(var(--frz))
    rotateY(var(--fry));
}

.flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: grayscale(1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.flip-face.is-back { transform: rotateY(180deg); }

/* --- hero --- */

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 120px;
  pointer-events: none;
}
.hero a, .hero button { pointer-events: auto; }

.hero-eyebrow { margin-bottom: 4px; }

/* i due termini del titolo stanno agli estremi, la card 3D scorre al centro */
.hero-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  letter-spacing: var(--ls-hero);
}

.hero-word {
  display: block;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}

.hero-sub {
  max-width: 360px;
  margin-top: 4px;
  margin-left: auto;
  text-align: right;
}

/* ritratto statico mostrato solo su phone, dove la card sticky è disattivata */
.hero-media-mobile { display: none; }

@media (max-width: 1199.98px) {
  .hero-sub { max-width: 300px; }
}

/* phone: tutto in colonna e centrato, con il ritratto nel mezzo.
   Il padding inferiore generoso riproduce lo spazio che sull'originale
   separa hero, expertise e about. */
@media (max-width: 809.98px) {
  .hero {
    min-height: auto;
    padding-block: 188px 247px;
    text-align: center;
  }
  .hero-title {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .hero-sub { max-width: none; margin-left: 0; text-align: center; }

  .hero-media-mobile {
    display: block;
    position: relative;
    width: 176px;
    margin: 14px 0;
  }
  .hero-media-mobile img {
    width: 100%;
    height: 251px;
    object-fit: cover;
    border-radius: 12px;
    filter: grayscale(1);
  }
  .hero-media-mobile .hi-badge {
    width: 56px;
    height: 56px;
    font-size: 22px;
    bottom: 40px;
    left: -34px;
  }
  .hero-media-mobile .hi-badge-hand svg { width: 22px; }

  /* niente card sticky su phone */
  .stage-card { display: none; }
}

/* ---------- 10. Accordion expertise ------------------------------------- */

.expertise { position: relative; z-index: 2; pointer-events: none; }
.expertise .container > * { pointer-events: auto; }

.accordion { max-width: 460px; margin-top: 40px; }

@media (max-width: 809.98px) {
  .accordion { max-width: none; margin-top: 60px; }
  /* passo verticale delle voci: 77px come sull'originale */
  .acc-head { padding: 23px 0; }
  .section-head .lead { margin-top: 20px; }
  /* lo stacco fra expertise e about è più ampio del padding standard */
  .expertise { padding-bottom: 134px; }
}

.acc-item { border-bottom: 1px solid var(--line); }

.acc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  text-align: left;
}

.acc-head .h3 { flex: 1; }

.acc-chevron {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 12px;
  transition: transform .35s ease;
}
.acc-chevron svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; }

/* .is-open sta sull'item, che può essere .acc-item (expertise) o
   .faq-item (FAQ): i selettori restano generici per coprire entrambi */
.is-open > .acc-head .acc-chevron,
.is-open > .faq-head .acc-chevron { transform: rotate(180deg); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}
.is-open > .acc-panel { grid-template-rows: 1fr; }

.acc-panel > div { overflow: hidden; }

.acc-panel ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  color: var(--white);
}
.acc-panel li { position: relative; padding-left: 16px; }
.acc-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) / 2 - 2px);
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: var(--orange);
}

.acc-answer { padding-bottom: 20px; color: var(--muted); }

/* ---------- 11. Blocco About (home) ------------------------------------- */

.about-home {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
.about-home .container > * { pointer-events: auto; }

.about-body { max-width: 500px; }

.stats {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: 700;
  color: var(--orange);
}
.stat-num sup { font-size: .55em; vertical-align: super; }

.stat-label {
  font-size: var(--fs-stat-label);
  line-height: var(--lh-stat-label);
  font-weight: 600;
  margin-top: 6px;
}

@media (max-width: 809.98px) {
  .stats { flex-direction: column; gap: 24px; }
  .stat {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  .stat-label { margin-top: 0; }

  /* niente card sticky su phone: la sezione non deve riempire tutto il viewport */
  .about-home { min-height: auto; justify-content: flex-start; }
}

.contact-lines {
  display: flex;
  gap: 60px;
  margin-top: 40px;
}
.contact-lines dt { font-weight: 600; font-size: var(--fs-stat-label); line-height: var(--lh-stat-label); }
.contact-lines dd { margin: 0; }
.contact-lines a { transition: font-weight .2s ease; }
.contact-lines a:hover { font-weight: 700; }

@media (max-width: 809.98px) {
  .contact-lines { flex-direction: column; gap: 8px; }
  .contact-lines > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
}

.about-actions { margin-top: 40px; display: flex; }

/* ---------- 12. Card progetti (stacking) -------------------------------- */

.projects-list {
  margin-top: 40px;
  /* ogni card si "incolla" sotto la nav e la successiva le passa sopra */
}

.project-card-wrap {
  position: sticky;
  top: 120px;
  padding-bottom: 120px;
}

.project-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1120 / 747;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
}

.project-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.project-card:hover img { transform: scale(1.04); }

/* velo scuro sopra la cover, per leggibilità del testo */
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, .9) 0%, rgba(12, 12, 13, .7) 100%);
  opacity: .6;
  pointer-events: none;
}

.project-card-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
}

.project-card-body .h2 { max-width: 900px; }
.project-card-body p { max-width: 620px; }

/* su phone le card non si accatastano: sono in colonna, alte 350px
   con 80px di stacco, come sull'originale */
@media (max-width: 809.98px) {
  .project-card-wrap { position: static; top: auto; padding-bottom: 80px; }
  .project-card-wrap:last-child { padding-bottom: 0; }
  /* min-height invece di height fissa: le descrizioni hanno lunghezze
     diverse, così la card cresce quando il testo non entra in 350px
     invece di tagliarlo */
  .project-card { aspect-ratio: auto; min-height: 350px; }
  .project-card-body {
    position: relative;
    inset: auto;
    min-height: 350px;
    padding: 24px;
  }
  .project-card-body p { font-size: var(--fs-body); }
}

/* ---------- 13. Marquee clienti ----------------------------------------- */

.clients-grid {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 80px;
}

.clients-grid .lead { flex: none; max-width: 500px; }

.marquee {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee 26s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: none;
}
.marquee-item img { height: 40px; width: auto; object-fit: contain; }
.marquee-item img[src*="client-atlante"] { height: 68px; }
.marquee-sep { color: var(--muted); opacity: .6; flex: none; }

@media (max-width: 809.98px) {
  .clients-grid { flex-direction: column; align-items: flex-start; gap: 40px; margin-top: 40px; }
  .clients-grid .lead { max-width: none; }
  .marquee { width: 100%; }
}

/* ---------- 14. FAQ ----------------------------------------------------- */

.faq-grid {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.faq-grid .section-head { flex: none; width: 440px; }
.faq-list { flex: 1; }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 20px 0;
  text-align: left;
}
.faq-num { flex: none; }
.faq-q { flex: 1; }

@media (max-width: 809.98px) {
  .faq-grid { flex-direction: column; gap: 40px; }
  .faq-grid .section-head { width: auto; }
  .faq-list { width: 100%; }
}

/* ---------- 15. Form di contatto ---------------------------------------- */

.contact-grid {
  display: flex;
  align-items: center;
  gap: 60px;
}

.contact-media {
  position: relative;
  flex: none;
  width: 420px;
}
.contact-media img {
  width: 100%;
  height: 588px;
  object-fit: cover;
  border-radius: 20px;
  filter: grayscale(1);
}

.contact-body { flex: 1; max-width: 560px; }
.contact-body .lead { margin-top: 4px; max-width: 500px; }

.form { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }

.form-row { display: flex; gap: 20px; }
.form-row > * { flex: 1; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field > span {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--orange);
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 99px;
  background: var(--input-bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 19px;
  font-weight: 300;
}
.field textarea {
  border-radius: 20px;
  min-height: 140px;
  resize: vertical;
  line-height: 24px;
}
.field input::placeholder,
.field textarea::placeholder { color: #8f8f8f; }
.field input:focus,
.field textarea:focus { outline: 1px solid var(--orange); }

.form .btn { margin-top: 8px; align-self: flex-start; }

.form-note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.form-note.is-error { color: #ff5a5a; }
.form-note.is-ok { color: var(--green); }

@media (max-width: 1199.98px) {
  .contact-grid { flex-direction: column; align-items: center; gap: 40px; }
  .contact-media { width: var(--card-w); }
  .contact-media img { height: var(--card-h); }
  .contact-body { width: 100%; max-width: none; }
}

@media (max-width: 809.98px) {
  .form-row { flex-direction: column; gap: 12px; }
  .form .btn { align-self: stretch; }
}

/* ---------- 16. Pagina About ------------------------------------------- */

/* hero about: titolo + ritratto affiancati */
.about-hero { padding-top: 160px; }

.about-hero-grid {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.about-hero-copy { flex: 1; max-width: 500px; }
.about-hero-copy .eyebrow { margin-top: 16px; }
.about-hero-copy p { margin-top: 12px; }
.about-hero-copy .socials { margin-top: 32px; }

.about-hero-media { flex: none; width: 260px; }
.about-hero-media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 12px;
  filter: grayscale(1);
}

@media (max-width: 809.98px) {
  .about-hero { padding-top: 120px; }
  .about-hero-grid { flex-direction: column; gap: 40px; }
  .about-hero-copy { max-width: none; }
  .about-hero-media { width: 100%; }
  .about-hero-media img { height: 420px; }
}

/* sezione con immagine sticky a destra */
.split { position: relative; }

.split-grid {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.split-copy { flex: 1; min-width: 0; max-width: 560px; }

.split-media {
  flex: none;
  width: 260px;
  align-self: stretch;
}
.split-media-inner {
  position: sticky;
  top: 180px;
  perspective: 1400px;
}
.split-media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 12px;
  filter: grayscale(1);
  will-change: transform;
}

@media (max-width: 1199.98px) {
  .split-grid { gap: 40px; }
  .split-media { width: 220px; }
}

@media (max-width: 809.98px) {
  .split-media { display: none; }
  .split-copy { max-width: none; }
}

/* journey / esperienze */
.journey { margin-top: 40px; }

.journey-item {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.journey-item:first-child { border-top: 1px solid transparent; }

.journey-main { flex: 1; }
.journey-main p { margin-top: 8px; color: var(--white); }

.journey-meta {
  flex: none;
  width: 200px;
  text-align: right;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.journey-meta .company {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--orange);
}
.journey-meta span { display: block; color: var(--muted); }
.journey-meta .kind { opacity: .55; }

@media (max-width: 809.98px) {
  .journey-item { flex-direction: column; gap: 12px; }
  .journey-meta { width: auto; text-align: left; }
}

/* tech stack */
.stack { margin-top: 40px; }

.stack-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.stack-item img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.stack-item h4 {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-transform: none;
}
.stack-item p { margin-top: 2px; font-size: var(--fs-small); line-height: var(--lh-small); }

/* process */
.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.process-card {
  border-radius: 20px;
  padding: 32px 30px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
}
.process-card .num {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
}
.process-card h3 {
  margin-top: auto;
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
}
.process-card p { margin-top: 10px; font-size: var(--fs-small); line-height: var(--lh-small); }

.process-card.is-light { background: var(--white); color: var(--ink); }
.process-card.is-orange { background: var(--orange); color: var(--ink); }
.process-card.is-dark { background: var(--card); color: var(--white); }

.process-img {
  border-radius: 20px;
  overflow: hidden;
  min-height: 290px;
}
.process-img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1199.98px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 809.98px) {
  .process { grid-template-columns: 1fr; }
  .process-img { min-height: 200px; }
}

/* ---------- 17. Pagine case study -------------------------------------- */

/* le pagine case study usano una colonna di 1000px (1080 - 2×40 di gutter),
   più stretta dei 1120px delle altre pagine */
.cs-hero .container,
.cs-body .container { max-width: 1080px; }

.cs-hero { padding-top: 180px; padding-bottom: 0; }
.cs-hero .lead { margin-top: 20px; }

.cs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
  margin-top: 40px;
}
.cs-meta dt { color: var(--white); font-weight: 300; }
.cs-meta dd { margin: 4px 0 0; color: var(--orange); font-weight: 600; }

@media (max-width: 809.98px) {
  .cs-hero { padding-top: 120px; }
  .cs-meta { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* Ritmo verticale ricavato misurando il sito originale.
   Le pagine non usano tutte la stessa spaziatura: Adeo Home Services e
   Energy Renovation respirano di più (blocchi a 80px), Atlante e United
   sono più compatte (40px) — da qui la variante .is-compact. */
.cs-body {
  padding-block: 80px var(--section-y);
  --cs-block: 80px;      /* stacco fra blocchi diversi */
  --cs-after-h3: 24px;   /* titolo → primo elemento */
  --cs-p-p: 27px;        /* paragrafo → paragrafo */
  --cs-p-ul: 20px;       /* paragrafo introduttivo → lista */
  --cs-ul-p: 67px;       /* lista → paragrafo successivo */
}

.cs-body.is-compact {
  padding-top: 40px;
  --cs-block: 40px;
  --cs-p-p: 20px;
  --cs-ul-p: 20px;
}

.cs-body .container > * + *  { margin-top: var(--cs-block); }
.cs-body .container > h3 + * { margin-top: var(--cs-after-h3); }
.cs-body .container > p + p  { margin-top: var(--cs-p-p); }
.cs-body .container > p + ul { margin-top: var(--cs-p-ul); }
.cs-body .container > ul + p { margin-top: var(--cs-ul-p); }
.cs-body .container > :first-child { margin-top: 0; }

.cs-body h3 {
  font-size: 32px;
  line-height: 41.6px;
  font-weight: 400;
  color: var(--orange);
}

.cs-body h4 {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  text-transform: none;
}

.cs-body p { color: var(--white); }
.cs-body strong { font-weight: 600; }

.cs-body ul {
  padding-left: 30px;
  list-style: disc outside;
}
.cs-body li { line-height: 27px; }
.cs-body li + li { margin-top: 0; }
.cs-body li ul { margin-top: 0; padding-left: 26px; }
.cs-body li::marker { color: var(--muted); }

@media (max-width: 809.98px) {
  .cs-body { --cs-block: 48px; --cs-ul-p: 32px; }
  .cs-body.is-compact { --cs-block: 32px; }
  .cs-body h3 { font-size: 24px; line-height: 31.2px; }
}

.cs-figure { margin: 0; }
.cs-figure img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: var(--card);
}
.cs-figure.is-plain img { border-radius: 0; background: none; }
.cs-figure figcaption {
  margin-top: 10px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.cs-cover { margin-top: 109px; }
.cs-cover img {
  width: 100%;
  height: auto;          /* neutralizza l'attributo height dell'<img> */
  aspect-ratio: 5 / 3;   /* 1000×600 come sull'originale */
  object-fit: cover;
  border-radius: 20px;
  background: var(--card);
}

.cs-grid-2,
.cs-grid-3 {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}
.cs-grid-2 { grid-template-columns: 1fr 1fr; }
.cs-grid-3 { grid-template-columns: repeat(3, 1fr); }

.cs-grid-2 img,
.cs-grid-3 img {
  width: 100%;
  border-radius: 20px;
}
.cs-grid-3 img { aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 809.98px) {
  .cs-grid-2 { grid-template-columns: 1fr; }
  .cs-grid-3 { grid-template-columns: 1fr; }
}

/* immagine panoramica mostrata a dimensione naturale e tagliata dal
   contenitore, esattamente come sul sito Framer.
   Per farla stare interamente nella colonna: sostituire il blocco img con
   `width:100%; height:auto` (vedi README). */
.cs-figure.is-wide {
  overflow: hidden;
  border-radius: 20px;
}
.cs-figure.is-wide img {
  width: auto;
  max-width: none;
  height: 300px;
  border-radius: 0;
}

@media (max-width: 809.98px) {
  .cs-figure.is-wide img { height: 200px; }
}

/* blocco testo + immagine affiancata (case study Energy Renovation) */
.cs-split {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 24px;
}
.cs-split-copy { flex: 1; min-width: 0; }
.cs-split-copy > * + * { margin-top: 24px; }
.cs-split-media { flex: none; width: 400px; }
.cs-split-media img { width: 100%; height: 368px; object-fit: cover; border-radius: 20px; }

@media (max-width: 809.98px) {
  .cs-split { flex-direction: column; }
  .cs-split-media { width: 100%; }
  .cs-split-media img { height: auto; }
}

/* coppia di immagini con larghezze diverse (300px + resto) */
.cs-pair {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 10px;
  margin-top: 40px;
}
.cs-pair img { width: 100%; height: 400px; object-fit: cover; border-radius: 20px; }

@media (max-width: 809.98px) {
  .cs-pair { grid-template-columns: 1fr; gap: 16px; }
  .cs-pair img { height: auto; }
}

/* mockup MacBook a livelli: ombra + scocca + screenshot dentro lo schermo */
/* il mockup ha già molto spazio trasparente attorno al laptop:
   sull'originale segue l'immagine precedente senza stacco */
.cs-body .container > .mockup { margin-top: 0; }

.mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.mockup > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* lo screenshot va posizionato dentro la cornice dello schermo */
.mockup .mockup-screen {
  position: absolute;
  inset: auto;
  top: 23.2%;
  left: 14.4%;
  width: 71.2%;
  height: 44.4%;
  object-fit: cover;
}

.simulator-link {
  margin-top: 24px;
  text-align: center;
  color: var(--orange);
  font-weight: 600;
}
.simulator-link a { text-decoration: underline; text-underline-offset: 3px; }
.simulator-link a:hover { color: var(--white); }

/* navigazione fra case study */
.cs-next {
  border-top: 1px solid var(--line);
  padding-block: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.cs-next span { color: var(--muted); font-size: var(--fs-small); }
.cs-next a:hover .h3 { color: var(--orange); }

/* ---------- 18. Animazioni di comparsa --------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .flip-card { transform: none !important; }
  .hi-badge-text { animation: none !important; opacity: 1 !important; }
  .hi-badge-hand { animation: none !important; display: none !important; }
  .preloader { display: none; }
  .cursor-dot { display: none; }
  .nav-status-dot::after { animation: none; }
}