@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
:root{--s:clamp(8px,1.2vw,22px);--bg:#fff;--fg:#0a0a0a;--muted:#666;--speed:260ms;--ease:cubic-bezier(0.22,1,0.36,1)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:clamp(15px,.95vw,17px)/1.6 Roboto,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
h1{font-size:clamp(24px,3.2vw,42px);font-weight:500;line-height:1.18;margin:0 0 calc(var(--s)*2)}
h2{font-size:clamp(18px,2.2vw,28px);font-weight:500;line-height:1.22;margin:0 0 calc(var(--s)*1.5)}
p{margin:.7rem 0}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.container{max-width:min(1160px,92vw);margin:0 auto;padding:calc(var(--s)*3) calc(var(--s)*2)}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(160%) blur(6px);backdrop-filter:saturate(160%) blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--s)*2);padding:calc(var(--s)*2) 2px}
.brand{display:flex;align-items:center;gap:calc(var(--s)*1.5)}
.brand img{width:clamp(36px,3.4vw,48px);height:clamp(36px,3.4vw,48px);object-fit:contain;border-radius:10px;background:#fff}
.brand .title{font-weight:500;letter-spacing:.2px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:.5rem .9rem;background:#fff;border-radius:999px;transition:transform var(--speed) var(--ease),opacity var(--speed) var(--ease)}
.btn:hover{transform:translateY(-1px)}.btn.muted{color:#111;opacity:.8}
.burger{position:relative;width:clamp(30px,3.2vw,36px);height:28px;cursor:pointer;background:transparent;border:0;padding:0}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:2px;background:#0a0a0a;transition:transform var(--speed) var(--ease),opacity var(--speed) var(--ease)}
.burger span{top:13px}.burger::before{top:5px}.burger::after{bottom:5px}.burger.open span{opacity:0}
.burger.open::before{transform:translateY(8px) rotate(45deg)}.burger.open::after{transform:translateY(-8px) rotate(-45deg)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.06);opacity:0;visibility:hidden;transition:opacity var(--speed) var(--ease),visibility var(--speed) var(--ease);z-index:49}
.backdrop.open{opacity:1;visibility:visible}
.panel{height:auto; transition: transform var(--speed) var(--ease), height var(--speed) var(--ease); position:fixed;right:calc(var(--s)*2);width:min(520px,88vw);background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.14);transform:translateX(120%);transition:transform var(--speed) var(--ease);z-index:50;display:flex;align-items:center;justify-content:center;padding:calc(var(--s)*2)}
.panel.open{transform:translateX(0)}.panel nav a{display:block;font-size:clamp(20px,2.6vw,34px);font-weight:400;text-align:center;margin:.45rem 0}
.panel nav a:hover{opacity:.8}.panel small{display:block;color:#7a7a7a;font-size:.8rem;margin-top:.1rem}
.fade-enter{opacity:0;transform:translateY(6px)}.fade-enter-active{opacity:1;transform:none;transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease)}
.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity var(--speed) var(--ease)}
.landing{min-height:100svh;background:url('../assets/landing_bg.jpg') center/cover no-repeat;position:relative}
.center-wrap{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.logo-stack{display:flex;flex-direction:column;align-items:center;gap:calc(var(--s)*2)}
.logo-stack img{width:min(40vw,40svh);max-width:460px;height:auto;object-fit:contain;background:#fff;border-radius:12px}
.logo-stack .name{font-size:clamp(24px,4.4vw,52px);font-weight:500;letter-spacing:.04em;padding:.2rem .6rem;background:rgba(255,255,255,.9);border-radius:10px}
.main{padding:calc(var(--s)*3) 2px}.page{max-width:min(980px,92vw);margin:0 auto}
.two-col{display:grid;gap:calc(var(--s)*3);grid-template-columns:1fr}@media(min-width:980px){.two-col{grid-template-columns:1fr 1fr}}
.footer{margin-top:calc(var(--s)*4);padding:calc(var(--s)*2) 2px;display:flex;gap:12px;align-items:center;justify-content:space-between;color:#333;font-size:.95rem}
.footer .links a{margin-left:14px;text-decoration:underline;text-underline-offset:3px}.footer .links a:hover{opacity:.75}
.accordion{}.ac-item{}.ac-btn{width:100%;text-align:left;padding:1rem 0;background:transparent;border:0;font:inherit;cursor:pointer;display:inline;font-weight:500}
.ac-title{display:inline}.ac-panel{overflow:hidden;height:0;--indent:0px}
.ac-content{opacity:0;transform:translateY(6px);transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease)}
.ac-text{padding-left:calc(var(--indent) + 12px);text-align:justify}
.ac-item.open .ac-content{opacity:1;transform:none}
.grid{display:grid;gap:calc(var(--s)*2);grid-template-columns:1fr}@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}@media(min-width:1060px){.grid{grid-template-columns:1fr 1fr 1fr}}
.tile{border-radius:16px;overflow:hidden;background:#fff;transition:transform var(--speed) var(--ease)}.tile:hover{transform:translateY(-2px)}
.thumb{aspect-ratio:3/2;width:100%;object-fit:cover;display:block}.tile figcaption{padding:10px 4px;font-size:.95rem;color:#333}
.grid-contact{display:grid;gap:calc(var(--s)*3);grid-template-columns:1fr}@media(min-width:980px){.grid-contact{grid-template-columns:1fr 1fr}}
.map{aspect-ratio:1/1;width:100%;border:0;border-radius:16px}.primary{display:inline-flex;align-items:center;gap:8px;padding:.85rem 1.1rem;border-radius:999px;background:#000;color:#fff}.primary:hover{opacity:.9}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* --- PATCHES --- */

html, body { overflow-x: hidden; }
:root{ --footer-h: 64px; --head-h: 72px; }
.header{ position:sticky; top:0; }
.footer{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff;
  margin-top:0; /* override previous */
  border-top:none;
  z-index:40;
}
/* Reserve space for fixed footer */
body { padding-bottom: calc(var(--footer-h) + 2vh); }

/* Right-side sliding rectangle menu between header and footer */
.backdrop{ z-index:60; }
.panel{height:auto; transition: transform var(--speed) var(--ease), height var(--speed) var(--ease); 
  
  
  right: 1.2rem !important;
  display:flex; align-items:center; justify-content:center;
}

/* Prevent page scroll when menu open */
body.menu-open { overflow: hidden; }

/* Services accordion: ensure paragraphs don't get cut */
.ac-panel { height: 0; will-change: height; }
.ac-content { padding-bottom: .5rem; } /* a bit more padding to be safe */


/* --- FIXES v2 --- */
html, body { overflow-x:hidden; }
:root{ --footer-h: 64px; --head-h: 72px; }

.header{ position:sticky; top:0; z-index:70; }

.footer{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff;
  margin-top:0;
  z-index:40;
}

body { padding-bottom: calc(var(--footer-h) + 2vh); }

.backdrop{ z-index:60; pointer-events:none; }
.backdrop.open{ pointer-events:auto; }

.panel{height:auto; transition: transform var(--speed) var(--ease), height var(--speed) var(--ease); 
  
  
  right: 1.2rem !important;
  z-index:61;
  pointer-events:none;
}
.panel.open{ pointer-events:auto; }


/* === MENU STACK & PANEL DEFAULTS (v4) === */
html, body { overflow-x: hidden; }
:root{ --footer-h: 64px; --head-h: 72px; }

.header{ position:sticky; top:0; z-index: 80; }
.footer{ position:fixed; left:0; right:0; bottom:0; background:#fff; margin-top:0; z-index: 70; }
body { padding-bottom: calc(var(--footer-h) + 2vh); }

.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.06); opacity:0; visibility:hidden; transition:opacity var(--speed) var(--ease), visibility var(--speed) var(--ease); z-index: 79; pointer-events: none; }
.backdrop.open{ opacity:1; visibility:visible; pointer-events: auto; }

.panel{
  position:fixed; right: 1.2rem;
  width:min(520px, 88vw);
  background:#fff; border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.14);
  transform: translateX(120%);
  transition: transform var(--speed) var(--ease), height var(--speed) var(--ease), top var(--speed) var(--ease);
  z-index: 80;
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  /* top/height set by JS on open */
}
.panel.open{ transform: translateX(0); }

/* Lock background scroll when menu is open */
body.menu-open{ overflow: hidden; }

/* v5: square panel edges */
.panel{ border-radius:0 !important; }

/* --- PATCH v6 --- */

/* v6: panel content scroll + safe padding */
.panel{ display:flex; align-items:center; justify-content:center; }
.panel nav{
  max-height:100%;
  overflow:auto;
  padding:1rem 1rem 2.5rem; /* extra bottom padding so last link never touches edge */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
}
.panel nav a{ margin:.2rem 0; }


/* v6: Projects asymmetric layout (3 tiles) */
.projects-grid{
  display:grid;
  gap:calc(var(--s)*2);
  grid-template-columns:1fr;
}
/* Tablet */
@media(min-width:720px){
  .projects-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "a b"
      "a c";
  }
  .tile.a{ grid-area:a; }
  .tile.b{ grid-area:b; }
  .tile.c{ grid-area:c; }
}
/* Desktop */
@media(min-width:1060px){
  .projects-grid{
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "a b b"
      "a c c";
  }
}
/* Visual refinements */
.tile{ border-radius:16px; overflow:hidden; background:#fff; transition:transform var(--speed) var(--ease) }
.tile:hover{ transform:translateY(-2px) }
.thumb{ width:100%; height:100%; object-fit:cover; display:block }
.thumb.feature{ aspect-ratio:4/5; }   /* taller focal image */
.thumb.side{ aspect-ratio:3/2; }      /* classic ratio */
.tile figcaption{ padding:10px 6px; font-size:.95rem; color:#333 }

/* v7: landing white, no background */
.landing{ background:none !important; }


/* v7: About vertical centering and square image */
.vcenter {
  min-height: calc(100svh - var(--head-h) - var(--footer-h));
  display: grid;
  align-items: center;
}
.square-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  border-radius: 0; /* keep minimal */
}


/* v7: footer top rule slightly wider than text container */
.footer.container{ position:relative; }
.footer.container::before{
  content:"";
  position:absolute;
  left:-2px; right:-2px; top:0;
  height:1px;
  background:#e6e6e6;
}

/* v7: panel nav can fill panel height without clipping */
.panel nav{ max-height: 100%; }


/* v8: Project detail layout */
.meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}
.meta-item{}
.meta-label{font-weight:500; margin-bottom:.35rem}
.meta-sep{height:1px; background:#e9e9e9; margin:.15rem 0 .4rem}
.meta-value{color:#333}

.detail-two{
  display:grid; gap:24px; grid-template-columns:1fr;
  margin-bottom:22px;
}
@media(min-width:980px){ .detail-two{ grid-template-columns:1fr 1fr; } }
.detail-image{ aspect-ratio:1/1; width:100%; object-fit:cover; }
.detail-title{ margin:0 0 .6rem }
.detail-desc{ text-align:justify }

.gallery{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px 0 28px;
}
.thumb-mini{
  width:90px; height:90px; object-fit:cover; cursor:pointer; opacity:.9; transition:opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.thumb-mini:hover{ opacity:1; transform:translateY(-1px) }
.cta-center{ text-align:center; margin:18px 0 80px }
.cta-center .primary{ margin-top:8px }


/* v9: footer stability */
html{ scrollbar-gutter: stable both-edges; }
html, body{ min-height:100%; }
body{ min-height:100svh; }
.footer{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff;
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
}


/* v9: gallery aligned under left image column */
.gallery-left{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap:10px;
  justify-items:start;
}
.gallery-left .thumb-mini{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
}


/* v10: immovable footer + page stretch */
html{ height:100%; scrollbar-gutter: stable both-edges; }
body{ min-height:100svh; padding-bottom: var(--footer-h); } /* reserve exact footer height */
.footer{
  position:fixed; left:0; right:0; bottom:0; background:#fff; z-index:70;
}
/* Stretch the main page area to always fill the gap between header and footer */
.page-stretch{ min-height: calc(100svh - var(--head-h) - var(--footer-h)); display:grid; align-content:start; }


/* v11: Projects list images shorter so footer stays visible */
.thumb.feature{ aspect-ratio:16/9 !important; }
.thumb.side{ aspect-ratio:4/3 !important; }

/* v11: Detail page grey body text and elegant spacing */
.detail-body{ color:#555; margin: 16px 0 24px; text-align: justify; }
.detail-title{ color:#0a0a0a; font-weight:600; margin: 0 0 10px; }

/* Carousel */
.carousel{ position:relative; margin: 14px 0 12px; }
.carousel img{ max-height: 100%; max-width: 100%; width:auto; height:auto; object-fit: contain; display:block; }
.carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.9);
  display:grid; place-items:center; cursor:pointer; user-select:none;
  border:1px solid #ddd;
}
.carousel .nav:hover{ background:#fff; }
.carousel .prev{ left:10px; }
.carousel .next{ right:10px; }

/* Carosello — Variante A (contain, niente taglio) */
.carousel {
  position: relative;           /* mantiene i pulsanti posizionati correttamente */
}

.carousel-frame {
  /* altezza responsiva: limita all’altezza viewport o alla larghezza del container */
  height: min(70vh, calc(92vw * 0.66)); /* aumenta/diminuisci 0.66 per più/meno altezza */
  display: grid;
  place-items: center;
  overflow: hidden;             /* nasconde eventuali bordi/spazi vuoti interni */
}

.carousel-frame img {
  max-height: 100%;
  max-width: 100%;
  width: auto;                   /* mantiene proporzioni corrette */
  height: auto;
  object-fit: contain;           /* mostra tutta l’immagine (portrait & landscape) */
  image-rendering: auto;         /* resa morbida su alcuni browser */
}

/* Ritocchi per schermi piccoli: rende il frame un po' più alto */
@media (max-width: 640px) {
  .carousel-frame {
    height: min(75vh, calc(92vw * 0.9));
  }
}


/* CTA */
.detail-cta{ text-align:center; margin: 10px 0 64px; }
.detail-cta .primary{ margin-top:8px; }


/* v13: refined spacing & lighter grey on project detail pages */
.project-detail{ padding-top: calc(var(--s)*2); } /* tighter top spacing under header */
.project-detail .detail-title{ margin-top: 4px; margin-bottom: 8px; } /* headline just under header */
.project-detail .meta-grid{ row-gap: 18px; margin-top: 8px; margin-bottom: 36px; }
.project-detail .carousel{ margin: 16px 0 22px; }
.project-detail .detail-body{ color:#6e6e6e; line-height:1.7; margin: 18px 0 32px; }
.project-detail .detail-cta{ margin: 16px 0 84px; }


/* v14: spacing pass (project pages) */
.project-detail{ padding-top: calc(var(--s)*1.2) !important; } /* tighter under header */
.project-detail .detail-title{ margin-top: 2px !important; margin-bottom: 14px !important; } /* title closer to header */
.project-detail .meta-grid{ margin-top: 16px !important; margin-bottom: 44px !important; row-gap: 20px !important; } /* more space title→table and table→images */
.project-detail .carousel{ margin: 24px 0 30px !important; } /* more space table→images and images→text */
.project-detail .detail-body{ margin: 26px 0 40px !important; } /* more space images→text and text→CTA */
.project-detail .detail-cta{ margin: 24px 0 96px !important; } /* extra breathing before footer */


/* v15: grayscale Google Maps iframe */
.map{
  -webkit-filter: grayscale(100%) brightness(98%) contrast(105%);
  filter: grayscale(100%) brightness(98%) contrast(105%);
}


/* v16: Services discoverability */
.ac-hint{ color:#7a7a7a; margin-top:6px; margin-bottom:8px; font-size:.95rem }

.accordion{ margin-top:10px }
.ac-item + .ac-item{ border-top:1px solid rgba(0,0,0,.06) } /* ultra-light divider */
.ac-btn{
  width:100%; text-align:left; padding:14px 8px; background:transparent; border:0; font:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:12px;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.ac-btn:hover{ background:rgba(0,0,0,.03) }
.ac-btn:focus-visible{ outline:2px solid rgba(0,0,0,.18); outline-offset:2px }
.ac-label{ font-weight:500 }
.ac-item.open .ac-label{ font-weight:600 }

/* chevron icon using borders (no external assets) */
.chev{
  width:12px; height:12px; border-right:2px solid #111; border-bottom:2px solid #111;
  transform: rotate(-45deg); transition: transform var(--speed) var(--ease);
  margin-left:8px; flex:0 0 auto;
}
.ac-item.open .chev{ transform: rotate(135deg) } /* points up to indicate collapse */


/* v17: footer line closer to text */
.footer.container::before{ top: 6px !important; }


/* v18: tagline and social proof */
.tagline{
  margin-top: .35rem;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 400;
  letter-spacing: .02em;
  background: rgba(255,255,255,.9);
  border-radius: 8px;
  padding: .2rem .6rem;
}
.proof{
  color:#888; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; opacity:.9;
  margin-top: 18px;
}
.proof .dot{width:3px; height:3px; background:#cfcfcf; border-radius:50%}

/* v18: back link on project pages */
.back-link{
  display:inline-block; margin:6px 0 10px; color:#555; text-decoration:none;
}
.back-link:hover{ text-decoration:underline; }

/* v18: sticky mobile CTA (above fixed footer) */
.sticky-cta{
  position:fixed; left:16px; right:16px;
  bottom: calc(var(--footer-h) + 12px);
  z-index: 75;
  display:none;
  text-align:center;
}
.sticky-cta a{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .9rem 1.1rem; background:#000; color:#fff; border-radius:999px;
}
@media (max-width: 820px){
  .sticky-cta{ display:block; }
}

/* v18: minor tighten on landing stack spacing */
.logo-stack{ gap: calc(var(--s)*1.4) }


/* v19: landing tagline — all caps, grey, slightly lower */
.tagline{
  text-transform: uppercase;
  color: #888;
  margin-top: .9rem;
}


/* v20: proof list inside About text column */
.proof-about{
  font-size: 0.88rem;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 0;
}
/* Center only when layout is narrow (text column becomes full width) */
@media (max-width: 720px){
  .proof-about{ justify-content: center; text-align:center; }
}
/* Carosello: altezza comandata dalle landscape */
.carousel{
  --car-h: clamp(260px, 62vh, 720px); /* valore iniziale: poi lo aggiorna lo script */
  position: relative;
  overflow: hidden;
}

/* Immagine mostrata */
.carousel > img{
  display: block;
  max-width: 100%;
  height: auto;           /* default per le landscape */
  object-fit: contain;    /* non deformare */
  object-position: center;
}

/* Quando l'immagine è portrait, si adatta all'altezza definita dalle landscape */
.carousel > img.fit-height{
  height: var(--car-h);
  width: auto;
  max-width: 100%;
}

/* Frecce (se già le hai puoi ignorare) */
.carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:1px solid #ddd;
  background:#fff; display:grid; place-items:center; cursor:pointer; user-select:none;
}
.carousel .prev{ left:10px } .carousel .next{ right:10px }
/* Carosello: variabile di altezza governata dalle landscape */
.carousel{ --car-h: clamp(260px, 62vh, 720px); }

/* Portrait attiva questa classe via JS per “seguire” l’altezza fissata dalle landscape */
.carousel > img.fit-height{
  height: var(--car-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}/* Centra l'immagine dentro il box del carosello */
.carousel{
  position: relative;
  display: grid;           /* per usare justify-self */
  place-items: center;     /* sicurezza: centra anche verticalmente */
}

/* l'immagine di base occupa tutta la larghezza, resta invariata per le landscape */
.carousel > img{
  display: block;
}

/* per le portrait (classe messa dallo script): stessa altezza + centrata orizzontalmente */
.carousel > img.fit-height{
  height: var(--car-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  justify-self: center;    /* centro nel grid */
  margin: 0 auto;          /* fallback per browser vecchi */
}