:root{
  --blue:#005eb8; 
  --ink:#0b2440; 
  --white:#fff; 
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* RESET E BASE */
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;display:block;height:auto}
body{font-family:"the-seasons",serif;background:var(--white);color:var(--ink);overflow-x:hidden}
html{scroll-behavior: smooth}

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center; /* centra il logo */
  padding: 20px 40px;
  background: transparent;
  backdrop-filter: blur(10px);
  transition: color .25s var(--ease), filter .25s var(--ease);
  font-family: "poppins", sans-serif;
  outline: #ffffff4b 0.1px solid; 
  outline-style: blur(3px);;
}

/* Logo sempre al centro */
.navbar img {
  width: 100px;
  height: auto;
  transition: filter .25s var(--ease);
  z-index: 2; /* sopra i menu laterali */
  left: 50%;
}

/* Menu a sinistra e destra */
.nav-left, .nav-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 200px; /* distanza tra i link */
}

.nav-left { left: 40px; }
.nav-right { right: 40px; }

.nav-link {
  font: 300 20px/1.1 "poppins", sans-serif;
  color: var(--blue);
  text-decoration: none;
  transition: opacity .2s var(--ease), color .25s var(--ease);
}

.nav-link:hover {
  opacity: .7;
}

/* Stato nav-on-blue */
.navbar.nav-on-blue .nav-link { color: #fff; }
.navbar.nav-on-blue img { filter: brightness(0) invert(1); }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .nav-left, .nav-right { gap: 120px; }
}

@media (max-width: 800px) {
  .nav-left, .nav-right { gap: 80px; }
}

@media (max-width: 768px) {
  .navbar { padding: 15px 20px; }
  .nav-left, .nav-right { gap: 40px; }
  .nav-link { font-size: 14px; }
}


/* HERO */
.hero-container{position:relative; display:flex; flex-direction:column}
.hero-lines{position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; pointer-events:none}
.hero-content{padding:80px 30px 40px; display:flex; flex-direction:column; align-items:center; position:relative}
.hero-stage{position:relative; width:100%; height:min(56vh,520px); max-width:1400px; margin:10px auto 30px; pointer-events:none;}
.mv-wrap {
  position:absolute;
  width:clamp(600px,70vw,850px);
  height:clamp(480px,60vw,750px);
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
model-viewer{width:100%; height:100%; --poster-color:transparent; --progress-bar-color:var(--blue); background:transparent; border:0; box-shadow:none; outline:none; pointer-events: none;}
model-viewer::part(default-progress-bar){display:none}
.hero-title{font-family:"the-seasons",serif; font-size:clamp(3rem,8vw,6rem); line-height:1; font-weight:400; color:var(--blue); margin:10px 0 60px; text-align:center; max-width:1920px}

/* --- Base --- */
.services-section{
  padding: clamp(40px, 6vw, 80px) clamp(16px, 6vw, 130px);
  background:#fff;
}

.services-grid{
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "media copy";
  gap: 0px 40px;
  align-items: center;
}

/* Aree */
.service-title { grid-area: title; }
.service-3d    { grid-area: media; position: relative; aspect-ratio: 5 / 5; border-radius: 0; overflow: hidden; box-shadow: none; }
.service-copy  { grid-area: copy; color: var(--ink); }

/* Tipografia */
.service-title{
  font-family:"the-seasons",serif;
  font-weight:lighter;
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--blue);
  margin: 0; /* niente margine extra; gestito dal grid gap */
  text-align: center;
}

.service-copy p{
  font-family: "poppins", sans-serif;
  color:var(--blue);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 300;
  line-height:1.5;
  text-align: justify;
  hyphens: auto;
  word-spacing: -1px;
}

/* model-viewer: occupa sempre l'intero box */
.service-3d model-viewer{
  width:100%;
  height:100%;
  --poster-color: transparent;
  --progress-bar-color: var(--blue);
  background: transparent !important;
  border: 0; box-shadow: none; outline: none;
  pointer-events: auto;
  cursor: pointer;
  overflow: visible;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .services-grid{
    grid-template-columns: 1fr;
    /* Ordine voluto: 3D → Titolo → Testo */
    grid-template-areas:
      "media"
      "title"
      "copy";
    gap: 24px;
  }

  /* assicura che il 3D abbia altezza visibile su mobile */
  .service-3d{
    aspect-ratio: auto;
  }
  .service-3d model-viewer{
    height: clamp(280px, 55vh, 480px);
  }

  .service-title{
    margin-top: 0;
    margin-bottom: 0px;
    text-align: center;
  }
}



/* badge rotondo */
.spin-indicator{
  position:absolute; left:0; top:0;
  width:110px; height:110px; border-radius:50%;
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,.03);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .18s ease, transform .22s ease;
  z-index: 1000;
}
.spin-indicator span{font: 600 12px/1 "poppins", sans-serif; letter-spacing:.02em; color: var(--blue); opacity: .9;}
.service-3d:hover .spin-indicator{opacity: 1; transform: translate(-50%, -50%) scale(1);}
@media (hover: none){.spin-indicator{ display:none; }}

/* WHY */
.why-choose-section{position:relative; height:220vh; background:#fff; margin-top:0}
.wc-sticky{position:sticky; top:-10vh; height:120vh; display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:1; background:#fff}
.wc-svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:130vmax; height:130vmax; pointer-events:none}
.rot{animation:slowRotate 60s linear infinite; transform-origin:50% 50%}
.rot-in{animation:slowRotateReverse 48s linear infinite; transform-origin:50% 50%}
.wc-text{font-family:"the-seasons",serif; animation: Rotate;}
.wc-top{fill:var(--blue); font-size:clamp(22px,3vw,48px); font-weight:400; paint-order:stroke fill; stroke:#fff; stroke-width:6px; stroke-linejoin:round}
.wc-center{font-size:clamp(38px,5vw,80px); font-weight:400; fill:#fff}
#blueGroup{transform-box:fill-box; transform-origin:50% 50%; transform:scale(.5); transition:transform .25s var(--ease)}
#innerDecor{opacity:0; transition:opacity .35s var(--ease)}
.after-why{position:sticky; top:50%; transform:translateY(-50%); z-index:2; padding:0 40px; text-align:center}
.after-why-wrapper{min-height: 80vh;}

.rot {
  animation: slowRotate 60s linear infinite;
  transform-origin:50% 50%;
}

.rot-in {
  animation: slowRotateReverse 48s linear infinite;
  transform-origin:50% 50%;
}

@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slowRotateReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}


/* STATEMENT */
.statement-section {
  position: relative;
  z-index: -10;
  padding: clamp(40px, 6vw, 80px) 400px;
}
.statement-wrap{max-width: 100%; margin: 0 auto; text-align: left}
.statement-text{font-family: "poppins",sans-serif; font-weight: 300; font-size: clamp(16px,1.5vw,20px); line-height:1.5; color:var(--blue)}

.statement-wrap {
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.statement-wrap p {
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-spacing: -0.05em; /* opzionale: per compattezza visiva */
  text-align: justify;   /* mantiene coerenza con il resto del sito */
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .statement-section { padding: clamp(40px,6vw,80px) 40px; }
  .service-title { margin-bottom: 48px; }
}

/* WHAT WE DO SECTION */
.what-we-do-section {
  padding: clamp(60px, 8vw, 100px) 40px;
  background: var(--white);
  color: var(--ink);
}

.what-we-do-wrap {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.what-we-do-title {
  font-family: "the-seasons", serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: lighter;
  margin-bottom: 48px;
  color: var(--blue);
}

.what-we-do-subtitle {
  font-family: "poppins", sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 300;
  margin-bottom: 48px;
  color: var(--blue);
}

.what-we-do-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 4vw, 40px);
  text-align: center;
}

.service-item h3 {
  font-family: "the-seasons", serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--blue);
  margin-bottom: 8px;
}

.service-item p {
  font-family: "poppins", sans-serif;
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--blue);
  line-height: 1.5;
}

/* WORKS */
.works-section{background:#fff; padding:60px 0}
.works-list{max-width:100%; margin:0 auto; padding:0 40px; border-top:1px solid var(--blue)}
.work-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:32px 0; border-bottom:1px solid var(--blue); position:relative; cursor:pointer}
.work-title{font-family:"the-seasons",serif; font-weight:400; font-size:clamp(1.8rem,4vw,3rem); color:var(--blue); filter:blur(3px); transition:color .3s var(--ease), filter .6s var(--ease)}
.work-row:hover .work-title{filter:blur(0)}
.work-meta{font:400 14px/1.3 "poppins",sans-serif;color:var(--blue); text-align:right; min-width:120px}
.work-preview{position:absolute; left:0; top:0; --tx:0px; --ty:0px; --scale:1; transform: translate(var(--tx),var(--ty)) scale(var(--scale)); width:420px; max-width:40vw; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:2; will-change:transform,opacity}
.work-preview img, .work-preview video{width:100%; height:auto; display:block; border-radius:8px; box-shadow:0 12px 28px rgba(0,0,0,.15)}
.work-row:hover .work-preview{opacity:1; --scale:1.02}

/* CONTACT */
.contact-section {
  background: var(--white);
  color: var(--blue);
  padding: clamp(80px, 8vw, 120px) 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url("rivers3.svg") no-repeat center center;
  background-size: cover;
}


.contact-wrap {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
}

.contact-title {
  font-family: "the-seasons", serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: lighter;
  color: var(--blue);
  margin-bottom: 15px;
  position: relative;
}

.contact-info p {
  font: 400 1.25rem "poppins", sans-serif;
  color: var(--blue);
  margin: 6px 0;
}

.contact-info a {
  color: var(--blue);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.contact-info a:hover {
  opacity: 0.7;
}

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.contact-socials a {
  font: 600 1rem "poppins", sans-serif;
  color: var(--blue);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid #005eb8;
  border-radius: 50px;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.1);
}

.contact-socials a:hover {
  background: var(--blue);
  color: var(--white);
  transform: scale(1.1);
}

@media (max-width: 600px) {
  .contact-section {padding: clamp(60px, 6vw, 100px) 20px;}
  
  .contact-socials {gap: 12px;}
  .contact-socials a {padding: 6px 12px; font-size: 0.9rem;}
}


/* FOOTER */
.site-footer{background:var(--blue); color:#fff; padding:20px; display:flex; justify-content:space-between; align-items:center; font:400 14px/1.4 Helvetica,Arial,sans-serif}
.footer-left,.footer-right{display:flex; align-items:center; gap:15px}
.footer-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
}
.site-footer{
    position: relative;
}

/* RESPONSIVE fino a 768px */
@media (max-width:768px){
  .navbar{padding:40px 20px}
  .nav-left,.nav-right{gap:40px}
  .nav-link{font-size:14px}
  .hero-content{padding:200px 20px 20px}
  .hero-stage{height:min(46vh,420px)}
  .service-cards{gap:30px}
  .work-preview{display:none}
  .wc-svg{width:180vmax; height:180vmax}
  .footer-center{visibility:hidden}
  .nav-logo{scale:.6;
     position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;}
  .work-title{filter:none}
  .spin-indicator{ display:none}
}
@media (prefers-reduced-motion:reduce){.rot,.rot-in{animation:none} #blueGroup{transition:none}}


.mobile-break {
  display: none; /* di default non c’è a capo */
}

@media (max-width: 600px) {
  .mobile-break {
    display: inline;
    line-height: 1.6; /* solo su mobile diventa a capo */
  }
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align: text-bottom; /* allinea la base al testo */
  position: relative;
  top: -0.3rem;
  }

  /* --- Schermata di caricamento --- */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Colore sfondo */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loader img {
  width: 300px; /* Dimensione della GIF */
  height: auto;
}

#loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 600px) {
  #loader img {
    width: 150px; /* Dimensione ridotta della GIF su mobile */
  }
  
}

#cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#005eb8;color:#fff}
#cookie-banner[hidden]{display:none}
#cookie-banner .cb-inner{max-width:1100px;margin:0 auto;padding:16px 20px}
#cookie-banner h3{margin:0 0 6px;font-weight:600}
#cookie-banner p{margin:0 0 10px}
.cb-details summary{cursor:pointer;margin:6px 0 10px}
.cb-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 16px;margin-bottom:10px}
.cb-cat{display:flex;gap:8px;align-items:center}
.cb-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#cb-accept,#cb-save,#cb-reject{border:0;padding:8px 14px;border-radius:999px;cursor:pointer}
#cb-accept{background:#fff;color:#005eb8}
#cb-save{background:#e6ecfb;color:#005eb8}
#cb-reject{background:transparent;color:#fff;outline:1px solid #fff}
.cb-links a{color:#fff;text-decoration:underline}
#cookie-manage-btn{position:fixed;bottom:18px;right:18px;z-index:99998;border:0;border-radius:50%;width:44px;height:44px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.2)}

/* Loader off by default; attivalo con .with-loader su <html> */
#loader{
  position: fixed; inset: 0; z-index: 9999;
  display: none;            /* attivato via .with-loader */
  align-items: center; justify-content: center;
  background: #fff;      /* il tuo blu o quello che vuoi */
  transition: opacity .5s ease;
}
html.with-loader #loader{ display: flex; }
#loader.fade-out{ opacity: 0; pointer-events: none; }
html.no-scroll{ overflow: hidden; }
html.with-loader #loader{ display: flex !important; }