/* =========================================================
   PAGINE METODO / PROGETTI
   ========================================================= */
.inner-page{background:#051d2d}
.inner-page .language-switch{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.12em}
.inner-page .lang-button{appearance:none;-webkit-appearance:none;padding:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;opacity:.55}
.inner-page .lang-button:hover,.inner-page .lang-button.is-active{color:#fff;opacity:1}
.page-hero{position:relative;min-height:72vh;display:flex;align-items:end;overflow:hidden;padding:120px var(--page-pad) 90px;color:#fff;background:radial-gradient(circle at 72% 40%,rgba(48,111,145,.26),transparent 28%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),#051d2d;background-size:auto,110px 110px,110px 110px,auto}
.page-hero__content{position:relative;z-index:2;max-width:1050px}
.page-hero h1{margin:0 0 28px;font-size:clamp(64px,7vw,126px);font-weight:300;line-height:.93;letter-spacing:-.06em}
.page-hero p:not(.section-label){max-width:720px;margin:0;color:rgba(255,255,255,.75);font-size:clamp(17px,1.1vw,20px);line-height:1.75}
.method-list,.projects-list{padding:clamp(100px,9vw,150px) var(--page-pad);background:#eeece6;color:#152330}
.method-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(21,35,48,.18);border-bottom:1px solid rgba(21,35,48,.18)}
.method-card{padding:36px 25px 42px;border-right:1px solid rgba(21,35,48,.16)}
.method-card:last-child{border-right:0}
.method-card__number,.project-area__number{display:block;margin-bottom:30px;color:#0b3956;font-size:clamp(58px,5vw,88px);font-weight:600;line-height:.9;letter-spacing:-.06em}
.method-card h2,.project-area h2{margin:0 0 18px;font-size:22px;font-weight:500;line-height:1.15;text-transform:uppercase}
.method-card p,.project-area p{margin:0;color:#667079;font-size:15px;line-height:1.7}
.page-contact-cta{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:54px var(--page-pad);background:#072238;color:#fff}
.page-contact-cta strong{font-size:clamp(28px,3.5vw,58px);font-weight:300;letter-spacing:-.04em}
.page-contact-cta a{display:inline-flex;gap:30px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.project-area{display:grid;grid-template-columns:180px minmax(0,.8fr) minmax(320px,1.2fr);gap:42px;align-items:center;padding:54px 0;border-top:1px solid rgba(21,35,48,.17);scroll-margin-top:110px}
.project-area:last-child{border-bottom:1px solid rgba(21,35,48,.17)}
.project-area__visual{position:relative;min-height:260px;border-radius:20px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(135deg,#173e57,#051d2d);background-size:34px 34px,34px 34px,auto}
.project-area__visual::before,.project-area__visual::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.23);border-radius:22px}
.project-area__visual::before{inset:16% 10% 20% 16%}.project-area__visual::after{width:38%;height:36%;right:8%;bottom:10%}
.project-area__link{display:inline-flex;margin-top:20px;gap:22px;padding-bottom:8px;border-bottom:1px solid rgba(21,35,48,.36);color:#152330;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.global-page-cursor{position:fixed;z-index:9999;inset:0;pointer-events:none;opacity:0;transition:opacity .12s ease}
.global-page-cursor.is-visible{opacity:1}
.global-page-cursor__x,.global-page-cursor__y,.global-page-cursor__point,.global-page-cursor__label{position:absolute}
.global-page-cursor__x{left:0;right:0;top:var(--global-y,50%);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent)}
.global-page-cursor__y{top:0;bottom:0;left:var(--global-x,50%);width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.15),transparent)}
.global-page-cursor__point{left:var(--global-x,50%);top:var(--global-y,50%);width:7px;height:7px;border:1px solid rgba(255,255,255,.62);border-radius:50%;transform:translate(-50%,-50%)}
.global-page-cursor__label{left:calc(var(--global-x,50%) + 14px);top:calc(var(--global-y,50%) + 13px);padding:4px 6px;color:rgba(255,255,255,.78);background:rgba(5,29,45,.76);font-size:9px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
.projects-submenu a{display:block;padding:9px 0;color:rgba(255,255,255,.65);font-size:10px;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.projects-submenu a:hover{color:#fff}
@media(max-width:1100px){.method-grid{grid-template-columns:repeat(2,1fr)}.method-card{border-bottom:1px solid rgba(21,35,48,.16)}.project-area{grid-template-columns:120px 1fr}.project-area__visual{grid-column:1/-1}}
@media(max-width:700px){.method-grid{grid-template-columns:1fr}.method-card{border-right:0}.project-area{grid-template-columns:1fr}.page-contact-cta{grid-template-columns:1fr}.global-page-cursor{display:none}}


/* =========================================================
   PROGETTI — HERO FOTOGRAFICA
   ========================================================= */

.projects-page {
  --project-accent: #0f4f72;
  --project-accent-soft: rgba(15,79,114,.22);
  --project-surface: #eeece6;
  transition: background-color .8s ease;
}

.projects-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #051d2d;
}

.projects-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(.98) brightness(.83);
  transform: scale(1.035);
  animation: projectsHeroBreath 15s ease-in-out infinite alternate;
}

.projects-hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5,29,45,.98) 0%,
      rgba(5,29,45,.91) 20%,
      rgba(5,29,45,.61) 47%,
      rgba(5,29,45,.18) 76%,
      rgba(5,29,45,.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,29,45,.72) 0%,
      rgba(5,29,45,.08) 58%
    );
}

.projects-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .58;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 94px 94px;
  mask-image: linear-gradient(90deg,#000 0 58%,transparent 88%);
  animation: projectsGridMove 18s linear infinite;
}

.projects-hero__scan {
  position: absolute;
  z-index: 2;
  top: -20%;
  bottom: -20%;
  left: -26%;
  width: 16%;
  transform: skewX(-11deg);
  background: linear-gradient(90deg,transparent,rgba(208,235,248,.15),transparent);
  filter: blur(10px);
  animation: projectsHeroScan 7s ease-in-out infinite;
}

.projects-hero__content {
  position: relative;
  z-index: 4;
  width: min(1080px,100%);
  padding: 180px var(--page-pad) 100px;
}

.projects-hero h1 {
  margin: 0 0 28px;
  font-size: clamp(66px,7.6vw,136px);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.06em;
}

.projects-hero__content > p:not(.section-label) {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(17px,1.15vw,20px);
  line-height: 1.75;
}

.projects-hero__scroll {
  position: absolute;
  z-index: 5;
  right: var(--page-pad);
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-decoration: none;
}

.projects-hero__scroll i {
  position: relative;
  width: 58px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.35);
}

.projects-hero__scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-100%);
  animation: projectsScrollLine 2.2s ease-in-out infinite;
}

/* =========================================================
   PROGETTI — AREE CON CAMBIO COLORE
   ========================================================= */

.projects-list--dynamic {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--project-surface);
  transition: background-color .85s cubic-bezier(.2,.72,.22,1);
}

.project-area-panel {
  --local-accent: #0f4f72;
  position: relative;
  min-height: 86vh;
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(420px,.88fr);
  align-items: stretch;
  scroll-margin-top: 82px;
  border-top: 1px solid rgba(21,35,48,.12);
  color: #152330;
  isolation: isolate;
}

.project-area-panel.area-1 { --local-accent: #0f4f72; }
.project-area-panel.area-2 { --local-accent: #6f3150; }
.project-area-panel.area-3 { --local-accent: #6d5534; }
.project-area-panel.area-4 { --local-accent: #315f50; }
.project-area-panel.area-5 { --local-accent: #514373; }

.project-area-panel__media {
  position: relative;
  min-height: 680px;
  overflow: hidden;
}

.project-area-panel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.86) contrast(.98) brightness(.9);
  transform: scale(1.025);
  transition:
    transform 1.4s cubic-bezier(.2,.72,.22,1),
    filter .9s ease;
}

.project-area-panel.is-active .project-area-panel__media img,
.project-area-panel:hover .project-area-panel__media img {
  transform: scale(1.065);
  filter: saturate(.98) contrast(1) brightness(.96);
}

.project-area-panel__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,transparent 52%,rgba(5,29,45,.28) 100%),
    linear-gradient(0deg,rgba(5,29,45,.4),transparent 42%);
  mix-blend-mode: multiply;
  opacity: .88;
}

.project-area-panel__index {
  position: absolute;
  left: clamp(28px,4vw,72px);
  bottom: 26px;
  color: rgba(255,255,255,.94);
  font-size: clamp(80px,9vw,156px);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.08em;
  text-shadow: 0 6px 28px rgba(5,29,45,.42);
}

.project-area-panel__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px,8vw,130px) var(--page-pad) clamp(70px,8vw,130px) clamp(58px,7vw,110px);
  background:
    linear-gradient(rgba(21,35,48,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,35,48,.035) 1px,transparent 1px),
    var(--project-surface);
  background-size: 42px 42px;
}

.project-area-panel__eyebrow {
  display: block;
  margin-bottom: 34px;
  color: var(--local-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}

.project-area-panel h2 {
  margin: 0 0 28px;
  font-size: clamp(46px,5.2vw,88px);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.055em;
  text-transform: none;
}

.project-area-panel p {
  max-width: 600px;
  margin: 0 0 34px;
  color: #657079;
  font-size: 16px;
  line-height: 1.75;
}

.project-area-panel__link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(21,35,48,.38);
  color: #152330;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.project-area-panel__accent {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--local-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .75s cubic-bezier(.2,.72,.22,1);
}

.project-area-panel.is-active .project-area-panel__accent {
  transform: scaleY(1);
}

.project-area-panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -18%;
  top: 50%;
  width: 42vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,var(--local-accent) 0%,transparent 70%);
  opacity: 0;
  filter: blur(24px);
  transform: translateY(-50%) scale(.72);
  transition:
    opacity .8s ease,
    transform 1.1s cubic-bezier(.2,.72,.22,1);
  pointer-events: none;
}

.project-area-panel.is-active::after {
  opacity: .11;
  transform: translateY(-50%) scale(1);
}

@keyframes projectsHeroBreath {
  to { transform: scale(1.09) translate3d(-.8%,-.35%,0); }
}

@keyframes projectsGridMove {
  to { background-position: 94px 94px; }
}

@keyframes projectsHeroScan {
  0%,10% { left:-26%; opacity:0; }
  28% { opacity:1; }
  68% { opacity:.8; }
  100% { left:118%; opacity:0; }
}

@keyframes projectsScrollLine {
  0%,15% { transform:translateX(-100%); }
  60%,100% { transform:translateX(100%); }
}

@media (max-width: 980px) {
  .project-area-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .project-area-panel__media {
    min-height: 58svh;
  }

  .project-area-panel__content {
    min-height: 520px;
    padding: 80px var(--page-pad);
  }

  .project-area-panel__accent {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 6px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .project-area-panel.is-active .project-area-panel__accent {
    transform: scaleX(1);
  }
}

@media (max-width: 720px) {
  .projects-hero {
    min-height: 92svh;
  }

  .projects-hero__content {
    padding: 145px 24px 105px;
  }

  .projects-hero h1 {
    font-size: 52px;
  }

  .projects-hero__image {
    object-position: 62% center;
  }

  .projects-hero__wash {
    background:
      linear-gradient(90deg,rgba(5,29,45,.94),rgba(5,29,45,.46)),
      linear-gradient(0deg,rgba(5,29,45,.78),transparent 58%);
  }

  .projects-hero__scroll {
    left: 24px;
    right: auto;
  }

  .project-area-panel__media {
    min-height: 50svh;
  }

  .project-area-panel__content {
    min-height: 470px;
    padding: 68px 24px 80px;
  }

  .project-area-panel h2 {
    font-size: 46px;
  }

  .project-area-panel__index {
    left: 24px;
    font-size: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-hero__image,
  .projects-hero__grid,
  .projects-hero__scan,
  .projects-hero__scroll i::after {
    animation: none !important;
  }

  .project-area-panel__media img,
  .project-area-panel__accent,
  .project-area-panel::after {
    transition: none !important;
  }
}


/* NUMERI AREA PIÙ GRANDI */
.project-area-panel__index {
  font-size: clamp(120px, 13vw, 230px) !important;
  bottom: 18px !important;
  line-height: .75 !important;
}
@media (max-width: 720px) {
  .project-area-panel__index {
    font-size: 108px !important;
  }
}