
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');:root{--dark:#111314;--light:#f0f0ed}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--dark);color:white;font:300 16px/1.6 'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}header{position:absolute;z-index:5;top:0;left:0;right:0;padding:28px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff44}.logo{width:min(225px,42vw);filter:drop-shadow(0 0 1px #000)}nav{display:flex;gap:32px;text-transform:uppercase;letter-spacing:.17em;font-size:11px}nav a:hover{opacity:.65}.menu{display:none;background:transparent;color:white;border:0;font-size:26px}.hero{height:100svh;min-height:620px;display:flex;align-items:end;position:relative;background:#292f32 url('palestra-esterno.jpg') center/cover}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.83),transparent 65%),linear-gradient(90deg,#0006,transparent 80%)}.hero-inner{position:relative;padding:0 7% 9%;width:100%}.kicker{font-size:11px;letter-spacing:.23em;text-transform:uppercase}.hero h1{font-size:clamp(56px,9vw,138px);font-weight:300;letter-spacing:-.075em;line-height:.99;margin:22px 0 30px;max-width:1100px}.hero p{font-size:clamp(16px,1.6vw,22px);max-width:600px}.cta{display:inline-block;margin-top:20px;padding-bottom:10px;border-bottom:1px solid currentColor;font-size:12px;text-transform:uppercase;letter-spacing:.17em}.intro{background:var(--light);color:#161717;padding:130px 7%;display:grid;grid-template-columns:1fr 2fr;gap:8vw}.intro h2,.statement h2{font-size:clamp(36px,5.3vw,78px);font-weight:300;letter-spacing:-.055em;line-height:1.14;margin:0}.intro p,.statement p{max-width:720px;font-size:19px;line-height:1.7}.section-title{padding:90px 7% 30px;display:flex;align-items:end;justify-content:space-between}.section-title h2{font-size:clamp(48px,7vw,100px);letter-spacing:-.065em;font-weight:300;margin:0}.feature{padding:0 7% 115px}.feature img{width:100%;max-height:720px;object-fit:cover}.feature .details{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:28px 0;border-bottom:1px solid #666}.feature h3{font-size:clamp(35px,4vw,64px);font-weight:300;letter-spacing:-.055em;margin:0}.feature p{max-width:650px;font-size:17px}.eyeline{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#bcbcbc}.process{background:var(--light);color:#161717;padding:105px 7%}.process h2{font-size:clamp(36px,5vw,72px);font-weight:300;letter-spacing:-.05em;line-height:1.1;margin:18px 0 45px}.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.triptych img{height:290px;width:100%;object-fit:cover}.triptych figure{margin:0}.triptych figcaption{font-size:13px;padding:14px 0;color:#505050}.statement{background:#d4d5d0;color:#111;padding:120px 7%;display:grid;grid-template-columns:1fr 2fr;gap:7vw}.services{padding:105px 7%}.services h2{font-size:clamp(42px,6vw,85px);font-weight:300;letter-spacing:-.06em}.service{display:flex;justify-content:space-between;border-top:1px solid #555;padding:24px 0;font-size:clamp(23px,3vw,40px)}.service small{font-size:12px;color:#aaa}.contact{padding:100px 7% 130px;background:#232526}.contact h2{font-size:clamp(50px,8vw,115px);font-weight:300;letter-spacing:-.06em;line-height:1.05;margin:22px 0}footer{padding:35px 7%;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:12px;color:#aaa}footer .logo{width:165px}.small{font-size:13px;color:#777;line-height:1.6}.feature .small{color:#aaa}@media(max-width:750px){header{padding:20px 6%}nav{display:none;position:absolute;top:75px;left:0;right:0;background:#111;padding:25px 6%;flex-direction:column}nav.open{display:flex}.menu{display:block}.hero-inner{padding:0 6% 15%}.intro,.statement,.feature .details{grid-template-columns:1fr}.intro,.statement{padding:85px 6%}.section-title{padding:70px 6% 25px}.feature{padding:0 6% 75px}.triptych{grid-template-columns:1fr}.triptych img{height:250px}.process,.services,.contact{padding:75px 6%}footer{flex-direction:column;align-items:start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Project detail pages */
.project-page{background:#f0f0ed;color:#151718}.project-header{position:relative;background:#111314;color:#fff}.project-header .logo{filter:brightness(0) invert(1)}.project-header nav a{color:white}.project-intro{padding:155px 6% 75px;display:grid;grid-template-columns:1.5fr 1fr;gap:6%;background:#111314;color:#fff}.project-intro h1{font-size:clamp(54px,8vw,132px);font-weight:300;line-height:.98;letter-spacing:-.06em;margin:20px 0}.project-intro p{font-size:clamp(17px,1.7vw,24px);max-width:540px}.project-hero{width:100%;height:min(75vw,780px);object-fit:cover}.project-copy{padding:100px 6%;display:grid;grid-template-columns:1fr 1.2fr;gap:12%}.project-copy h2{font-size:clamp(35px,4.4vw,70px);line-height:1.1;letter-spacing:-.04em;font-weight:300;margin:0}.project-copy p{font-size:18px;line-height:1.8}.project-gallery{padding:0 6% 100px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.project-gallery figure{margin:0}.project-gallery figure.wide{grid-column:1/-1}.project-gallery img{width:100%;height:clamp(260px,38vw,600px);object-fit:cover;cursor:zoom-in}.project-gallery figure.wide img{height:clamp(350px,55vw,820px)}.project-gallery figcaption{padding:10px 0 18px;font-size:13px;color:#666}.project-meta{border-top:1px solid #bbb;padding:50px 6% 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.project-meta dt{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:#777}.project-meta dd{margin:10px 0;font-size:17px}.next-project{display:block;padding:85px 6%;background:#151718;color:white;font-size:clamp(36px,5vw,80px);letter-spacing:-.04em}.back-link{display:inline-block;margin-top:28px;border-bottom:1px solid currentColor}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:99;display:none;align-items:center;justify-content:center;padding:5vw}.lightbox.open{display:flex}.lightbox img{max-height:90vh;max-width:94vw;object-fit:contain}.lightbox button{position:absolute;right:25px;top:15px;background:none;color:white;border:0;font-size:40px;cursor:pointer}@media(max-width:720px){.project-intro,.project-copy,.project-meta{grid-template-columns:1fr}.project-intro{padding-top:135px}.project-copy{padding:60px 6%}.project-gallery{grid-template-columns:1fr}.project-gallery figure.wide{grid-column:auto}.project-gallery img,.project-gallery figure.wide img{height:auto}}

/* Home: fotografia selezionata dallo studio */
.hero{background-image:url('palestra-home.jpg');background-position:center 48%}
.hero:before{background:linear-gradient(0deg,rgba(0,0,0,.87) 0%,rgba(0,0,0,.38) 37%,transparent 72%)}
/* Lettering MSA: disegno vettoriale monolineare originale per titolazioni */
.msa-rendered{width:100%;max-width:100%;line-height:1;letter-spacing:0!important}
.msa-lettering{display:block;width:100%;height:auto;max-height:290px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.section-title h2.msa-rendered{width:min(520px,65vw)}
.feature h3.msa-rendered{width:min(530px,100%);margin-top:15px}
.process h2.msa-rendered,.services h2.msa-rendered{width:min(870px,100%);margin:30px 0 55px}
@media(max-width:750px){.hero{background-position:53% center}.msa-lettering{stroke-width:3.3}.section-title h2.msa-rendered{width:min(310px,68vw)}}

/* Versione 4 — manifesto editoriale e ritmo tipografico */
.hero h1{max-width:1180px;text-wrap:balance}.hero-inner{padding-bottom:7.5%}.intro h2{max-width:920px}.manifesto{padding:130px 7% 120px;background:#e6e6e2;color:#151718;min-height:560px;display:flex;flex-direction:column;justify-content:space-between;gap:55px}.manifesto p{font-size:clamp(45px,7.5vw,116px);letter-spacing:-.075em;line-height:1.04;font-weight:300;max-width:1300px;margin:0}.manifesto em{font-style:normal;color:#868986}.manifesto-foot{font-size:12px;letter-spacing:.2em;text-transform:uppercase}.feature img{transition:filter .4s ease}.feature img:hover{filter:contrast(1.08)}.feature .details{align-items:start}.feature .details a{width:max-content}@media(max-width:750px){.manifesto{padding:85px 6%;min-height:450px;gap:35px}.hero-inner{padding-bottom:15%}}

/* Versione 6 — dettagli editoriali e navigazione */
.hero-index{display:block;margin-top:42px;font-size:10px;letter-spacing:.22em;opacity:.72}.cta{transition:opacity .2s ease}.cta:hover,.feature .details a:hover,.back-link:hover{opacity:.6}nav a:focus-visible,.cta:focus-visible,.feature a:focus-visible,.menu:focus-visible{outline:2px solid currentColor;outline-offset:7px}.project-gallery img:focus-visible{outline:3px solid #777;outline-offset:3px}.feature img{aspect-ratio:16/9;object-fit:cover}.project-copy p:first-child{margin-top:0}.project-meta dd{max-width:430px}.feature .details p{line-height:1.75}@media(max-width:750px){.hero-index{margin-top:25px}.hero h1{font-size:clamp(47px,11vw,76px)}.feature img{aspect-ratio:4/3}.project-header nav{gap:16px!important;font-size:10px}.project-header{flex-wrap:wrap;gap:14px}}

/* Lettering MSA: titoli di progetto, scala e ritmo coerenti con la homepage. */
.project-intro h1.msa-rendered{width:min(100%,850px);line-height:1;min-height:0}
.project-intro h1.msa-rendered .msa-lettering{max-height:none}
.msa-rendered{font-size:0;letter-spacing:0}
@media(max-width:750px){.project-intro h1.msa-rendered{width:100%}.project-intro h1.msa-rendered .msa-lettering{stroke-width:3.1}}

/* Motion system — understated architectural transitions */
@media (prefers-reduced-motion: no-preference) {
  .hero .kicker { animation: msa-rise .85s .1s both; }
  .hero h1 { animation: msa-rise 1s .24s both; }
  .hero p { animation: msa-rise .95s .43s both; }
  .hero .cta { animation: msa-rise .95s .55s both; }
  @keyframes msa-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
  .motion-ready .motion-reveal { opacity:0; transform:translateY(28px); transition:opacity .85s ease, transform .95s cubic-bezier(.2,.75,.25,1); transition-delay:var(--motion-delay,0ms); }
  .motion-ready .motion-reveal.is-visible { opacity:1; transform:translateY(0); }
  .feature > img, .project-gallery img, .triptych img { transition: transform 1.1s cubic-bezier(.2,.75,.25,1), filter .7s ease; }
  .feature:hover > img, .project-gallery figure:hover img, .triptych figure:hover img { transform:scale(1.025); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }

/* Portfolio v11 — editorial spacing and image presentation */
.project-link{display:inline-block;margin-top:22px;border-bottom:1px solid currentColor;padding-bottom:6px;font-size:14px}
.feature>img{object-position:center center}
.project-gallery figure{overflow:hidden}
.project-gallery figcaption{position:relative;background:#f0f0ed}
@media(prefers-reduced-motion:no-preference){.project-link{transition:opacity .25s ease}.project-link:hover{opacity:.65}}

/* MSA — Proposta 02 Cinematic: ritmo editoriale alternato (novembre 2026) */
@media (min-width: 901px) {
  #progetti .feature {padding-bottom:clamp(95px,11vw,180px);}
  #progetti .feature > img {display:block;height:auto;max-height:none;object-fit:cover;}
  #progetti .feature .details {width:100%;}
  #progetti .feature-1 > img {width:100%;aspect-ratio:16/8.5;}
  #progetti .feature-2 > img {width:78%;margin-left:auto;aspect-ratio:16/10;}
  #progetti .feature-2 .details {width:78%;margin-left:auto;}
  #progetti .feature-3 > img {width:67%;aspect-ratio:4/3;}
  #progetti .feature-3 .details {width:67%;}
  #progetti .feature-4 > img {width:100%;aspect-ratio:16/9;}
  #progetti .feature-5 > img {width:76%;margin-left:auto;aspect-ratio:3/2;}
  #progetti .feature-5 .details {width:76%;margin-left:auto;}
  #progetti .feature-6 > img {width:min(49%,560px);aspect-ratio:auto;object-fit:contain;}
  #progetti .feature-6 .details {width:72%;}
}
@media (min-width: 751px) and (max-width: 900px) {
  #progetti .feature:nth-of-type(even) > img {width:85%;margin-left:auto;}
  #progetti .feature:nth-of-type(even) .details {width:85%;margin-left:auto;}
  #progetti .feature-6 > img {width:60%;height:auto;aspect-ratio:auto;object-fit:contain;}
}
@media (max-width: 750px) {
  #progetti .feature > img {width:100%;height:auto;max-height:none;aspect-ratio:4/3;object-fit:cover;}
  #progetti .feature-2 > img, #progetti .feature-5 > img {width:92%;margin-left:auto;}
  #progetti .feature-3 > img {width:88%;}
  #progetti .feature-6 > img {width:min(78%,440px);aspect-ratio:auto;object-fit:contain;}
  #progetti .feature .details {width:100%;}
  #progetti .feature h3 svg {max-width:100%;height:auto;}
}
@media (prefers-reduced-motion:reduce) {
  #progetti .feature > img {transition:none!important;transform:none!important;}
}

/* Fix 2026-11-07: visibility fail-safe; preserve alternating editorial layout */
#progetti .feature, #progetti .feature > img, #progetti .feature .details { opacity:1 !important; visibility:visible !important; }
#progetti .feature { transform:none !important; }
#progetti .feature > img { display:block !important; position:relative; z-index:1; }
.motion-ready .motion-reveal {opacity:1 !important;transform:none !important;}


/* MSA+PARTNERS — Rifinitura cinematic: animazioni progressive non bloccanti */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner { animation: msa-hero-arrive 1.05s cubic-bezier(.2,.65,.3,1) both; }
  @keyframes msa-hero-arrive { from {opacity:.65;transform:translateY(18px)} to {opacity:1;transform:translateY(0)} }
  #progetti .feature > img {transition:filter .75s ease, scale .9s cubic-bezier(.2,.7,.3,1);scale:1;}
  #progetti .feature:hover > img {scale:1.012;}
  #progetti .feature .details {transition:opacity .3s ease;}
  #progetti .feature a:focus-visible {outline:2px solid currentColor;outline-offset:5px;}
}
/* Mobile: lettering vettoriale, spazi e fotografie senza tagli su Leffe */
@media (max-width: 750px) {
  html {overflow-x:hidden;}
  header {padding:18px 5%;}
  .hero {min-height:580px;min-height:100svh;}
  .hero-inner {padding:0 6% 12%;}
  .hero h1 {font-size:clamp(42px,10.4vw,76px);overflow-wrap:normal;}
  .intro,.statement,.services,.contact {padding-left:6%;padding-right:6%;}
  #progetti .section-title {padding-left:6%;padding-right:6%;}
  #progetti .feature {padding-bottom:72px;}
  #progetti .feature > img {max-width:100%;}
  #progetti .feature .details {max-width:100%;}
  #progetti .feature h3, #progetti .feature h3 svg, #progetti .feature h3 .msa-lettering {max-width:100%;}
  #progetti .feature-6 > img {width:min(78%,440px)!important;height:auto!important;object-fit:contain!important;aspect-ratio:auto!important;}
  .project-gallery {grid-template-columns:1fr;}
}
@media (max-width: 390px) {
  .hero h1 {font-size:clamp(38px,10vw,50px);}
  #progetti .feature {padding-bottom:56px;}
  .kicker {letter-spacing:.12em;}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}
  #progetti .feature > img {scale:1!important;}
}

/* MSA bilingual contacts and language switch */
.msa-lang-switch{display:flex;gap:12px;align-items:center;margin-left:20px;z-index:20;font-size:12px;letter-spacing:.14em;font-weight:600}.msa-lang-switch a{color:inherit;opacity:.52;text-decoration:none}.msa-lang-switch a.active,.msa-lang-switch a:hover{opacity:1}.msa-lang-switch a.active{text-decoration:underline;text-underline-offset:5px}.msa-contact-details{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px;font-size:clamp(16px,2vw,24px);line-height:1.5}.msa-contact-details a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}.msa-contact-details address{font-size:clamp(14px,1.5vw,18px);font-style:normal;opacity:.85}.msa-contact-details .msa-map-link{font-size:11px;letter-spacing:.14em;margin-top:8px}.msa-detail-contact{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;margin:12px 0}.msa-detail-contact a{color:inherit}.msa-lang-switch{white-space:nowrap}@media(max-width:700px){.msa-lang-switch{gap:8px;margin-left:8px;font-size:11px}.msa-contact-details{gap:12px;margin-top:22px}}
