:root{
  --bg:#545155;
  --fg:#FBFBFB;
  --headerH:clamp(64px, 9vw, 88px);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Utility: h1 invisibile ma accessibile */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Cursor desktop only */
html,body,*,*::before,*::after{ cursor:none !important; }
@media (pointer:coarse){
  html,body,*,*::before,*::after{ cursor:auto !important; }
  .cursor{ display:none !important; }
}

a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

/* ================= HEADER ================= */
.site-header{
  position:fixed; inset:0 0 auto 0;
  height:var(--headerH);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px, 4vw, 56px);
  z-index:40; color:#FBFBFB; transition:color .2s ease;
}
.site-header.is-dark{ color:#545155; }

.brand__link{ position:relative; display:inline-block; }
.brand__img{ height:clamp(40px, 8.5vw, 90px); width:auto; display:block; }
.brand__img--dark{ position:absolute; inset:0 auto auto 0; opacity:0; transition:opacity .2s ease; }
.site-header.is-dark .brand__img--dark{ opacity:1 }
.site-header.is-dark .brand__img--light{ opacity:0 }

.header-meta{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; opacity:.7 }
@media (max-width:520px){
  .header-meta{ letter-spacing:.18em; font-size:11px; }
}

/* ================= HERO ================= */
.hero{
  min-height:100dvh; display:grid; place-items:center; position:relative; isolation:isolate; overflow:hidden;
  padding:var(--headerH) 6vw 10vh;
}
.eyebrow{
  font-family:'Bodoni Moda', serif; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(10px, 1.2vw, 30px); opacity:.75; text-align:center;
}
.title-wrap{ position:relative; line-height:.92; text-align:center; padding-bottom:70px }
.title-1{ font-family:'Montserrat', sans-serif; font-weight:700; font-size:clamp(48px, 15.5vw, 220px); letter-spacing:.02em }
.title-2{ font-family:'Bodoni Moda', serif; font-weight:500; font-size:clamp(46px, 14vw, 190px); letter-spacing:.03em; color:rgba(251,251,251,.85); mix-blend-mode:screen }

.portrait{
  position:absolute; left:45%; top:39%; transform:translate(-50%, -50%);
  width:clamp(140px, 18vw, 215px); aspect-ratio:3/4; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:2;
}
.portrait img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.05) }

.hero-nav{
  position:absolute; bottom:68px; left:0; right:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  padding-inline:clamp(16px, 6vw, 80px);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.85;
}
.hero-nav a{
  justify-self:center; opacity:.85; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  transition:transform .15s ease, opacity .15s ease;
}
.hero-nav a:hover{ opacity:1; transform:translateY(-1px) }
.hero-nav .num{ font-size:12px; letter-spacing:.28em; opacity:.7 }
.hero-nav .lab{ font-size:11px; letter-spacing:.18em }

.scroll{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  padding-top:10px; display:inline-flex; gap:10px; align-items:center;
  font-size:12px; letter-spacing:.25em; text-transform:uppercase; opacity:.85;
}
.scroll .scroll-text{ text-decoration:underline; text-underline-offset:4px; }
.scroll .scroll-arrow{ width:12px; height:20px; stroke:currentColor; fill:none; }

@keyframes bob{ 0%,100%{ transform:translateY(-2px) } 50%{ transform:translateY(6px) } }
.scroll .scroll-arrow{ animation:bob 1.6s ease-in-out infinite }

@media (max-width:900px){
  .portrait{ left:50%; top:40%; }
}
@media (max-width:820px){
  .hero-nav{ display:none }
  .scroll{ bottom:22px }
}

/* Ancore con offset header */
section{ scroll-margin-top:calc(var(--headerH) + 8px); }

/* ================= ABOUT ================= */
.about-v2{ background:#FBFBFB; color:#545155; padding:0; overflow:hidden; width:100%; }
.about-v2__grid{
  width:100%; display:grid; grid-template-columns:minmax(320px, 640px) 1fr;
  column-gap:clamp(16px, 3vw, 32px); align-items:start;
}
.about-v2__left{ padding:80px 0 18px 6vw; }
.about-v2__kicker{
  display:flex; align-items:center; gap:clamp(40px, 20vw, 320px);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.7; margin:4px 0 8px 35px;
}
.about-v2__titles{ position:relative; }
.about-v2__about{
  margin:0; font-family:'Montserrat', sans-serif; font-weight:800; line-height:.9;
  font-size:clamp(44px, 12vw, 120px); letter-spacing:.01em;
}
.about-v2__me-wrap{ position:relative; height:0; }
.about-v2__byline{
  position:absolute; left:clamp(30px, 14vw, 225px); bottom:-90px;
  display:grid; gap:2px; font-size:10px; letter-spacing:.25em; text-transform:uppercase; opacity:.7;
}
.about-v2__me{
  position:absolute; left:70%; transform:translateX(-50%);
  font-family:'Bodoni Moda', serif; font-weight:500; font-size:clamp(42px, 10vw, 108px);
  letter-spacing:.02em; line-height:.9; white-space:nowrap;
}
.about-v2__images{
  width:min(55vw, 980px); margin-left:auto; justify-self:end; align-self:start;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.about-v2__images figure{ margin:0; aspect-ratio:4/5; background:#e9e9e9; }
.about-v2__images img{ width:100%; height:100%; object-fit:cover; }

.about-v2__details{
  padding:22px 6vw 0; display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(28px, 4vw, 56px); align-items:start;
}
.about-v2__intro p{ max-width:560px; line-height:1.7; margin:0; }
.about-v2__points{ display:grid; gap:22px; }
.about-v2__row{
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:clamp(40px, 10vw, 130px);
}
.about-v2__term{ position:relative; font-weight:700; }
.about-v2__term::after{
  content:''; position:absolute; left:calc(100% + 16px); top:50%; width:90px; height:1px; background:currentColor; transform:translateY(-50%);
}
.about-v2__term::before{
  content:''; position:absolute; left:calc(100% + 106px); top:50%; width:8px; height:8px;
  border:1px solid currentColor; border-left:none; border-top:none; transform:translateY(-50%) rotate(-45deg);
}
.about-v2__list{ list-style:disc; padding-left:18px; margin:0; line-height:1.7; }

.about-v2__cta-wrap{ padding:18px 6vw 24px; }
.about-v2__cta{
  display:block; width:100%; text-align:center; background:#5B655B; color:#FBFBFB;
  padding:14px 16px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; border:0;
}

@media (max-width:1200px){ .about-v2__images{ width:100%; } }
@media (max-width:1000px){
  .about-v2__grid{ grid-template-columns:1fr; }
  .about-v2__images{ width:100%; grid-template-columns:1fr; }
  .about-v2__details{ grid-template-columns:1fr; }
  .about-v2__byline{ left:40px; bottom:-70px; }
  .about-v2__me{ left:62%; }
}

/* ================= STAGES ================= */
.stages{ background:#FBFBFB; color:#545155; padding:32px 0 56px; }
.stages__head{ position:relative; max-width:1180px; margin:0 auto; padding:8px 6vw 0; text-align:center; }
.stages__kicker{ position:absolute; left:6vw; top:0; font-size:11px; letter-spacing:.25em; text-transform:uppercase; opacity:.6; }
.stages__num{ font-size:16px; letter-spacing:.2em; opacity:.7; }
.stages__titles{ margin-top:8px; position:relative; }
.stages__big{
  margin:0; font-family:'Montserrat', sans-serif; font-weight:800; line-height:.9;
  font-size:clamp(38px, 10vw, 112px); letter-spacing:.01em; text-align:right;
}
.stages__sub{
  margin:8px 0 30px; font-family:'Bodoni Moda', serif; font-weight:500; line-height:.9;
  font-size:clamp(40px, 9vw, 120px); letter-spacing:.02em; color:#545155; text-align:right;
}
.stages__list{ max-width:1180px; margin:12px auto 0; padding:0 6vw; list-style:none; }
.stages__item{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:24px;
  padding:18px 0; border-top:1px solid rgba(84,81,85,.35);
}
.stages__item:last-child{ border-bottom:1px solid rgba(84,81,85,.35); }
.stages__label{ font-weight:800; font-size:clamp(16px, 2.2vw, 28px); text-transform:uppercase; letter-spacing:.02em; padding-left:20px; }
.stages__desc{ font-size:14px; line-height:1.7; max-width:56ch; padding-left:80px; }
@media (max-width:920px){
  .stages__item{ grid-template-columns:1fr; align-items:start; }
  .stages__desc{ padding-left:0 }
}

/* ===== WORKS ===== */
.works {
  position: relative;
  background: #FBFBFB;
  color: #545155;
  padding: 26px 0 70px;
}

.works__head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw;
  position: relative;
}

.works__titles { position: relative; text-align: center; }
.works__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 11vw, 124px);
  margin: 0;
}
.works__ghost {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  font-size: clamp(62px, 12vw, 140px);
  color: rgba(0,0,0,0.05);
  pointer-events: none;
}

/* viewport */
.works__viewport {
  max-width: 1180px;
  margin: 22px auto 0;
  padding: 0 6vw;
  overflow: hidden;
}

.works__grid {
  display: flex;
  gap: clamp(24px, 3.5vw, 48px);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.works__grid::-webkit-scrollbar { display: none; }

:root { --works-gap: clamp(24px, 3.5vw, 48px); }

.work-card {
  flex: 0 0 calc((100% - (2 * var(--works-gap))) / 3);
  box-sizing: border-box;
}
.work-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: #e9e9e9; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; }
.work-card__caption { margin-top: 10px; font-size: 12px; text-transform: uppercase; opacity: .85; }
.work-card__btn {
  margin-top: 10px;
  background: #5B655B;
  color: #FBFBFB;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* controlli sotto la griglia */
.works__controls-wrapper {
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0 6vw;
}
.works__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.works__label {
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #545155;
}
.works__btn {
  background: #5B655B;
  color: #FBFBFB;
  border: none;
  width: 46px;
  height: 44px;
  border-radius: 4px;
  font-size: 22px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.works__btn[disabled] { opacity: .45; cursor: default; }

@media (max-width:980px){ .works__grid{ grid-template-columns:1fr; } }
.works__scroll{
  position:absolute; right:6vw; bottom:10px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; opacity:.75; text-decoration:underline; text-underline-offset:4px;
}

/* ================= CONTACTS ================= */
.contacts{ background:#FBFBFB; color:#545155; position:relative; padding:10px 0 36px; }
.contacts__head{ max-width:1180px; margin:0 auto; padding:0 6vw; position:relative; text-align:center; }
.contacts__num{ position:absolute; left:6vw; top:10px; font-size:16px; letter-spacing:.22em; opacity:.7; }
.contacts__titles{
  position:relative; margin-top:24px; padding-top:32px; display:flex; align-items:baseline; justify-content:center; gap:clamp(8px, 1.2vw, 16px);
}
.contacts__my{
  margin:0; font-family:'Montserrat', sans-serif; font-weight:800; line-height:.9; font-size:clamp(40px, 11vw, 124px); letter-spacing:.01em; position:relative; z-index:2;
}
.contacts__ghost{
  margin:0; font-family:'Bodoni Moda', serif; font-weight:500; line-height:.9; font-size:clamp(46px, 12vw, 140px); letter-spacing:.02em; white-space:nowrap; position:relative; z-index:1;
}
.contacts__portrait{
  position:absolute; left:46%; top:-6px; transform:translateX(-50%);
  width:clamp(90px, 12vw, 120px); aspect-ratio:3/4; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:3; background:#ddd;
}
.contacts__portrait img{ width:100%; height:100%; object-fit:cover; loading:lazy; decoding:async; }

.contacts__grid{
  margin-top:24px; padding:3vw 6vw; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px, 5vw, 80px); align-items:center;
}
@media (max-width:900px){
  .contacts__grid{ grid-template-columns:1fr; gap:18px; }
  .contacts__num{ position:static; display:block; text-align:left; margin:0 0 6px; }
}
.contacts__item{ text-align:center; }
.contacts__label{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.7; margin-bottom:8px; }
.contacts__value{ font-size:14px; }
.contacts__value strong{ font-weight:700; }
.contacts__cta-wrap{ padding:18px 6vw 24px; }
.contacts__cta{ display:block; width:100%; text-align:center; background:#5B655B; color:#FBFBFB; padding:14px 16px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }

/* ================= FOOTER BAR ================= */
.footer-rail{ background:#FBFBFB; }
.footer-rail__bar{
  background:var(--bg); color:var(--fg); padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  min-height:clamp(56px, 7vw, 64px); position:relative;
}
.footer-rail__brand img{ display:block; height:clamp(36px, 8vw, 72px); width:auto; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.footer-rail__bar .scroll{ position:static; left:auto; bottom:auto; transform:none; margin-left:auto; }

@keyframes bob-up-rot{ 0%,100%{ transform:rotate(180deg) translateY(-2px) } 50%{ transform:rotate(180deg) translateY(6px) } }
.scroll--up .scroll-arrow{ animation:bob-up-rot 1.6s ease-in-out infinite; }

/* Bottoni interattivi */
.about-v2__cta, .work-card__btn, .contacts__cta{
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, letter-spacing .18s ease, filter .18s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.about-v2__cta:hover, .work-card__btn:hover, .contacts__cta:hover{
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.25); filter:brightness(1.05); letter-spacing:.26em;
}
.about-v2__cta:active, .work-card__btn:active, .contacts__cta:active{
  transform:none; box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.about-v2__cta:focus-visible, .work-card__btn:focus-visible, .contacts__cta:focus-visible, a:focus-visible{
  outline:2px solid currentColor; outline-offset:3px;
}
.scroll:hover .scroll-text{ text-decoration-thickness:2px; }

/* Scroll Reveal (attivo solo se .js sul <html>) */
.js .reveal{
  opacity:0; transform:translateY(22px) scale(.98);
  transition:opacity .6s ease, transform .6s ease; will-change:opacity, transform;
}
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal{ transition-delay:calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion:reduce){
  .scroll .scroll-arrow, .scroll--up .scroll-arrow{ animation:none }
  .js .reveal{ opacity:1; transform:none; transition:none }
}

/* ===== Cursor vetro ===== */
.cursor{
  position:fixed; left:0; top:0; transform:translate(-50%, -50%);
  width:22px; height:22px; border-radius:50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -3px 10px rgba(255,255,255,.08);
  pointer-events:none; z-index:1000;
  will-change: transform, width, height, opacity, background-color, border-color, box-shadow;
  transition:
    width .15s ease, height .15s ease, opacity .15s ease,
    background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  opacity:1;
}
.cursor::after{
  content:"";
  position:absolute; inset:2px; border-radius:inherit;
  background: radial-gradient(120% 120% at 30% 30%,
              rgba(255,255,255,.45) 0%,
              rgba(255,255,255,.12) 35%,
              rgba(255,255,255,0) 60%);
  pointer-events:none; mix-blend-mode:screen;
}
.cursor::before{
  content:"";
  position:absolute; inset:-6px; border-radius:inherit;
  border:1px solid rgba(255,255,255,.35);
  opacity:0; transform:scale(.8);
  transition: transform .25s ease, opacity .25s ease;
}
.cursor--down::before{ opacity:1; transform:scale(1); }
.cursor--hide{ opacity:0 }
.cursor--link{
  width:34px; height:34px;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow:
    0 8px 24px rgba(0,0,0,.28),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -4px 12px rgba(255,255,255,.10);
}

/* Fallback se backdrop-filter non è supportato */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .cursor{
    background: rgba(255,255,255,.18);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
}

/* Iubenda UI: riabilita il cursore di sistema dentro banner/modali */
.iubenda-cs-container, .iubenda-cs-container *,
.iubenda-iframe-outer, .iubenda-iframe-outer *,
.iubenda-tp-drawer, .iubenda-tp-drawer *,
.iubenda-cs-overlay, .iubenda-cs-overlay *,
.iubenda-cs-preferences, .iubenda-cs-preferences *{ cursor:auto !important; }

/* Link legali footer */
.footer-rail .legal-links{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:'Montserrat', sans-serif; font-size:11px; line-height:1.4;
  color:#FBFBFB; opacity:.9; margin-left:auto; margin-right:16px;
}
.footer-rail .legal-links a{
  color:#FBFBFB; text-decoration:underline; text-underline-offset:3px; opacity:1;
}
.footer-rail .legal-links a:hover{ text-decoration-thickness:2px; filter:brightness(1.05); }
.footer-rail .legal-links .sep{ opacity:.7; }
@media (max-width:480px){ .footer-rail .legal-links{ gap:8px; margin-right:10px; } }

/* ===== TWEAKS MOBILE ===== */
@media (max-width:700px){
  /* Header: logo più grande */
  .brand__img{ height:90px; }

  /* Hero: Photo1 più piccola e riposizionata */
  .portrait{
    width:clamp(110px, 28vw, 140px);
    top:20%;
    left:35%;
  }

  /* Rimuovi freccia/linea nei termini */
  .about-v2__term::after,
  .about-v2__term::before{ content:none; }

  /* Contatti: foto più piccola e riposizionata */
  .contacts__portrait{
    width:clamp(64px, 18vw, 90px);
    top:-9px;
    left:38%;
  }

  /* Footer: 1ª riga = logo + scroll, 2ª riga = privacy */
  .footer-rail__bar{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    row-gap:8px; align-items:center;
  }
  .footer-rail__brand{ grid-column:1 / 2; grid-row:1 / 2; }
  .footer-rail__brand img{ height:90px; }
  .footer-rail__bar .scroll{ grid-column:2 / 3; grid-row:1 / 2; justify-self:end; }
  .footer-rail .legal-links{
    grid-column:1 / -1; grid-row:2 / 3; justify-content:center;
    margin-left:0; margin-right:0; gap:8px; font-size:8px;
  }
}