/* ============================================================
   GT Coperture — site.css  (v1)
   Foglio unico, senza framework. Prefisso: gt-
   Token misurati sul sito attuale (vedi 02-design-tokens.md).
   ============================================================ */

/* ---------- Font self-hostati ----------
   Generati il 2026-08-09 con _tools/localize_fonts.py --family "Poppins:300,400,500,600,700,800"
   e rinominati in /fonts/poppins-<peso>-<subset>.woff2 (12 file, ~100 KB in tutto).
   I due subset per peso restano separati: con unicode-range il browser scarica
   latin-ext solo se in pagina compare un carattere che lo richiede.             */
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/poppins-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/poppins-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Token ---------- */
:root {
  --gt-red: #D11D1E;
  --gt-red-dark: #A41718;
  --gt-red-light: #E12728;
  --gt-dark: #333333;
  --gt-darker: #212529;
  --gt-darkest: #111111;  /* solo il nome nelle card recensioni, misurato sull'originale */
  --gt-text: #777777;
  --gt-text-light: #AAAAAA;
  --gt-border: #E7E7E7;
  --gt-bg: #F4F4F4;
  --gt-white: #FFFFFF;
  --gt-yellow: #FFCD00;   /* categoria amianto (casi studio) */
  --gt-orange: #FF9A00;   /* categoria industriali */
  --gt-error: #C10000;
  --gt-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --gt-container: 1140px;
  --gt-container-xl: 1440px;
  --gt-angle: 5vw;        /* profondità del taglio diagonale */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--gt-font);
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
  color: var(--gt-text);
  background: var(--gt-white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; padding: 0; color: inherit; }
a { color: var(--gt-red); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gt-red-dark); }
:focus-visible { outline: 2px solid var(--gt-red); outline-offset: 2px; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5 { margin: 0 0 .5em; color: var(--gt-dark); font-weight: 700; }
h1 { font-size: 49px; line-height: 1.1; font-weight: 800; letter-spacing: -2.45px; }
h2 { font-size: 32px; line-height: 1.2; letter-spacing: -1.6px; }
h3 { font-size: 28px; line-height: 1.25; letter-spacing: -1.4px; }
h4 { font-size: 20.3px; line-height: 27px; letter-spacing: -1px; }

.gt-eyebrow {
  margin: 0 0 4px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--gt-text);
  letter-spacing: 0;
}
.gt-section-title { margin-bottom: 8px; text-transform: capitalize; }
.gt-section-title--none { text-transform: none; }

/* Stile "prosa" per contenuto nudo dal pannello redazionale */
.gt-prose h2 { margin: 1.4em 0 .6em; }
.gt-prose h3 { margin: 1.4em 0 .6em; }
.gt-prose p { margin: 0 0 1em; }
.gt-prose ul { margin: 0 0 1em 1.2em; list-style: disc; }
.gt-prose li { margin-bottom: .35em; }
.gt-prose img { margin: 1em 0; }
.gt-prose a { text-decoration: underline; }
/* ⚠️ Nell'informativa cookies quattro link hanno per testo l'URL scritto per esteso
   (support.google.com/chrome/bin/answer.py?hl=en&answer=…): e' una parola sola che
   non puo' andare a capo, e su telefono spingeva la pagina fuori schermo di 9px a
   375 e 64 a 320. Il testo arriva dall'informativa di flotta e non si tocca: si
   lascia spezzare qui. `anywhere` e non `break-word` perche' solo il primo entra
   nel calcolo del min-content, che e' cio' che serve dentro griglie e flex. */
.gt-prose { overflow-wrap: break-word; }
.gt-prose a { overflow-wrap: anywhere; }
.gt-prose strong { color: var(--gt-dark); }
/* Paragrafo di apertura, un gradino sopra il corpo (era .text-4 in Porto) */
.gt-lead { font-size: 16.8px; }

/* Titoli SENZA classe dentro il contenuto redazionale.
   Chi scrive nel pannello produce <h2>/<h3>/<h4> nudi: questi valori replicano
   esattamente come Porto li rendeva (body 14px), altrimenti i titoli di 26 pagine
   cambiano aspetto. I titoli CON una classe restano quelli disegnati nel kit. */
.gt-prose h1:not([class]) { font-size: 36.4px; font-weight: 200; line-height: 44px; letter-spacing: -1.82px; color: var(--gt-darker); margin: 0 0 32px; text-transform: none; }
.gt-prose h2:not([class]) { font-size: 30.8px; font-weight: 300; line-height: 42px; letter-spacing: -1.54px; color: var(--gt-darker); margin: 0 0 32px; text-transform: none; }
/* h3: interlinea 30px e non 24 come Porto. Porto dichiarava davvero
   `h3 { font-size: 1.8em; line-height: 24px }`, cioe' interlinea PIU' PICCOLA del
   carattere: finche' il titolo sta su una riga non si vede, ma appena va a capo -
   e sul telefono va a capo spesso - le righe si sovrappongono. Difetto suo,
   replicato qui in buona fede. 30px = stesso rapporto dell'h1 (1,19), e il
   testo e' tutto maiuscolo, quindi senza discendenti resta compatto com'era. */
.gt-prose h3:not([class]) { font-size: 25.2px; font-weight: 400; line-height: 30px; letter-spacing: -1.26px; color: var(--gt-darker); margin: 0 0 33px; text-transform: uppercase; }
.gt-prose h4:not([class]) { font-size: 19.6px; font-weight: 600; line-height: 27px; letter-spacing: -0.98px; color: var(--gt-darker); margin: 0 0 14px; text-transform: none; }
.gt-prose h5:not([class]) { font-size: 14px;   font-weight: 600; line-height: 18px; letter-spacing: -0.7px;  color: var(--gt-darker); margin: 0 0 14px; text-transform: uppercase; }
.gt-prose p:not([class]) { margin: 0 0 20px; }
.gt-prose li { line-height: 24px; margin-bottom: 0; }

/* ---------- Layout ---------- */
.gt-container, .gt-container-xl {
  width: 100%;
  margin-inline: auto;
  padding-inline: 12px;
}
.gt-container { max-width: var(--gt-container); }
.gt-container-xl { max-width: var(--gt-container-xl); }

.gt-section { padding: 64px 0; }
.gt-section--light { background: var(--gt-bg); }
/* Tono di grigio di `section.section` in Porto: piu' chiaro di --gt-bg. Usato dai
   blocchi di contenuto che nell'originale stavano dentro una <section class="section">. */
.gt-section--soft { background: #F7F7F7; }
.gt-section--dark { background: var(--gt-dark); }

/* ---------- Bottoni ---------- */
.gt-btn {
  display: inline-block;
  border: 2px solid var(--gt-red);
  border-radius: 0;
  background: transparent;
  color: var(--gt-red);
  font-size: 12.8px;
  font-weight: 700;
  letter-spacing: .5px;
  /* NIENTE text-transform: come in Porto, il maiuscolo sta nel testo del bottone
     ("SCOPRI ORA", "VEDI ALTRI CASI STUDIO"). Forzarlo qui rendeva maiuscolo anche
     "Torna alla lista Case History", che nell'originale e' in tondo. */
  padding: 16px 48px;
  transition: background .2s, color .2s, border-color .2s;
}
.gt-btn:hover { background: var(--gt-red); color: var(--gt-white); }
.gt-btn--lg { padding: 20px 48px; }
.gt-btn--light {
  border-color: var(--gt-white);
  color: var(--gt-white);
  text-transform: none;
  font-size: 14px;   /* misurato sull'originale: 14px, non 16 */
  font-weight: 700;
}
.gt-btn--light:hover { background: var(--gt-white); color: var(--gt-darker); }

/* Link testuale "SCOPRI ORA" / "CONTINUA A LEGGERE" */
.gt-link {
  position: relative;
  display: inline-block;
  color: var(--gt-red);
  font-size: 12.6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.gt-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.gt-link:hover::after { transform: scaleX(1); }

/* ---------- Icone SVG ---------- */
.gt-ico { width: 1em; height: 1em; vertical-align: -0.125em; }

/* ============================================================
   HEADER
   ============================================================ */
.gt-header { position: relative; z-index: 100; height: 156px; }
.gt-header__body {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* Barra bianca superiore */
.gt-header__top {
  background: var(--gt-white);
  height: 44px;
  display: flex;
  align-items: center;
  transition: height .3s, opacity .3s;
  overflow: hidden;
}
.gt-header__top-inner {
  width: 100%;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gt-header__meta {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 12.6px;
  text-transform: uppercase;
  color: #999;
}
.gt-header__meta a { color: #999; }
.gt-header__meta a:hover { color: var(--gt-red); }
.gt-header__meta .gt-ico { font-size: 15px; margin-right: 4px; color: #999; }
.gt-header__social { display: flex; gap: 8px; }
.gt-header__social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  color: var(--gt-dark);
  font-size: 17px;
}
.gt-header__social a:hover { color: var(--gt-red); }

/* Barra principale scura */
.gt-header__main {
  background: var(--gt-dark);
  height: 112px;
  display: flex;
  align-items: center;
  transition: height .3s;
}
.gt-header__logo {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  background: var(--gt-white);
  display: flex;
  align-items: center;
}
.gt-header__logo img {
  width: 240px; height: 112px;
  transition: width .3s, height .3s;
  display: block;
}
/* Cuneo rosso fra logo e barra scura */
.gt-header__wedge {
  position: relative;
  align-self: stretch;
  width: 62px;
  flex: 0 0 auto;
}
.gt-header__wedge::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gt-red-dark);
  clip-path: polygon(0 100%, 0 40%, 46% 62%, 34% 100%);
}
.gt-header__wedge::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--gt-red);
  clip-path: polygon(0 0, 30% 0, 100% 48%, 30% 100%, 0 100%, 0 78%, 52% 48%, 0 18%);
}
.gt-header__nav-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gt-nav__list { display: flex; align-items: center; }
.gt-nav__list > li { position: relative; }
.gt-nav__list > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 1.05rem;
  color: var(--gt-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 83px;
}
.gt-nav__list > li > a:hover,
.gt-nav__list > li > a.gt-active { color: var(--gt-red); }
.gt-nav__list .gt-ico { font-size: 11px; }

/* Dropdown */
.gt-nav__sub {
  position: absolute;
  top: 100%; left: 1.05rem;
  min-width: 200px;
  background: var(--gt-dark);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.gt-nav__sub a {
  display: block;
  padding: 8px 20px;
  color: var(--gt-white);
  font-size: 13px;
  font-weight: 500;
}
.gt-nav__sub a:hover { color: var(--gt-red); }
@media (min-width: 1112px) {
  .gt-nav__item:hover > .gt-nav__sub,
  .gt-nav__item.gt-open > .gt-nav__sub {
    opacity: 1; visibility: visible; transform: translateY(-10px) translateY(10px);
  }
  .gt-nav__item:hover > .gt-nav__sub { margin-top: -10px; }
}

/* Blocco telefono (solo >= 1400px) */
.gt-header__phone {
  display: none;
  align-items: center;
  gap: 15px;
  padding-right: 32px;
  color: var(--gt-white);
}
.gt-header__phone .gt-ico { font-size: 40px; }
.gt-header__phone-label {
  margin: 0 0 2px;
  font-size: 12.6px;
  text-transform: uppercase;
  opacity: .8;
  line-height: 1;
  color: var(--gt-white);
}
.gt-header__phone-number {
  margin: 0;
  font-size: 20.3px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}
.gt-header__phone-number a { color: var(--gt-white); }
.gt-header__phone-number a:hover { color: var(--gt-red); }
@media (min-width: 1400px) { .gt-header__phone { display: flex; } }

/* Hamburger */
.gt-header__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--gt-white);
  font-size: 20px;
  margin-right: 12px;
}

/* Stato sticky (shrink) */
@media (min-width: 992px) {
  .gt-sticky .gt-header__top { height: 0; opacity: 0; }
  .gt-sticky .gt-header__main { height: 83px; }
  .gt-sticky .gt-header__logo img { width: 178px; height: 83px; }
}

/* Header responsive */
@media (max-width: 991px) {
  .gt-header { height: 124px; }
  .gt-header__body { position: static; }
  .gt-header, .gt-header__main { height: auto; }
  .gt-header__main { height: 80px; }
  .gt-header__logo img { width: 171px; height: 80px; }
  .gt-header__burger { display: flex; margin-left: auto; }
  .gt-header__nav-wrap {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--gt-dark);
    display: none;
    box-shadow: 0 12px 20px rgba(0,0,0,.25);
  }
  .gt-header { position: relative; }
  .gt-header__main { position: relative; }
  .gt-nav--open .gt-header__nav-wrap { display: block; }
  .gt-nav__list { flex-direction: column; align-items: stretch; padding: 8px 0; }
  .gt-nav__list > li > a { line-height: 44px; padding: 0 24px; justify-content: space-between; }
  .gt-nav__sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    background: rgba(0,0,0,.25);
  }
  .gt-nav__item.gt-open > .gt-nav__sub { display: block; }
}
@media (max-width: 767px) {
  .gt-header__meta li:not(:first-child) { display: none; }
  .gt-header__social { display: none; }
}

/* ============================================================
   HERO SLIDER
   ============================================================ */
.gt-hero { position: relative; height: 650px; overflow: hidden; }
.gt-hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.gt-hero__slide.gt-current { opacity: 1; pointer-events: auto; z-index: 1; }
.gt-hero__content { padding: 0 12px; max-width: 1140px; }
.gt-hero__eyebrow {
  margin: 0;
  font-size: 16.8px;   /* misurato sull'originale (.text-4 = 1.2em) */
  font-weight: 300;
  opacity: .7;
  color: var(--gt-dark);
}
.gt-hero__title {
  margin: 12px 0 24px;
  color: var(--gt-dark);
  font-size: 49px;
  font-weight: 800;
  letter-spacing: -2.45px;
  line-height: 1;
}
.gt-hero__slide--light .gt-hero__eyebrow,
.gt-hero__slide--light .gt-hero__title { color: var(--gt-white); }
.gt-hero__dots {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.gt-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--gt-dark);
  background: transparent;
  padding: 0;
}
.gt-dot.gt-current { background: var(--gt-dark); }
@media (max-width: 767px) {
  .gt-hero { height: 550px; }
  .gt-hero__title { font-size: 34px; letter-spacing: -1.7px; }
}
@media (max-width: 575px) { .gt-hero { height: 500px; } }

/* ============================================================
   SEZIONI ANGOLATE
   ============================================================ */
.gt-angled { position: relative; background: var(--gt-bg); }
.gt-angled::before { content: ""; position: absolute; inset: 0; background: var(--gt-dark); }
.gt-angled > * { position: relative; }
@media (min-width: 992px) {
  .gt-angled--btm::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--gt-angle))); }
  .gt-angled--both::before { clip-path: polygon(0 calc(var(--gt-angle) - 1vw), 100% 0, 100% 100%, 0 calc(100% - var(--gt-angle))); }
}

/* B1 — Servizi in evidenza */
.gt-services4 { padding: 56px 0 40px; }
@media (min-width: 992px) { .gt-services4 { padding: 56px 0 calc(40px + var(--gt-angle)); } }
.gt-services4__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gt-services4__col { cursor: pointer; padding: 8px 0; }
.gt-services4__col h4 { color: var(--gt-white); margin-bottom: 12px; }
.gt-services4__col.gt-active h4 { color: var(--gt-red); }
.gt-services4__col p { color: var(--gt-text-light); margin: 0 0 10px; }
@media (max-width: 991px) { .gt-services4__grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 991px) { .gt-services4__grid { grid-template-columns: repeat(2, 1fr); } }

/* B2 — Card servizi */
.gt-cards { padding: 40px 0 24px; }
.gt-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.gt-card {
  background: var(--gt-white);
  border: 1px solid var(--gt-border);
  text-align: center;
  padding: 16px 24px 32px;
  display: flex;
  flex-direction: column;
}
.gt-card__icon {
  display: flex;
  justify-content: center;
  padding: 32px 0 24px;
}
.gt-card__icon img { width: 100px; height: 100px; }
.gt-card h4 { color: var(--gt-dark); margin-bottom: 12px; }
.gt-card p { margin: 0 0 16px; }
.gt-card .gt-link { margin-top: auto; align-self: center; }
@media (max-width: 991px) { .gt-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .gt-cards__grid { grid-template-columns: 1fr; } }

/* B3 — Profilo azienda */
.gt-profile { color: var(--gt-text-light); }
.gt-profile__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 96px 0;
}
@media (min-width: 992px) { .gt-profile__inner { padding: calc(48px + var(--gt-angle)) 0; } }
.gt-profile .gt-eyebrow { color: var(--gt-text); }
.gt-profile h3 { color: var(--gt-white); }
.gt-profile__lead { font-size: 16.1px; margin: 8px 0 24px; }
.gt-profile p { margin: 0 0 16px; }
@media (max-width: 991px) { .gt-profile__inner { grid-template-columns: 1fr; padding: 56px 0; } }

/* B4 — Casi studio */
.gt-cases { padding: 32px 0 48px; }
.gt-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1164px;
  margin: 24px auto 0;
  padding-inline: 12px;
}
.gt-case {
  background: var(--gt-white);
  border: 1px solid var(--gt-border);
  text-align: center;
  transition: box-shadow .25s, transform .25s;
}
.gt-case:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateY(-3px); }
.gt-case__img { height: 200px; background-size: cover; background-position: center; }
.gt-case__body { padding: 20px 16px 16px; }
.gt-case h4 {
  font-size: 16.1px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gt-darker);
  margin-bottom: 4px;
}
.gt-case__place { margin: 0 0 10px; }
.gt-case .gt-link .gt-ico { font-size: 11px; margin-left: 4px; }
.gt-cases__more { text-align: center; margin-top: 40px; }
@media (max-width: 991px) { .gt-cases__grid { grid-template-columns: 1fr; } }

/* B5 — Split diagonale */
.gt-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--gt-bg); }
.gt-split__text { position: relative; background: var(--gt-dark); padding: 120px 48px 120px 0; }
.gt-split__text-inner { max-width: 600px; margin-left: auto; padding-left: 12px; }
.gt-split__text .gt-eyebrow { color: var(--gt-text); }
.gt-split__text h3 { color: var(--gt-white); text-transform: uppercase; }
.gt-split__text p { color: var(--gt-text-light); font-size: 16.1px; margin: 8px 0 24px; }
.gt-split__text strong { color: var(--gt-white); }
.gt-split__img { background-size: cover; background-position: center; }
@media (min-width: 992px) {
  .gt-split__text { clip-path: polygon(0 calc(var(--gt-angle) + 1.5vw), 100% var(--gt-angle), 100% calc(100% - 1.5vw), 0 calc(100% - 3vw)); }
  /* Il taglio diagonale e' proporzionale alla finestra (fino a 6.5vw di profondita'),
     il padding sopra era fisso a 120px: oltre i ~2200px di larghezza il taglio lo supera
     e mangia la prima riga del testo, cioe' l'occhiello. Stesso idioma gia' usato da
     .gt-services4 (riga ~469) e .gt-profile__inner (~519): si somma l'angolo al padding. */
  .gt-split__text { padding-top: calc(56px + var(--gt-angle)); }
  .gt-split__img { clip-path: polygon(0 var(--gt-angle), 100% 0, 100% 100%, 0 calc(100% - 1.5vw)); }
}
@media (max-width: 991px) {
  .gt-split { grid-template-columns: 1fr; }
  .gt-split__text { padding: 56px 24px; }
  .gt-split__text-inner { margin: 0; max-width: none; }
  .gt-split__img { min-height: 320px; }
}

/* B6 — Recensioni */
.gt-reviews { padding: 40px 0 56px; }
.gt-reviews__viewport { overflow: hidden; margin-top: 20px; }
.gt-reviews__track {
  display: flex;
  gap: 18px;
  transition: transform .5s ease;
}
.gt-review {
  flex: 0 0 calc(50% - 9px);
  background: var(--gt-white);
  border: 1px solid var(--gt-border);
  padding: 32px 40px 24px;
}
.gt-review__quote { display: flex; gap: 14px; }
.gt-review__quote .gt-ico { flex: 0 0 auto; font-size: 18px; color: var(--gt-red); margin-top: 4px; }
.gt-review__quote p { margin: 0; }
.gt-review__author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0 32px;
}
.gt-review__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gt-darker);
  color: var(--gt-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
}
.gt-review__name { margin: 0; color: var(--gt-darkest); font-weight: 800; font-size: 16px; line-height: 1.3; }
.gt-review__role { display: block; font-size: 11px; text-transform: uppercase; color: var(--gt-text); font-weight: 400; }
.gt-reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
@media (max-width: 767px) { .gt-review { flex: 0 0 100%; } }

/* ============================================================
   FASCIA CTA
   ============================================================ */
.gt-cta { background: var(--gt-red); }
.gt-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 40px;
  padding: 28px 12px;
  text-align: center;
}
.gt-cta h3 {
  margin: 0;
  color: var(--gt-white);
  text-transform: uppercase;
  font-size: 25.2px;
  font-weight: 400;      /* l'originale NON e' in grassetto: h3 globale a 700 va annullato */
  letter-spacing: -1.26px;
}
.gt-cta h3 span {
  display: block;
  text-transform: none;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- Fascia premi (pagina Certificazioni) ----------
   Due attestati affiancati su fondo rosso, apribili in lightbox.
   Misure prese dall'originale: 459 px per immagine, 20 px di distanza. */
.gt-awards { background: var(--gt-red); padding: 4px 0 50px; }
.gt-awards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 459px));
  gap: 20px;
  justify-content: center;
  padding-top: 40px;
}
.gt-awards__grid a { display: block; }
.gt-awards__grid img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .075);
}
@media (max-width: 991px) {
  .gt-awards__grid { grid-template-columns: minmax(0, 459px); gap: 28px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.gt-footer { background: var(--gt-dark); color: var(--gt-text); }
.gt-footer a { color: var(--gt-white); }
.gt-footer a:hover { color: var(--gt-red); }
.gt-footer__grid {
  display: grid;
  grid-template-columns: 2fr 3fr 4fr 3fr;
  gap: 32px;
  padding: 72px 0 48px;
}
.gt-footer__logo { display: flex; align-items: center; }
.gt-footer__logo img { width: 165px; }
.gt-footer h4 {
  color: var(--gt-white);
  font-size: 20.3px;
  margin-bottom: 18px;
}
.gt-footer__label {
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.gt-footer__value { margin: 0 0 10px; color: #fff; font-weight: 400; }
.gt-footer__value a { font-weight: 400; }
.gt-footer__social { display: flex; gap: 18px; margin-top: 18px; }
.gt-footer__social a { font-size: 17px; }
.gt-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-content: start; }
.gt-footer__links p { margin: 0 0 4px; }
.gt-footer__links a { font-weight: 400; opacity: .7; }
.gt-footer__links a:hover { opacity: 1; color: var(--gt-white); }
.gt-footer__case {
  background: var(--gt-darker);
  padding: 16px;
  margin-bottom: 20px;
}
.gt-footer__case p { margin: 0; }
.gt-footer__case-client { color: rgba(255,255,255,.7); }
.gt-footer__case-place { color: var(--gt-white); font-weight: 700; }
.gt-footer__case .gt-link { margin-top: 2px; }
.gt-footer__copy {
  border-top: 0;
  text-align: center;
  padding: 32px 12px 40px;
  color: rgba(255,255,255,.7);
}
@media (max-width: 991px) {
  .gt-footer__grid { grid-template-columns: 1fr; text-align: center; }
  .gt-footer__logo { justify-content: center; }
  .gt-footer__social { justify-content: center; }
}

/* ============================================================
   UTILITÀ / VARIE
   ============================================================ */
/* Torna su */
.gt-top {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 44px; height: 44px;
  background: var(--gt-darker);
  color: var(--gt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s;
  z-index: 90;
}
.gt-top.gt-visible { opacity: 1; visibility: visible; transform: none; }
.gt-top:hover { background: var(--gt-red); color: #fff; }

/* Bottone preferenze cookie (mostrato dopo il consenso) */
#preferenzeCookie {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--gt-red);
  width: 45px; height: 45px;
  border-radius: 50%;
  position: fixed;
  z-index: 999999;
  cursor: pointer;
  bottom: 15px; left: 15px;
  color: #fff;
}

/* Ristile bottoni cookieconsent (libreria invariata) */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] { background-color: var(--gt-red) !important; border-color: var(--gt-red) !important; }

/* Messaggi errore form (stile attuale) */
label.gt-form-error {
  display: inline-block;
  background: var(--gt-error);
  font-size: 12.6px;
  line-height: 18px;
  padding: 6px 10px;
  margin-top: 3px;
  color: #fff;
}

/* Animazioni all'ingresso in viewport */
.gt-appear { opacity: 0; transition: opacity .8s ease, transform .8s ease; transition-delay: var(--gt-delay, 0ms); }
.gt-appear[data-gt-anim="fade-up"] { transform: translateY(30px); }
.gt-appear[data-gt-anim="fade-left"] { transform: translateX(-40px); }
.gt-appear.gt-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gt-appear { opacity: 1; transform: none; transition: none; }
  .gt-hero__slide { transition: none; }
  html { scroll-behavior: auto; }
}

/* Placeholder immagini mancanti nel kit (solo anteprima) */
.gt-placeholder {
  background: repeating-linear-gradient(45deg, #e9e9e9 0 12px, #f4f4f4 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}
.gt-placeholder--dark {
  background: repeating-linear-gradient(45deg, #3d3d3d 0 12px, #454545 12px 24px);
  color: #9a9a9a;
}


/* ============================================================
   PAGE HEADER INTERNO (breadcrumb + H1, parallasse leggera)
   ============================================================ */
.gt-page-header { position: relative; overflow: hidden; text-align: center; padding: 64px 12px 72px; background: var(--gt-border); }
.gt-page-header__bg { position: absolute; left: 0; right: 0; top: -30%; height: 160%; background: url("/images/page-header.jpg") center / cover; will-change: transform; }
.gt-page-header__inner { position: relative; }
.gt-breadcrumb { display: flex; justify-content: center; gap: 6px; font-size: 14px; text-transform: uppercase; color: var(--gt-text); margin-bottom: 6px; }
.gt-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: #bbb; }
.gt-page-header h1 { margin: 0; font-size: 42px; font-weight: 700; letter-spacing: -2.1px; color: var(--gt-dark); }
@media (max-width: 767px) { .gt-page-header h1 { font-size: 30px; letter-spacing: -1.5px; } }

/* Layout con sidebar (pagine servizio) */
.gt-layout { display: grid; grid-template-columns: 1fr 3fr; gap: 24px; padding: 48px 0; }
@media (max-width: 991px) { .gt-layout { grid-template-columns: 1fr; } }
.gt-sidebar { padding: 0 16px; }
.gt-sidebar h4 { font-size: 20.3px; margin: 0 0 14px; }
.gt-sidebar ul { display: grid; gap: 6px; }
.gt-sidebar a { color: var(--gt-dark); font-weight: 400; }
.gt-sidebar a:hover, .gt-sidebar a.gt-active { color: var(--gt-red); }
.gt-sidebar a.gt-active { font-weight: 700; }

/* Blocco rosso con contatore + galleria (pagina servizio) */
.gt-redblock { background: var(--gt-red); color: #fff; padding: 28px 40px 40px; margin: 24px 0 40px; }
.gt-redblock__counter { text-align: center; padding: 12px 0 20px; }
.gt-redblock__lead { font-size: 20.3px; margin: 0 0 8px; }
/* 38,5px peso 400: misurato sull'originale (.text-10), non 38/700. */
.gt-redblock__num { font-size: 38.5px; font-weight: 400; letter-spacing: -1px; margin: 8px 0; }
.gt-redblock__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 28px; }
.gt-redblock__gallery img { display: block; width: 100%; height: auto; }

/* Fila di contatori affiancati: solo la pagina "Efficienza energetica" ne ha quattro
   invece del singolo riquadro a tutta larghezza. Colonne 1 / 2 / 4 come le classi
   Bootstrap dell'originale (col-12 · col-md-6 · col-xxl-3), carte da 246x158 con 24px
   di distanza. */
.gt-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 24px 0 40px; }
.gt-counter { background: var(--gt-red); color: #fff; text-align: center; padding: 24px 0; }
.gt-counter__lead { font-size: 16.8px; color: #fff; margin: 0; }
.gt-counter__num { font-size: 38.5px; font-weight: 400; color: #fff; line-height: 1.3; margin: 12px 0; }
@media (max-width: 1399px) { .gt-counters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .gt-counters { grid-template-columns: 1fr; } }
.gt-redblock__gallery a { display: block; }
.gt-redblock__gallery .gt-placeholder { aspect-ratio: 3 / 2; }
.gt-redblock h3 { color: #fff; font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin: 0 0 12px; }
.gt-redblock p { color: #fff; font-size: 16.1px; margin: 0; }
@media (max-width: 767px) { .gt-redblock { padding: 20px 20px 28px; } .gt-redblock__gallery { grid-template-columns: 1fr; } }

/* Titoli di sezione dentro la pagina servizio */
.gt-service__h { font-size: 19px; font-weight: 400; text-transform: uppercase; letter-spacing: 0; color: var(--gt-dark); margin: 40px 0 16px; }
.gt-service__h strong { font-weight: 700; }

/* Elenco con spunte */
.gt-checklist { margin: 0 0 24px; }
.gt-checklist li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--gt-border); }
.gt-checklist .gt-ico { position: absolute; left: 2px; top: 14px; color: var(--gt-red); font-size: 13px; }

/* Process step numerati
   Due cose oltre alla griglia, entrambe per non perdere il concetto di "passi":
   ① le colonne seguono il NUMERO di passi. Con 3 colonne fisse, un blocco da 4 usciva
      3 + 1, cioe' un riquadro spaiato sulla seconda riga. La quantity query
      `:has(> div:nth-child(4):last-child)` significa "il 4o figlio e' anche l'ultimo",
      cioe' i passi sono esattamente quattro -> una riga sola. I blocchi da 6 restano 3+3.
   ② le LINEETTE di collegamento fra un cerchio e il successivo (c'erano in Porto, si
      erano perse nel porting). Sono un ::after del passo, alto quanto il centro del
      cerchio, e vanno spente a FINE RIGA: per questo ogni layout ha il suo :nth-child()
      e ogni media query ri-accende il 3n che il layout precedente aveva spento.
   Geometria: il cerchio e' 64px con box-sizing border-box -> centro a 32px, la lineetta
   e' alta 2px e sta a top 31. Parte dal bordo del cerchio (50% + 32) piu' 16px di
   respiro e arriva al cerchio dopo: larghezza = 100% + gap - 2*(32+16). */
.gt-process { --gt-step-gap: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gt-step-gap); margin: 32px 0 40px; text-align: center; }
.gt-process > div { position: relative; }
.gt-process__circle { width: 64px; height: 64px; margin: 0 auto 16px; border: 2px solid var(--gt-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gt-red); font-size: 19px; font-weight: 700; }
.gt-process h4 { font-size: 20.3px; margin-bottom: 6px; }
.gt-process p { margin: 0; }
.gt-process > div::after { content: ""; position: absolute; top: 31px; left: calc(50% + 48px); width: calc(100% + var(--gt-step-gap) - 96px); height: 2px; background: var(--gt-border); }
.gt-process > div:nth-child(3n)::after,
.gt-process > div:last-child::after { content: none; }
/* Esattamente 4 passi. Di base 2x2, NON 3+1: due righe pari, ognuna con la sua
   lineetta. Misurato: in fila da 4 sotto i 1200px la colonna scende a 167px e il
   testo diventa una strisciolina, quindi la riga unica sta solo sopra i 1200. */
.gt-process:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.gt-process:has(> div:nth-child(4):last-child) > div:nth-child(3n)::after { content: ""; }
.gt-process:has(> div:nth-child(4):last-child) > div:nth-child(2n)::after,
.gt-process:has(> div:nth-child(4):last-child) > div:last-child::after { content: none; }
@media (min-width: 1200px) {
  .gt-process:has(> div:nth-child(4):last-child) { --gt-step-gap: 16px; grid-template-columns: repeat(4, 1fr); }
  .gt-process:has(> div:nth-child(4):last-child) > div:nth-child(2n)::after,
  .gt-process:has(> div:nth-child(4):last-child) > div:nth-child(3n)::after { content: ""; }
  .gt-process:has(> div:nth-child(4):last-child) > div:last-child::after { content: none; }
}
/* ⚠️ fascia CHIUSA, non `max-width: 991px`: qui dentro il 3n RIACCENDE la lineetta, e
   una regola aperta verso il basso avrebbe vinto per specificita' (0,2,1) sullo
   spegnimento a una colonna (0,1,1) -> a 375px la lineetta del 3o passo restava accesa
   e sbordava di 164px fuori dalla pagina. Misurato, non ipotizzato. */
@media (min-width: 576px) and (max-width: 991px) {
  .gt-process,
  .gt-process:has(> div:nth-child(4):last-child) { --gt-step-gap: 24px; grid-template-columns: repeat(2, 1fr); }
  .gt-process > div:nth-child(3n)::after { content: ""; }
  .gt-process > div:nth-child(2n)::after,
  .gt-process > div:last-child::after { content: none; }
}
@media (max-width: 575px) {
  .gt-process,
  .gt-process:has(> div:nth-child(4):last-child) { grid-template-columns: 1fr; }
  /* il 2o selettore serve a pareggiare la specificita' della regola a 4 passi */
  .gt-process > div::after,
  .gt-process:has(> div:nth-child(4):last-child) > div:nth-child(3n)::after { content: none; }
}

/* Banner scuro conclusivo */
.gt-banner-dark { background: var(--gt-dark); color: #fff; font-size: 20.3px; text-align: center; padding: 24px; margin: 24px 0; }

/* ============================================================
   FORM CONTATTI
   ============================================================ */
.gt-form label { display: block; margin-bottom: 4px; color: var(--gt-text); }
.gt-form input[type="text"], .gt-form input[type="email"], .gt-form textarea {
  /* Misure dell'originale (.form-control.bg-color-tertiary): fondo #F4F4F4,
     nessun bordo, padding 19,2px, testo 13,6px. */
  width: 100%; border: 0; background: var(--gt-bg); padding: 19.2px;
  font-family: inherit; font-size: 13.6px; color: var(--gt-dark);
}
.gt-form input:focus-visible, .gt-form textarea:focus-visible { outline: 2px solid var(--gt-red); }
.gt-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }
.gt-form__row--full { grid-template-columns: 1fr; }
@media (max-width: 767px) { .gt-form__row { grid-template-columns: 1fr; } }
.gt-alert { background: #F2F2F2; border: 1px solid #EAEAEA; color: #737272; padding: 16px; margin-bottom: 16px; }
/* Esito dell'invio: verde se la mail parte, rosso se la validazione lato PHP blocca. */
.gt-alert--success { background: #E8F5E9; border-color: #C8E6C9; color: #256029; }
.gt-alert--danger  { background: #FDECEA; border-color: #F5C6CB; color: #8E1F1F; }
.gt-red-star { color: red; font-weight: 700; }
/* Fila di caselle affiancate (tipologia di intervento, form preventivo). */
.gt-form__checks { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 20px; }
.gt-form__checks label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.gt-form__check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.gt-form__check input { margin-top: 6px; }
.gt-form__check a { text-decoration: underline; }
.gt-form input.gt-invalid, .gt-form textarea.gt-invalid { outline: 2px solid var(--gt-error); }

/* Card info (contatti / scheda caso studio) */
/* Pannello dati della scheda caso studio. Valori dell'originale (.custom-card-style-2):
   filo rosso da 3px in cima (era uno :before), bordo 1px sugli altri tre lati.
   Nessun margine in cima: nella scheda caso studio la card sta in griglia accanto
   alla galleria e i due bordi superiori devono partire dalla stessa riga (come
   nell'originale, dove la card stava nuda dentro il .col-md-6). */
.gt-card-panel {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: 3px solid var(--gt-red);
  box-shadow: 0 0 35px -5px rgba(0, 0, 0, .1);
  padding: 48px;
}
.gt-card-panel h3 { font-size: 25.2px; letter-spacing: normal; margin-bottom: 12px; text-transform: capitalize; }
.gt-card-panel__row { display: flex; gap: 20px; align-items: center; padding: 10px 0; }
.gt-card-panel__row .gt-ico { flex: 0 0 auto; font-size: 30px; color: var(--gt-dark); }
.gt-card-panel__row h4 { font-size: 16.1px; margin: 0 0 2px; text-transform: capitalize; }
.gt-card-panel__row p { margin: 0; }
.gt-card-panel__row a { color: var(--gt-text); font-weight: 400; }
.gt-card-panel hr { border: 0; border-top: 1px solid var(--gt-border); margin: 8px 0; }
.gt-card-panel dl { margin: 0; }
/* text-transform: capitalize replica l'originale, dove le etichette avevano la
   classe .text-capitalize. Effetto collaterale ereditato: "Settore Di Lavoro:". */
.gt-card-panel dt { font-size: 16.8px; font-weight: 700; color: var(--gt-dark); padding-top: 10px; text-transform: capitalize; }
.gt-card-panel dd { margin: 0 0 10px; border-bottom: 1px solid var(--gt-border); padding-bottom: 12px; }
.gt-card-panel dd:last-child { border-bottom: 0; margin-bottom: 0; }

/* Mappa (caricata al click) */
.gt-map { position: relative; height: 600px; background: var(--gt-border); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
.gt-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gt-map__note { font-size: 12.6px; color: var(--gt-text); }

/* ============================================================
   CASI STUDIO
   ============================================================ */
.gt-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 24px; }
.gt-filter button { padding: 8px 23px; font-size: 12.32px; font-weight: 600; text-transform: uppercase; color: var(--gt-dark); transition: background .2s, color .2s; }
.gt-filter button:hover { color: var(--gt-red); }
.gt-filter button.gt-active { background: var(--gt-red); color: #fff; }
.gt-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
@media (max-width: 991px) { .gt-portfolio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .gt-portfolio { grid-template-columns: 1fr; } }
.gt-pf { background: #f9f9f9; }
.gt-pf.gt-hide { display: none; }
.gt-pf__img { display: block; aspect-ratio: 3 / 2; background-size: cover; background-position: center; }
/* In produzione la card contiene un <img> vero, non un fondo: le miniature sono
   gia' 3:2 (360x240), quindi object-fit non taglia nulla. */
.gt-pf__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gt-pf__desc { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 20px; }
.gt-pf__desc a { font-weight: 400; }
.gt-pf__icons { display: flex; gap: 4px; font-size: 15px; }
.gt-cat--amianto { color: var(--gt-yellow); }
.gt-cat--industriali { color: var(--gt-orange); }
.gt-cat--civili, .gt-cat--fotovoltaico, .gt-cat--speciali, .gt-cat--pareti { color: var(--gt-text); }

/* Scheda caso studio */
.gt-case-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin: 32px 0; }
/* Senza min-width:0 la colonna eredita come larghezza minima il min-content della striscia
   di miniature (5 x 160px + gap = 860px) e la pagina trabocca sotto i 1280px di viewport. */
.gt-case-detail > * { min-width: 0; }
@media (max-width: 991px) { .gt-case-detail { grid-template-columns: 1fr; } }
.gt-gal__main .gt-placeholder, .gt-gal__main img { width: 100%; aspect-ratio: 3 / 2; display: block; }
/* Le foto dei casi studio non hanno una forma sola: su 80, 34 sono quadrate, 27 in 4:3,
   5 in 16:9 e 4 verticali. Il riquadro resta 3:2, cosi' l'impaginazione non salta quando
   si cambia foto, ma senza object-fit l'immagine dentro veniva STIRATA fino a riempirlo:
   un quadrato si allargava di una volta e mezza. `contain` la mostra intera nella sua
   forma (il fondo si vede ai lati), `cover` nella striscia, dove a 160px il taglio non
   toglie niente di leggibile e la fila resta ordinata. */
.gt-gal__main img { object-fit: contain; background: var(--gt-bg); }
.gt-gal__main a { display: block; cursor: zoom-in; }
.gt-gal__thumbs { display: flex; gap: 15px; margin-top: 15px; overflow-x: auto; padding-bottom: 4px; }
.gt-gal__thumbs button { flex: 0 0 160px; }
.gt-gal__thumbs .gt-placeholder, .gt-gal__thumbs img { width: 160px; aspect-ratio: 3 / 2; display: block; }
.gt-gal__thumbs img { object-fit: cover; background: var(--gt-bg); }
.gt-gal__thumbs button.gt-active { outline: 2px solid var(--gt-red); }
.gt-case-detail h4, .gt-case-sections h4 { font-size: 20.3px; }
.gt-case-sections h4 { margin: 32px 0 8px; }

/* ============================================================
   NEWS
   ============================================================ */
/* Flex e non grid: l'originale aveva `justify-content-center` sulla row, quindi
   l'ultima riga incompleta resta CENTRATA. Con grid finirebbe allineata a sinistra.
   (La griglia dei casi studio invece era allineata a sinistra: la' resta grid.) */
.gt-news-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 72px 0; }
.gt-news-grid > .gt-news-card { flex: 0 0 calc((100% - 40px) / 3); }
@media (max-width: 991px) { .gt-news-grid > .gt-news-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 575px) { .gt-news-grid > .gt-news-card { flex-basis: 100%; } }
.gt-news-card { display: block; background: #fff; box-shadow: 0 0 21px -5px rgba(0,0,0,.2); color: inherit; font-weight: 400; }
.gt-news-card:hover { color: inherit; }
.gt-news-card:hover h4 { color: var(--gt-red); }
.gt-news-card__img { position: relative; }
.gt-news-card__img .gt-placeholder, .gt-news-card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.gt-date { position: absolute; right: 24px; bottom: 26px; z-index: 1; background: var(--gt-red); color: #fff; text-align: center; font-weight: 500; font-size: 23.1px; line-height: 27.72px; padding: 8px 16px; transition: transform .3s; }
.gt-date::before { content: ""; position: absolute; inset: 0; background: inherit; opacity: .7; transform: translate3d(5px, 5px, 0); z-index: -1; transition: transform .3s; }
/* Nell'originale il mese ha la STESSA dimensione del giorno (23,1px): e' questo che
   dava al riquadro i suoi 84x71. Un mese piu' piccolo lo faceva scendere a 60x61. */
.gt-date span { display: block; font-size: 23.1px; letter-spacing: 2px; padding: 0 4px; }
.gt-news-card__body { padding: 24px; }
.gt-news-card__body h4 { font-size: 20.3px; font-weight: 500; letter-spacing: -0.5px; color: var(--gt-darker); min-height: 60px; margin-bottom: 8px; transition: color .2s; }
.gt-news-card__more { display: inline-flex; align-items: center; gap: 8px; color: var(--gt-red); font-weight: 500; }
.gt-news-card__more .gt-ico { font-size: 22px; }

/* Scheda news.
   Colonna stretta: dentro .gt-container-xl (1440px) la riga di testo arrivava a
   ~150 caratteri, contro i 60-80 di lettura comoda. A 800px sono ~97: non e' ancora
   il misurino da libro, ma la colonna resta larga quanto serve al titolo grande e
   all'immagine di copertina (che ha il suo tetto a 900px, qui rientra a 800).
   `margin: 0 auto` centra tutto il blocco; il "TORNA ALLE NEWS" e' un fratello con
   text-align: center, quindi resta allineato da solo. */
.gt-article { max-width: 800px; margin: 0 auto; padding: 56px 0 24px; }
/* Il titolo della news e' un <h2> nudo: valori del tag senza classi di Porto. */
.gt-article h2 { font-size: 30.8px; font-weight: 300; line-height: 42px; letter-spacing: -1.54px; color: var(--gt-darker); text-transform: none; margin: 0 0 32px; }
.gt-article__date { color: var(--gt-text); margin: 0 0 20px; }
.gt-article__img { margin: 30px auto; text-align: center; background: #f9f9f9; }
.gt-article__img .gt-placeholder { max-width: 900px; aspect-ratio: 3 / 2; margin: 0 auto; }
.gt-article__img img { max-width: 900px; width: 100%; height: auto; display: inline-block; }
/* Allegato e fonte: nell'originale erano <p> nudi dentro il corpo news, quindi
   prendevano il margine di 20px del tag p di Porto. Qui hanno una classe, va dato.
   ⚠️ Il selettore deve passare da .gt-prose: senza, `.gt-prose p` (0-1-1) batte
   `.gt-article__source` (0-1-0) e il margine dichiarato qui non arriva mai. */
.gt-prose .gt-article__pdf, .gt-prose .gt-article__source { margin: 0 0 20px; }
/* Corpo dell'articolo piu' grande dei 14px del resto del sito: una news si legge
   tutta d'un fiato, una pagina di servizio si scorre. 16,8px e' la misura di
   .gt-lead, quindi resta dentro la scala tipografica gia' in uso e non inventa un
   numero nuovo. Vale SOLO qui: .gt-article e' usata dalla sola scheda news
   (scripts/news.inc.php). Nota storica: fino al 2026-08-10 alcuni articoli avevano
   20-26px scritti a mano dentro il testo incollato - quelli sono spariti con la
   pulizia dei corpi, la dimensione si decide qui e per tutti insieme. I titoletti
   NON cambiano: hanno una loro misura in px e restano quelli. */
.gt-article .gt-prose { font-size: 16.8px; line-height: 28px; }
/* Con l'interlinea piu' larga le voci di elenco senza stacco si impastano. */
.gt-article .gt-prose li { line-height: 28px; margin-bottom: 8px; }
.gt-back { text-align: center; padding: 32px 0 64px; }
@media (max-width: 991px) { .gt-contact-cols { grid-template-columns: 1fr !important; } }

/* ============================================================
   VIDEO GALLERY
   ============================================================ */
/* Tre riquadri con icona (pagina Azienda). Misurati sull'originale: 456px di larghezza,
   24px di distanza, icona 32,2px accanto al testo. */
.gt-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0 8px; }
.gt-feature { display: flex; gap: 16px; align-items: flex-start; }
.gt-feature .gt-ico { flex: 0 0 auto; font-size: 32.2px; width: 32px; height: 32px; color: var(--gt-dark); margin-top: 4px; }
.gt-feature h4 { font-size: 20.3px; font-weight: 700; color: var(--gt-dark); margin: 0 0 6px; }
.gt-feature p { margin: 0; }
@media (max-width: 991px) { .gt-features { grid-template-columns: 1fr; } }

/* Gemello scuro di .gt-redblock: galleria su fondo #333 (pagina Azienda). */
.gt-darkblock { background: var(--gt-dark); color: #fff; padding: 28px 0 40px; margin: 40px 0; }
.gt-darkblock__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gt-darkblock__gallery a { display: block; }
.gt-darkblock__gallery img { display: block; width: 100%; height: auto; }

/* Accordion (download, offerte di lavoro, FAQ delle pagine amianto).
   ⚠️ Nel ramo legacy i pannelli `.toggle` di Porto NON si aprivano: 17 in tutto il
   sito, contenuti irraggiungibili. Qui e' un <details> nativo, che funziona anche
   senza JavaScript. */
.gt-toggle { border-bottom: 1px solid var(--gt-border); }
.gt-toggle > summary {
  cursor: pointer; padding: 14px 4px; font-weight: 600; color: var(--gt-dark);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.gt-toggle > summary::-webkit-details-marker { display: none; }
.gt-toggle > summary::before { content: "+"; color: var(--gt-red); font-size: 20px; line-height: 1; }
.gt-toggle[open] > summary::before { content: "\2212"; }
.gt-toggle > summary:hover { color: var(--gt-red); }
.gt-toggle__body { padding: 4px 4px 20px 24px; }
.gt-toggle__body p { margin: 0 0 12px; }

.gt-video { margin: 48px 0; }
.gt-video__frame { aspect-ratio: 16 / 9; }
.gt-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.gt-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; }
.gt-lb.gt-open { display: flex; }
.gt-lb img { max-width: 88vw; max-height: 86vh; display: block; box-shadow: 0 10px 60px rgba(0,0,0,.5); }
.gt-lb__btn { position: absolute; color: #fff; font-size: 28px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; opacity: .8; }
.gt-lb__btn:hover { opacity: 1; }
.gt-lb__close { top: 12px; right: 12px; }
.gt-lb__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.gt-lb__next { right: 8px; top: 50%; transform: translateY(-50%); }
.gt-lb__caption { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #ccc; font-size: 13px; }