/* Inner pages: /servizi, /settori, /lavori, /contatti, pagine legali, 404.
   Stessa tela e stesso sistema visivo della home: blu notte, bande chiare,
   hairline, tipografia display. Niente aloni, niente vetro, niente ombre morbide.
   Il movimento resta un miglioramento progressivo: senza JavaScript o con
   prefers-reduced-motion la pagina è completa. */

/* Font: solo subset latino (l'italiano usa U+0000-00FF). */
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYtz_0dZAGKJJ4t3HtoW4U.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: "Onest";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/onest/v11/gNMKW3F-SZuj7xmf-HY.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: "Gabarito Fallback"; src: local("Arial Black"), local("Arial-Black"), local("Arial Bold"); font-weight: 800 1000; size-adjust: 79.7%; ascent-override: 117.9%; descent-override: 32.6%; line-gap-override: 0%; }
@font-face { font-family: "Gabarito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 92.5%; ascent-override: 101.7%; descent-override: 28.1%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549; size-adjust: 106.2%; ascent-override: 91.4%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 101.9%; ascent-override: 95.2%; descent-override: 30.4%; line-gap-override: 0%; }

:root {
  --color-1: #101923;
  --color-2: #f7f8f6;
  --color-3: #315cdb;
  --color-4: #e9edf0;
  --color-5: #b7c0c9;
  --color-6: #52606b;
  --color-7: #25313c;
  --font-1: "Gabarito", "Gabarito Fallback", "Arial Black", Arial, sans-serif;
  --font-2: "Onest", "Onest Fallback", Arial, sans-serif;
  --radius-1: 8px;
  --radius-2: 999px;
  --radius-3: 4px;
  --shadow-1: 0 -18px 50px color-mix(in srgb, var(--color-1) 45%, transparent);
  --shadow-2: 0 2px 0 var(--color-3);
  --shadow-3: 0 0 0 2px var(--color-1);
  --space-1: clamp(16px, 3.4vw, 48px);
  --space-2: clamp(88px, 13vh, 176px);
  --max: 1320px;
  --ease-1: cubic-bezier(.2, .7, .2, 1);
  --ease-2: cubic-bezier(.7, 0, .2, 1);
  --line: color-mix(in srgb, var(--color-2) 15%, transparent);
  --line-paper: color-mix(in srgb, var(--color-1) 13%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background: var(--color-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
html.nav-open, html.nav-open body { overflow: hidden; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--color-1); color: var(--color-2); font-family: var(--font-2); font-size: 17px; line-height: 1.55; overflow-x: clip; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
code { font-family: var(--font-2); font-size: .92em; font-weight: 600; color: var(--color-2); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-3); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--space-1); top: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-2); background: var(--color-2); color: var(--color-1); font-size: 15px; font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.skip:focus-visible { transform: none; }

/* tipografia: la scala della home, valori identici */
.m-text { font-family: var(--font-2); font-size: 17px; font-weight: 400; line-height: 1.55; }
.m-text-2 { font-family: var(--font-1); font-size: min(40vw, calc((100vw - 2 * var(--space-1)) / (var(--len, 5) * 0.47))); font-weight: 800; line-height: 0.8; letter-spacing: -0.065em; }
.m-text-3 { font-family: var(--font-1); font-size: clamp(50px, 9.2vw, 150px); font-weight: 800; line-height: 0.88; letter-spacing: -0.055em; }
.m-text-4 { font-family: var(--font-1); font-size: clamp(30px, 3.9vw, 58px); font-weight: 700; line-height: 0.96; letter-spacing: -0.04em; }
.m-text-5 { font-family: var(--font-2); font-size: clamp(19px, 1.7vw, 25px); font-weight: 500; line-height: 1.28; letter-spacing: -0.015em; }
.m-text-6 { font-family: var(--font-2); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; }
.m-text-7 { font-family: var(--font-1); font-size: clamp(22px, 2.05vw, 30px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
.m-dot { display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.035em; border-radius: var(--radius-2); background: var(--color-3); vertical-align: baseline; }
.m-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--color-5); font-family: var(--font-2); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.m-eyebrow::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: var(--radius-2); background: var(--color-3); }

/* componenti: gli stessi atomi della home */
.m-btn, .m-btn-2 { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px; overflow: hidden; border: 0; border-radius: var(--radius-3); font-family: var(--font-2); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; }
.m-btn { background: var(--color-3); color: var(--color-2); }
.m-btn-2 { background: var(--color-2); color: var(--color-1); transition: color .35s; }
.m-btn__icon { display: inline-flex; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.m-btn::before, .m-btn-2::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: var(--radius-2); background: currentColor; }
.m-btn-2::before { background: var(--color-3); }
.cta .m-btn::before { background: #000 !important; background-color: #000 !important; }
.m-btn::after, .m-btn-2::after { content: ""; position: absolute; z-index: -1; left: 22px; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--radius-2); background: var(--color-1); transform: scale(0); transition: transform .5s var(--ease-2); }
@media (hover: hover) { .m-btn:hover::after { transform: scale(60); } .m-btn-2:hover { color: var(--color-2); } .m-btn-2:hover::after { transform: scale(60); } }
.m-link { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-2); font-size: clamp(17px, 1.45vw, 21px); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; text-decoration: none; }
.m-link__label { position: relative; padding-block: 3px; }
.m-link__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--radius-2); background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-2); }
.m-link__arrow { width: 0.8em; height: 0.8em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .45s var(--ease-2); }
@media (hover: hover) { .m-link:hover .m-link__label::after { transform: scaleX(1); } .m-link:hover .m-link__arrow { transform: translateX(4px); } }
.m-link-2 { position: relative; display: inline-block; padding-block: 4px; font-family: var(--font-2); font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; text-decoration: none; }
.m-link-2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: var(--radius-2); background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-2); }
@media (hover: hover) { .m-link-2:hover::after { transform: scaleX(1); } }
.m-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius: var(--radius-3); font-family: var(--font-2); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; }
.m-btn__label { position: relative; }
.m-icon { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 1.5px solid currentColor; border-radius: var(--radius-2); background: transparent; color: inherit; cursor: pointer; transition: color .35s; }
.m-icon::after { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: var(--radius-2); background: var(--color-3); transform: scale(0); transition: transform .45s var(--ease-2); }
.m-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (hover: hover) { .m-icon:hover { color: var(--color-2); } .m-icon:hover::after { transform: scale(1); } }
.m-field { display: block; width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 0; background: transparent; color: inherit; font-family: var(--font-2); font-size: 17px; font-weight: 400; line-height: 1.4; }
.m-field:focus-visible { outline: none; border-bottom-color: var(--color-3); box-shadow: var(--shadow-2); }
textarea.m-field { min-height: 112px; resize: vertical; }

/* struttura */
.shell { width: 100%; padding-inline: var(--space-1); }
.page { display: grid; padding-block: clamp(92px, 14svh, 152px) clamp(56px, 9vh, 110px); }
.page > .head { margin-top: clamp(22px, 3.4vh, 40px); }
.page > .sect { margin-top: var(--space-2); }
.page > .head + .sect { margin-top: clamp(48px, 8vh, 96px); }
.prose { display: grid; gap: 18px; max-width: 64ch; color: var(--color-5); }
.prose strong { color: var(--color-2); font-weight: 600; }
.prose h3 { margin-top: 14px; }
.prose ul { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: var(--radius-2); background: var(--color-3); }
.prose a { color: var(--color-2); text-underline-offset: 3px; }
.sect--paper .prose { color: var(--color-6); }
.sect--paper .prose strong, .sect--paper .prose a { color: var(--color-1); }

/* navigazione: la stessa barra della home, fissa e trasparente, con i suoi pill */
.nav { position: fixed; z-index: 40; inset: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px var(--space-1); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav__brand { display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 14px 0 10px; border-radius: var(--radius-3); background: var(--color-1); color: var(--color-2); font-family: var(--font-1); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; text-decoration: none; }
.nav__brand img { display: block; flex: none; width: 30px; height: 30px; }
.nav__links { margin-inline: auto; padding: 0 8px; border-radius: var(--radius-3); background: var(--color-1); color: var(--color-2); }
.nav__links ul { display: flex; }
.nav__cta { box-shadow: var(--shadow-3); }
.nav__links a { display: block; margin: 0 14px; padding-block: 14px; }
.nav__links a::after { bottom: 10px; }
.nav__lang { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-3); background: var(--color-1); color: var(--color-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-2) 26%, transparent); font-family: var(--font-2); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.nav__menu { display: none; margin-left: auto; }
.menu { position: fixed; z-index: 60; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 14px var(--space-1) 32px; background: var(--color-1); color: var(--color-2); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.menu__brand { display: block; margin-right: auto; }
.menu__brand img { display: block; width: 30px; height: 30px; }
.menu__lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--color-2) 22%, transparent); border-radius: var(--radius-3); color: var(--color-2); font-family: var(--font-2); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.menu__list { align-self: center; display: grid; gap: 6px; }
.menu__list a { font-family: var(--font-1); font-size: clamp(42px, 13vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; text-decoration: none; }
.menu__foot { color: var(--color-5); }
@media (hover: hover) { .nav__lang:hover { background: var(--color-3); } .menu__lang:hover { background: color-mix(in srgb, var(--color-2) 10%, transparent); } }
@media (max-width: 959px) {
  .nav__links, .nav__cta { display: none; }
  .nav__lang { margin-left: auto; }
  .nav__menu { display: inline-flex; margin-left: 0; }
}

/* barra di contatto mobile */
.mbar { position: fixed; z-index: 55; inset: auto 12px 12px; display: none; gap: 8px; max-width: 520px; margin: 0 auto; }
.mbar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px; border-radius: var(--radius-2); font-family: var(--font-2); font-size: 15px; font-weight: 700; text-decoration: none; }
.mbar__wa { background: var(--color-3); color: var(--color-2); }
.mbar__tel { border: 1px solid var(--line); background: var(--color-1); color: var(--color-2); }
.mbar a:focus-visible { outline: 2px solid var(--color-5); outline-offset: 2px; }
@media (max-width: 959px) {
  .mbar { display: flex; visibility: hidden; transform: translateY(140%); transition: transform .4s var(--ease-1), visibility .4s linear; }
  html.mbar-on .mbar { visibility: visible; transform: none; }
  html.mbar-on body { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* percorso */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-5); font-size: 13px; font-weight: 600; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: color-mix(in srgb, var(--color-2) 34%, transparent); }
.crumbs a { text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { color: var(--color-2); } }
.crumbs [aria-current="page"] { color: var(--color-2); }

/* testata di pagina: la scena d'apertura, sulla tela della home */
.head { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.head__title { max-width: 22ch; font-size: clamp(40px, 8.7vw, 140px); text-wrap: balance; }
.head__lead { max-width: 44ch; }
.head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: clamp(2px, 1vw, 10px); }

/* firma editoriale: chi ha scritto la pagina e quando è stata aggiornata */
.byline { display: flex; flex-wrap: wrap; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--line); color: var(--color-5); font-size: 13.5px; line-height: 1.4; }
.byline__name { color: var(--color-2); font-weight: 700; }
.byline__role::before, .byline__date::before { content: "·"; margin: 0 9px; color: var(--color-6); }
@keyframes head-rise { from { opacity: 0; translate: 0 14%; } }
@keyframes head-fade { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: no-preference) {
  .head__title { animation: head-rise .95s cubic-bezier(.16, .84, .24, 1) backwards; }
  .head > .m-eyebrow { animation: head-fade .9s .12s cubic-bezier(.16, .84, .24, 1) backwards; }
  .head__lead { animation: head-fade .95s .24s cubic-bezier(.16, .84, .24, 1) backwards; }
  .head__actions { animation: head-fade .95s .36s cubic-bezier(.16, .84, .24, 1) backwards; }
}

/* sezioni */
.sect { position: relative; display: grid; gap: clamp(22px, 3vw, 34px); }
.sect__top { display: grid; gap: 12px; max-width: 62ch; }
.sect__top > p { color: var(--color-5); }
.sect__top h2 { text-wrap: balance; }

/* banda chiara: il respiro della home tra due lati scuri */
.sect--paper {
  margin-inline: calc(var(--space-1) * -1);
  padding: clamp(36px, 5.4vw, 80px) var(--space-1);
  border-radius: var(--radius-1);
  background: var(--color-2);
  color: var(--color-1);
}
.sect--paper .sect__top > p, .sect--paper .m-eyebrow { color: var(--color-6); }
.sect--paper .faq details { border-color: var(--line-paper); }
.sect--paper .faq summary { color: var(--color-1); }
.sect--paper .faq summary::after { border-color: var(--line-paper); }
.sect--paper .faq p { color: var(--color-6); }
.sect--paper .checks, .sect--paper .checks li, .sect--paper .tile, .sect--paper .card__meta { border-color: var(--line-paper); }
.sect--paper .checks strong, .sect--paper .tile h3 { color: var(--color-1); }
.sect--paper .checks span, .sect--paper .tile p, .sect--paper .card__text { color: var(--color-6); }

/* elenchi: un indice, non una griglia di riquadri. Il numero in blu, la riga
   sottile, il titolo display: la stessa testata dei progetti della home,
   senza piastra, senza bordo, senza ombra. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); column-gap: clamp(28px, 3.6vw, 56px); }
.tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; align-content: start; padding: 18px 0 clamp(26px, 3vw, 36px); border-top: 1px solid var(--line); }
/* la riga sopra la voce si disegna da sinistra a destra quando entra in vista */
.tile::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--color-3); transform-origin: 0 50%; }
html.motion .tile::after { transform: scaleX(0); transition: transform 1s var(--ease-2) var(--d, 0s); }
html.motion .tile.is-in::after { transform: none; }
/* lo spazio dopo il numero sta nel padding, non nel gap fra le colonne: una
   voce senza numero lascia la prima colonna a zero e il titolo parte dal
   margine della sezione, non rientrato */
.tile__num { grid-row: 1 / span 2; padding: .55em 14px 0 0; color: var(--color-3); font-family: var(--font-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.tile h3 { grid-column: 2; font-family: var(--font-1); font-size: clamp(22px, 1.9vw, 27px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.tile h3 a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px; transition: background-size .45s var(--ease-2); }
.tile p { grid-column: 2; max-width: 40ch; color: var(--color-5); font-size: 16px; line-height: 1.5; }
@media (hover: hover) { .tile:hover h3 a { background-size: 100% 1.5px; } }

/* verifiche: una scheda tecnica a due colonne, righe filate da una hairline */
.checks { display: grid; gap: 0 clamp(30px, 4vw, 64px); border-top: 1px solid var(--line); }
.checks li { display: grid; gap: 6px; align-content: start; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.checks strong { font-family: var(--font-1); font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.checks span { color: var(--color-5); font-size: 15px; line-height: 1.5; }
@media (min-width: 860px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.steps { display: grid; gap: 26px; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 44px; } }
.step { position: relative; display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); color: var(--color-3); font-family: var(--font-2); font-size: 13px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.step::after { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--color-3); transform-origin: 0 50%; }
html.motion .step::after { transform: scaleX(0); transition: transform 1.1s var(--ease-2) var(--d, 0s); }
html.motion .step.is-in::after { transform: none; }
.step h3 { font-size: clamp(22px, 2vw, 28px); }
.step p { color: var(--color-5); }

/* numeri verificabili: impegni del progetto, non risultati inventati */
.facts { display: grid; gap: 0 clamp(24px, 3vw, 44px); }
.facts li { display: grid; gap: 8px; align-content: start; padding: 16px 0 4px; border-top: 1px solid var(--line); }
.facts__num { font-family: var(--font-1); font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts__label { max-width: 26ch; color: var(--color-5); font-size: 14.5px; line-height: 1.45; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* casi: due righe filate, non due riquadri. La foto è un dettaglio, il testo è la prova */
.cases { display: grid; border-bottom: 1px solid var(--line); }
.case-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.4vw, 28px); padding: 20px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.case-row::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--color-3); transform-origin: 0 50%; }
html.motion .case-row::after { transform: scaleX(0); transition: transform 1s var(--ease-2) var(--d, 0s); }
html.motion .case-row.is-in::after { transform: none; }
.case-row__body { display: grid; gap: 7px; }
.case-row__tag { color: var(--color-5); font-family: var(--font-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.case-row__name { display: inline-block; font-family: var(--font-1); font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.case-row__text { max-width: 46ch; color: var(--color-5); font-size: 15.5px; line-height: 1.5; }
.case-row__thumb { display: block; overflow: clip; width: clamp(84px, 9vw, 112px); aspect-ratio: 4 / 5; border-radius: var(--radius-1); background: var(--color-7); }
.case-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-2); }
@media (hover: hover) {
  .case-row__name { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px; transition: background-size .45s var(--ease-2); }
  .case-row:hover .case-row__name { background-size: 100% 1.5px; }
  .case-row:hover .case-row__thumb img { transform: scale(1.03); }
}

/* tabella dati (stato dei cookie, riferimenti): nessun numero da listino */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table caption { padding-bottom: 14px; color: var(--color-5); font-size: 13px; font-weight: 600; text-align: left; }
.table th, .table td { padding: 16px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { color: var(--color-5); font-family: var(--font-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.table tbody th { font-family: var(--font-1); font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; letter-spacing: -0.02em; }
.table td:last-child { color: var(--color-2); white-space: nowrap; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .3s; }
@media (hover: hover) { .table tbody tr:hover { background: color-mix(in srgb, var(--color-2) 4%, transparent); } }

/* domande frequenti */
.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 56px 22px 0; cursor: pointer; list-style: none; font-family: var(--font-1); font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border: 1px solid var(--line); border-radius: var(--radius-2); color: var(--color-3); font-family: var(--font-2); font-size: 19px; line-height: 1; transition: transform .5s var(--ease-2), background-color .35s, border-color .35s, color .35s; }
.faq details[open] summary::after { transform: rotate(135deg); border-color: var(--color-3); background: var(--color-3); color: var(--color-2); }
.faq p { max-width: 62ch; padding: 0 56px 24px 0; color: var(--color-5); }
@keyframes faq-in { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: no-preference) { .faq details[open] p { animation: faq-in .45s var(--ease-1) both; } }

/* nota: una riga a margine, non un riquadro */
.note { display: grid; gap: 6px; max-width: 66ch; padding: 2px 0 2px 18px; border-left: 3px solid var(--color-3); color: var(--color-5); font-size: 14.5px; line-height: 1.5; }
.note strong { color: var(--color-2); font-weight: 600; }
.sect--paper .note { color: var(--color-6); }
.sect--paper .note strong { color: var(--color-1); }

/* progetti: la scheda della home, immagine in verticale, riga filata sotto,
   nessun velo sopra la foto */
.cards { display: grid; gap: clamp(30px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { display: grid; gap: 12px; align-content: start; text-decoration: none; }
.card__media { position: relative; overflow: clip; border-radius: var(--radius-1); background: var(--color-7); aspect-ratio: 4 / 5; contain: paint; }
.card__media img { width: 100%; height: 100%; object-fit: cover; scale: 1; transition: scale 1s var(--ease-1); }
.card__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-2) 18%, transparent); color: var(--color-5); }
.card__title { font-family: var(--font-1); font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.card__text { max-width: 34ch; color: var(--color-5); font-size: 16px; }
.card--link .card__title { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px; transition: background-size .45s var(--ease-2); }
@media (hover: hover) {
  .card--link:hover .card__title { background-size: 100% 1.5px; }
  .card:hover .card__media img { scale: 1.04; }
}

/* blog: testi di lettura, indice, punti chiave, figure.
   L'articolo usa gli stessi atomi delle pagine servizio: cambia solo il ritmo. */
.page > .facts { margin-top: clamp(32px, 5vh, 56px); }
.page > .takeaways { margin-top: clamp(36px, 5vh, 64px); }
.page > .toc { margin-top: clamp(26px, 4vh, 44px); }
.takeaways { display: grid; gap: 14px; max-width: 78ch; padding: 0; }
.takeaways h2 { font-size: clamp(22px, 2vw, 28px); }
.takeaways ul { display: grid; gap: 10px; }
.takeaways li { position: relative; padding-left: 20px; color: var(--color-5); font-size: 16px; line-height: 1.5; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: var(--radius-2); background: var(--color-3); }
.takeaways strong { color: var(--color-2); font-weight: 600; }
.sect--paper .takeaways { border-color: var(--line-paper); }
.sect--paper .takeaways li { color: var(--color-6); }
.sect--paper .takeaways strong { color: var(--color-1); }

.toc { display: grid; gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--line); }
.toc ol { display: grid; }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; color: var(--color-5); font-size: 15.5px; line-height: 1.4; text-decoration: none; transition: color .3s; }
.toc__num { flex: none; color: var(--color-3); font-family: var(--font-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .toc a:hover { color: var(--color-2); } }
@media (min-width: 760px) { .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 760px) { .cards--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.figure { display: grid; gap: 10px; margin: 8px 0; }
.figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-1); background: var(--color-7); }
.figure figcaption { max-width: 70ch; color: var(--color-5); font-size: 13.5px; line-height: 1.5; }

/* modulo di contatto */
.form { display: grid; gap: 22px; max-width: 680px; }
.form__row { display: grid; gap: 22px; }
@media (min-width: 760px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 4px; }
.field > span { color: var(--color-5); font-size: 13px; font-weight: 600; }
.field > span em { font-style: normal; color: color-mix(in srgb, var(--color-2) 45%, transparent); }
.form__check { display: flex; align-items: flex-start; gap: 10px; max-width: 58ch; color: var(--color-5); font-size: 14px; line-height: 1.45; }
.form__check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-3); }
.form__check a { color: var(--color-2); text-underline-offset: 3px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.form__status { color: var(--color-5); font-size: 14px; line-height: 1.45; }
.form__status[data-state="error"], .form__status[data-state="ok"] { color: var(--color-2); font-weight: 600; }

/* chiusura: banda chiara a tutta larghezza, la stessa geometria di .sect--paper,
   non una scheda arrotondata appoggiata sopra la pagina */
.cta { display: grid; gap: 22px; margin-inline: calc(var(--space-1) * -1); padding: clamp(36px, 5.4vw, 80px) var(--space-1); background: var(--color-2); color: var(--color-1); }
.cta__title { max-width: 22ch; }
.cta > p { max-width: 54ch; color: var(--color-6); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 6px; }
.cta .m-btn-2 { background: var(--color-1); color: var(--color-2); }

/* footer: identico a quello della home, con la foto al posto del punto */
.footer { --ap: min(22vw, 34svh); position: relative; padding: max(clamp(24px, 4vh, 56px), calc(var(--ap) * .34)) var(--space-1) 24px; background: var(--color-1); color: var(--color-2); overflow: clip; }
.footer__bye { position: relative; padding-top: 0; white-space: nowrap; font-size: min(30vw, 36svh); }
.footer__word { display: inline-block; }
.footer__period { position: relative; display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.035em; vertical-align: baseline; }
.footer__aperture { position: absolute; left: 0; bottom: 0; width: var(--ap); height: var(--ap); overflow: hidden; border-radius: var(--radius-2); background: var(--color-3); transform-origin: 0 100%; }
.footer__img { width: 100%; height: 100%; object-fit: cover; }
.footer__tint { position: absolute; inset: 0; background: var(--color-3); opacity: 0; }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: clamp(36px, 6vh, 64px); padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--color-2) 16%, transparent); }
.footer__col { display: grid; align-content: start; gap: 6px; }
.footer__label { margin-bottom: 8px; color: var(--color-5); }
.footer__news { grid-column: 1 / -1; display: grid; gap: 14px; }
.footer__note { color: var(--color-5); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; color: var(--color-5); }
.footer__nap { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 30px; color: var(--color-5); font-style: normal; }
.footer__nap .m-link-2 { font-size: inherit; font-weight: 600; color: var(--color-2); }
.footer a { text-decoration: none; }
@media (hover: hover) { .footer a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 900px) {
  .footer { --ap: min(24vw, 34svh); }
  .footer__bye { font-size: min(22vw, 34svh); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); }
  .footer__news { grid-column: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .footer__img { animation: footer-turn 46s linear infinite; }
}
@keyframes footer-turn { to { transform: rotate(360deg); } }

/* etichetta "dati dimostrativi": ogni visual che usa numeri fittizi la porta,
   il visitatore non deve mai dedurlo dal contesto */
.tag-demo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px dashed color-mix(in srgb, var(--color-3) 55%, transparent); border-radius: var(--radius-3); color: var(--color-3); font-family: var(--font-2); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2; }
.sect--paper .tag-demo { border-color: color-mix(in srgb, var(--color-3) 45%, transparent); }

/* grafici: SVG generato da assets/js/article.js a partire dagli attributi
   data-* del contenitore. Il markup resta leggibile senza JavaScript: la
   didascalia e i numeri stanno nella tabella qui sopra, non solo nel grafico. */
.charts { display: grid; gap: clamp(22px, 3vw, 34px); }
@media (min-width: 1020px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--line); }
.chart svg { display: block; width: 100%; height: auto; }
.chart__title { font-family: var(--font-1); font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--color-5); font-size: 12.5px; font-weight: 600; }
.chart__key { display: inline-flex; align-items: center; gap: 7px; }
.chart__key::before { content: ""; width: 11px; height: 11px; flex: none; border-radius: 3px; background: var(--k, var(--color-3)); }
.chart__caption { max-width: none; color: var(--color-5); font-size: 12.5px; line-height: 1.5; }
.chart__fallback { color: var(--color-5); font-size: 14px; line-height: 1.5; }
.chart .grid { stroke: color-mix(in srgb, var(--color-2) 9%, transparent); stroke-width: 1; }
.chart .axis { color: var(--color-5); fill: var(--color-5); font-family: var(--font-2); font-size: 11px; font-weight: 600; }
.chart .axis-x { text-anchor: middle; }
.chart .axis-y { text-anchor: end; }
.chart .axis-unit { text-anchor: start; color: var(--color-6); fill: var(--color-6); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.chart .c-before { fill: var(--color-6); }
.chart .c-after { fill: var(--color-3); }
.chart .bar-value { fill: var(--color-2); font-family: var(--font-2); font-size: 11.5px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: var(--color-3); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-alt { stroke: var(--color-5); }
.chart .area { fill: var(--color-3); opacity: .13; stroke: none; }
.chart .dot { fill: var(--color-1); stroke: var(--color-3); stroke-width: 2.5; }
.chart .dot-alt { stroke: var(--color-5); }
.chart [data-tip] { cursor: default; }
.chart [data-tip]:hover, .chart [data-tip]:focus-visible { filter: brightness(1.35); outline: none; }
.chart__tip { position: absolute; z-index: 5; left: 0; top: 0; padding: 6px 10px; border-radius: var(--radius-3); background: var(--color-2); color: var(--color-1); font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s; }
.chart__tip[data-show="1"] { opacity: 1; }
.sect--paper .chart { border-color: var(--line-paper); background: color-mix(in srgb, var(--color-1) 3%, transparent); }
.sect--paper .chart .grid { stroke: color-mix(in srgb, var(--color-1) 10%, transparent); }
.sect--paper .chart .axis { color: var(--color-6); fill: var(--color-6); }
.sect--paper .chart .bar-value { fill: var(--color-1); }
.sect--paper .chart .dot { fill: var(--color-2); }
.sect--paper .chart__legend, .sect--paper .chart__caption, .sect--paper .chart__fallback { color: var(--color-6); }
@media (prefers-reduced-motion: no-preference) {
  .chart .rise { transform-box: fill-box; transform-origin: 50% 100%; animation: chart-rise .8s var(--ease-1) backwards; }
  .chart .trace { animation: chart-draw 1.4s var(--ease-1) .25s backwards; }
}
@keyframes chart-rise { from { transform: scaleY(0); } }
@keyframes chart-draw { from { stroke-dashoffset: var(--len, 1400); } }

/* calcolatore indicativo: le cifre stanno negli attributi data-* del markup,
   la formula in assets/js/article.js. Senza JavaScript il pannello resta
   leggibile e rimanda alle fasce della tabella. */
.calc { display: grid; gap: clamp(24px, 3vw, 36px); padding: clamp(20px, 3vw, 34px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 1020px) { .calc { grid-template-columns: minmax(0, 1.35fr) minmax(290px, 1fr); align-items: start; column-gap: clamp(30px, 4vw, 52px); } }
.calc__inputs { display: grid; gap: 20px; }
@media (min-width: 640px) { .calc__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.calc label.field > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc .m-field { background: transparent; border-bottom-color: color-mix(in srgb, var(--color-2) 30%, transparent); border-radius: 0; }
.calc select.m-field { appearance: none; padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23b7c0c9' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; background-clip: padding-box; }
.calc output { color: var(--color-2); font-family: var(--font-1); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.calc input[type="range"] { width: 100%; margin-top: 6px; accent-color: var(--color-3); background: transparent; border: 0; }
.calc__opts { display: grid; gap: 12px; }
.calc__check { display: flex; align-items: flex-start; gap: 10px; color: var(--color-5); font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.calc__check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-3); }
.calc__check em { font-style: normal; color: var(--color-6); }
.calc__result { display: grid; gap: 12px; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); }
.calc__label { color: var(--color-5); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.calc__range { font-family: var(--font-1); font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc__meta { color: var(--color-5); font-size: 14px; line-height: 1.5; }
.calc__meta strong { color: var(--color-2); font-weight: 600; }

/* casi dimostrativi: una scheda per azienda inventata, tabella + due visual */
.case { display: grid; gap: clamp(18px, 2.4vw, 26px); padding: clamp(20px, 3vw, 34px); margin-top: 26px; border: 1px solid var(--line); }
.case__head { display: grid; gap: 10px; align-content: start; }
.case__title { font-family: var(--font-1); font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.case__intro { max-width: 68ch; color: var(--color-5); font-size: 15px; line-height: 1.55; }
.case__grid { display: grid; gap: clamp(18px, 2.4vw, 26px); }
@media (min-width: 1020px) { .case__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1020px) { .case .table-wrap { margin-top: 0; } }

/* testimonianze dimostrative: la struttura è a posto, il testo no (e lo dice) */
.quotes { display: grid; gap: clamp(22px, 3vw, 30px); }
@media (min-width: 960px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* una voce sola: la testimonianza di un progetto ha un autore, non tre */
.quotes[data-single] { grid-template-columns: 1fr; }
.quote { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); }
.quote__mark { color: var(--color-3); font-family: var(--font-1); font-size: 42px; font-weight: 800; line-height: .5; }
.quote__text { color: var(--color-5); font-size: 15.5px; line-height: 1.55; }
.quote__text strong { color: var(--color-2); font-weight: 600; }
.quote__who { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid var(--line); }
.quote__role { color: var(--color-2); font-family: var(--font-1); font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.quote__job { color: var(--color-5); font-size: 13px; line-height: 1.4; }
.quote__demo { color: var(--color-3); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.sect--paper .quote { border-color: var(--line-paper); background: color-mix(in srgb, var(--color-1) 3%, transparent); }
.sect--paper .quote__text { color: var(--color-6); }
.sect--paper .quote__text strong, .sect--paper .quote__role { color: var(--color-1); }
.sect--paper .quote__who, .sect--paper .quote__job { color: var(--color-6); border-color: var(--line-paper); }

/* righe con numeri: la colonna di destra si allinea e non va a capo */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 404 */
.lost { display: grid; gap: 20px; place-content: center; justify-items: center; min-height: 58svh; padding-top: clamp(88px, 13svh, 140px); text-align: center; }
.lost h1 { max-width: 18ch; font-size: clamp(48px, 9vw, 132px); text-wrap: balance; }
.lost .head__lead { max-width: 46ch; text-wrap: balance; }
.lost .head__actions { justify-content: center; }

/* Fix: CTA button overlap with menu footer text */
@media (max-width: 959px) {
  .nav__cta { z-index: 45; position: relative; }
  .menu { z-index: 70; } /* Higher than mobile bar (55) */
}

/* Fix: Mobile contact bar should not overlap menu */
.mbar { z-index: 55; }
@media (max-width: 959px) {
  html.nav-open .mbar { 
    visibility: hidden !important;
    transform: translateY(140%) !important;
  }
}

/* Fix: Better table responsiveness for mobile - Convert to cards */
@media (max-width: 860px) {
  .table-wrap { 
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  
  .table { 
    display: block;
    width: 100%;
  }
  
  .table caption {
    display: block;
    text-align: left;
    padding-bottom: 14px;
  }
  
  .table thead { 
    display: none; 
  }
  
  .table tbody { 
    display: block; 
  }
  
  .table tbody tr { 
    display: grid;
    gap: 10px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-1);
    background: color-mix(in srgb, var(--color-2) 3%, transparent);
  }
  
  .table tbody tr:last-child {
    margin-bottom: 0;
  }
  
  .table th, .table td { 
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  
  .table tbody th {
    font-size: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-2) 12%, transparent);
    margin-bottom: 8px;
  }
  
  .table td {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-5);
  }
  
  .table td:last-child {
    white-space: normal;
  }
  
  /* Add labels before each cell for clarity */
  .table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-5);
    margin-bottom: 4px;
  }
}

/* Fix: Improved calculator field labels readability */
.calc label.field > span { 
  font-size: 15px;
  font-weight: 600;
  color: var(--color-2);
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.calc__meta { 
  font-size: 13.5px; 
  line-height: 1.6;
}

/* Fix: Better spacing and units for calculator outputs */
.calc output {
  min-width: 36px;
  display: inline-block;
  text-align: right;
  padding-left: 6px;
}


/* Fix: Footer contact info - all items should be consistent (no special link styling) */
.footer__nap span,
.footer__nap a { 
  color: var(--color-5);
  font-weight: inherit;
  text-decoration: none;
}

.footer__nap a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* DevTools obfuscation - makes source code harder to read in browser inspector */
/* This makes reverse engineering more difficult but does not provide complete protection */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Allow selection on text content for usability */
p, span, a, li, td, th, h1, h2, h3, h4, h5, h6, label, input, textarea, select, button {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Disable right-click context menu */
body {
  -webkit-touch-callout: none;
}


/* Footer section styles - matching homepage */
@layer sections {
#footer { --ap: min(22vw, 34svh); position: relative; padding: max(clamp(24px, 4vh, 56px), calc(var(--ap) * .34)) var(--space-1) 24px; background: var(--color-1); color: var(--color-2); overflow: clip; }
#footer .footer__bye { position: relative; padding-top: 0; white-space: nowrap; font-size: min(30vw, 36svh); }
#footer .footer__word { display: inline-block; }
#footer .footer__period { position: relative; display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.035em; vertical-align: baseline; }
#footer .footer__aperture { position: absolute; left: 0; bottom: 0; width: var(--ap); height: var(--ap); overflow: hidden; border-radius: var(--radius-2); background: var(--color-3); transform-origin: 0 100%; }
#footer .footer__img { width: 100%; height: 100%; object-fit: cover; }
#footer .footer__tint { position: absolute; inset: 0; background: var(--color-3); opacity: 0; }
#footer .footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: clamp(36px, 6vh, 64px); padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--color-2) 16%, transparent); }
#footer .footer__col { display: grid; align-content: start; gap: 6px; }
#footer .footer__label { margin-bottom: 8px; color: var(--color-5); }
#footer .footer__news { grid-column: 1 / -1; display: grid; gap: 14px; }
#footer .footer__note { color: var(--color-5); }
#footer .footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; color: var(--color-5); }
#footer .footer__nap { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 30px; color: var(--color-5); font-style: normal; }
#footer .footer__nap .m-link-2 { font-size: inherit; font-weight: 600; color: var(--color-2); }
@media (min-width: 900px) {
  #footer { --ap: min(24vw, 34svh); }
  #footer .footer__bye { font-size: min(22vw, 34svh); }
  #footer .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); }
  #footer .footer__news { grid-column: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  #footer .footer__img { animation: footer-turn 46s linear infinite; }
  #footer.is-offscreen .footer__img { animation-play-state: paused; }
  @keyframes footer-turn { to { transform: rotate(360deg); } }
}
}