:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#3b82f6;
  --brand-2:#22c55e;
  --accent:linear-gradient(90deg,#60a5fa,#22c55e);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --container:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;display:block;border-radius:12px}
a{color:var(--brand);text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;color:#fff}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:#cbd5e1}
.nav .btn-primary{color:#fff}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 10px;border-radius:10px}
/* Hero sized with safe viewport height (no shrink when browser bars show) */
.hero{
  /* height */
  min-height: calc(100svh - var(--header-h));       /* modern iOS/Chrome */
  /* fallback via JS var(--vh) defined below; harmless if unsupported */
  min-height: calc(var(--vh, 1vh) * 100 - var(--header-h));

  /* your original background */
  padding: 48px 0;
  padding-bottom: calc(48px + env(safe-area-inset-bottom)); /* iOS safe area */
  background:
    radial-gradient(1200px 600px at 90% -10%,rgba(59,130,246,.25),transparent 60%),
    radial-gradient(800px 400px at -10% 20%,rgba(34,197,94,.18),transparent 60%);
  position: relative;
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
h1{font-size:clamp(28px,4vw,48px);line-height:1.1;margin:0 0 12px}
h2{font-size:clamp(22px,3vw,32px);margin:32px 0 10px}
h3{margin:16px 0 8px}
.lead{color:var(--muted);max-width:70ch}
.accent{background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.actions{display:flex;gap:12px;margin:18px 0 8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.15);color:#cbd5e1;background:rgba(255,255,255,.03)}
.btn-primary{background:var(--brand);border-color:transparent}
.strip{background:var(--panel);margin:40px 0;padding:28px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card.project img{aspect-ratio:16/10;object-fit:cover}
.card-body{padding:10px 4px 0}
/* Make all project titles a different color */
.card-body h4 {
  color: #BCBCBC; /* Tailwind-style emerald green, or pick any hex */
}
.card-body:hover h4 {
  color: #22c55e; /* green on hover */
}
.features .card p{color:var(--muted)}
/* Stat cards */
.stats {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.stats div {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;

  /* allow proper shrinking on narrow devices */
  flex: 1 1 calc(33.333% - 12px);
  min-width: 0;

  /* keep content inside the rounded box */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stats strong {
  font-size: clamp(18px, 5.5vw, 22px);
  line-height: 1.05;
  white-space: nowrap;      /* keep numbers on a single line */
  display: block;
}
/* 2-up on small phones */
@media (max-width: 480px) {
  .stats div {
    flex-basis: calc(50% - 9px);
  }
}

/* 1-up on very narrow phones (e.g. 320px) */
@media (max-width: 360px) {
  .stats div {
    flex-basis: 100%;
  }
}
.cta .cta-inner{text-align:center}
.footer-grid{grid-template-columns:2fr 1fr 1fr}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.list-plain{list-style:none;margin:0;padding:0}
.brand-line{display:flex;align-items:center;gap:10px}
.form input,.form textarea{width:100%;margin-top:6px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0b1220;color:#e5e7eb;padding:10px 12px}
.form button{margin-top:12px}
.map iframe{border-radius:12px}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav{display:none;position:absolute;top:60px;right:16px;left:16px;flex-direction:column;background:var(--panel);padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
  .nav.open{display:flex}
  .nav-toggle{display:inline-block;font-size: 1.5rem;   /* bigger hamburger */
    padding: 12px;}
}
@media (max-width: 560px){
  .grid.three{grid-template-columns:1fr}
}


/* === Slider + Lightbox (add-on) === */
.carousel{position:relative;margin:16px 0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.carousel-viewport{overflow:hidden}
.carousel-track{display:flex;gap:0;list-style:none;margin:0;padding:0;transition:transform .45s ease}
.slide{min-width:100%;position:relative}
.slide picture,img{width:100%;height:auto;display:block}
.slide img{aspect-ratio:16/9;object-fit:cover}
.slide-caption{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:10px 12px;border-radius:12px;color:#fff;max-width:min(90%,720px)}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%); z-index: 5;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer}
.carousel-btn:hover{background:rgba(0,0,0,.6)}.carousel-btn.prev{left:10px}.carousel-btn.next{right:10px}
.carousel-dots{display:flex;gap:8px;justify-content:center;padding:12px}
.carousel-dots button{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:transparent;cursor:pointer}
.carousel-dots button.active{background:#fff}
/* Lightbox: hidden by default; only shown when aria-hidden="false" */
.lightbox{
  position:absolute;               /* you’re anchoring it near the clicked card */
  top:0; left:0; right:auto; bottom:auto;
  max-height:90vh;
  overflow:auto;
  z-index:150;
  background:transparent;
  display:none;                    /* <-- key: no box at all when closed */
  pointer-events:none;             /* no hit-testing when closed */
}

.lightbox[aria-hidden="false"]{
  display:block;                   /* visible only when “open” */
  pointer-events:auto;
}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.lightbox-dialog{position:relative;z-index:1; width: min(1200px, 96vw);           /* increase a bit vs. 1100px if you want wider */
  max-width: min(1200px, 96vw);;margin:4vh auto;background:rgba(15,23,42,.96);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:14px}
.lightbox-close{position:absolute;top:8px;right:8px;border:none;background:rgba(0,0,0,.45);color:#fff;border-radius:999px;width:48px;height:48px;font-size:24px;  /* increase the X symbol size */       z-index:99;cursor:pointer}
.lightbox-body .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.lightbox-body .meta{color:#94a3b8;font-size:14px}
.lightbox-body .actions{display:flex;gap:10px;align-items:center}
/* Filters (projects.html) */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.filter-btn{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.03);color:#cbd5e1;cursor:pointer}
.filter-btn.active{background:#3b82f6;border-color:transparent;color:#fff}


/* === Lightbox info panel layout === */
.lb-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr;align-items:start}
.lb-slider{min-width:0}
.lb-info{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lb-info-inner{padding:14px}
.lb-title{margin:0 0 6px 0}
.lb-rows{display:grid;gap:6px;margin:8px 0}
.lb-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.08);padding:4px 0}
.lb-row .k{color:#94a3b8;min-width:90px}
.lb-row .v{color:#e5e7eb;text-align:right}
.lb-bullets{list-style:none;margin:10px 0;padding:0}
.lb-bullets li{padding-left:18px;position:relative;margin:6px 0;color:#e5e7eb}
.lb-bullets li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:999px;background:#3b82f6}
.lb-meta-tail{display:flex;gap:12px;margin:8px 0 12px 0}
.lb-desc{color:#cbd5e1;margin:8px 0 14px 0}
.lightbox .actions .btn{width:100%}
.lightbox .lightbox-close{position:absolute;top:8px;right:8px;border:none;background:rgba(0,0,0,.45);color:#fff;border-radius:999px;width:36px;height:36px;cursor:pointer}
@media (max-width:960px){.lb-grid{grid-template-columns:1fr} .lightbox .actions .btn{width:auto}}

.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:center;justify-items:center;margin:16px 0}
.logo-row img{height:100%;max-width:200px;
  max-height:70px;  /* tweak */
  object-fit:contain; opacity:.95; filter:grayscale(10%);transition:opacity .2s ease; background-color: #fff;   /* white box behind transparent logos */
  border-radius: 8px;       /* optional, keep rounded corners */
  padding: 6px;             /* some breathing room */
  box-sizing: border-box;   /* padding doesn’t distort size */
  padding-bottom: 4px;}
.logo-row img:hover{opacity:1}
@media (max-width:900px){.logo-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.logo-row{grid-template-columns:repeat(2,1fr)}}

/* no-wrap brand */
.brand, .brand span, .brand strong { white-space: nowrap; }
/* Center footer content and make it single-column on desktop too */
.site-footer .container { text-align: center; }
.footer-grid { grid-template-columns: 1fr !important; justify-items: center; }
.footer-grid > div { max-width: 720px; }


#realiz a.btn, #realiz a.btn-primary{all:unset; display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; cursor:pointer}
#realiz a.btn-primary{background:#3b82f6; color:#fff; border:1px solid transparent}
#realiz a.btn-primary:hover{filter:brightness(1.05)}


.actions a.btn-primary{
  background: var(--brand) !important;
  border-color: transparent !important;
  color:#fff !important;
}

/* Footer flex layout */
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-left, .footer-right {
  flex: 1 1 45%;
}
.footer-right {
  text-align: right;
}
@media (max-width:768px){
  .footer-flex { flex-direction: column; text-align: center; }
  .footer-right { text-align: center; margin-top: 12px; }
}

/* Footer flex layout with social icons */
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-left, .footer-right {
  flex: 1 1 45%;
}
.footer-right {
  text-align: right;
}
.footer-left .social {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 8px 0 0 0;
  padding: 0;
}
.footer-left .social li a {
  color: #cbd5e1;
  font-size: 20px;
}
.footer-left .social li a:hover {
  color: var(--brand);
}
@media (max-width:768px){
  .footer-flex { flex-direction: column; text-align: center; }
  .footer-right { text-align: center; margin-top: 12px; }
  .footer-left .social { justify-content: center; }
}

.footer-logo {
  max-width: 160px;
  margin-bottom: 10px;
}

/* Support videos inside carousel slides */
.carousel-track video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display:block;
}

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

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

/* grid-two-hardening */
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid.two > div{min-width:0}
@media (max-width:900px){.grid.two{grid-template-columns:1fr}}

/* full-bleed breakout */
.full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}
.full-bleed{padding-left:32px;padding-right:32px}
@media (min-width:1400px){.full-bleed{padding-left:48px;padding-right:48px}}

/* hero-chi-siamo */
.hero-chi-siamo{margin-bottom:32px}
.hero-chi-siamo h1{margin:0 0 12px;font-size:2.5rem}
.hero-chi-siamo .lead{font-size:1.25rem;color:var(--text-muted,#ccc)}

/* AI teaser strip */
.ai-teaser {
  background: #0f1115;
  padding: 64px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ai-teaser h2 {
  margin: 0 0 12px;
  font-size: 2rem;
}
.ai-teaser p {
  margin: 0 0 20px;
  font-size: 1.1rem;
  color: var(--text-muted,#ccc);
}
.ai-teaser .btn {
  padding: 12px 28px;
  font-size: 1rem;
}

/* Logo size fix */
.brand img {
  height: 128px !important;
  width: auto;
}

/* Force navbar logo size */
header .brand img {
  height: 128px !important;
  max-height: 128px !important;
  width: auto !important;
}

/* --- Force navbar logo to 128px everywhere --- */
:root { --nav-logo-h: 128px; }

header .brand img,
a.brand > img,
.nav > .brand img,
.site-header .container img[src*="logo"],
header img[src*="logo"],
img[src*="logo"] {
  height: var(--nav-logo-h) !important;
  max-height: var(--nav-logo-h) !important;
  width: auto !important;
  display: block !important;
}

header .brand,
.site-header .brand,
header .container .brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  line-height: 1;
}

/* --- Compact header layout --- */
.site-header, header { padding-top: 6px; padding-bottom: 6px; }
.site-header .container, header .container {
  min-height: 60px;
  display: flex;
  align-items: center;
}
header .brand { display: flex; align-items: center; gap: 10px; }
header .brand img { height: 128px !important; max-height: 128px !important; width: auto !important; object-fit: contain; }

/* --- Responsive logo size: smaller on desktop, keep current on mobile --- */
:root{ --nav-logo-h: 128px; } /* default (mobile/tablet) */

header .brand img,
img[src*="logo"]{
  height: var(--nav-logo-h) !important;
  max-height: var(--nav-logo-h) !important;
  width: auto !important;
  object-fit: contain;
}

/* --- Navbar logo sizing (mobile 72px, desktop 72px) --- */
:root{ --nav-logo-h:72px; }
header .brand img,
img[src*="logo-new.png"]{
  height: var(--nav-logo-h) !important;
  max-height: var(--nav-logo-h) !important;
  width: auto !important;
  object-fit: contain;
  display: block !important;
}
@media (min-width:1024px){
  :root{ --nav-logo-h:72px; } /* tighter on desktop */
  .site-header .container, header .container { min-height: 56px; }
}
header .brand{ display:flex; align-items:center; gap:10px; line-height:1; }

/* === In-place HERO media slider (right column) === */
.hero .hero-media{ position:relative; overflow:hidden; border-radius:16px; }
.hero .hero-media .hslider{ position:relative; height:100%; min-height: 420px; }
@media (max-width: 1023.98px){
  .hero .hero-media .hslider{ min-height: 280px; margin-top: 16px; }
}
.hero .hero-media .hslide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.hero .hero-media .hslide img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes hfade { 0%, 8% {opacity:1;} 33%, 100% {opacity:0;} }
.hero .hero-media .s1{ animation: hfade 18s infinite; }
.hero .hero-media .s2{ animation: hfade 18s infinite 6s; }
.hero .hero-media .s3{ animation: hfade 18s infinite 12s; }


/* --- CC Electric: hide 'Apri scheda completa' link: visual-only --- */
.cc-hide-fullsheet-link,
a[data-scheda='true']{
  display:none !important;
}
/* Fallback: hide anchors that look like the "scheda completa" control */
a[href*="scheda-completa"], a[href*="scheda"], a[title*="scheda"]{
  display:none !important;
}

/* Keep expanded card from slipping under fixed header */
:root{ --header-h: 96px; }
html{ scroll-padding-top: var(--header-h); }
.project-card, .project-details, .project-item, [data-project-details]{
  scroll-margin-top: var(--header-h);
}
@media (max-width: 1024px){
  :root{ --header-h: 80px; }
}

html.modal-open, body.modal-open{}

/* Only AI page hero background overlay */
.ai-page .hero::after {
  content: "";
  position: absolute;
  inset: 0;                  /* cover the whole hero */
  background: rgba(0, 0, 0, 0.55); /* semi-transparent black shadow */
  pointer-events: none;       /* let clicks pass through */
  z-index: 1;
}

/* Make sure hero content stays above the overlay */
.ai-page .hero .container,
.ai-page .hero .hero-copy {
  position: relative;
  z-index: 2;
}

/* images are always transparent-only */
.logo img {
  width:100%;
  height:100%;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}