/* ==========================================================================
   Dalman S.r.l. — foglio di stile unico / single stylesheet
   No framework, no build step. Mobile-first; breakpoints:
     600px  servizi a 2 colonne, footer a 2 colonne
     768px  sezioni immagine + testo affiancate, card "Un supporto completo" a 2 colonne
     810px  menu desktop (sotto: menu a tendina per telefono)
     960px  card "Un supporto completo" con le proporzioni desktop
     1000px servizi a 4 colonne, titoli alla misura desktop
   Touch screens (pointer: coarse) keep 44px+ tap targets at every width.
   ========================================================================== */

/* ---------- Font (self-hosted, OFL — see assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallback: keeps the layout still while the font loads. */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103.4%;
  ascent-override: 93.8%;
  descent-override: 24.2%;
  line-gap-override: 0%;
}

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  --blue: #2763ab;
  --blue-light: #6f9ed7;
  --yellow: #fbb900;
  --yellow-hover: #ffc629;
  --yellow-active: #eaad00;
  --ink: #181818;
  --ink-muted: rgba(24, 24, 24, 0.8);
  --line: rgba(24, 24, 24, 0.08);
  --surface: #ffffff;
  --surface-alt: #f5f5f5;
  /* Button text: dark on yellow for readable contrast (10:1). */
  --btn-fg: #181818;

  --font: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1136px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --radius: 16px;
  --space-section: clamp(88px, 56px + 4.5vw, 120px);

  /* Fluid type: phone (390px) values of the original -> desktop values.
     Headings reach the desktop size at ~1000px (like the original, which is
     never smaller on tablets/laptops); the rest at 1400-1440px. */
  --fs-h1: clamp(2.0625rem, 1.183rem + 3.607vw, 3.4375rem);    /* 33 -> 55 @1000 */
  --fs-h2: clamp(2.0625rem, 1.623rem + 1.803vw, 2.75rem);      /* 33 -> 44 @1000 */
  --fs-h-detail: clamp(1.75rem, 1.6435rem + 0.952vw, 2.5rem);  /* 30 -> 40 @1440 */
  --fs-h3: clamp(1.125rem, 1.0767rem + 0.198vw, 1.25rem);      /* 18 -> 20 @1400 */
  --fs-lead: clamp(1rem, 0.9517rem + 0.198vw, 1.125rem);       /* 16 -> 18 @1400 */

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --focus: var(--blue);

  /* Phone menu (full-screen blue layer) */
  --nav-bg-top: #2763ab;
  --nav-bg-bottom: #1f4f8c;
  --nav-line: rgba(255, 255, 255, 0.16);
  --nav-soft: rgba(255, 255, 255, 0.86);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.3, 1.45, 0.45, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchors land just under the fixed header (sections have their own top
     padding, so no extra gap is needed). */
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-width: 0; /* no sideways drag when zoomed below 320 CSS px */
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
figure,
address {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

strong {
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Focus target of the skip link: no ring on the whole page */
main:focus {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  box-shadow: 0 4px 16px rgba(0, 25, 54, 0.2);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Type helpers ---------- */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.h-detail {
  font-size: var(--fs-h-detail);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* "• Cosa facciamo" label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.02em; /* -0.28px at 14px, as the original */
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--yellow);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover effects only where a mouse can hover: on touch screens a tapped
   button or link would otherwise stay "hovered". */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--yellow-hover);
    box-shadow: 0 6px 18px rgba(251, 185, 0, 0.35);
    transform: translateY(-1px);
  }
}

/* Press feedback (mouse and touch) */
.btn:active {
  background: var(--yellow-active);
  box-shadow: none;
  transform: none;
}

/* Desktop sizes of the original, only with a mouse: touch screens of any
   width (landscape phones, iPads) keep the 48px tap targets above. */
@media (min-width: 810px) and (hover: hover) and (pointer: fine) {
  .btn {
    min-height: 40px;
    padding: 10px 24px;
    font-size: 0.875rem;
  }

  .btn--sm {
    min-height: 33px;
    padding: 8px 16px;
  }
}

@media (min-width: 810px) and (pointer: coarse) {
  .btn--sm {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Header
   --------------------------------------------------------------------------
   HARD RULE (phone menu). Never put any of these on .site-header,
   .site-header__inner or the .container inside the header:
     transform, translate, rotate, scale, filter, backdrop-filter, perspective;
     contain (layout, paint, strict or content), container-type,
     content-visibility; will-change for any of those.
   Any of them makes the header the containing block of the fixed #menu, and
   the menu collapses into a 64px strip (the "thin strip" bug). The frost
   stays on .site-header::before. A transform on the toggle button, on
   nav::before or on list items is safe (they are not ancestors of the nav).
   Never lock the page with body { position: fixed } either: the menu uses
   overflow: hidden + overscroll-behavior on the root instead.
   ========================================================================== */
.site-header {
  /* Without JavaScript the header simply sits on top of the hero photo. */
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  color: #fff;
  --focus: #fff;
  transition: box-shadow 0.3s ease, color 0.3s ease;
}

/* The white background (and its blur) lives on a pseudo-element, never on the
   header itself: a backdrop-filter on the header would make it the containing
   block of the fixed phone menu, squeezing the menu into the 64px bar. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: transparent;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.js .site-header {
  position: fixed;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

/* Solid state: once the page scrolls towards the hero text, and on pages
   without a hero (404) */
.site-header.is-solid {
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(0, 25, 54, 0.06);
  --focus: var(--blue);
}

.site-header.is-solid::before {
  background-color: rgba(255, 255, 255, 0.94);
}

/* Light frost: white enough to stay near-white over the blue cards too. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-solid::before {
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Logo link: a 44px-tall tap target; the logo itself stays where it was
   (centred in the 64px bar). */
.brand {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 144px;
  min-height: 44px;
  border-radius: 4px;
}

.brand__logo {
  width: 144px;
  height: auto;
  transition: opacity 0.3s ease;
}

.brand__logo--dark {
  position: absolute;
  inset: 0;
  margin-block: auto;
  opacity: 0;
}

.is-solid .brand__logo--light {
  opacity: 0;
}

.is-solid .brand__logo--dark {
  opacity: 1;
}

/* Logo and toggle stay above the full-screen phone menu (z-index 1). */
.brand,
.nav-toggle {
  z-index: 2;
}

/* Header while the phone menu is open: transparent over the blue layer,
   white text and logo. */
/* Opening: colour and logo switch over 200ms, front-loaded, so no dark text
   lingers on the blue layer as it slides in. */
html.nav-open .site-header {
  color: #fff;
  box-shadow: none;
  --focus: #fff;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-out-expo);
}

html.nav-open .site-header::before {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.nav-open .brand__logo {
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-out-expo);
}

html.nav-open .brand__logo--light {
  opacity: 1;
}

html.nav-open .brand__logo--dark {
  opacity: 0;
}

/* Section heading focused after a jump from the phone menu: no ring. */
[data-nav-target]:focus {
  outline: none;
}

/* ---- Menu toggle: "Menu ≡" pill that turns into "Chiudi ×" ----
   Hidden by default; shown below 810px when JavaScript runs. */
.nav-toggle {
  display: none;
  position: relative;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-right: -8px;
  padding: 0 12px 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, transform 0.12s ease;
}

/* Focus ring drawn inside the pill (never clipped by the screen edge). */
.nav-toggle:focus-visible {
  outline-offset: -3px;
}

.is-solid .nav-toggle {
  background: rgba(24, 24, 24, 0.06);
}

html.nav-open .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
}

.nav-toggle:active {
  transform: scale(0.96);
}

.nav-toggle__words {
  display: grid;
  justify-items: end;
  height: 1.25em;
  line-height: 1.25;
  overflow: hidden;
}

.nav-toggle__word {
  grid-area: 1 / 1;
  transition: transform 0.28s var(--ease-out-expo), opacity 0.2s ease;
}

.nav-toggle__word--close {
  transform: translateY(110%);
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__word--open {
  transform: translateY(-110%);
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__word--close {
  transform: none;
  opacity: 1;
}

/* Icon: each outer bar moves up/down, its ::before rotates. Two elements give
   a two-stage morph in every engine (no individual-transform properties). */
.nav-toggle__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 14px;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 2px;
  transition: transform 0.2s var(--ease-out-expo) 0.1s; /* closing: move apart after un-rotating */
}

.nav-toggle__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle__bar:nth-child(1) {
  transform: translateY(-6px);
}

.nav-toggle__bar:nth-child(3) {
  transform: translateY(6px);
}

.nav-toggle__bar:nth-child(2)::before {
  transition: transform 0.16s ease 0.12s, opacity 0.16s ease 0.12s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  transform: none;
  transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transition: transform 0.26s var(--ease-snap) 0.12s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1)::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3)::before {
  transform: rotate(-45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2)::before {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.1s ease;
}

/* ---- Navigation, every width (desktop and no-JS use only list + button) ---- */
.site-nav__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.site-nav__scroll {
  display: contents;
}

.site-nav__arrow,
.site-nav__phone-only,
.site-nav__dock,
.site-nav__fade {
  display: none;
}

/* ---- Phone / tablet navigation (< 810px): full-screen blue layer ---- */
@media (max-width: 809.98px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  /* Lock page scroll while the menu is open; no pull-to-refresh or rubber
     band either. The menu scrolls by itself (.site-nav__scroll). */
  .nav-open,
  .nav-open body {
    overflow: hidden;
  }

  html.nav-open {
    overscroll-behavior: none;
  }

  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    padding: 0;
    overflow: hidden;
    color: #fff;
    --focus: #fff;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1) 0.04s, visibility 0s linear 0.22s;
  }

  /* Open: visible and tappable from the first frame. */
  html.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  /* Curtain: the blue layer slides down from the top. */
  .js .site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    /* The solid colour under the gradient keeps the layer opaque in Windows
       Contrast themes (forced colours drop gradients). */
    background: var(--nav-bg-top) linear-gradient(180deg, var(--nav-bg-top) 0%, var(--nav-bg-bottom) 100%);
    transform: translateY(-100%);
    transition: transform 0s linear 0.22s;
  }

  html.nav-open .site-nav::before {
    transform: none;
    transition: transform 0.44s var(--ease-sheet);
  }

  /* Hex pattern, bottom-right (same drawing as the blue cards) */
  .js .site-nav::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    aspect-ratio: 596 / 297;
    background: url("../img/hex-pattern.svg?v=6e1d07a1") center / 100% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0s linear 0.22s;
  }

  html.nav-open .site-nav::after {
    opacity: 0.1;
    transition: opacity 0.6s ease 0.2s;
  }

  /* The only scrolling layer; it starts under the 64px bar, so content never
     slides under the logo. */
  .js .site-nav__scroll {
    position: absolute;
    inset: var(--header-h) 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px max(var(--gutter), env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 8px 0 56px; /* keyboard focus never hides under the fade */
    opacity: 0;
    transition: opacity 0.08s linear;
  }

  html.nav-open .site-nav__scroll {
    opacity: 1;
    transition: none;
  }

  .js .site-nav__scroll > * {
    flex-shrink: 0;
  }

  /* Staggered entrance; on close they hold, then snap back once invisible. */
  .js .site-nav__list > li,
  .js .site-nav__actions,
  .js .site-nav__places {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0s linear 0.22s, transform 0s linear 0.22s;
  }

  html.nav-open .site-nav__list > li,
  html.nav-open .site-nav__actions,
  html.nav-open .site-nav__places {
    opacity: 1;
    transform: none;
    transition: opacity 0.32s cubic-bezier(0, 0, 0.2, 1) var(--d, 0s), transform 0.56s var(--ease-out-expo) var(--d, 0s);
  }

  .site-nav__list > li:nth-child(1) { --d: 0.08s; }
  .site-nav__list > li:nth-child(2) { --d: 0.12s; }
  .site-nav__list > li:nth-child(3) { --d: 0.16s; }
  .site-nav__list > li:nth-child(4) { --d: 0.2s; }
  .site-nav__actions { --d: 0.26s; }
  .site-nav__places { --d: 0.3s; }

  /* Section links */
  .js .site-nav__list {
    display: block;
  }

  .js .site-nav__phone-only {
    display: block;
  }

  .js .site-nav__cta {
    display: none;
  }

  .js .site-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 0;
    border-bottom: 1px solid var(--nav-line);
    color: #fff;
    text-decoration: none;
    font-size: clamp(2rem, 1.25rem + 3.6vw, 2.75rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .js .site-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.1s ease;
  }

  /* Current-section dot (yellow, like the eyebrow labels). No transition:
     it is set before the menu appears. */
  .js .site-nav__label::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: -22px;
    border-radius: 50%;
    background: var(--yellow);
    transform: scale(0);
    forced-color-adjust: none;
  }

  .js .site-nav__link[aria-current="true"] .site-nav__label::before {
    margin-right: 0;
    transform: none;
  }

  .js .site-nav__arrow {
    display: block;
    flex: none;
    margin-left: auto;
    width: 22px;
    height: 22px;
    opacity: 0.6;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .js .site-nav__link:active .site-nav__label {
    opacity: 0.7;
  }

  .js .site-nav__link:active .site-nav__arrow {
    opacity: 1;
    transform: translateX(4px);
  }

  /* Contact dock: pushed to the bottom (thumb zone) when there is room */
  .js .site-nav__dock {
    display: grid;
    gap: 16px;
    margin-top: auto;
  }

  .site-nav__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .nav-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    column-gap: 8px;
    row-gap: 4px;
    min-height: 72px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.12s ease, transform 0.12s ease;
  }

  .nav-action__label {
    grid-row: 1;
    grid-column: 1;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .nav-action__icon {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    width: 22px;
    height: 22px;
  }

  /* Wraps only at the <wbr> after "@" */
  .nav-action__value {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    line-height: 1.3;
    letter-spacing: 0;
  }

  .nav-action--primary {
    background: var(--yellow);
    box-shadow: none;
    color: var(--btn-fg);
  }

  .nav-action--primary .nav-action__value {
    opacity: 0.8;
  }

  .nav-action:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.18);
  }

  .nav-action--primary:active {
    background: var(--yellow-active);
  }

  .site-nav__places li + li {
    border-top: 1px solid var(--nav-line);
  }

  .site-nav__places a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 0;
    color: #fff;
    font-size: 0.9375rem;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .site-nav__places svg {
    flex: none;
    width: 18px;
    height: 18px;
    opacity: 0.86;
  }

  .site-nav__place-kind {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--nav-soft);
  }

  .site-nav__places a:active {
    opacity: 0.7;
  }

  /* "More below" cue: an overlay outside the scroller, so it never changes
     its scrollHeight. main.js sets .has-more. */
  .js .site-nav__fade {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: calc(48px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--nav-bg-bottom) 25%, rgba(31, 79, 140, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  html.nav-open .site-nav.has-more .site-nav__fade {
    opacity: 1;
  }

  /* "Scrolled" cue under the bar: a hairline and a short fade where the menu
     content slides under the 64px bar. It belongs to the header (z-index 2,
     above the menu layer, z-index 1); the header's own box-shadow would be
     painted under the menu. A pseudo-element is not an ancestor of the nav,
     so the HARD RULE above is safe. main.js sets .nav-scrolled. */
  .js .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--header-h) - 1px);
    z-index: 2;
    height: 21px;
    border-top: 1px solid var(--nav-line);
    background: linear-gradient(to bottom, var(--nav-bg-top), rgba(39, 99, 171, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  html.nav-open .site-header.nav-scrolled::after {
    opacity: 1;
  }

  /* No JavaScript: show the links in a simple row under the logo */
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    padding-block: 10px;
  }

  html:not(.js) .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    width: 100%;
  }

  html:not(.js) .site-nav__list {
    display: flex;
    gap: 20px;
  }

  html:not(.js) .site-nav__link {
    padding: 10px 0;
  }

  /* The wrapped link row makes the header taller than --header-h: on inner
     pages (already .is-solid in the HTML) keep it in the page flow so it never
     covers the title. The homepage header is not .is-solid: its hero is unchanged. */
  html:not(.js) .site-header.is-solid {
    position: relative;
  }

  html:not(.js) .legal {
    padding-top: clamp(40px, 24px + 4vw, 80px);
  }

  html:not(.js) .notfound {
    padding-top: 64px;
  }
}

/* Phone menu variants */
@media (max-width: 374.98px) {
  .site-nav__actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .nav-action {
    min-height: 60px;
  }
}

/* Short portrait screens (SE, in-app browsers with toolbars) */
@media (max-width: 809.98px) and (orientation: portrait) and (max-height: 640px) {
  .js .site-nav__scroll {
    gap: 20px;
  }

  .js .site-nav__link {
    min-height: 56px;
    padding-block: 8px;
    font-size: 1.875rem;
  }
}

/* Phones held sideways: links left, contacts right */
@media (max-width: 809.98px) and (orientation: landscape) and (max-height: 520px) {
  .js .site-nav__scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-content: start;
    align-items: start;
    padding-top: 4px;
  }

  .js .site-nav__list {
    grid-column: 1;
    grid-row: 1;
  }

  .js .site-nav__dock {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    gap: 8px;
    padding-top: 8px;
  }

  .js .site-nav__link {
    min-height: 52px;
    padding-block: 6px;
    font-size: 1.75rem;
  }

  .nav-action {
    min-height: 64px;
    padding: 10px 12px;
  }
}

/* Small tablets (iPad Mini portrait): the contacts follow the links instead
   of sinking to the bottom (the thumb-zone push only suits phones). Links and
   tiles use the bar's full width, so the arrows line up under "Chiudi". */
@media (min-width: 600px) and (max-width: 809.98px) and (min-height: 521px) {
  .js .site-nav__dock {
    margin-top: clamp(32px, 6vh, 64px);
  }
}

/* Windows Contrast themes: the icon bars would take the page background
   colour, and the tiles lose their shadow outline. */
@media (forced-colors: active) {
  .nav-toggle__bar::before {
    background: CanvasText;
  }

  .nav-action:not(:focus-visible) {
    outline: 1px solid transparent;
  }
}

@media (max-width: 809.98px) and (hover: hover) and (pointer: fine) {
  .js .site-nav__link:hover .site-nav__arrow {
    opacity: 1;
    transform: translateX(4px);
  }

  .nav-action:hover {
    background: rgba(255, 255, 255, 0.16);
  }

  .nav-action--primary:hover {
    background: var(--yellow-hover);
  }
}

/* ---- Desktop navigation (>= 810px) ---- */
@media (min-width: 810px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .site-nav__list {
    display: flex;
    gap: 30px;
  }

  .site-nav__link {
    position: relative;
    padding: 6px 0;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease-out);
  }

}

@media (min-width: 810px) and (hover: hover) and (pointer: fine) {
  .site-nav__link:hover::after {
    transform: scaleX(1);
  }
}

/* Touch screens wide enough for the desktop menu: 44px tall links */
@media (min-width: 810px) and (pointer: coarse) {
  .site-nav__link {
    padding: 12px 4px;
    margin-inline: -4px; /* wider tap area, same layout */
  }

  .site-nav__link::after {
    left: 4px;
    right: 4px;
    bottom: 8px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* Fills the screen (the small viewport, so the button is never under a
     browser toolbar) and grows with its text instead of clipping it. The
     460px floor never exceeds a phone screen, so the button stays above the
     fold on short phones too. */
  min-height: 460px;
  min-height: max(460px, 100vh);
  min-height: max(460px, 100svh);
  overflow: hidden;
  background: #1f4f8c; /* shown for a split second while the photo loads */
  color: #fff;
  --focus: #fff;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero__media img {
  object-fit: cover;
  object-position: 50% 50%;
}

/* Same top shade as the original + a soft shade behind the text. On phones
   and tablets the text spans the whole width, so the shade does too. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 25, 54, 0.35) 0%, rgba(0, 104, 222, 0) 60%),
    linear-gradient(0deg, rgba(0, 22, 50, 0.5) 0%, rgba(0, 22, 50, 0.18) 38%, rgba(0, 22, 50, 0) 62%);
}

/* Wide screens: the shade stays in the bottom-left corner behind the text
   block, so the rest of the photo keeps its bright blue sky. */
@media (min-width: 810px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(0, 25, 54, 0.35) 0%, rgba(0, 104, 222, 0) 60%),
      radial-gradient(110% 85% at 0% 100%, rgba(0, 22, 50, 0.5) 0%, rgba(0, 22, 50, 0.22) 45%, rgba(0, 22, 50, 0) 75%);
  }
}

.hero__content {
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: clamp(48px, 9vh, 80px);
}

.hero__title {
  max-width: 14em;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 34.5rem;
  margin-top: 16px;
  text-wrap: pretty;
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.hero__cta {
  margin-top: 24px;
}

/* Full-width button on phones held upright only (sideways it would be a
   600px-wide bar). */
@media (max-width: 599.98px) and (orientation: portrait) {
  .hero__cta {
    width: 100%;
  }
}

/* Short portrait screens (iPhone SE, in-app browsers with toolbars): tighter
   spacing, so headline, text and button all fit above the fold. */
@media (orientation: portrait) and (max-height: 640px) {
  .hero__content {
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 28px;
  }

  .hero__lead {
    margin-top: 12px;
  }

  .hero__cta {
    margin-top: 20px;
  }
}

@media (min-width: 810px) {
  .hero__title {
    letter-spacing: -0.04em;
    text-wrap: wrap;
  }
}

/* Phones held sideways: the screen is only ~375-430px tall, so the hero
   grows with its text instead of pushing the button below the fold. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__content {
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 24px;
  }

  .hero__title {
    font-size: min(var(--fs-h1), 2.75rem);
  }

  .hero__lead {
    margin-top: 12px;
  }

  .hero__cta {
    margin-top: 18px;
  }
}

/* Page-load entrance (CSS only: content is always visible in the end).
   Fill mode "backwards" only: once finished, the elements go back to their
   normal style with no leftover transform. A leftover transform keeps the
   photo on its own GPU layer, which Chrome scales with a softer filter. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title,
  .hero__lead,
  .hero__cta {
    animation: rise 0.9s var(--ease-out) backwards;
  }

  .hero__title {
    animation-delay: 0.1s;
  }

  .hero__lead {
    animation-delay: 0.22s;
  }

  .hero__cta {
    animation-delay: 0.34s;
  }

  .hero__media img {
    animation: settle 1.6s var(--ease-out) backwards;
  }
}

@keyframes rise {
  from {
    /* 0.01, not 0: invisible to the eye, but browsers then count the
       headline as painted right away (faster Largest Contentful Paint). */
    opacity: 0.01;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes settle {
  from {
    transform: scale(1.06);
  }
  to {
    transform: none;
  }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section {
  padding-top: var(--space-section);
}

/* Menu jumps to "Interventi" and "Chi siamo": land on the content itself, 16px under
   the header, instead of on the empty top padding of the section. */
#interventi,
#chi-siamo {
  scroll-margin-top: calc(16px - var(--space-section));
}

/* ---------- Servizi ---------- */
.services {
  padding-top: 60px;
}

.services__title {
  max-width: 13em;
  margin-top: 16px;
}

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 30px;
  margin-top: 48px;
}

.service__icon {
  width: 30px;
  height: 30px;
}

.service__title {
  margin-top: 24px;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
}

.service__text {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

@media (min-width: 600px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 30px;
  }
}

@media (min-width: 1000px) {
  .services {
    padding-bottom: 20px; /* same 140px gap above "Contattaci ora" as the original */
  }

  .services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 60px;
  }
}

/* ---------- Blue cards (shared) ---------- */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  --focus: #fff;
}

/* Hexagon network pattern (same drawing as the original), two corners */
.card::before,
.card::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 596 / 297;
  background: url("../img/hex-pattern.svg?v=6e1d07a1") center / 100% 100% no-repeat;
  pointer-events: none;
}

.card::before {
  top: 0;
  right: 0;
  width: min(531px, 92%);
}

.card::after {
  bottom: 0;
  left: 0;
  width: min(363px, 75%);
  transform: rotate(180deg);
}

/* Pattern strength per card, as in the original page */
.card--cta::before {
  opacity: 0.09;
}

.card--cta::after {
  opacity: 0.2;
}

.card--about::before {
  opacity: 0.08;
}

.card--about::after {
  opacity: 0.12;
}

.card__text {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- "Contattaci ora" ---------- */
.card--cta {
  display: grid;
  place-items: center;
  min-height: 336px;
  padding: 64px 24px;
  /* Original: #2763AB 35.6% -> #6F9ED7 97.7%. On phones and tablets the text
     covers most of the card, so the light corner is a touch darker there to
     keep white text >= 4.5:1 (WCAG AA). */
  background: linear-gradient(229deg, var(--blue) 60%, #5f8fcd 100%);
  text-align: center;
}

.card--cta .card__body {
  max-width: 27rem;
}

.card--cta .card__text {
  margin-top: 10px;
}

/* Narrow card: short centred text with even lines, no lone "24 ore.".
   Wider screens wrap like the original. */
@media (max-width: 809.98px) {
  .card--cta .card__text {
    text-wrap: balance;
  }
}

.card--cta .btn {
  margin-top: 24px;
}

@media (min-width: 810px) {
  .card--cta {
    padding: 80px 40px;
  }
}

@media (min-width: 1024px) {
  .card--cta {
    /* Wide card: stops nudged so the text area keeps >= 4.5:1; the light
       corner of the original stays. */
    background: linear-gradient(229deg, var(--blue) 50%, #6b9ad5 100%);
  }
}

/* ---------- Image + text sections ("Interventi") ---------- */
.split__inner {
  display: grid;
  gap: 36px;
}

.split__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.split__text .h-detail {
  margin-top: 16px;
}

.split__lead {
  max-width: 36rem;
  margin-top: 18px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.checklist {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.checklist li {
  min-height: 24px;
  padding-left: 34px;
  background: url("../img/check.svg?v=4abac5f2") 0 0 / 24px 24px no-repeat;
  color: var(--ink-muted);
}

@media (min-width: 560px) and (max-width: 767.98px) {
  .split__media img {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 768px) {
  .split__inner {
    grid-template-columns: minmax(0, 44fr) minmax(0, 50fr);
    column-gap: 6%;
    align-items: center;
  }

  .split--reverse .split__inner {
    grid-template-columns: minmax(0, 50fr) minmax(0, 44fr);
  }

  .split--reverse .split__media {
    order: 2;
  }
}

/* Phones held sideways (560-767px wide, ~375px tall): a full-width photo
   would fill the whole screen, so use the side-by-side layout with a square
   photo, like on computers. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) and (max-width: 767.98px) {
  /* Top-aligned: the text is taller than the screen, so a centred photo
     would start below the fold. */
  .split__inner {
    grid-template-columns: minmax(0, 44fr) minmax(0, 50fr);
    column-gap: 6%;
    align-items: start;
  }

  .split--reverse .split__inner {
    grid-template-columns: minmax(0, 50fr) minmax(0, 44fr);
  }

  .split--reverse .split__media {
    order: 2;
  }

  .split__media img {
    aspect-ratio: 1 / 1;
  }
}

/* ---------- "Un supporto completo" ---------- */
.about {
  padding-bottom: var(--space-section);
}

.card--about {
  display: grid;
  gap: 40px;
  padding: 56px 24px 40px;
  /* Original: #6F9ED7 15% -> #2763AB 88% (stops nudged for text contrast) */
  background: linear-gradient(322deg, var(--blue-light) 0%, var(--blue) 58%);
}

.card--about .card__text {
  max-width: 33rem;
}

.card--about .btn {
  margin-top: 24px;
}

/* Two overlapping photos; left-aligned with the text on phones/small tablets */
.about__photos {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 350 / 275;
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.about__photo--main {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74.9%;
  aspect-ratio: 4 / 3;
}

.about__photo--small {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 53.4%;
  aspect-ratio: 3 / 2;
}

.about__photo--small img {
  box-shadow: 0 12px 32px rgba(0, 25, 54, 0.28);
}

@media (max-width: 599.98px) and (orientation: portrait) {
  .card--about .btn {
    width: 100%;
  }
}

/* Tablets: text left, photos right (like the desktop layout) */
@media (min-width: 768px) {
  .card--about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
    align-items: center;
    gap: 32px;
    padding: 56px 32px;
    /* Original: #6F9ED7 23% -> #2763AB 72.2% (stops nudged for text contrast) */
    background: linear-gradient(229deg, var(--blue-light) 14%, var(--blue) 58%);
  }

  .card--about .card__text {
    margin-top: 13px;
  }

  .card--about .btn {
    margin-top: 20px;
  }
}

/* Desktop: same proportions as the original (text 528px, photos 350px) */
@media (min-width: 960px) {
  .card--about {
    grid-template-columns: minmax(0, 528px) minmax(300px, 1fr);
    gap: 40px;
    min-height: 428px;
    padding: 64px 40px;
  }

  .about__photos {
    max-width: 350px;
    margin-inline: auto 0;
  }
}

/* ---------- ISO 9001:2015 badge (About card and footer) ----------
   The BSI mark is official artwork: shown as is (never recoloured, cropped or
   stretched) and never wider than 154px, half of its 307px, so it stays sharp
   on 2x screens. The text next to it is real text, not part of the image. */
.iso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.iso picture {
  flex: none;
}

.iso__mark {
  width: 132px;
  height: auto;
}

.iso__text {
  display: grid;
  gap: 2px;
  flex: 1 1 13rem;
  min-width: 0;
  max-width: 24rem;
}

.iso__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.iso__sub,
.iso__num {
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.iso__num {
  margin-top: 2px;
  font-size: 0.8125rem;
}

/* On the blue card: the mark sits on a white chip, under a thin divider */
.iso--card {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.iso__chip {
  display: block;
  flex: none;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 25, 54, 0.18);
}

.iso__chip .iso__mark {
  width: 120px;
}

.iso--card .iso__sub,
.iso--card .iso__num {
  color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 960px) {
  .iso__chip .iso__mark {
    width: 132px;
  }
}

/* In the footer: on the light grey, no chip needed */
.iso--footer {
  margin-top: 12px;
}

.iso--footer .iso__mark {
  width: 140px;
}

/* 3x phones: 120px (as in the card) needs 360 device pixels of the 307px
   file instead of 420, so the lettering stays crisper. A larger official
   file from BSI would remove the limit (README, "Certificazione ISO 9001"). */
@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
  .iso--footer .iso__mark {
    width: 120px;
  }
}

.iso--footer .iso__sub,
.iso--footer .iso__num {
  color: var(--ink-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-top: clamp(56px, 4rem + 1.5vw, 80px);
  background: var(--surface-alt);
  color: var(--ink);
}

.site-footer__logo {
  width: 144px;
  height: auto;
}

.site-footer__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
}

.info-list {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.info-list strong {
  color: var(--ink);
}

.info-list a {
  text-decoration: underline;
  text-decoration-color: rgba(24, 24, 24, 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .info-list a:hover {
    color: var(--blue);
    text-decoration-color: currentColor;
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  text-decoration: none;
}

/* "Privacy Policy · Cookie Policy · Torna su", together on the right of the
   company line (under it on phones). */
.site-footer__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
}

.site-footer__link[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(24, 24, 24, 0.28);
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__top:hover,
  .site-footer__link:hover {
    color: var(--blue);
  }
}

/* Phones and any touch screen (tablets too): taller, well-spaced footer
   links, easy to tap (WCAG 2.5.8 target size). */
@media (max-width: 599.98px) {
  .info-list {
    font-size: 0.9375rem;
  }
}

@media (max-width: 599.98px), (pointer: coarse) {
  /* Each link is a 44px-tall tap area; the negative margin keeps the lines
     close together, and the gap keeps neighbouring tap areas apart. */
  .info-list li + li {
    margin-top: 16px;
  }

  .info-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -8px;
  }

  .site-footer__top,
  .site-footer__link,
  .link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   Scroll-in animation (added by main.js; content is visible without JS)
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js .services__grid > :nth-child(2) { transition-delay: 0.08s; }
.js .services__grid > :nth-child(3) { transition-delay: 0.16s; }
.js .services__grid > :nth-child(4) { transition-delay: 0.24s; }

@media (min-width: 768px) {
  .js .split__text[data-reveal] {
    transition-delay: 0.12s;
  }
}

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

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   404 page
   ========================================================================== */
.notfound {
  display: grid;
  align-items: center;
  min-height: calc(100vh - 220px);
  min-height: calc(100svh - 220px);
  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: var(--space-section);
}

.notfound__code {
  color: var(--blue);
  font-size: clamp(4.5rem, 3rem + 7vw, 8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.notfound .h2 {
  margin-top: 16px;
}

.notfound__text {
  max-width: 34rem;
  margin-top: 16px;
  color: var(--ink-muted);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  margin-top: 32px;
}

.link-arrow {
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ==========================================================================
   Privacy Policy / Cookie Policy (site/privacy-policy/, site/cookie-policy/)
   One readable column (~70 characters per line), section titles in capitals
   as on the old site (written in normal case in the HTML, so screen readers
   read words, not letters).
   ========================================================================== */
.legal {
  padding-top: calc(var(--header-h) + clamp(40px, 24px + 4vw, 80px));
  padding-bottom: var(--space-section);
}

.legal__inner {
  /* ~70 characters per line (measured median 70-74 at 16-17px; this font's
     "0" is wide, so a ch-based width would allow ~90). */
  max-width: 32em;
  margin-inline: auto;
  font-size: clamp(1rem, 0.9759rem + 0.099vw, 1.0625rem); /* 16 -> 17 @1400 */
}

.legal__title {
  margin-top: 16px;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.legal__meta {
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.legal__summary {
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 12px 12px 0;
  background: var(--surface-alt);
  color: var(--ink);
  line-height: 1.55;
}

.legal__body {
  margin-top: 32px;
  color: var(--ink-muted);
  line-height: 1.65;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.legal__body > * + *,
.legal__body li > * + *,
.legal__section > * + * {
  margin-top: 1em;
}

.legal__section {
  margin-top: 2.5em;
  padding-top: 1.75em;
  border-top: 1px solid var(--line);
}

.legal__body > .legal__section:first-child {
  margin-top: 0;
}

.legal__section h2 {
  scroll-margin-top: 24px; /* breathing room under the fixed header after #gestione */
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal__num {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.legal__body ul {
  padding-left: 1.25em;
  list-style: disc;
}

.legal__body ul ul {
  list-style: circle;
}

.legal__body li {
  padding-left: 0.25em;
}

.legal__body li + li,
.legal__body li > ul {
  margin-top: 0.75em;
}

.legal__body li::marker {
  color: var(--blue);
}

.legal__body strong {
  color: var(--ink);
}

.legal__body a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .legal__body a:hover {
    text-decoration-thickness: 2px;
  }
}

/* Lists made only of links (browser help pages): 44px+ tap rows on touch. */
.legal__links strong {
  color: inherit;
}

@media (max-width: 599.98px), (pointer: coarse) {
  .legal__links li + li {
    margin-top: 0;
  }

  .legal__links a {
    display: block; /* bullet stays on the first line */
    padding-block: 9px;
  }
}

/* Cookie table: a real table from 600px, one card per row below. */
.legal-table {
  width: 100%;
  /* separate, not collapse: WebKit draws the translucent header rule in two
     shades when collapsed. Only bottom borders are used, so it looks the same. */
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.legal-table th,
.legal-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table th:last-child,
.legal-table td:last-child {
  padding-right: 0;
}

.legal-table thead th {
  border-bottom-color: rgba(24, 24, 24, 0.24);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.legal-table tbody th {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 599.98px) {
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
  }

  .legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal-table tbody tr {
    padding: 16px;
    border-radius: 12px;
    background: var(--surface-alt);
  }

  .legal-table tbody tr + tr {
    margin-top: 12px;
  }

  .legal-table th,
  .legal-table td {
    padding: 0;
    border: 0;
  }

  .legal-table td {
    margin-top: 10px;
  }

  /* Column name above each value (visual only: screen readers already get it
     from the table headers, hence the empty alternative text). */
  .legal-table td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header {
    position: static;
    color: var(--ink);
  }

  .brand__logo--light {
    opacity: 0;
  }

  .brand__logo--dark {
    opacity: 1;
  }

  .nav-toggle,
  .site-nav,
  .skip-link,
  .hero__media,
  .hero::before,
  .card::before,
  .card::after {
    display: none !important;
  }

  .hero {
    height: auto;
    min-height: 0;
    background: none;
    color: var(--ink);
  }

  .card {
    color: var(--ink);
    background: none !important;
    border: 1px solid var(--line);
  }

  .iso--card .iso__sub,
  .iso--card .iso__num {
    color: var(--ink-muted);
  }

  .iso__chip {
    box-shadow: none;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Dati societari obbligatori (art. 2250 c.c.): tiny, wraps cleanly on phones. */
.site-footer__legal {
  flex: 1 1 32rem;
  max-width: 60rem;
  margin: 0;
}

/* ==========================================================================
   Hero: stronger legibility, eyebrow, key-phrase underline, quick facts and
   the "Scopri" scroll hint.
   ========================================================================== */

/* Deeper, wider shade behind the text block; the sky stays bright elsewhere. */
.hero::before {
  background:
    linear-gradient(180deg, rgba(0, 25, 54, 0.38) 0%, rgba(0, 104, 222, 0) 55%),
    linear-gradient(0deg, rgba(0, 18, 42, 0.72) 0%, rgba(0, 18, 42, 0.32) 42%, rgba(0, 18, 42, 0) 70%);
}

@media (min-width: 810px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(0, 25, 54, 0.38) 0%, rgba(0, 104, 222, 0) 55%),
      radial-gradient(120% 95% at 0% 100%, rgba(0, 18, 42, 0.7) 0%, rgba(0, 18, 42, 0.36) 42%, rgba(0, 18, 42, 0) 74%);
  }
}

/* Soft, layered shadows: crisp edge + wide glow, readable on any part of the photo. */
.hero__title,
.hero__lead,
.hero__eyebrow {
  text-shadow: 0 1px 2px rgba(0, 16, 38, 0.45), 0 6px 28px rgba(0, 16, 38, 0.4);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(251, 185, 0, 0.22);
}

/* Thin, soft yellow underline under the key phrase (text itself stays white). */
.hero__mark {
  background-image: linear-gradient(90deg, rgba(251, 185, 0, 0.7), rgba(251, 185, 0, 0.35));
  background-repeat: no-repeat;
  background-size: 100% 0.045em;
  background-position: 0 94%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.02em;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 14px 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  background: rgba(0, 22, 50, 0.32);
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero__facts li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Room for the scroll hint under the text. */
.hero__content {
  padding-bottom: clamp(88px, 12vh, 120px);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vh, 28px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 10px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 16, 38, 0.5);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}

.hero__scroll:hover {
  color: #fff;
}

.hero__scroll-icon {
  filter: drop-shadow(0 1px 4px rgba(0, 16, 38, 0.5));
  animation: hero-scroll-nudge 2.4s var(--ease-out) infinite;
}

@keyframes hero-scroll-nudge {
  0%, 55%, 100% { transform: translateY(0); opacity: 1; }
  25% { transform: translateY(6px); opacity: 0.6; }
}

.has-scrolled .hero__scroll {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-icon {
    animation: none;
  }
}

/* Short screens (iPhone SE, in-app browsers, phones sideways): keep the
   headline, text and button above the fold — drop the extras. */
@media (orientation: portrait) and (max-height: 700px), (orientation: landscape) and (max-height: 520px) {
  .hero__facts,
  .hero__scroll {
    display: none;
  }

  .hero__eyebrow {
    margin-bottom: 10px;
  }
}

@media (orientation: portrait) and (max-height: 640px) {
  .hero__content {
    padding-bottom: 28px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .hero__content {
    padding-bottom: 24px;
  }
}

@media (orientation: portrait) and (min-height: 641px) and (max-height: 700px) {
  .hero__content {
    padding-bottom: 40px;
  }
}

/* Hero eyebrow on phones: one line, slightly tighter. */
@media (max-width: 479.98px) {
  .hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
}


/* ==========================================================================
   Footer layout: three identical blocks (Contatti, Indirizzi, Certificazioni)
   and, on the home page, the map of the two offices at the same height.
   ========================================================================== */
.site-footer__main {
  display: grid;
  gap: 32px;
}

.site-footer__info {
  display: grid;
  align-content: start;
}

.footer-block {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.footer-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.footer-block:last-child {
  padding-bottom: 0;
}

.footer-block .site-footer__title {
  margin-bottom: 14px;
}

.footer-block .iso--footer {
  margin-top: 0;
}

/* Label above value (phones, tablets, pages without the map). */
.footer-dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

.footer-dl > div {
  display: grid;
  gap: 2px;
}

.footer-dl dt {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.footer-dl dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.footer-dl a {
  text-decoration: underline;
  text-decoration-color: rgba(24, 24, 24, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-dl a:hover {
    color: var(--blue);
    text-decoration-color: currentColor;
  }
}

/* Touch screens: each link is a comfortable tap area without moving the text. */
@media (pointer: coarse) {
  .footer-dl a {
    display: inline-block;
    padding-block: 10px;
    margin-block: -10px;
  }
}

/* ---------- Map of the two offices (self-hosted SVG from OpenStreetMap data,
   see scripts/map; no third-party requests, no cookies). The 4:3 map is drawn
   on a "canvas" that always covers the box, like object-fit: cover, so the
   pins (positioned in % of the canvas) stay on the right streets whatever the
   box shape. ---------- */
.sedi-map {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: size;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8f9fb;
  box-shadow: 0 1px 2px rgba(24, 24, 24, 0.04), 0 12px 32px -18px rgba(39, 99, 171, 0.35);
}

.sedi-map__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
}

@supports (width: 1cqw) {
  .sedi-map__canvas {
    width: max(100cqw, 133.334cqh);
  }
}

.sedi-map__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pin positions = output of scripts/map/render.py (percent of the 4:3 map). */
.sedi-map__pin--legale { --x: 50%; --y: 25.8%; }
.sedi-map__pin--operativa { --x: 26.7%; --y: 79.7%; }
.sedi-map__landmark { --x: 70.6%; --y: 20.3%; }

.sedi-map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-right: 4px;
  transform: translate(-11px, -50%); /* centre of the dot on the address */
  color: var(--ink);
  text-decoration: none;
}

.sedi-map__dot {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(39, 99, 171, 0.18), 0 4px 10px rgba(16, 42, 80, 0.35);
  transition: transform 0.25s var(--ease-out);
}

.sedi-map__dot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

.sedi-map__label {
  padding: 5px 10px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 42, 80, 0.14);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.sedi-map__pin:hover .sedi-map__dot,
.sedi-map__pin:focus-visible .sedi-map__dot {
  transform: scale(1.12);
}

.sedi-map__pin:hover .sedi-map__label,
.sedi-map__pin:focus-visible .sedi-map__label {
  background: var(--blue);
  color: #fff;
}

.sedi-map__landmark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-4px, -50%);
  color: rgba(24, 24, 24, 0.55);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.sedi-map__landmark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(24, 24, 24, 0.4);
}

.sedi-map__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 3px 8px;
  border-top-left-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.625rem;
  line-height: 1.3;
}

.sedi-map__credit a {
  color: rgba(24, 24, 24, 0.6);
  text-decoration: none;
}

@media (max-width: 479.98px) {
  .sedi-map__landmark {
    display: none;
  }
}

/* Tablets: Contatti | Indirizzi side by side, Certificazioni below, map under. */
@media (min-width: 600px) {
  .site-footer__info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }

  .footer-block:nth-child(2) {
    padding-top: 0;
    border-top: 0;
  }

  .footer-block:last-child {
    grid-column: 1 / -1;
  }
}

/* Pages without the map, wide screens: three equal columns. */
@media (min-width: 900px) {
  .site-footer__main--no-map .site-footer__info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__main--no-map .footer-block {
    padding: 0;
    border-top: 0;
  }

  .site-footer__main--no-map .footer-block:last-child {
    grid-column: auto;
  }
}

/* Home page, wide screens: information on the left, map on the right, both
   columns exactly the same height (the map stretches to the text). Labels and
   values line up in two columns across the three blocks. */
@media (min-width: 900px) {
  .site-footer__main:not(.site-footer__main--no-map) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: stretch;
  }

  .site-footer__main:not(.site-footer__main--no-map) .site-footer__info {
    grid-template-columns: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .site-footer__main:not(.site-footer__main--no-map) .footer-block {
    padding: 22px 0;
    border-top: 1px solid var(--line);
  }

  .site-footer__main:not(.site-footer__main--no-map) .footer-block:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .site-footer__main:not(.site-footer__main--no-map) .footer-block:last-child {
    padding-bottom: 0;
  }

  .site-footer__main:not(.site-footer__main--no-map) .footer-dl > div {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;
  }

  .sedi-map {
    aspect-ratio: auto;
    min-height: 340px;
  }
}

/* "Servizi specialistici": six compact cards under the four main services. */
.spec {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.spec__title {
  margin: 0;
  font-weight: 400;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.spec-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 24, 24, 0.03);
}

.spec-card__icon {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(39, 99, 171, 0.08);
}

.spec-card__icon::after {
  content: "";
  position: absolute;
  inset: 9px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.spec-card__body {
  display: grid;
  gap: 4px;
}

.spec-card__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.spec-card__text {
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

@media (max-width: 1023.98px) {
  .spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599.98px) {
  .spec {
    margin-top: 40px;
    padding-top: 32px;
  }

  .spec-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}