:root {
  --color-dark: #0a1a12;
  --color-accent: #b5e352;
  --color-light: #f8f9fa;
  --color-text: #303a34;
  --color-white: #ffffff;
  --color-muted: #bec9c1;
  --color-border: #e0e6e1;

  --font-family: "Segoe UI", Arial, sans-serif;
  --container-width: 1200px;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --section-spacing: clamp(4rem, 8vw, 7rem);
  --navbar-height: 5.5rem;

  --radius-small: 0.75rem;
  --radius-large: 1.25rem;
  --shadow-card: 0 8px 30px rgb(10 26 18 / 6%);
  --transition: 220ms ease;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--navbar-height) + 1rem);
}

body {
  margin: 0;
  background-color: var(--color-dark);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  text-wrap: balance;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 6px;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

.container {
  width: min(
    var(--container-width),
    calc(100% - var(--page-gutter) * 2)
  );
  margin-inline: auto;
}

/* Header e navbar */

.site-header {
  position: relative;
  z-index: 1000;
}

.navbar {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  min-height: var(--navbar-height);
  margin: 0;
  padding: 1rem var(--page-gutter);
  padding-inline: max(
    var(--page-gutter),
    calc((100% - var(--container-width)) / 2)
  );
  background-color: var(--color-dark);
  color: var(--color-white);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  box-shadow: 0 4px 24px rgb(0 0 0 / 12%);
}

.navbar__logo {
  flex-shrink: 0;
  max-width: 100%;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.navbar__menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem clamp(0.5rem, 2vw, 1.5rem);
  padding: 0;
  list-style: none;
}

.navbar__item {
  min-width: 0;
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color var(--transition);
}

.navbar__link:hover,
.navbar__link:focus-visible,
.navbar__link[aria-current="page"] {
  color: var(--color-accent);
}

.navbar__toggle {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.navbar__toggle-icon {
  font-size: 1.4rem;
  line-height: 1;
}

/* Hero */

.hero {
  display: flex;
  align-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 38rem;
  padding-block: calc(var(--navbar-height) + 3rem) 4rem;
  background-color: var(--color-dark);
  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 55%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("sfondo-hero.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--color-white);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-dark);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.4;
}

.hero__title {
  max-width: 17ch;
  font-size: clamp(2.5rem, 6.5vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.06;
  overflow-wrap: break-word;
}

/* Servizi */

.services {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}

.services__title,
.why-us__title {
  color: var(--color-dark);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.services__title {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 960px;
  margin-inline: auto;
}

.service-card {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: clamp(1rem, 4vw, 3rem);
  border: 1px solid rgb(181 227 82 / 15%);
  border-radius: var(--radius-large);
  background-color: var(--color-dark);
  color: var(--color-accent);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.service-card__title {
  max-width: 19ch;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.service-card:focus-visible {
  outline-color: var(--color-dark);
}

/* Perché sceglierci */

.why-us {
  padding-block: var(--section-spacing);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-light);
}

.why-us__subtitle {
  max-width: 40ch;
  margin-top: 1rem;
  color: var(--color-text);
  font-size: clamp(1.15rem, 2.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.benefit-card {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  min-height: 11rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-small);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.benefit-card__title {
  color: var(--color-dark);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Fascia relamping */

.why-us__highlight {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.relamping {
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius-large);
  background-color: var(--color-accent);
  color: var(--color-dark);
  text-align: center;
}

.relamping__statement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.relamping__value {
  flex-shrink: 0;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 1;
}

.relamping__description {
  max-width: 35ch;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 650;
  line-height: 1.4;
  text-wrap: balance;
}

/* Contatti e pulsante */

.contact-cta {
  padding-block: var(--section-spacing);
  background-color: var(--color-dark);
  color: var(--color-white);
  text-align: center;
}

.contact-cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.contact-cta__title {
  max-width: 22ch;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-width: 100%;
  padding: 1rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.5;
  text-align: center;
  transition:
    background-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.button--primary {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

.button--primary:focus-visible {
  outline-color: var(--color-accent);
}

/* Footer */

.site-footer {
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgb(255 255 255 / 12%);
  background-color: var(--color-dark);
  color: var(--color-muted);
  font-size: 0.925rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(0, 1.25fr)
    minmax(0, 1fr)
    minmax(0, 0.8fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 3.5rem;
}

.site-footer__grid > * {
  min-width: 0;
}

.site-footer__logo {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.site-footer__description {
  max-width: 36ch;
  line-height: 1.8;
}

.site-footer__heading {
  margin-bottom: 1.25rem;
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 750;
}

.site-footer__address {
  font-style: normal;
}

.site-footer__contact-list dt,
.site-footer__hours dt {
  margin-bottom: 0.2rem;
  color: var(--color-white);
  font-weight: 650;
}

.site-footer__contact-list dd,
.site-footer__hours dd {
  overflow-wrap: anywhere;
}

.site-footer__contact-list dd + dt {
  margin-top: 1rem;
}

.site-footer__hours {
  margin-top: 1rem;
}

.site-footer__links {
  display: grid;
  gap: 0.35rem;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-block;
  padding-block: 0.4rem;
  overflow-wrap: anywhere;
}

.site-footer a {
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-accent);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.site-footer__copyright,
.site-footer__credits {
  font-size: 0.8rem;
  line-height: 1.6;
}

.site-footer__credits {
  text-align: right;
}

/* Effetti per dispositivi con puntatore */

@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-7px);
    border-color: var(--color-accent);
    box-shadow: 0 18px 38px rgb(10 26 18 / 18%);
  }

  .button--primary:hover {
    transform: translateY(-3px);
    background-color: var(--color-white);
    box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
  }
}

/* Tablet */

@media (max-width: 64rem) {
  .navbar {
    gap: 1rem;
  }

  .navbar__menu {
    column-gap: 0.65rem;
  }

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

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* Mobile: navigazione sempre accessibile senza JavaScript */

@media (max-width: 48rem) {
  :root {
    --navbar-height: 8.5rem;
  }

  .navbar {
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.85rem;
  }

  .navbar__logo {
    text-align: center;
  }

  .navbar__menu {
    justify-content: center;
    width: 100%;
    gap: 0.15rem 0.5rem;
  }

  .navbar__link {
    padding-inline: 0.25rem;
    font-size: 0.85rem;
  }

  .hero {
    min-height: 36rem;
    padding-bottom: 3rem;
  }

  .hero__title {
    font-size: clamp(2.4rem, 8vw, 3.75rem);
  }

  .services__grid,
  .why-us__grid,
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .services__grid {
    max-width: 32rem;
  }



  .relamping__statement {
    flex-direction: column;
  }

  .relamping__description {
    max-width: 30ch;
  }

  .contact-cta__button {
    width: min(100%, 30rem);
    padding-inline: 1.25rem;
  }

  .site-footer__grid {
    gap: 2.25rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__credits {
    text-align: left;
  }
}

/* Schermi stretti */

@media (max-width: 23rem) {
  :root {
    --navbar-height: 10.5rem;
  }

  .navbar__menu {
    column-gap: 0.75rem;
  }

  .hero__title {
    font-size: 2.2rem;
  }

  .hero__badge {
    font-size: 0.8rem;
  }
}

/* Riduzione delle animazioni */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .service-card:hover,
  .button--primary:hover {
    transform: none;
  }
}
/* Sfondo della prima schermata con effetto parallasse */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none;
}

/* L'immagine supera il riquadro del 25% sopra e sotto. */
.hero::before {
  content: "";
  position: absolute;
  inset: -25% 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 55%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("sfondo-hero.webp");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  transform: translate3d(0, var(--hero-offset, 0px), 0);
  will-change: transform;
}

.hero__content {
  position: relative;
  z-index: 1;
}

/* Rispetta chi ha impostato la riduzione delle animazioni. */
@media (prefers-reduced-motion: reduce) {
  .hero::before {
    transform: none;
    will-change: auto;
  }
}
/* Navbar trasparente all'apertura */

.navbar {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease,
    backdrop-filter 300ms ease;
}


/* Evidenziazione con effetto pastello / pennarello */

.services__title,
.why-us__title {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: 100%;
  padding: 0.25em 0.4em;
}

.services__title::before,
.why-us__title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Passate verdi con piccole striature più chiare */
  background-color: transparent;
  background-image:
    repeating-linear-gradient(
      128deg,
      transparent 0 3px,
      rgb(248 249 250 / 55%) 3px 4px,
      transparent 4px 7px,
      rgb(248 249 250 / 30%) 7px 9px
    ),
    repeating-linear-gradient(
      128deg,
      #dcebbd 0 12px,
      #c9e29b 12px 23px,
      #d5e8af 23px 33px,
      #e2efca 33px 36px
    );

  /* Profilo irregolare delle passate */
  clip-path: polygon(
    0% 70%,
    4% 42%,
    12% 9%,
    16% 4%,
    19% 13%,
    19% 60%,
    30% 12%,
    34% 6%,
    38% 15%,
    37% 63%,
    49% 14%,
    53% 8%,
    57% 19%,
    56% 64%,
    68% 17%,
    72% 12%,
    76% 22%,
    75% 66%,
    87% 24%,
    91% 20%,
    95% 31%,
    94% 63%,
    100% 51%,
    99% 74%,
    89% 92%,
    85% 88%,
    84% 59%,
    74% 94%,
    69% 98%,
    65% 88%,
    65% 55%,
    55% 94%,
    50% 98%,
    46% 88%,
    47% 53%,
    36% 94%,
    31% 97%,
    27% 86%,
    28% 50%,
    17% 92%,
    12% 96%,
    7% 88%,
    8% 62%,
    2% 85%
  );

  transform: rotate(-2deg);
  opacity: 0.85;
}

.why-us__title::before {
  transform: rotate(-1deg) scaleY(0.95);
}
/* Logo nella navbar */

.navbar {
  padding-block: 0.5rem;
}

.navbar__logo {
  position: relative;
  display: block;
  width: 160px;
  height: 70px;
  flex-shrink: 0;
}

.navbar__logo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity 300ms ease;
}

/* All'apertura: logo bianco */

.navbar__logo-light {
  opacity: 1;
}

.navbar__logo-dark {
  opacity: 0;
}


.navbar[data-scrolled="true"] .navbar__link:hover,
.navbar[data-scrolled="true"] .navbar__link:focus-visible,
.navbar[data-scrolled="true"] .navbar__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* Logo bianco nel footer */

.site-footer__logo {
  display: block;
  width: 220px;
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.site-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: logo allineato a sinistra */

@media (max-width: 48rem) {
  .navbar__logo {
    align-self: flex-start;
    width: 140px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar__logo img {
    transition: none;
  }
}
/* Card dei servizi con immagini */

.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.9rem;

  padding: clamp(1.25rem, 3vw, 2.5rem);
  text-align: left;
  background-color: var(--color-dark);
}

/* Foto leggermente sfocata */

.service-card::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -2;
  pointer-events: none;

  background-image: var(--service-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  filter: none;
}

/* Sfumatura verde: più chiara sopra, più scura sotto */

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgb(105 143 79 / 40%) 0%,
    rgb(39 68 45 / 75%) 45%,
    rgb(10 26 18 / 97%) 100%
  );
}

/* Una foto per ciascun servizio */

.service-card[href="illuminotecnica.html"] {
  --service-image: url("immagini/illuminotecnica.webp");
}

.service-card[href="impianti-elettrici.html"] {
  --service-image: url("immagini/impianti-elettrici.webp");
}

.service-card[href="adeguamenti-impianti.html"] {
  --service-image: url("immagini/adeguamenti-impianti.webp");
}

.service-card[href="fotovoltaico.html"] {
  --service-image: url("immagini/fotovoltaico.webp");
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;

  border: 1px solid rgb(181 227 82 / 35%);
  border-radius: 0.9rem;
  background-color: rgb(10 26 18 / 65%);

  font-size: 1.7rem;
  line-height: 1;
}

.service-card__title {
  max-width: 100%;
  color: var(--color-accent);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.15;
}

.service-card__description {
  max-width: 38ch;
  color: var(--color-white);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.5;
}

/* Comparsa dei blocchi durante lo scorrimento */
/* translate è separato dal transform usato per l'hover. */

[data-reveal] {
  opacity: 0;
  translate: 0 40px;

  transition:
    opacity 650ms ease,
    translate 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

[data-reveal="visible"] {
  opacity: 1;
  translate: 0 0;
}

/* Mantiene accessibili anche i blocchi raggiunti con Tab */

[data-reveal]:focus-within {
  opacity: 1;
  translate: 0 0;
}

/* Testi più compatti sui telefoni stretti */

@media (max-width: 25rem) {
  .service-card {
    padding: 1rem;
    gap: 0.6rem;
  }

  .service-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.35rem;
  }

  .service-card__title {
    font-size: 1.2rem;
  }

  .service-card__description {
    font-size: 0.85rem;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
/* Navbar trasparente all'apertura */

.navbar {
  background-color: transparent;
  background-image: none;
}

/* Verde del footer con riflessi morbidi */

.navbar[data-scrolled="true"] {
  background-color: var(--color-dark);

  background-image:
    radial-gradient(
      ellipse at 12% 0%,
      rgb(133 165 109 / 22%) 0%,
      transparent 38%
    ),
    radial-gradient(
      ellipse at 55% 100%,
      rgb(91 143 105 / 18%) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 90% 15%,
      rgb(181 227 82 / 12%) 0%,
      transparent 30%
    );

  border-bottom: 1px solid rgb(181 227 82 / 12%);

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 5px 24px rgb(0 0 0 / 20%);
}

/* Logo bianco sullo sfondo scuro */

.navbar[data-scrolled="true"] .navbar__logo-light {
  opacity: 1;
}

.navbar[data-scrolled="true"] .navbar__logo-dark {
  opacity: 0;
}

/* Link bianchi, verde lime al passaggio del mouse */

.navbar[data-scrolled="true"] .navbar__link {
  color: var(--color-white);
}

.navbar[data-scrolled="true"] .navbar__link:hover,
.navbar[data-scrolled="true"] .navbar__link:focus-visible,
.navbar[data-scrolled="true"] .navbar__link[aria-current="page"] {
  color: var(--color-accent);
}/* Pannello verde chiaro dietro alle card e al relamping */

.why-us__panel {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1rem, 3vw, 2.5rem);
  border-radius: 1.5rem;
  background-color: #edf4e5;
}

.why-us__panel .why-us__grid {
  margin-top: 0;
}

/* Card informative */

.benefit-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
}

/* Icone stilizzate */

.benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  border-radius: 0.85rem;
  background-color: #f1f3f1;
  color: var(--color-dark);
}

.benefit-card__icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-card__description {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Bordo e nota della fascia relamping */

.relamping {
  border: 1px solid rgb(10 26 18 / 25%);
}

.relamping__value {
  display: inline-block;
  min-width: 3.5ch;
  font-variant-numeric: tabular-nums;
}

.relamping__note {
  max-width: 75ch;
  margin: 1.5rem auto 0;
  color: var(--color-dark);
  font-size: 0.8rem;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Card più compatte, con bordo grigio uniforme */

.benefit-card {
  min-height: 0;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  gap: 0.75rem;

  border: 1px solid #dce2dc;
  border-radius: 0.9rem;

  box-shadow:
    0 -2px 6px rgb(10 26 18 / 4%),
    0 4px 12px rgb(10 26 18 / 6%);

  transition:
    transform 280ms ease,
    box-shadow 280ms ease;
}

.benefit-card__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.benefit-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.benefit-card__title {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.3;
}

.benefit-card__description {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Mantiene anche la transizione di comparsa allo scroll */

.benefit-card[data-reveal] {
  transition:
    opacity 650ms ease,
    translate 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms ease,
    box-shadow 280ms ease;
}

/* Sollevamento e ombra più ampia al passaggio del mouse */

@media (hover: hover) and (pointer: fine) {
  .benefit-card:hover {
    transform: translateY(-6px) scale(1.025);

    box-shadow:
      0 -2px 8px rgb(10 26 18 / 4%),
      0 18px 32px rgb(10 26 18 / 15%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card,
  .benefit-card[data-reveal] {
    transition: none;
  }

  .benefit-card:hover {
    transform: none;
  }
}
/* Riquadro contatti separato dal footer */

.contact-cta {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background-color: var(--color-light);
}

.contact-cta__container {
  gap: 1.5rem;
  padding: clamp(2.5rem, 6vw, 5rem)
           clamp(1.25rem, 4vw, 3rem);

  border: 1px solid rgb(181 227 82 / 12%);
  border-radius: 1.75rem;

  background-color: var(--color-dark);
  background-image:
    radial-gradient(
      ellipse at 12% 0%,
      rgb(133 165 109 / 22%) 0%,
      transparent 38%
    ),
    radial-gradient(
      ellipse at 55% 100%,
      rgb(91 143 105 / 18%) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 90% 15%,
      rgb(181 227 82 / 12%) 0%,
      transparent 30%
    );

  color: var(--color-white);
  box-shadow: 0 12px 32px rgb(10 26 18 / 12%);
}

.contact-cta__description {
  max-width: 62ch;
  color: #d5ded7;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 400;
  line-height: 1.7;
  text-wrap: pretty;
}

.contact-cta__button {
  margin-top: 0.5rem;
}

/* Linee decorative nella fascia sinistra dei servizi */

.section-lines {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section-lines::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.333%;
  z-index: -1;
  pointer-events: none;

  opacity: 0.16;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 900' fill='none' stroke='%230a1a12' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-60 30C180 70 270 210 75 335S-45 550 240 680S280 810 90 940'/%3E%3Cpath d='M-45 55C165 95 245 220 60 350S-20 535 220 700S260 845 110 940'/%3E%3Cpath d='M-30 80C150 120 220 230 45 365S5 520 200 720S240 880 130 940'/%3E%3Cpath d='M240-40C40 100-60 195 125 315S320 500 100 630S-55 785 215 950'/%3E%3Cpath d='M265-30C65 115-35 210 145 330S295 510 120 650S-25 800 235 950'/%3E%3Cpath d='M290-20C90 130-10 225 165 345S270 520 140 670S5 815 255 950'/%3E%3Cpath d='M70 150Q110 95 150 150Q110 205 70 150Z'/%3E%3Cpath d='M185 415Q230 360 275 415Q230 470 185 415Z'/%3E%3Cpath d='M15 710Q55 655 95 710Q55 765 15 710Z'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;

  /* Le linee svaniscono verso le card. */
  -webkit-mask-image: linear-gradient(
    to right,
    black 35%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 35%,
    transparent 100%
  );
}

@media (max-width: 48rem) {
  .contact-cta__container {
    border-radius: 1.25rem;
  }

  .section-lines::before {
    opacity: 0.09;
  }
}
/* Scritta a mano sopra al titolo */

.contact-cta__tagline {
  color: #809f42;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

/* Contenitore delle decorazioni */

.contact-cta__container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Testi e pulsante sopra alle linee */

.contact-cta__container > * {
  position: relative;
  z-index: 1;
}

/* Linee intrecciate nel verde del logo */

.contact-cta__container::before,
.about-mission::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 900' fill='none' stroke='%23809f42' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-60 30C180 70 270 210 75 335S-45 550 240 680S280 810 90 940'/%3E%3Cpath d='M-45 55C165 95 245 220 60 350S-20 535 220 700S260 845 110 940'/%3E%3Cpath d='M-30 80C150 120 220 230 45 365S5 520 200 720S240 880 130 940'/%3E%3Cpath d='M240-40C40 100-60 195 125 315S320 500 100 630S-55 785 215 950'/%3E%3Cpath d='M265-30C65 115-35 210 145 330S295 510 120 650S-25 800 235 950'/%3E%3Cpath d='M290-20C90 130-10 225 165 345S270 520 140 670S5 815 255 950'/%3E%3Cpath d='M70 150Q110 95 150 150Q110 205 70 150Z'/%3E%3Cpath d='M185 415Q230 360 275 415Q230 470 185 415Z'/%3E%3Cpath d='M15 710Q55 655 95 710Q55 765 15 710Z'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;

  -webkit-mask-image: linear-gradient(
    to right,
    black 20%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 20%,
    transparent 100%
  );
}

@media (max-width: 48rem) {
  .contact-cta__container::before {
    width: 50%;
    opacity: 0.2;
  }
}
/* Fascia scorrevole sotto alla hero */

.keywords-ticker {
  position: relative;
  overflow: hidden;
  padding-block: 1rem;
  background-color: var(--color-dark);
  color: var(--color-accent);
  border-block: 1px solid rgb(181 227 82 / 15%);
}

.keywords-ticker__track {
  display: flex;
  width: max-content;
}

.keywords-ticker__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.keywords-ticker__list li {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  white-space: nowrap;

  font-family: var(--font-family);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 650;
}

/* Simbolo stilizzato, sempre verde chiaro */

.keywords-ticker__list li::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  background-color: var(--color-accent);

  clip-path: polygon(
    50% 0%,
    62% 38%,
    100% 50%,
    62% 62%,
    50% 100%,
    38% 62%,
    0% 50%,
    38% 38%
  );
}

/* Il movimento viene attivato dal JavaScript */

.keywords-ticker[data-motion="enabled"] .keywords-ticker__track {
  animation: keywords-scroll 38s linear infinite;
}

@keyframes keywords-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}



/* Versione statica se le animazioni sono disattivate */

.keywords-ticker:not([data-motion="enabled"]) .keywords-ticker__track {
  width: 100%;
}

.keywords-ticker:not([data-motion="enabled"]) .keywords-ticker__list {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 0;
  padding-inline: 1rem;
}

.keywords-ticker:not([data-motion="enabled"])
  .keywords-ticker__list[aria-hidden="true"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .keywords-ticker .keywords-ticker__track {
    animation: none;
    transform: none;
  }
}

/* Contenuti della pagina Chi siamo */
.about-intro {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}
.about-intro h2 {
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.about-intro p {
  max-width: 70ch;
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.8;
}
/* CHI SIAMO — foto iniziale con lo stesso parallasse */

.page-about .hero::before {
  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 55%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("immagini/chi-siamo-hero.webp");

  background-position: center 55%;
}

/* Titolo principale e seconda riga più leggera */

.page-about .hero__title {
  max-width: 24ch;
  font-size: clamp(2.4rem, 5.5vw, 4.75rem);
  color: var(--color-white);
  font-weight: 800;
}

.hero__title-second {
  display: block;
  margin-top: 0.2em;
  font-size: 0.85em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.035em;
}

/* Testo di presentazione sopra alla foto */

.hero__subtitle {
  max-width: 60ch;
  color: var(--color-white);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Sezione della storia */

.about-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Etichetta piccola con evidenziazione a pastello */

.about-intro .about-intro__label,
.about-values__label {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: 100%;
  margin: 0 0 1.5rem;
  padding: 0.3em 0.65em;

  color: var(--color-dark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.about-intro .about-intro__label::before,
.about-values__label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      128deg,
      transparent 0 3px,
      rgb(248 249 250 / 55%) 3px 4px,
      transparent 4px 7px,
      rgb(248 249 250 / 30%) 7px 9px
    ),
    repeating-linear-gradient(
      128deg,
      #dcebbd 0 12px,
      #c9e29b 12px 23px,
      #d5e8af 23px 33px,
      #e2efca 33px 36px
    );

  clip-path: polygon(
    0% 65%, 8% 10%, 14% 4%, 18% 60%,
    28% 12%, 34% 6%, 38% 63%,
    48% 14%, 54% 8%, 58% 64%,
    68% 17%, 74% 12%, 78% 66%,
    88% 24%, 94% 20%, 100% 51%,
    98% 80%, 88% 94%, 84% 59%,
    74% 94%, 68% 98%, 64% 55%,
    54% 94%, 48% 98%, 44% 53%,
    34% 94%, 28% 97%, 24% 50%,
    14% 92%, 8% 96%, 5% 62%
  );

  transform: rotate(-2deg);
  opacity: 0.85;
}

/* Titolo della storia */

.about-intro .about-intro__title {
  max-width: 24ch;
  margin-bottom: 2rem;

  color: var(--color-dark);
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* Paragrafi */

.about-intro__text {
  max-width: 75ch;
}

.about-intro__text p {
  max-width: none;
  margin-top: 0;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.85;
}

.about-intro__text p + p {
  margin-top: 1.5rem;
}

/* Foto finale completa, senza tagli */

.about-intro__figure {
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
}

.about-intro__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  box-shadow: 0 12px 32px rgb(10 26 18 / 10%);
}
.section-lines::before {
  z-index: 0;
  width: 33.333%;
  opacity: 0.22;
  pointer-events: none;
}

.section-lines > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 48rem) {
  .section-lines::before {
    opacity: 0.12;
  }
}
/* Riquadro verde scuro sotto la foto della storia */

.about-mission {
  color: var(--color-white);
}

/* Riutilizza lo sfondo a pastello di "La nostra storia" */

.about-intro .about-intro__label {
  margin: 0 auto 1.5rem;
  color: var(--color-dark);
  text-align: center;
}

.about-mission__title {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--color-white);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-align: center;
}

/* Tre card affiancate */

.about-mission__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Mantiene forma e movimento delle card della homepage */

.about-mission .benefit-card {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgb(220 226 220 / 18%);
  border-radius: 1.25rem;
  background-color: #172d23;

  box-shadow:
    0 -2px 6px rgb(0 0 0 / 8%),
    0 5px 14px rgb(0 0 0 / 12%);
}

/* Lampadine minimal: linee verdi su grigio chiarissimo */

.about-mission .benefit-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.4rem;
  background-color: #f1f3f1;
  color: var(--color-dark);
}

.about-mission .benefit-card__title {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.3;
}

.about-mission .benefit-card__description {
  margin: 0;
  color: #c5cec8;
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Ombra più profonda quando la card si solleva */

@media (hover: hover) and (pointer: fine) {
  .about-mission .benefit-card:hover {
    box-shadow:
      0 -2px 8px rgb(0 0 0 / 8%),
      0 20px 36px rgb(0 0 0 / 30%);
  }
}

/* Su tablet e telefono le card si dispongono in verticale */

@media (max-width: 64rem) {
  .about-mission__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Foto della storia più piccola e centrata */

.about-intro__figure {
  max-width: 850px;
  margin-inline: auto;
}

.about-intro .about-intro__caption {
  margin-top: 1rem;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
}

/* Fascia verde scuro a tutta larghezza */

.about-mission {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  margin: 0;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-radius: 0;
  background-color: var(--color-dark);
}

.about-mission__container {
  position: relative;
  z-index: 1;
}

/* Etichetta come il badge della foto iniziale */

.about-mission__badge {
  display: table;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0.65rem 1.15rem;

  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-dark);

  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
}

/* Titoli delle card nello stesso verde lime della navbar */

.about-mission .benefit-card__title {
  color: var(--color-accent);
}
/* Linee verdi nella fascia a tutta larghezza */

.about-mission::before {
  width: 33.333%;
  opacity: 0.3;
}

@media (max-width: 48rem) {
  .about-mission::before {
    opacity: 0.18;
  }
}
.about-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.about-intro__layout .about-intro__text {
  min-width: 0;
  max-width: none;
}

.about-intro__layout .about-intro__figure {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}

.about-intro__layout .about-intro__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 48rem) {
  .about-intro__layout {
    grid-template-columns: 1fr;
  }

  .about-intro__layout .about-intro__figure {
    max-width: 36rem;
    margin-inline: auto;
  }
}
/* Missione e valori: banda a tutta larghezza */
.about-values {
  width: 100%;
  margin: 0;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background-color: #edf4e5;
  color: var(--color-dark);
}

/* Etichetta piccola con lo zig zag condiviso */
.about-values .about-values__label {
  margin: 0 auto 1.25rem;
  text-align: center;
}

/* Titolo principale centrato */
.about-values__title {
  max-width: 26ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: var(--color-dark);
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

/* Mantiene lo stile delle card della Home */
.about-values .why-us__grid {
  margin: 0;
}
/* Testi della prima schermata: apertura da un taglio */
.hero__cut {
  display: block;
  overflow: hidden;
  padding-block: 0.08em;
}

.hero__cut-text {
  display: block;
}

.hero[data-entry="menu"] .hero__cut-text {
  animation: hero-cut-reveal 900ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero[data-entry="menu"] [data-entry-order="1"] {
  animation-delay: 80ms;
}

.hero[data-entry="menu"] [data-entry-order="2"] {
  animation-delay: 180ms;
}

.hero[data-entry="menu"] [data-entry-order="3"] {
  animation-delay: 300ms;
}

.hero[data-entry="menu"] [data-entry-order="4"] {
  animation-delay: 420ms;
}

@keyframes hero-cut-reveal {
  from {
    transform: translateY(115%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Rispetta la preferenza di riduzione delle animazioni */
@media (prefers-reduced-motion: reduce) {
  .hero[data-entry="menu"] .hero__cut-text {
    animation: none;
    transform: none;
    opacity: 1;
  }
}
/* Prima schermata della pagina Progetti */
.page-projects .hero::before {
  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 50%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("immagini/progetti-uffici.webp");

  background-position: center;
  background-size: cover;
}

/* Galleria */
.projects {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}

.projects__title {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  color: var(--color-dark);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Card */
.project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  background-color: var(--color-white);
  box-shadow: 0 3px 10px rgb(10 26 18 / 8%);
}

/* Il contenitore ritaglia la foto durante lo zoom */
.project-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-dark);
}

.project-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);

  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Etichetta in alto a sinistra */
.project-card__category {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  max-width: calc(100% - 2.2rem);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background-color: rgb(10 26 18 / 85%);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Etichetta in basso a destra */
.project-card__example {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background-color: rgb(248 249 250 / 95%);
  color: #52634d;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Contenuto */
.project-card__body {
  padding: clamp(1.25rem, 2vw, 1.8rem);
}

.project-card__title {
  margin: 0 0 0.65rem;
  color: var(--color-dark);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 800;
  line-height: 1.3;
}

.project-card__detail {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  color: #52634d;
  font-size: 0.75rem;
  line-height: 1.5;
}

.project-card__location {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-card__description {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.8;
}

.projects__note {
  max-width: 85ch;
  margin: 2.5rem 0 0;
  color: #52634d;
  font-size: 0.85rem;
  line-height: 1.7;
}

/* Zoom della foto, senza modificare le dimensioni della card */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-card__image {
    transform: scale(1.07);
  }
}

/* Tablet */
@media (max-width: 64rem) {
  .projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 48rem) {
  .projects__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card {
    border-radius: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card__image {
    transition: none;
  }

  .project-card:hover .project-card__image {
    transform: none;
  }
}
/* Icone dei contatti */
.footer-contact__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact__icon {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Contatti copiabili */
.footer-copy {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color 200ms ease;
}

.footer-copy:hover,
.footer-copy:focus-visible {
  color: var(--color-accent);
}

.footer-copy:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Indicazione sopra il contatto */
.footer-copy__hint {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  width: max-content;
  padding: 0.4rem 0.65rem;
  border-radius: 0.5rem;
  background: var(--color-accent);
  color: var(--color-dark);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;

  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.footer-copy:hover .footer-copy__hint,
.footer-copy:focus-visible .footer-copy__hint,
.footer-copy[data-feedback] .footer-copy__hint {
  opacity: 1;
  transform: translateY(0);
}

/* Messaggio accessibile per i lettori di schermo */
.footer-copy__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Supporto alla copia quando Clipboard API non è disponibile */
.footer-copy__helper {
  position: fixed;
  top: 0;
  left: -9999px;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-copy,
  .footer-copy__hint {
    transition: none;
  }
}
/* Hero Contatti: forme geometriche e riflessi del brand */
.page-contact .hero::before {
  background-color: var(--color-dark);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' fill='none'%3E%3Cg stroke='%23b5e352' stroke-width='2' opacity='.28'%3E%3Cpath d='M-100 850 500 250 950 700 1550 100'/%3E%3Cpath d='M-60 890 500 330 950 780 1590 140'/%3E%3Cpath d='M800 1100 300 600 900 0'/%3E%3Cpath d='M880 1100 380 600 980 0'/%3E%3Cpath d='M1150 200 1450 500 1150 800 850 500Z'/%3E%3Cpath d='M1150 270 1380 500 1150 730 920 500Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(
      ellipse at 75% 30%,
      rgb(181 227 82 / 17%),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 15% 80%,
      rgb(128 159 66 / 20%),
      transparent 50%
    );

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-contact .hero__title {
  max-width: 18ch;
}

/* Modulo e colonna aziendale */
.contact-page {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}

.contact-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.contact-form-panel {
  min-width: 0;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  background: var(--color-white);
  box-shadow: 0 10px 30px rgb(10 26 18 / 7%);
}

.contact-form-panel__title {
  margin: 0 0 0.75rem;
  color: var(--color-dark);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

.contact-form-panel__intro {
  margin: 0 0 2rem;
  color: var(--color-text);
  line-height: 1.7;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.contact-form__field label {
  color: #52634d;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  min-width: 0;
  padding: 1rem 1.15rem;
  border: 1px solid #d4dcd5;
  border-radius: 1.15rem;
  background: var(--color-white);
  color: var(--color-dark);
  font: inherit;
  line-height: 1.5;
}

.contact-form__field textarea {
  min-height: 10rem;
  resize: vertical;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: #7a857f;
  opacity: 1;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: #809f42;
  outline: 2px solid rgb(128 159 66 / 25%);
  outline-offset: 2px;
}

/* Informativa privacy */
.contact-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1.75rem;
  color: var(--color-text);
  font-size: 0.85rem;
  line-height: 1.6;
}

.contact-form__privacy input {
  flex: 0 0 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: #809f42;
}

.contact-form__privacy a {
  color: var(--color-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-form__note {
  margin: 1rem 0 1.5rem;
  color: #52634d;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Pulsante */
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-dark);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 6px 16px rgb(128 159 66 / 20%);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.contact-form__submit svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-form__submit:focus-visible,
.contact-directions__link:focus-visible {
  outline: 2px solid #809f42;
  outline-offset: 5px;
}

.contact-form__status {
  margin: 1rem 0 0;
  color: var(--color-dark);
  font-size: 0.85rem;
  line-height: 1.6;
}

.contact-form__status:empty {
  display: none;
}

/* Dati aziendali */
.contact-page__sidebar {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.company-details {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 2rem;
  background: var(--color-dark);
  color: var(--color-white);
}

.company-details__title {
  margin: 0 0 2rem;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.company-details__address {
  font-style: normal;
}

.company-details__address p,
.company-details__hours {
  margin: 0 0 1.25rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.company-details__hours {
  margin-bottom: 0;
}

.company-details__label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.company-details a {
  color: var(--color-white);
  text-decoration: none;
}

.company-details a:hover {
  color: var(--color-accent);
}

/* Indicazioni per la sede */
.contact-directions {
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  background: #edf4e5;
}

.contact-directions h3 {
  margin: 0 0 0.75rem;
  color: var(--color-dark);
  font-size: 1.25rem;
}

.contact-directions p {
  margin: 0 0 1.25rem;
  color: var(--color-text);
  line-height: 1.7;
}

.contact-directions__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-dark);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgb(128 159 66 / 30%);
  }
}

@media (max-width: 64rem) {
  .contact-page__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .contact-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form-panel,
  .company-details {
    border-radius: 1.5rem;
  }

  .contact-form__submit {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form__submit {
    transition: none;
  }

  .contact-form__submit:hover {
    transform: none;
  }
}
/* Titoli della prima schermata Servizi */
.page-services .hero__title {
  max-width: 25ch;
  font-size: clamp(2.2rem, 5.5vw, 4.75rem);
  font-weight: 800;
  text-transform: uppercase;
}

.page-services .hero__title-second {
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
}

/* Elenco dei servizi */
.services-page {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}

.services-page__list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Card orizzontale */
.service-preview {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  background-color: var(--color-white);

  box-shadow:
    0 3px 8px rgb(10 26 18 / 4%),
    0 10px 20px rgb(10 26 18 / 6%);

  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}

/* Mantiene la comparsa allo scorrimento insieme all’hover */
.service-preview[data-reveal] {
  transition:
    opacity 650ms ease,
    translate 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}

/* Seconda e quarta card: foto a destra */
.service-preview:nth-child(even) {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.service-preview:nth-child(even) .service-preview__media {
  grid-column: 2;
  grid-row: 1;
}

.service-preview:nth-child(even) .service-preview__content {
  grid-column: 1;
  grid-row: 1;
}

/* Foto nitida, senza sfumatura verde */
.service-preview__media {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  background-color: #edf4e5;
}

.service-preview__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);

  transition:
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Testo */
.service-preview__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  min-width: 0;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
}

.service-preview__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Icone stilizzate */
.service-preview__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid #d4e3c4;
  border-radius: 50%;
  background-color: #edf4e5;
  color: #234d32;
}

.service-preview__icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-preview__badge {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background-color: #809f42;
  color: var(--color-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-preview__title {
  margin: 0;
  color: var(--color-dark);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
}

.service-preview__description {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.8;
}

.service-preview__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  color: #234d32;
  font-weight: 750;
  line-height: 1.5;
  text-decoration: none;
}

.service-preview__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.service-preview__link:focus-visible {
  outline: 2px solid #809f42;
  outline-offset: 5px;
}

/* Specifica il servizio ai lettori di schermo */
.service-preview__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Doppio effetto: card in avanti e zoom della foto */
@media (hover: hover) and (pointer: fine) {
  .service-preview:hover {
    transform: translateY(-6px) scale(1.012);

    box-shadow:
      0 5px 12px rgb(10 26 18 / 5%),
      0 22px 40px rgb(10 26 18 / 15%);
  }

  .service-preview:hover .service-preview__image {
    transform: scale(1.07);
  }
}

/* Mobile: foto sopra, testo sotto */
@media (max-width: 48rem) {
  .service-preview,
  .service-preview:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 1.5rem;
  }

  .service-preview:nth-child(even) .service-preview__media,
  .service-preview:nth-child(even) .service-preview__content {
    grid-column: auto;
    grid-row: auto;
  }

  .service-preview__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .service-preview__content {
    padding: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-preview,
  .service-preview[data-reveal],
  .service-preview__image {
    transition: none;
  }

  .service-preview:hover,
  .service-preview:hover .service-preview__image {
    transform: none;
  }
}
/* Riquadro del metodo condiviso */
.services-method {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid #d4e3c4;
  border-radius: 1.5rem;
  background-color: #edf4e5;
}

.services-method__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  color: #668333;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.4;
}

.services-method__icon {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services-method__text {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.8;
}

.services-method__link {
  color: #234d32;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.services-method__link:hover {
  color: var(--color-dark);
}

.services-method__link:focus-visible {
  outline: 2px solid #809f42;
  outline-offset: 4px;
  border-radius: 3px;
}
/* ILLUMINOTECNICA — introduzione al servizio */

.lighting-intro {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}

.lighting-intro__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}

.lighting-intro__text,
.lighting-intro__cards,
.lighting-card__content {
  min-width: 0;
}

.lighting-intro__title {
  margin-bottom: 1.5rem;
  color: var(--color-dark);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.lighting-intro__description {
  max-width: 60ch;
  color: var(--color-text);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.85;
}

.lighting-intro__cards {
  display: grid;
  gap: 1.5rem;
}

/* Riutilizza bordi, ombre e movimento delle card della Home */

.lighting-intro .lighting-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;

  height: auto;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 1.5rem;
}

.lighting-intro .lighting-card__icon {
  margin: 0;
  background-color: #edf4e5;
  color: var(--color-accent);
}

.lighting-card__content .benefit-card__title {
  margin-bottom: 0.65rem;
}

.lighting-card__content .benefit-card__description {
  font-size: 1rem;
  line-height: 1.75;
}

/* Tablet e smartphone */

@media (max-width: 56rem) {
  .lighting-intro__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lighting-intro__description {
    max-width: none;
  }
}

@media (max-width: 30rem) {
  .lighting-intro .lighting-card {
    gap: 0.75rem;
    padding: 1.15rem;
  }

  .lighting-card__content .benefit-card__description {
    font-size: 0.95rem;
  }
}
.page-lighting .hero::before {
  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 55%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("immagini/illuminotecnica-hero.webp");
}
/* SERVIZI — tutta la card cliccabile */

.service-preview {
  position: relative;
  cursor: pointer;
}

.service-preview__link {
  position: static;
}

/* Estende l’area del link all’intero riquadro */
.service-preview__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 2rem;
}

/* Evidenzia la card quando si naviga con la tastiera */
.service-preview:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}
/* ILLUMINOTECNICA — fascia Focus uffici */

.lighting-office {
  background-color: #28513d;
  color: var(--color-white);
}

/* Etichetta con lampadina minimal */

.lighting-office__label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.5rem;

  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lighting-office__label svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Testo introduttivo */

.lighting-office .lighting-intro__title {
  color: var(--color-white);
}

.lighting-office .lighting-intro__description {
  color: #e0e9e2;
}

/* Riquadri leggermente più chiari della fascia */

.lighting-office .lighting-card {
  border: 1px solid rgb(255 255 255 / 15%);
  background-color: #335f48;

  box-shadow:
    0 -2px 6px rgb(0 0 0 / 4%),
    0 5px 14px rgb(0 0 0 / 10%);
}

.lighting-office .lighting-card__icon {
  border: 1px solid rgb(181 227 82 / 25%);
  border-radius: 50%;
  background-color: rgb(181 227 82 / 12%);
  color: var(--color-accent);
}

.lighting-office .benefit-card__title {
  color: var(--color-white);
}

.lighting-office .benefit-card__description {
  color: #e0e9e2;
}

/* Collegamento ai contatti */

.lighting-office__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  margin-top: 2rem;
  padding: 0.95rem 1.6rem;

  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-dark);

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;

  transition:
    transform 250ms ease,
    box-shadow 250ms ease;
}

.lighting-office__button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 5px;
}

/* Sollevamento dei riquadri e del bottone */

@media (hover: hover) and (pointer: fine) {
  .lighting-office .lighting-card:hover {
    box-shadow:
      0 -2px 8px rgb(255 255 255 / 5%),
      0 18px 32px rgb(0 0 0 / 22%);
  }

  .lighting-office__button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgb(0 0 0 / 20%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lighting-office__button {
    transition: none;
  }

  .lighting-office__button:hover {
    transform: none;
  }
}
/* ILLUMINOTECNICA — il metodo in sei passi */

.lighting-method {
  padding-block: var(--section-spacing);
  background-color: var(--color-dark);
  color: var(--color-white);
  scroll-margin-top: 7rem;
}

.lighting-method__heading {
  max-width: 850px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.lighting-method__label {
  margin-bottom: 1.5rem;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lighting-method__title {
  color: var(--color-white);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

/* Tre colonne su desktop */

.lighting-method__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card statiche: nessuno zoom o sollevamento */

.lighting-method .method-step {
  display: block;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);

  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.5rem;
  background-color: #172d23;
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);

  transform: none;

  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease;
}

/* Conserva la comparsa durante lo scorrimento */

.lighting-method .method-step[data-reveal] {
  transition:
    opacity 650ms ease,
    translate 650ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease;
}

/* Numero a sinistra, lampadina in alto a destra */

.method-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.method-step__number {
  color: #86a755;
  font-size: clamp(2.8rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;

  transition:
    color 350ms ease,
    text-shadow 350ms ease;
}

.method-step__bulb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #dfe5dc;
  color: #111713;

  transition:
    color 350ms ease,
    background-color 350ms ease,
    box-shadow 350ms ease;
}

.method-step__bulb svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: filter 350ms ease;
}

.method-step__title {
  margin-bottom: 0.85rem;
  color: var(--color-white);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.method-step__description {
  color: #d3ded5;
  font-size: 1rem;
  line-height: 1.75;
}

/* Accensione al passaggio del mouse */

@media (hover: hover) and (pointer: fine) {
  .lighting-method .method-step:hover {
    transform: none;
    background-color: #1c3528;
    border-color: rgb(181 227 82 / 55%);

    box-shadow:
      0 0 24px rgb(181 227 82 / 10%),
      inset 0 0 20px rgb(181 227 82 / 4%);
  }

  .method-step:hover .method-step__number {
    color: var(--color-accent);

    text-shadow:
      0 0 12px rgb(181 227 82 / 55%),
      0 0 28px rgb(181 227 82 / 25%);
  }

  .method-step:hover .method-step__bulb {
    color: #ffe477;
    background-color: #38452b;

    box-shadow:
      0 0 16px rgb(255 228 119 / 25%);
  }

  .method-step:hover .method-step__bulb svg {
    filter: drop-shadow(0 0 4px rgb(255 228 119 / 60%));
  }
}

/* Tablet */

@media (max-width: 64rem) {
  .lighting-method__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Smartphone */

@media (max-width: 40rem) {
  .lighting-method__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lighting-method .method-step,
  .lighting-method .method-step[data-reveal],
  .method-step__number,
  .method-step__bulb,
  .method-step__bulb svg {
    transition: none;
  }
}
/* ILLUMINOTECNICA — per chi lavoriamo */

.lighting-audiences {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}

.lighting-audiences__heading {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.lighting-audiences__title {
  color: var(--color-dark);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

/* Tre colonne e due righe su desktop */

.lighting-audiences__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Riquadri statici verde chiarissimo */

.audience-card {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2rem);

  border: 1px solid #e2e8dc;
  border-radius: 1.5rem;
  background-color: #edf4e5;
}

.audience-card__title {
  margin-bottom: 0.85rem;
  color: var(--color-dark);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.audience-card__description {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.75;
}

/* Ultimo riquadro dedicato al preventivo */

.audience-card--contact {
  border-color: var(--color-dark);
  background-color: var(--color-dark);
}

.audience-card--contact .audience-card__title {
  color: var(--color-white);
}

.audience-card--contact .audience-card__description {
  color: #d3ded5;
}

.audience-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  margin-top: 1.5rem;
  padding: 0.85rem 1.4rem;

  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-dark);

  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.audience-card__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.audience-card__button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 5px;
}

/* Sezione sempre visibile e priva di animazioni */

.lighting-audiences,
.lighting-audiences [data-reveal],
.lighting-audiences .audience-card {
  opacity: 1;
  translate: none;
  transform: none;
  animation: none;
  transition: none;
}

/* Tablet */

@media (max-width: 64rem) {
  .lighting-audiences__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Smartphone */

@media (max-width: 40rem) {
  .lighting-audiences__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ILLUMINOTECNICA — confronto prima e dopo */

.lighting-comparison {
  padding-block: var(--section-spacing);
  background-color: #edf4e5;
}

.lighting-comparison__heading {
  max-width: 1000px;
  margin: 0 auto 2.5rem;
   text-align: center;
}

.lighting-comparison__title {
  color: var(--color-dark);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.lighting-comparison__heading .about-values__label {
  margin-inline: auto;
}

.lighting-comparison__figure {
  max-width: 850px;
  margin: 0 auto;
}

/* Le due foto occupano esattamente lo stesso spazio */

.image-comparison {
  --comparison-position: 50%;

  position: relative;
  isolation: isolate;
  aspect-ratio: 2048 / 1143;
  overflow: hidden;

  border: 1px solid rgb(10 26 18 / 15%);
  border-radius: 1.5rem;
  background-color: var(--color-dark);
  box-shadow: 0 16px 40px rgb(10 26 18 / 15%);
}

.image-comparison__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  pointer-events: none;
  user-select: none;
}

/* Taglia il prima senza ridimensionare la fotografia */

.image-comparison__image--before {
  clip-path: inset(
    0 calc(100% - var(--comparison-position)) 0 0
  );
}

/* Etichette */

.image-comparison__label {
  position: absolute;
  top: 1rem;
  z-index: 2;

  max-width: calc(50% - 1.5rem);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;

  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  pointer-events: none;
}

.image-comparison__label--before {
  left: 1rem;
  background-color: var(--color-dark);
  color: var(--color-white);
}

.image-comparison__label--after {
  right: 1rem;
  background-color: var(--color-accent);
  color: var(--color-dark);
}

/* Linea verticale di separazione */

.image-comparison__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--comparison-position);
  z-index: 2;

  width: 2px;
  background-color: var(--color-white);
  box-shadow: 0 0 8px rgb(0 0 0 / 30%);
  transform: translateX(-50%);

  pointer-events: none;
}

/* Cursore: il pallino resta al centro verticale della foto */

.image-comparison__range {
  position: absolute;
  top: 50%;
  left: -24px;
  z-index: 3;

  width: calc(100% + 48px);
  height: 48px;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;

  -webkit-appearance: none;
  appearance: none;
  direction: ltr;
  transform: translateY(-50%);
  touch-action: pan-y;
}

/* Chrome, Edge e Safari */

.image-comparison__range::-webkit-slider-runnable-track {
  height: 48px;
  border: 0;
  background: transparent;
}

.image-comparison__range::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 48px;
  height: 48px;

  border: 2px solid var(--color-white);
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%);

  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
}

/* Firefox */

.image-comparison__range::-moz-range-track {
  height: 48px;
  border: 0;
  background: transparent;
}

.image-comparison__range::-moz-range-progress {
  background: transparent;
}

.image-comparison__range::-moz-range-thumb {
  box-sizing: border-box;
  width: 48px;
  height: 48px;

  border: 2px solid var(--color-white);
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%);

  cursor: ew-resize;
}

/* Frecce decorative dentro il pallino */

.image-comparison__arrows {
  position: absolute;
  top: 50%;
  left: var(--comparison-position);
  z-index: 4;

  color: var(--color-dark);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Evidenzia il confronto quando si usa la tastiera */

.image-comparison__range:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Didascalia e testi sotto l’immagine */

.lighting-comparison__caption {
  margin-top: 1rem;
  color: var(--color-text);
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
}

.lighting-comparison__benefits {
  display: grid;
  gap: 1rem;

  max-width: 850px;
  margin: 2rem auto 0;
  padding: 0;
  list-style: none;
}

.lighting-comparison__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;

  padding: 1.1rem 1.25rem;
  border: 1px solid #d5e2c9;
  border-radius: 1rem;
  background-color: #f8fbf5;
  box-shadow: 0 3px 10px rgb(10 26 18 / 5%);

  color: var(--color-dark);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 600;
  line-height: 1.65;
}

.lighting-comparison__benefits li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-dark);

  font-size: 1.15rem;
  font-weight: 800;
}

/* Smartphone */

@media (max-width: 40rem) {
  .image-comparison {
    border-radius: 1rem;
  }

  .image-comparison__label {
    top: 0.6rem;
    max-width: calc(50% - 1rem);
    padding: 0.35rem 0.5rem;
    font-size: 0.6rem;
  }

  .image-comparison__label--before {
    left: 0.6rem;
  }

  .image-comparison__label--after {
    right: 0.6rem;
  }
}
/* ILLUMINOTECNICA — calcolatore del risparmio */

.led-calculator-section {
  padding-block: var(--section-spacing);
  background-color: var(--color-light);
}

.led-calculator {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 2rem;
  color: var(--color-white);

  background:
    radial-gradient(
      ellipse at 100% 0,
      rgb(181 227 82 / 10%),
      transparent 40%
    ),
    var(--color-dark);
}

.led-calculator__heading {
  margin-bottom: 2.5rem;
}

.led-calculator__label {
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.led-calculator__heading h2 {
  margin-bottom: 0.85rem;
  color: var(--color-white);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.led-calculator__intro {
  color: #d3ded5;
  line-height: 1.7;
}

.led-calculator__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2rem, 4vw, 3rem);
}

.led-calculator__form {
  display: grid;
  gap: 1.75rem;
  min-width: 0;
}

.led-calculator__field {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.led-calculator__field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.led-calculator__field label {
  color: var(--color-white);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.led-calculator__value {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.led-calculator__value span {
  color: #d3ded5;
  font-size: 0.8rem;
}

/* Numeri modificabili anche direttamente */

.led-calculator input[type="number"] {
  box-sizing: border-box;
  width: 6rem;
  padding: 0.35rem 0.5rem;

  border: 1px solid rgb(181 227 82 / 30%);
  border-radius: 0.5rem;
  background-color: #172d23;
  color: var(--color-accent);

  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: right;
  color-scheme: dark;
}

/* Cursori */

.led-calculator input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  accent-color: var(--color-accent);

  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.led-calculator input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background-color: #69863c;
}

.led-calculator input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;

  border: 2px solid var(--color-dark);
  border-radius: 50%;
  background-color: var(--color-accent);

  -webkit-appearance: none;
  appearance: none;
}

.led-calculator input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background-color: #69863c;
}

.led-calculator input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;

  border: 2px solid var(--color-dark);
  border-radius: 50%;
  background-color: var(--color-accent);
}

.led-calculator input:focus-visible,
.led-calculator summary:focus-visible,
.led-calculator__button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Impostazioni e messaggi */

.led-calculator__settings {
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 15%);
  color: #d3ded5;
  font-size: 0.85rem;
  line-height: 1.65;
}

.led-calculator__settings summary {
  color: var(--color-accent);
  cursor: pointer;
}

.led-calculator__settings .led-calculator__field {
  margin-block: 1rem;
}

.led-calculator__feedback {
  color: var(--color-accent);
  font-size: 0.85rem;
  line-height: 1.6;
}

.led-calculator__feedback:empty {
  display: none;
}

/* Riquadro dei risultati */

.led-calculator__result {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);

  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 1.5rem;
  background-color: #172d23;
}

.led-calculator__result-label {
  margin-bottom: 0.75rem;
  color: #d3ded5;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.led-calculator__saving {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;

  color: var(--color-accent);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.led-calculator__saving span {
  color: #d3ded5;
  font-size: 1rem;
  font-weight: 500;
}

.led-calculator__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.led-calculator__stat {
  min-width: 0;
  padding: 1rem 0.65rem;
  border-radius: 1rem;
  background-color: #223a2d;
  text-align: center;
}

.led-calculator__stat output {
  display: block;
  margin-bottom: 0.4rem;

  color: var(--color-white);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.led-calculator__stat span {
  display: block;
  color: #d3ded5;
  font-size: 0.7rem;
  line-height: 1.5;
}

.led-calculator__consumption {
  margin-top: 1.25rem;
  color: #d3ded5;
  font-size: 0.85rem;
  line-height: 1.7;
}

.led-calculator__button {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 1.5rem;
  padding: 1rem 1.25rem;

  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-dark);

  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.led-calculator__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.led-calculator__note {
  margin-top: 1.25rem;
  color: #c2cec4;
  font-size: 0.75rem;
  line-height: 1.7;
}

@media (max-width: 60rem) {
  .led-calculator__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 30rem) {
  .led-calculator {
    border-radius: 1.25rem;
  }

  .led-calculator__stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Collegamento Instagram nel footer */

.footer-social {
  color: inherit;
  font: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-social:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-social:focus-visible {
  color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}
/* IMPIANTI ELETTRICI — immagine principale */

.page-electrical .hero::before {
  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 55%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("immagini/impianti-elettrici.webp");
}
/* IMPIANTI ELETTRICI — riquadro conformità */

.electrical-compliance {
  padding: 0 0 var(--section-spacing);
  background-color: var(--color-light);
}

.electrical-compliance__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);

  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 2rem;
  background-color: #204b32;
  color: var(--color-white);
}

.electrical-compliance__heading,
.electrical-compliance__content {
  min-width: 0;
}

.electrical-compliance__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  margin-bottom: 1.5rem;
  padding: 0.5rem 0.85rem;

  border: 1px solid rgb(181 227 82 / 25%);
  border-radius: 999px;
  background-color: rgb(181 227 82 / 12%);
  color: var(--color-accent);

  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.electrical-compliance__badge svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.electrical-compliance__heading h2 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.electrical-compliance__content p {
  color: #e0e9e2;
  font-size: 1.05rem;
  line-height: 1.8;
}

.electrical-compliance__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  margin-top: 1.75rem;
  padding: 0.95rem 1.5rem;

  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-dark);

  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.electrical-compliance__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.electrical-compliance__button:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 5px;
}

@media (max-width: 56rem) {
  .electrical-compliance__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ADEGUAMENTI — immagine principale */

.page-upgrades .hero::before {
  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 55%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("immagini/adeguamenti-impianti.webp");
}

/* Dimensione adatta al titolo più lungo */

.page-upgrades .hero__title {
  font-size: clamp(2rem, 5vw, 4.5rem);
}
/* FOTOVOLTAICO — immagine principale */

.page-solar .hero::before {
  background-image:
    linear-gradient(
      110deg,
      rgb(10 26 18 / 88%) 0%,
      rgb(10 26 18 / 70%) 55%,
      rgb(10 26 18 / 48%) 100%
    ),
    url("immagini/fotovoltaico.webp");
}
/* FOTOVOLTAICO — un impianto pensato per te */

.solar-solutions {
  padding-block: var(--section-spacing);
  background-color: #edf4e5;
}

.solar-solutions__heading {
  max-width: 800px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.solar-solutions__heading .about-values__label {
  margin-inline: auto;
}

.solar-solutions__title {
  color: var(--color-dark);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.solar-solutions__intro {
  max-width: 65ch;
  margin: 1.25rem auto 0;

  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Quattro card in una griglia 2 × 2 */

.solar-solutions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;

  max-width: 1050px;
  margin-inline: auto;
}

.solar-solutions .benefit-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: 1.25rem;
  background-color: var(--color-white);
}

.solar-solutions .benefit-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.35rem;

  background-color: #f1f3f1;
  color: #234d32;
}

.solar-solutions .benefit-card__title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.solar-solutions .benefit-card__description {
  font-size: 1rem;
  line-height: 1.75;
}

@media (max-width: 48rem) {
  .solar-solutions__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Informative Cookie e Privacy */

.page-legal .hero {
  height: auto;
  min-height: 28rem;
  padding-block: calc(var(--navbar-height) + 3rem) 4rem;
}

.page-legal .hero__title {
  max-width: 22ch;
  font-size: clamp(2.3rem, 6vw, 4.5rem);
}

.page-legal .hero__subtitle {
  max-width: 60ch;
}

.legal-page {
  padding-block: clamp(3rem, 6vw, 5rem);
  background-color: var(--color-light);
}

.legal-page__container {
  max-width: 940px;
  overflow-wrap: anywhere;
}

.legal-page__updated {
  margin-bottom: 1.25rem;
  color: #536558;
  font-size: 0.9rem;
}

.legal-page__notice {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #bbcba6;
  border-radius: var(--radius-small);
  background-color: #edf4e2;
  color: var(--color-dark);
}

.legal-page__notice strong {
  display: block;
  margin-bottom: 0.35rem;
}

.legal-page h2 {
  margin-bottom: 1rem;
  color: var(--color-dark);
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  letter-spacing: -0.025em;
}

.legal-page h3 {
  margin-bottom: 1rem;
  color: var(--color-dark);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.legal-page h4 {
  margin-block: 1.5rem 0.65rem;
  color: var(--color-dark);
  font-size: 1.05rem;
}

.legal-page p + p {
  margin-top: 1rem;
}

.legal-page a {
  color: #244f2f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.legal-page a:hover {
  color: #436323;
  text-decoration-thickness: 2px;
}

.legal-page a:focus-visible {
  outline-color: #244f2f;
  outline-offset: 3px;
}

.legal-page__index {
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-white);
}

.legal-page__index ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 2rem;
  margin: 0;
  padding-left: 1.4rem;
}

.legal-page__block {
  padding-block: 2rem;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--navbar-height) + 1.5rem);
}

.legal-page__address {
  margin-bottom: 1rem;
  font-style: normal;
}

.legal-page__table-wrap {
  margin-block: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background-color: var(--color-white);
}

.legal-page__table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.legal-page__table caption {
  padding: 1rem;
  color: var(--color-dark);
  text-align: left;
  font-weight: 700;
}

.legal-page__table th,
.legal-page__table td {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}

.legal-page__table thead {
  background-color: #eaf1e5;
  color: var(--color-dark);
}

.legal-page__table th[scope="row"] {
  width: 26%;
  color: var(--color-dark);
  font-weight: 600;
}

@media (max-width: 40rem) {
  .legal-page__index ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-page__notice,
  .legal-page__index {
    padding: 1rem;
  }
}