/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --ink:      #1E3A4C;   /* blu ardesia — headings, nav */
  --cream:    #FBF8F3;   /* base background */
  --sand:     #F2E8DA;   /* alt section background */
  --graphite: #3A3A38;   /* body text */
  --honey:    #C89B4A;   /* accent — graphic design */
  --slate:    #5C7A8A;   /* accent — editoriale */
  --sage:     #7C9072;   /* accent — assistenza IT */
  --line:     rgba(30,58,76,0.14);

  --display: 'Fraunces', serif;
  --body:    'Instrument Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--graphite);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2{ font-family:var(--display); font-weight:500; margin:0; color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

:focus-visible{ outline:2px solid var(--honey); outline-offset:3px; }

/* =========================================================
   NAV
   ========================================================= */
#siteNav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
#siteNav.solid{
  background:rgba(251,248,243,0.88);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
  padding-top:12px; padding-bottom:12px;
}
.nav-mark img{ height:36px; width:auto; transition:filter .4s ease; }
#siteNav:not(.solid) .nav-mark img{ filter:brightness(0) invert(1); }
.nav-cta{
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  padding:9px 18px; border-radius:999px;
  border:1px solid currentColor;
  transition:background .3s ease, color .3s ease;
}
#siteNav:not(.solid) .nav-cta{ color:#fff; }
#siteNav.solid .nav-cta{ color:var(--ink); }
.nav-cta:hover{ background:var(--ink); color:#fff !important; border-color:var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden; color:#fff;
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%; overflow:hidden;
}
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-media video.is-active, .hero-media img.is-active{ opacity:1; }
.hero-media video.is-active{ z-index:2; }
.hero > .gallery-dots{
  position:absolute; left:50%; bottom:76px; transform:translateX(-50%);
  z-index:2; margin:0;
}
.hero > .gallery-dots button{ background:rgba(255,255,255,.45); }
.hero > .gallery-dots button.is-active{ background:#fff; }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,58,76,.35) 0%, rgba(30,58,76,.25) 40%, rgba(20,32,38,.82) 100%);
}
.hero-content{ position:relative; z-index:2; padding:0 clamp(20px,6vw,64px) 96px; max-width:760px; }
.hero .eyebrow{ color:rgba(255,255,255,.8); }
.hero h1{
  color:#fff; font-size:clamp(2.6rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:-.01em;
  margin:.4em 0 .32em;
}
.hero-sub{ font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(255,255,255,.92); max-width:36ch; }
.hero-cta{
  display:inline-block; margin-top:30px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  padding:13px 26px; border-radius:999px; background:#fff; color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hero-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.25); }

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:2; width:26px; height:42px; border:1.5px solid rgba(255,255,255,.7);
  border-radius:14px; display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{
  width:4px; height:8px; border-radius:2px; background:#fff;
  animation:cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(10px); opacity:0; }
  100%{ opacity:0; }
}
.scroll-cue--inline{
  position:static; transform:none; margin:56px auto 0;
  border-color:var(--line);
}
.scroll-cue--inline span{ background:var(--ink); }

/* =========================================================
   EYEBROW / TYPE UTILITIES
   ========================================================= */
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); opacity:.72; margin:0 0 18px;
}
.eyebrow--honey{ color:var(--honey); opacity:1; }
.eyebrow--slate{ color:var(--slate); opacity:1; }
.eyebrow--sage{ color:var(--sage); opacity:1; }

/* =========================================================
   EXPERIENCE — "20 anni" intro section
   ========================================================= */
.experience{
  background:var(--sand);
  padding:clamp(64px,10vw,110px) clamp(20px,6vw,64px);
  text-align:center;
}
.experience-inner{ max-width:640px; margin:0 auto; }
.experience-figure{
  display:flex; align-items:baseline; justify-content:center; gap:16px;
  margin-bottom:26px;
}
.experience-number{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(4.4rem,11vw,6.6rem); line-height:1; color:var(--honey);
}
.experience-number-label{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); opacity:.75; max-width:9ch; text-align:left; line-height:1.4;
}
.experience-text{
  font-size:1.05rem; line-height:1.75; color:var(--graphite); margin:0 auto;
}

/* =========================================================
   SERVICE SECTIONS
   ========================================================= */
.service{ padding:clamp(64px,10vw,120px) clamp(20px,6vw,64px); }
.service.alt-bg{ background:var(--sand); }
.service-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,6vw,88px);
  align-items:center;
}
.service--reverse .service-inner{ direction:rtl; }
.service--reverse .service-inner > *{ direction:ltr; }

.service-media{ position:relative; }
.media-frame{
  position:relative; width:100%; aspect-ratio:4/5;
  clip-path:url(#archClip);
  background:var(--ink);
  isolation:isolate;
}
.media-frame video, .media-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s ease;
}
.media-frame video.is-active, .media-frame img.is-active{ opacity:1; }
.media-frame video.is-active{ z-index:2; }

.gallery-dots{
  display:flex; gap:7px; justify-content:center; margin-top:18px;
}
.gallery-dots button{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background:var(--line); cursor:pointer; transition:background .3s ease, transform .3s ease;
}
.gallery-dots button.is-active{ background:var(--ink); transform:scale(1.3); }

.hook{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.32; color:var(--ink);
  margin:0 0 34px; max-width:22ch;
}
.service-list{ display:flex; flex-direction:column; gap:15px; }
.service-list li{
  position:relative; padding-left:26px; font-size:1.02rem; color:var(--graphite);
}
.service-list li::before{
  content:''; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%;
}
.service-list--honey li::before{ background:var(--honey); }
.service-list--slate li::before{ background:var(--slate); }
.service-list--sage li::before{ background:var(--sage); }

.divider{ display:flex; justify-content:center; padding:6px 0; color:var(--line); }
.divider svg{ width:40px; height:26px; }
.service.alt-bg + .divider{ background:var(--sand); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
#contatti{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding:clamp(80px,12vw,140px) clamp(20px,6vw,64px) 40px;
  text-align:center;
}
.footer-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(60vw,520px); opacity:.06; filter:brightness(0) invert(1); pointer-events:none;
}
.footer-content{ position:relative; z-index:1; max-width:560px; margin:0 auto; }
#contatti h2{ color:#fff; font-size:clamp(2.2rem,5vw,3.2rem); font-style:italic; }
#contatti p{ color:rgba(255,255,255,.82); font-size:1.05rem; margin:14px 0 0; }
.mail-cta{
  display:inline-block; margin-top:34px;
  font-family:var(--mono); font-size:clamp(15px,2vw,18px);
  padding:16px 30px; border:1px solid rgba(255,255,255,.5); border-radius:999px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.mail-cta:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.footer-note{ font-size:.88rem !important; color:rgba(255,255,255,.55) !important; margin-top:24px !important; }
.footer-fine{
  position:relative; z-index:1; margin-top:80px; font-family:var(--mono);
  font-size:12px; letter-spacing:.05em; color:rgba(255,255,255,.4);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .service-inner{ grid-template-columns:1fr; }
  .service--reverse .service-inner{ direction:ltr; }
  .media-frame{ aspect-ratio:4/5; max-width:420px; margin:0 auto; }
  .hero-content{ padding-bottom:76px; }
  .hero h1{ font-size:clamp(2.2rem,9vw,3rem); }
}