:root{
  --red:#e10600;
  --red2:#b90000;
  --white:#fff;
  --paper:#f5f5f1;
  --ink:#101010;
  --muted:#707070;
  --line:rgba(16,16,16,.13);
  --dark:#0d0d0d;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-anchor:none}
body{font-family:Inter,Arial,sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;overflow-anchor:none}
body.locked{overflow:hidden}
img,video{display:block;width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit}
.container{width:min(1450px,calc(100% - 80px));margin:auto}

.site-header{
 /* z-index 1201: deve restare sopra alla tendina scura del menu mobile
    (z-index:1150 più sotto) perché il menu a tendina (.nav, .menu-btn)
    vive dentro l'header — essendo l'header fixed con un suo z-index,
    crea un proprio "contesto di sovrapposizione" e tutto il suo
    contenuto viene impilato nella pagina in blocco a quel livello,
    indipendentemente dallo z-index più alto che nav/menu-btn hanno
    *al suo interno*. Con l'header a 1000 (sotto alla tendina a 1150)
    i tocchi sul menu aperto da telefono finivano sulla tendina scura
    invece che sui link, e il menu sembrava "non rispondere". Resta
    comunque sotto alla barra di lettura (z-index:1210), che deve
    restare visibile sopra a tutto anche a menu aperto. */
 position:fixed;z-index:1201;inset:0 0 auto;height:82px;padding:0 42px;
 display:flex;align-items:center;justify-content:space-between;color:#fff;
 transition:.3s ease
}
.site-header.scrolled{
 height:70px;background:rgba(255,255,255,.94);color:#111;
 backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.07)
}
.brand{display:flex;align-items:center;gap:10px;font-family:Manrope,sans-serif;font-weight:800}
.brand-mark{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;font-size:13px}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-name{font-size:14px;letter-spacing:-.04em}
.nav{display:flex;gap:30px;font-size:12px;font-weight:700}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--red);transition:.2s}
.nav a:hover:after{width:100%}
.header-contact{font-size:12px;font-weight:700;border:1px solid currentColor;border-radius:999px;padding:10px 17px}
.menu-btn{display:none;border:0;background:none;color:inherit;font-size:25px}

.hero{
 min-height:100svh;position:relative;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#111
}
.hero-media{position:absolute;inset:0}
.hero-media img{height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.28) 55%,rgba(0,0,0,.1)),linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%)}
.hero-content{position:relative;z-index:2;padding-bottom:10vh;width:min(1300px,calc(100% - 14vw));margin:auto}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;margin-bottom:20px}
.eyebrow.red{color:var(--red)}
.hero h1,.page-hero h1{
 font-family:Manrope,sans-serif;font-size:clamp(68px,10vw,154px);line-height:.84;letter-spacing:-.075em
}
.hero h1 span{display:block}
.hero h1 span:last-child{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.95)}
.hero p{margin-top:30px;max-width:620px;color:rgba(255,255,255,.82);font-size:17px;line-height:1.75}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{min-height:52px;padding:0 24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;transition:.25s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#fff;color:#111;transform:translateY(-2px)}
.btn-outline{border:1px solid rgba(255,255,255,.65);color:#fff}
.btn-outline:hover{background:#fff;color:#111}

.intro{background:#fff;padding:120px 0}
.intro-grid{display:grid;grid-template-columns:210px 1fr;gap:80px}
.kicker{display:flex;gap:14px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.kicker b{color:var(--red)}
.big-copy{font-family:Manrope,sans-serif;font-size:clamp(42px,6vw,84px);line-height:.98;letter-spacing:-.055em;max-width:1100px}
.body-copy{margin-top:30px;max-width:720px;color:var(--muted);font-size:17px;line-height:1.8}

.work{padding:120px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:45px}
.section-head h2{font-family:Manrope,sans-serif;font-size:clamp(52px,7vw,96px);line-height:.92;letter-spacing:-.06em}
.section-head p{max-width:420px;color:var(--muted);line-height:1.7}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filter{border:1px solid var(--line);background:transparent;border-radius:999px;padding:10px 16px;font-size:11px;font-weight:800;cursor:pointer}
.filter.active,.filter:hover{background:var(--red);color:#fff;border-color:var(--red)}

.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.project{grid-column:span 4;background:#fff;border-radius:var(--radius);overflow:hidden;transition:.25s}
.project.wide{grid-column:span 8}
.project-media{aspect-ratio:4/5;overflow:hidden}
.project.wide .project-media{aspect-ratio:16/9}
.project-media img{height:100%;object-fit:cover;transition:.65s cubic-bezier(.2,.8,.2,1)}
.project:hover .project-media img{transform:scale(1.035)}
.project-bottom{display:flex;justify-content:space-between;align-items:flex-end;padding:20px}
.project-tag{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);font-weight:800}
.project h3{font-family:Manrope,sans-serif;font-size:22px;letter-spacing:-.035em;margin-top:6px}
.project-arrow{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:.2s}
.project:hover .project-arrow{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(10deg)}
.project.hidden{display:none}

.media-strip{overflow:hidden;background:var(--red);color:#fff;padding:18px 0}
.media-track{display:flex;width:max-content;animation:marquee 22s linear infinite}
.media-track span{white-space:nowrap;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.02em;padding-right:35px}
@keyframes marquee{to{transform:translateX(-50%)}}

.about{padding:130px 0;background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
.about img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.about h2{font-family:Manrope,sans-serif;font-size:clamp(48px,6vw,82px);line-height:.95;letter-spacing:-.055em;margin-bottom:28px}
.about p{color:var(--muted);font-size:16px;line-height:1.85;margin-bottom:15px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px;padding-top:25px;border-top:1px solid var(--line)}
.stats strong{font-family:Manrope,sans-serif;font-size:34px;display:block}
.stats span{color:var(--muted);font-size:11px}

.services{background:#111;color:#fff;padding:120px 0}
.service-row{display:grid;grid-template-columns:60px 1.2fr 1fr 40px;gap:24px;align-items:center;padding:27px 0;border-bottom:1px solid rgba(255,255,255,.14);transition:.2s}
.service-row:first-of-type{border-top:1px solid rgba(255,255,255,.14)}
.service-row:hover{padding-left:14px;color:var(--red)}
.service-row h3{font-family:Manrope,sans-serif;font-size:clamp(24px,3vw,40px);letter-spacing:-.04em}
.service-row p{color:#999;font-size:14px;line-height:1.6}

.contact{background:var(--red);color:#fff;padding:120px 0}
.contact h2{font-family:Manrope,sans-serif;font-size:clamp(65px,10vw,145px);line-height:.84;letter-spacing:-.075em}
.contact p{margin-top:28px;max-width:600px;color:rgba(255,255,255,.82);line-height:1.7}
.contact-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:30px}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:#111;color:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.contact-form{max-width:640px;margin-top:44px;display:flex;flex-direction:column;gap:16px}
.contact-form-row{display:flex;gap:16px;flex-wrap:wrap}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  /* Sfondo quasi bianco invece di bianco trasparente su rosso: il
     testo scritto e il segnaposto restano leggibili subito, senza
     dover aguzzare la vista sul rosso pieno dietro. */
  flex:1 1 220px;min-width:0;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius);padding:16px 20px;color:var(--ink);font:inherit;font-size:15px;
  transition:.2s border-color,.2s background
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(16,16,16,.5)}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:#fff;background:#fff
}
.contact-form select{
  flex:1 1 220px;min-width:0;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius);padding:16px 20px;color:var(--ink);font:inherit;font-size:15px;
  transition:.2s border-color,.2s background
}
.contact-form select:focus{ outline:none;border-color:#fff;background:#fff }
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form-footer{align-items:center;gap:20px}
.contact-form-status{margin:0;font-size:13px;color:rgba(255,255,255,.85)}
.contact-form-status[data-state="ok"]{color:#fff;font-weight:700}
.contact-form-status[data-state="errore"]{color:#111;background:#fff;padding:6px 14px;border-radius:999px}
.contact-form button[disabled]{opacity:.6;cursor:progress}

@media (max-width:640px){
  .contact-form-row{flex-direction:column}
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form select,
  .contact-form textarea{flex-basis:auto}
}

footer{background:#0b0b0b;color:#777;padding:28px 42px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;font-size:11px}
footer strong{color:#fff;font-family:Manrope,sans-serif}

/* Social nel footer, aggiunti via JS (assets/js/main.js) su tutte le pagine */
.footer-social{display:flex;align-items:center;gap:14px}
.footer-social a{color:#777;display:inline-flex;align-items:center;justify-content:center;transition:color .2s ease}
.footer-social a:hover,.footer-social a:focus-visible{color:var(--red)}
.footer-social svg{width:16px;height:16px}

/* PROJECT PAGES */
.project-page{background:#fff}
.page-hero{
 min-height:78svh;background:#111;color:#fff;position:relative;display:flex;align-items:flex-end;overflow:hidden
}
.page-hero img{position:absolute;inset:0;height:100%;object-fit:cover}
.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.08) 65%)}
.page-hero-content{position:relative;z-index:2;display:flex;min-height:inherit;flex-direction:column;justify-content:flex-end;padding-bottom:7vh}
.page-hero h1{font-size:clamp(58px,9vw,132px);max-width:1150px}
.page-hero .project-category{color:#fff;margin-bottom:15px}
.project-info{padding:85px 0;background:#fff}
.project-info-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:100px}
.project-intro{font-family:Manrope,sans-serif;font-size:clamp(32px,4vw,58px);line-height:1.05;letter-spacing:-.045em}
.project-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.fact{border-top:1px solid var(--line);padding-top:12px}
.fact small{display:block;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.fact strong{font-size:14px}

.gallery-section{padding:40px 0 110px;background:var(--paper)}
.gallery-title{font-family:Manrope,sans-serif;font-size:clamp(44px,6vw,86px);letter-spacing:-.055em;margin-bottom:35px}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.gallery-item{position:relative;grid-column:span 6;padding:0;border:0;border-radius:14px;overflow:hidden;appearance:none;cursor:zoom-in;background:#ddd}
.gallery-item:nth-child(2),.gallery-item:nth-child(3){grid-column:span 6}
.gallery-item img{aspect-ratio:16/10;object-fit:cover;transition:.5s}
.gallery-item:nth-child(even) img{aspect-ratio:4/5}
.project-page .gallery-item img,
.project-page .gallery-item:nth-child(even) img{
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}
.gallery-item:hover img{transform:scale(1.02)}

.video-section{padding:110px 0;background:#111;color:#fff}
.video-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:35px}
.video-head h2{font-family:Manrope,sans-serif;font-size:clamp(48px,7vw,90px);letter-spacing:-.06em;line-height:.92}
.video-head p{max-width:440px;color:#999;line-height:1.7}
.video-frame{border-radius:18px;overflow:hidden;background:#000}
.video-frame video{aspect-ratio:16/9;background:#000}
.video-note{margin-top:15px;color:#777;font-size:11px;line-height:1.6}
.video-note code{color:#fff}

.next-project{background:var(--red);color:#fff;padding:95px 0}
.next-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:15px}
.next-project a{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.next-project h2{font-family:Manrope,sans-serif;font-size:clamp(48px,8vw,115px);line-height:.88;letter-spacing:-.065em}
.next-project .next-arrow{font-size:56px;transition:.2s}
.next-project a:hover .next-arrow{transform:translate(8px,-8px)}

.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.25s}
.lightbox.active,.lightbox.is-open,.lightbox.open,.lightbox[aria-hidden="false"]{opacity:1;visibility:visible;pointer-events:auto}
.lightbox img{width:auto;max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox-close{position:absolute;right:25px;top:22px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:none;color:#fff;font-size:27px;cursor:pointer}

:where(a,button):focus-visible{outline:3px solid var(--red);outline-offset:4px}

.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1050px){
 .container{width:min(100% - 44px,1450px)}
 .nav,.header-contact{display:none}.menu-btn{display:block}
 .projects{grid-template-columns:repeat(2,1fr)}.project,.project.wide{grid-column:auto}.project.wide .project-media{aspect-ratio:4/5}
 .intro-grid{grid-template-columns:1fr;gap:30px}
 .about-grid{gap:45px}
 .project-info-grid{grid-template-columns:1fr;gap:45px}
}
@media(max-width:720px){
 .site-header{height:68px;padding:0 18px}.site-header.scrolled{height:62px}
 .container{width:calc(100% - 32px)}
 .hero-content{width:calc(100% - 32px);padding-bottom:12vh}
 .hero h1{font-size:clamp(58px,18vw,90px);line-height:.88}.hero h1 span:last-child{-webkit-text-stroke:1.3px #fff}
 .intro,.work,.about,.services,.contact{padding:85px 0}
 .section-head{display:block}.section-head p{margin-top:18px}
 .projects{grid-template-columns:1fr}.project,.project.wide{grid-column:1}
 .about-grid{grid-template-columns:1fr}
 .stats{grid-template-columns:1fr}
 .service-row{grid-template-columns:40px 1fr 30px;gap:12px}.service-row p{grid-column:2/4}
 footer{padding:28px 18px;flex-direction:column}
 .page-hero{min-height:68svh}.page-hero-content{padding-bottom:5vh}.page-hero h1{font-size:clamp(52px,17vw,86px)}
 .project-info{padding:60px 0}
 .project-facts{grid-template-columns:1fr 1fr}
 .gallery-section,.video-section{padding:75px 0}
 .gallery-grid{grid-template-columns:1fr}.gallery-item,.gallery-item:nth-child(2),.gallery-item:nth-child(3){grid-column:1}
 .gallery-item img,.gallery-item:nth-child(even) img{aspect-ratio:4/5}
 .video-head{display:block}.video-head p{margin-top:16px}
 .next-project a{align-items:center}.next-project .next-arrow{font-size:34px}
}


/* =========================================================
   MOBILE / RESPONSIVE PRO
   Ottimizzazione specifica smartphone e tablet
========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-width:320px;
  overscroll-behavior-y:none;
}

img,
video{
  max-width:100%;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

.site-header{
  padding-left:max(42px, env(safe-area-inset-left));
  padding-right:max(42px, env(safe-area-inset-right));
}

.mobile-nav-panel{
  display:none;
}

@media (max-width:1050px){

  .site-header{
    padding-left:max(22px, env(safe-area-inset-left));
    padding-right:max(22px, env(safe-area-inset-right));
  }

  .menu-btn{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid currentColor;
    font-size:0;
    cursor:pointer;
    position:relative;
    z-index:1202;
  }

  .menu-btn::before,
  .menu-btn::after{
    content:"";
    position:absolute;
    width:20px;
    height:2px;
    background:currentColor;
    transition:.25s ease;
  }

  .menu-btn::before{ transform:translateY(-4px); }
  .menu-btn::after{ transform:translateY(4px); }

  body.mobile-menu-open .menu-btn::before{
    transform:rotate(45deg);
  }

  body.mobile-menu-open .menu-btn::after{
    transform:rotate(-45deg);
  }

  .nav{
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    z-index:1200 !important;
    background:var(--red) !important;
    color:#fff !important;
    padding:
      max(110px, calc(85px + env(safe-area-inset-top)))
      max(28px, env(safe-area-inset-right))
      max(40px, env(safe-area-inset-bottom))
      max(28px, env(safe-area-inset-left)) !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:10px !important;
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:
      transform .4s cubic-bezier(.76,0,.24,1),
      opacity .25s ease,
      visibility .25s;
  }

  body.mobile-menu-open .nav{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }

  .nav a{
    font-family:Manrope,sans-serif;
    font-size:clamp(42px,9vw,82px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.055em;
    width:100%;
    padding:7px 0;
  }

  .nav a::after{
    display:none;
  }

  .header-contact{
    display:none;
  }

  body.mobile-menu-open .site-header{
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    backdrop-filter:none !important;
  }
}

@media (max-width:760px){

  :root{
    --radius:14px;
  }

  .container{
    width:min(calc(100% - 30px),1450px);
  }

  .site-header{
    height:66px;
    padding-top:env(safe-area-inset-top);
  }

  .site-header.scrolled{
    height:62px;
  }

  .brand-mark{
    width:38px;
    height:38px;
  }

  .brand-name{
    font-size:12px;
  }

  .hero{
    min-height:100svh;
    align-items:flex-end;
  }

  .hero-media img{
    object-position:center center;
  }

  .hero::after{
    background:
      linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.16) 100%),
      linear-gradient(90deg,rgba(0,0,0,.32),transparent);
  }

  .hero-content{
    width:calc(100% - 30px);
    padding:
      100px 0
      max(72px, calc(52px + env(safe-area-inset-bottom)));
  }

  .hero h1{
    font-size:clamp(54px,16vw,86px);
    line-height:.9;
    max-width:100%;
  }

  .hero p{
    font-size:15px;
    line-height:1.65;
    margin-top:22px;
    max-width:100%;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:26px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:54px;
  }

  .intro,
  .work,
  .about,
  .services,
  .contact{
    padding:78px 0;
  }

  .intro-grid{
    gap:24px;
  }

  .big-copy{
    font-size:clamp(38px,11vw,58px);
    line-height:1;
  }

  .body-copy{
    font-size:15px;
    line-height:1.75;
    margin-top:24px;
  }

  .section-head{
    margin-bottom:30px;
  }

  .section-head h2{
    font-size:clamp(48px,14vw,70px);
  }

  .section-head p{
    font-size:14px;
    line-height:1.65;
  }

  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:6px;
    margin-right:-15px;
    padding-right:15px;
    scroll-snap-type:x proximity;
  }

  .filters::-webkit-scrollbar{
    display:none;
  }

  .filter{
    flex:0 0 auto;
    min-height:42px;
    padding:0 16px;
    scroll-snap-align:start;
    white-space:nowrap;
  }

  .projects{
    display:block;
  }

  .project,
  .project.wide{
    width:100%;
    margin-bottom:18px;
  }

  .project-media,
  .project.wide .project-media{
    aspect-ratio:4/5;
  }

  .project-bottom{
    padding:16px;
  }

  .project h3{
    font-size:20px;
  }

  .project-arrow{
    width:44px;
    height:44px;
    flex:0 0 auto;
  }

  .about-grid{
    gap:32px;
  }

  .about h2{
    font-size:clamp(43px,12vw,64px);
    margin-bottom:22px;
  }

  .about p{
    font-size:15px;
    line-height:1.75;
  }

  .stats{
    grid-template-columns:1fr 1fr;
    gap:16px;
  }

  .stats > div:last-child{
    grid-column:1 / -1;
  }

  .service-row{
    grid-template-columns:34px 1fr 30px;
    gap:10px;
    padding:22px 0;
  }

  .service-row h3{
    font-size:24px;
  }

  .service-row p{
    grid-column:2 / 4;
    font-size:13px;
    line-height:1.55;
    padding-right:10px;
  }

  .contact h2{
    font-size:clamp(58px,17vw,90px);
  }

  .contact p{
    font-size:15px;
    line-height:1.65;
  }

  .contact-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }

  .contact-actions .btn{
    width:100%;
    min-height:54px;
  }

  footer{
    padding:
      26px
      max(18px, env(safe-area-inset-right))
      max(28px, calc(18px + env(safe-area-inset-bottom)))
      max(18px, env(safe-area-inset-left));
  }

  /* Project pages */

  .page-hero{
    min-height:72svh;
  }

  .page-hero-content{
    padding-bottom:max(42px, calc(28px + env(safe-area-inset-bottom)));
  }

  .page-hero h1{
    font-size:clamp(50px,15vw,78px);
    line-height:.9;
  }

  .project-info{
    padding:58px 0;
  }

  .project-info-grid{
    gap:36px;
  }

  .project-intro{
    font-size:clamp(30px,8.8vw,45px);
    line-height:1.08;
  }

  .project-facts{
    grid-template-columns:1fr 1fr;
    gap:20px 14px;
  }

  .fact strong{
    font-size:13px;
    line-height:1.4;
  }

  .gallery-section,
  .video-section{
    padding:68px 0;
  }

  .gallery-title{
    font-size:clamp(42px,12vw,62px);
    margin-bottom:26px;
  }

  .gallery-grid{
    gap:12px;
  }

  .gallery-item{
    border:0;
    padding:0;
    width:100%;
  }

  .gallery-item img,
  .gallery-item:nth-child(even) img{
    aspect-ratio:auto;
    min-height:0;
    max-height:none;
    object-fit:cover;
  }

  .video-head h2{
    font-size:clamp(44px,13vw,68px);
  }

  .video-head p{
    font-size:14px;
    line-height:1.6;
  }

  .video-frame{
    border-radius:12px;
  }

  .video-frame video{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
  }

  .video-note{
    font-size:10px;
    overflow-wrap:anywhere;
  }

  .next-project{
    padding:70px 0;
  }

  .next-project h2{
    font-size:clamp(46px,13vw,72px);
  }

  .next-project .next-arrow{
    flex:0 0 auto;
    font-size:34px;
  }

  .lightbox{
    padding:
      max(70px, env(safe-area-inset-top))
      12px
      max(24px, env(safe-area-inset-bottom));
  }

  .lightbox img{
    max-width:100%;
    max-height:calc(100svh - 110px);
  }

  .lightbox-close{
    top:max(14px, env(safe-area-inset-top));
    right:max(14px, env(safe-area-inset-right));
    width:48px;
    height:48px;
  }
}

@media (max-width:480px){

  .container{
    width:calc(100% - 24px);
  }

  .hero-content{
    width:calc(100% - 24px);
  }

  .eyebrow{
    font-size:9px;
    letter-spacing:.14em;
    margin-bottom:14px;
  }

  .hero h1{
    font-size:clamp(50px,15.5vw,72px);
  }

  .big-copy{
    font-size:clamp(36px,10.5vw,49px);
  }

  .stats{
    grid-template-columns:1fr;
  }

  .stats > div:last-child{
    grid-column:auto;
  }

  .project-facts{
    grid-template-columns:1fr;
  }

  .project-bottom{
    align-items:center;
  }

  .project h3{
    font-size:19px;
  }

  .contact h2{
    font-size:clamp(54px,16vw,74px);
  }
}

/* Smartphone in landscape */
@media (max-height:520px) and (orientation:landscape){

  .hero{
    min-height:620px;
  }

  .hero-content{
    padding-top:110px;
    padding-bottom:45px;
  }

  .hero h1{
    font-size:clamp(52px,10vw,82px);
  }

  .page-hero{
    min-height:620px;
  }
}

/* Tablet */
@media (min-width:761px) and (max-width:1050px){

  .projects{
    grid-template-columns:repeat(2,1fr);
  }

  .project,
  .project.wide{
    grid-column:auto;
  }

  .project-media,
  .project.wide .project-media{
    aspect-ratio:4/5;
  }

  .about-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  .project-info-grid{
    grid-template-columns:1fr;
    gap:45px;
  }
}


/* =========================================================
   RESPONSIVE SYSTEM — GLOBAL
   Tutte le finestre, sezioni, pagine e componenti
========================================================= */

/* Base fluid safety */
:where(section, header, footer, main, nav, article, aside, div){
  min-width:0;
}

:where(h1,h2,h3,h4,p,a,span,strong,small){
  overflow-wrap:anywhere;
}

:where(img,video,iframe,svg){
  max-width:100%;
}

iframe{
  display:block;
  width:100%;
  border:0;
}

section{
  width:100%;
  overflow-x:clip;
}

.container{
  max-width:1450px;
}

/* Consistent touch sizes */
:where(.btn,.filter,.project-arrow,.menu-btn,.lightbox-close){
  min-height:44px;
}

/* Cards can never overflow */
.project,
.gallery-item,
.video-frame,
.about img,
.page-hero,
.hero{
  max-width:100%;
}

/* Prevent oversized text from breaking narrow screens */
.hero h1,
.page-hero h1,
.big-copy,
.section-head h2,
.about h2,
.contact h2,
.gallery-title,
.video-head h2,
.next-project h2{
  max-width:100%;
}

/* Video embeds including future YouTube/Vimeo iframes */
.video-frame iframe,
.video-frame video{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  object-fit:contain;
}

/* Fluid page spacing */
.intro,
.work,
.about,
.services,
.contact,
.project-info,
.gallery-section,
.video-section,
.next-project{
  padding-left:0;
  padding-right:0;
}

/* Desktop / large laptop */
@media (min-width:1281px){
  .container{
    width:min(1450px,calc(100% - 96px));
  }

  .projects{
    gap:20px;
  }
}

/* Laptop / small desktop */
@media (min-width:1051px) and (max-width:1280px){
  .container{
    width:calc(100% - 64px);
  }

  .hero-content{
    width:calc(100% - 10vw);
  }

  .project{
    grid-column:span 6;
  }

  .project.wide{
    grid-column:span 6;
  }

  .project-media,
  .project.wide .project-media{
    aspect-ratio:4 / 5;
  }

  .about-grid{
    gap:58px;
  }

  .project-info-grid{
    gap:65px;
  }
}

/* Tablet landscape and portrait */
@media (min-width:761px) and (max-width:1050px){
  .container{
    width:calc(100% - 48px);
  }

  .site-header{
    padding-inline:24px;
  }

  .hero-content{
    width:calc(100% - 48px);
    padding-bottom:8vh;
  }

  .hero h1{
    font-size:clamp(72px,11vw,118px);
  }

  .hero p{
    max-width:70%;
  }

  .intro,
  .work,
  .about,
  .services,
  .contact{
    padding-block:96px;
  }

  .intro-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .projects{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  .project,
  .project.wide{
    grid-column:auto;
  }

  .project-media,
  .project.wide .project-media{
    aspect-ratio:4 / 5;
  }

  .section-head{
    align-items:flex-start;
  }

  .about-grid{
    grid-template-columns:1fr 1fr;
    gap:38px;
  }

  .about h2{
    font-size:clamp(44px,6.5vw,68px);
  }

  .stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .stats strong{
    font-size:24px;
  }

  .service-row{
    grid-template-columns:48px minmax(0,1.1fr) minmax(0,.9fr) 32px;
    gap:16px;
  }

  .page-hero{
    min-height:70svh;
  }

  .page-hero-content{
    padding-bottom:6vh;
  }

  .project-info-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .project-facts{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gallery-item,
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3){
    grid-column:auto;
  }

  .gallery-item img,
  .gallery-item:nth-child(even) img{
    aspect-ratio:4 / 5;
  }

  .video-head{
    align-items:flex-start;
  }

  .next-project a{
    align-items:center;
  }
}

/* Phones */
@media (max-width:760px){
  body{
    overflow-x:hidden;
  }

  .container{
    width:calc(100% - 30px);
  }

  .site-header{
    padding-inline:max(15px,env(safe-area-inset-left)) max(15px,env(safe-area-inset-right));
  }

  .brand{
    gap:8px;
    min-width:0;
  }

  .brand-name{
    white-space:nowrap;
  }

  .hero,
  .page-hero{
    width:100%;
  }

  .hero-media,
  .hero-media img,
  .page-hero > img{
    width:100%;
    height:100%;
  }

  .hero-content{
    width:calc(100% - 30px);
  }

  .hero h1{
    font-size:clamp(50px,15.4vw,82px);
    letter-spacing:-.065em;
  }

  .hero p{
    max-width:100%;
  }

  .hero-actions{
    width:100%;
  }

  .hero-actions .btn{
    width:100%;
  }

  .intro-grid,
  .about-grid,
  .project-info-grid{
    grid-template-columns:1fr;
  }

  .intro,
  .work,
  .about,
  .services,
  .contact{
    padding-block:76px;
  }

  .section-head{
    display:block;
    margin-bottom:28px;
  }

  .section-head p{
    margin-top:18px;
    max-width:100%;
  }

  .filters{
    width:calc(100% + 15px);
    margin-right:-15px;
    padding-right:15px;
  }

  .projects{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .project,
  .project.wide{
    grid-column:1;
    width:100%;
    margin:0;
  }

  .project-media,
  .project.wide .project-media{
    width:100%;
    aspect-ratio:4 / 5;
  }

  .project-bottom{
    gap:12px;
  }

  .project-bottom > div:first-child{
    min-width:0;
  }

  .project-arrow{
    flex:0 0 44px;
  }

  .about-grid{
    gap:30px;
  }

  .about img{
    width:100%;
    aspect-ratio:4 / 5;
  }

  .stats{
    width:100%;
  }

  .service-row{
    width:100%;
  }

  .service-row > *{
    min-width:0;
  }

  .contact-actions{
    width:100%;
  }

  .contact-actions > *{
    max-width:100%;
  }

  footer{
    width:100%;
    align-items:flex-start;
  }

  /* Project pages */
  .page-hero{
    min-height:68svh;
  }

  .page-hero-content{
    width:100%;
  }

  .project-info{
    padding-block:58px;
  }

  .project-info-grid{
    gap:34px;
  }

  .project-facts{
    width:100%;
  }

  .gallery-section,
  .video-section{
    padding-block:66px;
  }

  .gallery-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .gallery-item,
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3){
    grid-column:1;
    width:100%;
  }

  .gallery-item img,
  .gallery-item:nth-child(even) img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
  }

  .video-head{
    display:block;
  }

  .video-head p{
    margin-top:16px;
    max-width:100%;
  }

  .video-frame{
    width:100%;
  }

  .video-frame video,
  .video-frame iframe{
    width:100%;
    aspect-ratio:16/9;
  }

  .next-project a{
    width:100%;
    align-items:center;
  }

  .next-project h2{
    min-width:0;
  }

  .next-project .next-arrow{
    flex:0 0 auto;
  }

  .lightbox{
    width:100vw;
    min-height:100svh;
  }
}

/* Narrow phones: 320–399px */
@media (max-width:399px){
  .container,
  .hero-content{
    width:calc(100% - 22px);
  }

  .site-header{
    padding-inline:11px;
  }

  .brand-name{
    font-size:10px;
  }

  .brand-mark{
    width:35px;
    height:35px;
  }

  .menu-btn{
    width:42px;
    height:42px;
  }

  .hero h1{
    font-size:clamp(46px,14.7vw,62px);
    line-height:.91;
  }

  .hero p{
    font-size:14px;
  }

  .eyebrow{
    font-size:8px;
    letter-spacing:.12em;
  }

  .big-copy{
    font-size:clamp(33px,10.7vw,43px);
  }

  .section-head h2{
    font-size:clamp(42px,13.5vw,54px);
  }

  .project-bottom{
    padding:14px;
  }

  .project h3{
    font-size:18px;
  }

  .stats{
    grid-template-columns:1fr;
  }

  .service-row{
    grid-template-columns:30px 1fr 26px;
  }

  .service-row h3{
    font-size:21px;
  }

  .contact h2{
    font-size:clamp(48px,15vw,62px);
  }

  .page-hero h1{
    font-size:clamp(45px,14.2vw,62px);
  }

  .project-intro{
    font-size:clamp(27px,8.7vw,36px);
  }

  .project-facts{
    grid-template-columns:1fr;
  }

  .gallery-title,
  .video-head h2{
    font-size:clamp(39px,12.2vw,50px);
  }

  .next-project h2{
    font-size:clamp(40px,12.5vw,54px);
  }
}

/* Landscape phones */
@media (max-height:560px) and (orientation:landscape){
  .site-header{
    height:58px;
  }

  .hero{
    min-height:580px;
  }

  .hero-content{
    padding-top:90px;
    padding-bottom:40px;
  }

  .hero h1{
    font-size:clamp(48px,9vw,76px);
  }

  .hero p{
    max-width:72%;
  }

  .hero-actions{
    display:flex;
  }

  .hero-actions .btn{
    width:auto;
  }

  .page-hero{
    min-height:580px;
  }

  .page-hero h1{
    font-size:clamp(48px,9vw,74px);
  }

  .nav{
    justify-content:flex-start !important;
    overflow-y:auto;
  }

  .nav a{
    font-size:clamp(34px,7vw,58px);
  }
}

/* Ultra-wide safety */
@media (min-width:1800px){
  .container{
    width:min(1560px,calc(100% - 140px));
  }

  .hero-content{
    width:min(1450px,calc(100% - 14vw));
  }
}

/* Accessibility / zoom robustness */
@media (prefers-reduced-motion:reduce){
  .media-track,
  .reveal,
  .project-media img,
  .project-arrow,
  .next-project .next-arrow{
    animation:none!important;
    transition:none!important;
  }
}

@supports not (overflow:clip){
  section{
    overflow-x:hidden;
  }
}


/* =========================================================
   MOBILE COMPACT EXPERIENCE
   Sezioni proporzionate per smartphone, non fullscreen
========================================================= */

@media (max-width:760px){

  /* Header compatto */
  .site-header{
    height:58px;
    padding-inline:14px;
  }

  .site-header.scrolled{
    height:56px;
  }

  .brand-mark{
    width:34px;
    height:34px;
    font-size:11px;
  }

  .brand-name{
    font-size:10px;
  }

  .menu-btn{
    width:40px;
    height:40px;
  }

  /* Menu mobile: pannello compatto, non fullscreen.
     Il pannello da solo copre solo la parte alta dello schermo: senza
     uno sfondo dietro, il resto della pagina (hero, pulsanti) restava
     visibile e persino cliccabile attorno e sotto al pannello. Il
     ::before su body fa da tendina scura a schermo intero, dietro al
     pannello ma sopra tutto il resto, e si può anche toccare per
     chiudere il menu.
     Niente backdrop-filter qui: sfocare l'intero schermo mentre parte
     l'animazione è pesante per molti telefoni e il tocco sul menu
     resta "congelato" per una frazione di secondo finché la GPU non
     finisce di comporre lo sfocato — un semplice scurimento costa
     molto meno e il tocco risponde subito. */
  body.mobile-menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1150;
    background:rgba(10,10,10,.6);
    opacity:0;
    animation:navBackdropIn .2s ease forwards;
  }

  @keyframes navBackdropIn{ to{ opacity:1; } }

  .nav{
    inset:58px 10px auto 10px !important;
    width:auto !important;
    height:auto !important;
    max-height:calc(100svh - 72px);
    padding:16px !important;
    border-radius:18px;
    background:rgba(225,6,0,.98) !important;
    box-shadow:0 18px 50px rgba(0,0,0,.24);
    justify-content:flex-start !important;
    gap:4px !important;
    transform:translateY(-14px) scale(.98);
    transform-origin:top right;
  }

  body.mobile-menu-open .nav{
    transform:translateY(0) scale(1);
  }

  .nav a{
    font-size:24px !important;
    line-height:1.1 !important;
    padding:11px 4px !important;
    border-bottom:1px solid rgba(255,255,255,.16);
  }

  .nav a:last-child{
    border-bottom:0;
  }

  body.mobile-menu-open .site-header{
    background:rgba(255,255,255,.96) !important;
    color:#111 !important;
    backdrop-filter:blur(16px) !important;
  }

  /* Homepage hero: compatta, non occupa tutto lo schermo */
  .hero{
    min-height:0 !important;
    height:auto !important;
    padding-top:58px;
    display:block;
    background:#111;
  }

  .hero-media{
    position:relative !important;
    inset:auto !important;
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;
  }

  .hero-media img{
    position:relative;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .hero::after{
    pointer-events:none;
    background:
      linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.08) 58%,transparent 100%);
  }

  .hero-content{
    position:relative;
    width:100%;
    padding:22px 15px 28px !important;
    margin:0;
    background:#111;
  }

  .hero h1{
    font-size:clamp(42px,12vw,58px);
    line-height:.92;
    letter-spacing:-.06em;
  }

  .hero h1 span:last-child{
    -webkit-text-stroke:1px rgba(255,255,255,.92);
  }

  .hero p{
    margin-top:15px;
    font-size:14px;
    line-height:1.55;
  }

  .hero-actions{
    margin-top:18px;
    display:flex;
    gap:8px;
  }

  .hero-actions .btn{
    width:auto;
    flex:1 1 0;
    min-height:46px;
    padding:0 12px;
    font-size:11px;
  }

  /* Sezioni più compatte */
  .intro,
  .work,
  .about,
  .services,
  .contact{
    padding-block:48px !important;
  }

  .project-info{
    padding-block:42px !important;
  }

  .gallery-section,
  .video-section{
    padding-block:48px !important;
  }

  .next-project{
    padding-block:44px !important;
  }

  .intro-grid{
    gap:16px;
  }

  .kicker{
    font-size:9px;
  }

  .big-copy{
    font-size:clamp(31px,8.8vw,42px);
    line-height:1.02;
  }

  .body-copy{
    margin-top:18px;
    font-size:14px;
    line-height:1.6;
  }

  .section-head{
    margin-bottom:20px;
  }

  .section-head h2{
    font-size:clamp(38px,10.5vw,50px);
    line-height:.95;
  }

  .section-head p{
    margin-top:12px;
    font-size:13px;
    line-height:1.55;
  }

  /* Filtri compatti */
  .filters{
    margin-bottom:18px;
    padding-bottom:4px;
  }

  .filter{
    min-height:36px;
    padding:0 13px;
    font-size:10px;
  }

  /* Portfolio cards: niente enormi verticali 4:5 */
  .projects{
    gap:12px;
  }

  .project,
  .project.wide{
    border-radius:12px;
  }

  .project-media,
  .project.wide .project-media{
    aspect-ratio:16 / 10 !important;
  }

  .project-bottom{
    padding:13px 14px 14px;
  }

  .project-tag{
    font-size:8px;
  }

  .project h3{
    font-size:17px;
    margin-top:4px;
  }

  .project-arrow{
    width:38px;
    height:38px;
    min-height:38px;
    flex-basis:38px;
  }

  /* About più compatto */
  .about-grid{
    gap:20px;
  }

  .about img{
    aspect-ratio:16 / 11 !important;
    object-position:center 30%;
  }

  .about h2{
    font-size:clamp(36px,9.8vw,46px);
    margin-bottom:16px;
  }

  .about p{
    font-size:14px;
    line-height:1.6;
  }

  .stats{
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px;
    margin-top:22px;
    padding-top:16px;
  }

  .stats > div:last-child{
    grid-column:auto !important;
  }

  .stats strong{
    font-size:22px;
  }

  .stats span{
    font-size:9px;
  }

  /* Services: righe snelle */
  .service-row{
    grid-template-columns:28px 1fr 24px;
    gap:8px;
    padding:16px 0;
  }

  .service-row h3{
    font-size:19px;
  }

  .service-row p{
    grid-column:2 / 4;
    font-size:12px;
    line-height:1.45;
  }

  /* Contatti: CTA compatta */
  .contact h2{
    font-size:clamp(42px,12vw,58px);
    line-height:.9;
  }

  .contact p{
    margin-top:16px;
    font-size:13px;
    line-height:1.55;
  }

  .contact-actions{
    margin-top:20px;
  }

  .contact-actions .btn{
    min-height:46px;
    font-size:11px;
  }

  /* Project page cover: compatta ma ancora sovrapposta all'immagine */
  .page-hero{
    min-height:clamp(380px,60svh,560px) !important;
    height:auto;
    display:flex;
    align-items:flex-end;
    padding-top:58px;
    background:#111;
  }

  .page-hero > img{
    position:absolute !important;
    inset:0 !important;
    width:100%;
    height:100% !important;
    aspect-ratio:auto;
    object-fit:cover;
  }

  .page-hero::after{
    display:block;
    z-index:1;
    background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.08) 72%);
  }

  .page-hero-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:18px 15px 24px !important;
    background:transparent;
  }

  .page-hero h1{
    font-size:clamp(40px,11vw,54px);
    line-height:.94;
  }

  .page-hero .project-category{
    margin-bottom:8px;
    font-size:8px;
  }

  /* Project intro */
  .project-info-grid{
    gap:22px;
  }

  .project-intro{
    font-size:clamp(27px,7.5vw,36px);
    line-height:1.08;
  }

  .project-facts{
    grid-template-columns:1fr 1fr !important;
    gap:14px 12px;
  }

  .fact{
    padding-top:9px;
  }

  .fact small{
    font-size:8px;
  }

  .fact strong{
    font-size:12px;
  }

  /* Gallery naturale e compatta */
  .gallery-title{
    font-size:clamp(34px,9.4vw,44px);
    margin-bottom:18px;
  }

  .gallery-grid{
    gap:10px;
  }

  .gallery-item{
    border-radius:10px;
  }

  .project-page .gallery-item img,
  .project-page .gallery-item:nth-child(even) img{
    aspect-ratio:auto !important;
    height:auto;
    object-fit:contain;
  }

  /* Video */
  .video-head{
    margin-bottom:18px;
  }

  .video-head h2{
    font-size:clamp(36px,10vw,48px);
  }

  .video-head p{
    font-size:12px;
    line-height:1.5;
  }

  .video-frame{
    border-radius:10px;
  }

  .video-note{
    margin-top:10px;
    font-size:9px;
  }

  /* Next project: piccolo banner */
  .next-project .next-label{
    margin-bottom:8px;
  }

  .next-project h2{
    font-size:clamp(34px,9.4vw,46px);
  }

  .next-project .next-arrow{
    font-size:26px;
  }

  /* Footer */
  footer{
    padding:20px 15px max(20px,env(safe-area-inset-bottom));
    gap:8px;
    font-size:9px;
  }

  /* Lightbox sempre ottimizzato */
  .lightbox{
    padding:62px 10px 16px;
  }

  .lightbox img{
    width:auto;
    max-width:100%;
    max-height:calc(100svh - 84px);
  }
}

/* iPhone piccoli / 320-390px */
@media (max-width:390px){
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-actions .btn{
    width:100%;
  }

  .stats{
    grid-template-columns:1fr 1fr !important;
  }

  .stats > div:last-child{
    grid-column:1 / -1 !important;
  }

  .project-facts{
    grid-template-columns:1fr !important;
  }
}

/* Smartphone landscape: sezioni ancora più compatte */
@media (max-height:520px) and (orientation:landscape) and (max-width:900px){
  .hero{
    min-height:0 !important;
    height:auto !important;
  }

  .page-hero{
    min-height:360px !important;
    height:auto;
  }

  .hero-media{
    aspect-ratio:16 / 7;
  }

  .hero-content{
    padding-block:16px 22px !important;
  }

  .page-hero > img{aspect-ratio:auto}

  .intro,
  .work,
  .about,
  .services,
  .contact,
  .project-info,
  .gallery-section,
  .video-section{
    padding-block:34px !important;
  }
}
/* =========================================================
   CERTIFICATIONS
========================================================= */
.certifications{
  padding:88px 0;
  background:#fff;
}
.certifications .section-head{margin-bottom:30px}
.cert-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.cert-card{
  min-width:0;
  min-height:350px;
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--paper);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.cert-card:hover{
  transform:translateY(-3px);
  border-color:rgba(225,6,0,.3);
  box-shadow:0 14px 40px rgba(0,0,0,.06);
}
.cert-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.cert-index{color:var(--red)}
.cert-year{color:var(--muted)}
.cert-icon{
  width:46px;
  height:46px;
  margin:26px 0 22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-family:Manrope,sans-serif;
  font-size:17px;
  font-weight:800;
}
.cert-body{flex:1}
.cert-issuer{
  margin-bottom:7px;
  color:var(--red);
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cert-card h3{
  margin-bottom:11px;
  font-family:Manrope,sans-serif;
  font-size:22px;
  line-height:1.06;
  letter-spacing:-.04em;
}
.cert-description{
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.cert-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding-top:13px;
  border-top:1px solid var(--line);
  font-size:10px;
  font-weight:800;
}
.cert-link:hover{color:var(--red)}
.cert-link span{font-size:17px}

@media (min-width:761px) and (max-width:1050px){
  .certifications{padding:70px 0}
  .cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cert-card:last-child{grid-column:1/-1}
}

@media (max-width:760px){
  .certifications{padding:48px 0!important}
  .certifications .section-head{margin-bottom:18px}
  .cert-grid{grid-template-columns:1fr;gap:10px}
  .cert-card{min-height:0;padding:15px;border-radius:12px}
  .cert-icon{width:38px;height:38px;margin:14px 0 13px;font-size:14px}
  .cert-card h3{margin-bottom:7px;font-size:19px}
  .cert-description{font-size:11px;line-height:1.45}
  .cert-link{margin-top:14px;padding-top:10px}
}
/* =========================================================
   LOGO — senza sfondo, colore adattivo (header + firma in footer)
   Il marchio nell'header non ha più il cerchio rosso dietro: è il
   segno nudo, su sfondo trasparente. assets/js/main.js sceglie quale
   variante mostrare leggendo il colore del testo dell'header (già
   bianco o scuro a seconda che si sia sopra la hero o su sfondo
   chiaro/scrollato):
   images/gpj-mark.png (bianco, "neg") quando l'header è chiaro-su-scuro,
   images/gpj-mark-red.png (rosso, "pos") quando l'header è scuro-su-chiaro.
========================================================= */

.brand-mark{
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  box-shadow: 0 0 0 0 rgba(225,6,0,0);
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark{
  transform: scale(1.07) rotate(-4deg);
  box-shadow: 0 6px 18px rgba(225,6,0,.35);
}
.brand:focus-visible{ outline: 3px solid var(--red); outline-offset: 6px; border-radius: 999px; }

footer strong{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
footer strong::before{
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: url("../../images/gpj-mark-red.png") center / contain no-repeat;
}

@media (max-width:760px){
  footer strong::before{ width:20px; height:20px; flex-basis:20px; }
}

/* =========================================================
   FILIGRANA — marchio in basso a destra sulle foto principali
   Aggiunta via JS (assets/js/main.js) su .hero, .page-hero e ogni
   .gallery-item: uno stile solo, per tutte le pagine.
========================================================= */
.site-watermark{
  position:absolute;
  right:14px;
  bottom:14px;
  width:30px;
  height:30px;
  background-image:url("../../images/gpj-mark.png");
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  opacity:.55;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
  pointer-events:none;
  z-index:1;
}
.hero .site-watermark,
.page-hero .site-watermark{
  z-index:1;
  /* In basso a sinistra invece che a destra: a destra ci sta ora il
     pulsante WhatsApp fisso, sempre sopra a tutto, e si sovrapporrebbe
     alla filigrana proprio nelle sezioni più grandi (hero). */
  right:auto;
  left:14px;
}
@media (max-width:760px){
  .site-watermark{ width:22px; height:22px; right:10px; bottom:10px; }
  .hero .site-watermark,
  .page-hero .site-watermark{ right:auto; left:10px; }
}

/* Pulsante WhatsApp fisso: sempre visibile, in basso a destra,
   sopra header e contenuto ma sotto menu mobile e lightbox
   (che sono a schermo intero, quindi lo coprono comunque). */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:950;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.wa-float:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 10px 26px rgba(0,0,0,.32), 0 3px 8px rgba(0,0,0,.2); }
.wa-float svg{ width:29px; height:29px; display:block; }
.wa-float-label{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%);
  background:#0f0f0f;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  padding:8px 14px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  pointer-events:none;
}
.wa-float:hover .wa-float-label{ opacity:1; visibility:visible; }
@media (max-width:760px){
  .wa-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .wa-float svg{ width:27px; height:27px; }
  .wa-float-label{ display:none; }
}
/* Sui form di contatto/recensioni teniamo il pulsante un po' più in alto
   per non sovrapporsi al pulsante di invio in fondo, su schermi piccoli. */
@media (max-width:480px){
  .wa-float{ bottom:14px; right:14px; width:50px; height:50px; }
  .wa-float svg{ width:25px; height:25px; }
}

/* Barra di avanzamento lettura: sopra a tutto (anche al menu mobile
   aperto, così la posizione nella pagina resta visibile), riempita
   con uno scaleX animato via JS. transform-origin a sinistra perché
   la barra deve "crescere" da lì, non dal centro. */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:0 50%;
  z-index:1210;
  pointer-events:none;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .scroll-progress{ transition:none; }
}

/* Freccia "scorri" animata, in fondo alla hero: invita a scendere
   appena si arriva sulla pagina, sparisce da sola al primo scroll. */
.scroll-hint{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:3;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.15);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:1;
  transition:opacity .35s ease, visibility .35s ease, border-color .2s ease, background .2s ease;
  animation:scrollHintBounce 2.2s ease-in-out infinite;
}
.scroll-hint:hover{ border-color:#fff; background:rgba(0,0,0,.3); }
.scroll-hint svg{ width:18px; height:18px; }
.scroll-hint.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes scrollHintBounce{
  0%, 100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(7px); }
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint{ animation:none; }
}
@media (max-width:760px){
  /* Sotto i 760px la hero non è più a schermo intero (vedi la
     sezione "MOBILE COMPACT EXPERIENCE" più sotto): il contenuto
     successivo è già vicino/intravisto, quindi l'invito a scorrere
     è superfluo — e si sovrapporrebbe ai pulsanti sotto al titolo. */
  .scroll-hint{ display:none; }
}

/* =========================================================
   DESIGN REFINEMENT — PASSAGGIO DA ART DIRECTOR
   Non sostituisce le regole sopra: le rifinisce. Obiettivo:
   far sembrare tutto un unico sistema coerente e mettere la
   fotografia — non la UI — sempre al centro dell'attenzione.
========================================================= */

:root{
  --ease: cubic-bezier(.16,.84,.24,1);
  --shadow-sm: 0 2px 10px rgba(16,16,16,.05);
  --shadow-md: 0 16px 40px rgba(16,16,16,.08);
  --shadow-red: 0 14px 34px rgba(225,6,0,.28);
  --ink-soft: #2a2a2a;
}

/* --- Base: leggibilità e finitura --- */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body{ letter-spacing: -.005em; }

::selection{ background: var(--red); color: #fff; }

/* Scrollbar sottile e coerente col brand (dove supportata) */
html{ scrollbar-width: thin; scrollbar-color: var(--red) transparent; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(225,6,0,.35);
  border-radius: 999px;
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{ background: var(--red); }

/* Numeri (statistiche, anni, voti) allineati e più eleganti */
.stats strong,
.fact strong,
.next-project h2,
.cert-year{
  font-variant-numeric: tabular-nums;
}

/* --- Header: più morbido quando compare --- */
.site-header{
  transition: height .35s var(--ease), background-color .35s var(--ease),
              color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled{
  box-shadow: 0 1px 0 rgba(16,16,16,.06), 0 18px 40px -20px rgba(16,16,16,.18);
}

/* --- Bottoni: sollevamento con bagliore del rosso, non un semplice invert --- */
.btn{
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
}
.btn-red:hover{
  background: var(--red2);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-red);
}
.btn-outline:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255,255,255,.12);
}
.btn-white:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
}
.btn:active{ transform: translateY(-1px) scale(.98); }

/* --- Le foto sono la firma del sito: piccola "rivelazione" al passaggio
   del mouse, sempre a colori pieni, mai nascoste sotto un filtro pesante --- */
.project-media img,
.gallery-item img,
.about img,
.cert-card .cert-icon,
.page-hero img{
  filter: saturate(.96) contrast(1.01);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.project:hover .project-media img,
.gallery-item:hover img,
.about:hover img{
  filter: saturate(1.12) contrast(1.03);
}

/* --- Card: un solo linguaggio di elevazione per tutto il sito --- */
.project,
.cert-card,
.review-card,
.gpj-card{
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.project:hover,
.cert-card:hover,
.review-card:hover{
  box-shadow: var(--shadow-md);
}
.gpj-card:hover{
  transform: translateY(-3px);
  border-color: rgba(225,6,0,.28);
  box-shadow: var(--shadow-sm);
}

/* Angolo/freccia dei progetti: transizione più fluida */
.project-arrow{
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .4s var(--ease);
}

/* --- Hero: leggera vignettatura cinematografica, coerente su tutte le pagine --- */
.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(130% 130% at 50% 45%, transparent 58%, rgba(0,0,0,.32) 100%);
}
.hero-content,
.page-hero-content{ position:relative; z-index:2; }

/* --- Filtri: stato attivo con leggero sollevamento, coerente coi bottoni --- */
.filter{
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.filter.active,
.filter:hover{ transform: translateY(-1px); }

/* --- Lightbox: apertura più morbida, con leggero blur dello sfondo --- */
.lightbox{
  transition: opacity .35s var(--ease), visibility .35s var(--ease), backdrop-filter .35s var(--ease);
  backdrop-filter: blur(0px);
}
.lightbox.active,
.lightbox.is-open,
.lightbox.open,
.lightbox[aria-hidden="false"]{
  backdrop-filter: blur(6px);
}
.lightbox img{
  transition: transform .35s var(--ease);
  transform: scale(.98);
}
.lightbox.active img,
.lightbox.is-open img,
.lightbox.open img,
.lightbox[aria-hidden="false"] img{ transform: scale(1); }
.lightbox-close{
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox-close:hover{
  background: var(--red);
  border-color: var(--red);
  transform: rotate(90deg);
}

/* --- Form: focus più chiaro e coerente col brand, senza perdere leggibilità --- */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}
.reviews-page .contact-form select:focus{
  outline:none;
  border-color:#fff;
  background:rgba(255,255,255,.18);
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}
.contact-form button[type="submit"]{
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}

/* --- Recensioni: la stella attiva pesa di più, il voto si legge a colpo d'occhio --- */
.review-rating{ font-weight: 700; }
.review-avatar-lettera{
  box-shadow: 0 6px 16px rgba(225,6,0,.35);
}

/* --- Coreografia d'ingresso: le griglie compaiono in sequenza, non tutte insieme --- */
.projects .project.reveal:nth-child(1){ transition-delay: .04s; }
.projects .project.reveal:nth-child(2){ transition-delay: .1s; }
.projects .project.reveal:nth-child(3){ transition-delay: .16s; }
.projects .project.reveal:nth-child(4){ transition-delay: .22s; }
.projects .project.reveal:nth-child(5){ transition-delay: .28s; }
.projects .project.reveal:nth-child(6){ transition-delay: .34s; }
.reviews-grid .review-card.reveal:nth-child(1){ transition-delay: .04s; }
.reviews-grid .review-card.reveal:nth-child(2){ transition-delay: .1s; }
.reviews-grid .review-card.reveal:nth-child(3){ transition-delay: .16s; }
.reviews-grid .review-card.reveal:nth-child(4){ transition-delay: .22s; }
.cert-grid .cert-card.reveal:nth-child(1){ transition-delay: .04s; }
.cert-grid .cert-card.reveal:nth-child(2){ transition-delay: .1s; }
.cert-grid .cert-card.reveal:nth-child(3){ transition-delay: .16s; }

@media (prefers-reduced-motion: reduce){
  .project-media img,
  .gallery-item img,
  .about img,
  .lightbox img,
  .lightbox-close,
  .btn,
  .filter,
  .project,
  .cert-card,
  .review-card,
  .gpj-card{
    transition: none !important;
  }
  .projects .project.reveal,
  .reviews-grid .review-card.reveal,
  .cert-grid .cert-card.reveal{ transition-delay: 0s !important; }
}

/* --- Paragrafi introduttivi lunghi (recensioni, numeri): leggibili come
   testo, non urlati come un titolo. Le pagine progetto continuano a usare
   .project-intro per la loro riga d'apertura, che resta volutamente grande. --- */
.reviews-page .project-intro,
.numbers-page .project-intro,
.extra-page .project-intro{
  font-family: Inter, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(17px,1.6vw,20px);
  line-height: 1.8;
  letter-spacing: normal;
  color: var(--muted);
}

/* Su schermi molto piccoli evitiamo l'ombra pesante: resta tutto leggero */
@media (max-width:760px){
  .shadow-md,
  .project:hover,
  .cert-card:hover,
  .review-card:hover{ box-shadow: var(--shadow-sm); }
}

/* =========================================================
   EXTRA — hub "chicche e curiosità" + pagine collegate
   Riusa i token esistenti (--red, --paper, --muted, --radius),
   non introduce una nuova palette.
========================================================= */

/* --- Hub: griglia di card che portano alle 3 pagine extra.
   Stesso linguaggio visivo di .cert-card, con classi proprie
   per restare semanticamente separata dalle certificazioni. --- */
.hub-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:40px;
}
.hub-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  transition:transform .35s var(--ease,ease), border-color .35s var(--ease,ease), box-shadow .35s var(--ease,ease);
}
.hub-card:hover{
  transform:translateY(-3px);
  border-color:rgba(225,6,0,.28);
  box-shadow:var(--shadow-md, 0 16px 40px rgba(16,16,16,.08));
}
.hub-card .hub-icon{
  width:48px;height:48px;margin-bottom:24px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--red);color:#fff;
  font-family:Manrope,sans-serif;font-size:18px;font-weight:800;
}
.hub-card h3{
  font-family:Manrope,sans-serif;font-size:23px;letter-spacing:-.04em;
  line-height:1.08;margin-bottom:12px;
}
.hub-card p{ color:var(--muted); font-size:14px; line-height:1.65; flex:1; }
.hub-card .hub-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.hub-card:hover .hub-link{ color:var(--red); }
.hub-card .hub-link span{ font-size:17px; }

@media (max-width:900px){
  .hub-grid{ grid-template-columns:1fr; gap:12px; }
}

/* --- Timeline: per "il mio percorso". Una linea verticale con
   tappe, capitoli anzichè date esatte (i progetti non hanno
   tutti una data pubblica precisa, ma un ordine sì). --- */
.timeline{
  position:relative;
  max-width:820px;
  margin-top:10px;
  padding-left:2px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:11px; top:6px; bottom:6px;
  width:2px;
  background:var(--line);
}
.timeline-item{
  position:relative;
  padding:0 0 52px 46px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:"";
  position:absolute;
  left:0; top:2px;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 5px var(--paper);
}
.timeline-chapter{
  font-family:Manrope,sans-serif;font-weight:800;color:var(--red);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:8px;
}
.timeline-item h3{
  font-family:Manrope,sans-serif;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.035em;margin-bottom:10px;line-height:1.1;
}
.timeline-item p{
  color:var(--muted);font-size:15px;line-height:1.75;max-width:62ch;
}
.timeline-item .timeline-tags{
  margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;
}
.timeline-item .timeline-tags a{
  font-size:11px;font-weight:800;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  transition:.25s;
}
.timeline-item .timeline-tags a:hover{
  background:var(--red);border-color:var(--red);color:#fff;
}

@media (max-width:760px){
  .timeline-item{ padding:0 0 40px 36px; }
  .timeline-item::before{ width:20px; height:20px; }
  .timeline-item h3{ font-size:clamp(20px,7vw,26px); }
}