/*
Theme Name: Notarfer Launch V2
Version: 2026.06.10b
*/

/* ============================================
   RESET & VARIABLES
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --red:       #D01F2B;
  --red-dark:  #a8121c;
  --dark:      #111111;
  --dark2:     #1a1a1a;
  --gray:      #F5F5F5;
  --gray2:     #e8e8e8;
  --text:      #333333;
  --text-light:#666666;
  --white:     #ffffff;
  --font-h:    'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif;
  --font-b:    'Barlow', 'Barlow Fallback', sans-serif;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --header-h:  88px;
}

/* ============================================================
   FALLBACK FONTS CON METRICHE CORRETTE
   Riducono il "flash di testo sballato" (FOUT) nel ~1s prima che
   arrivino i Google Fonts: il font di ripiego occupa quasi lo stesso
   spazio di quello finale, così lo scambio è quasi invisibile.
   ============================================================ */
@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 88%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial');
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bebas Neue Fallback';
  src: local('Arial Narrow'), local('Oswald'), local('Arial');
  size-adjust: 82%;
  ascent-override: 105%;
  descent-override: 20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Dancing Script Fallback';
  src: local('Snell Roundhand'), local('Segoe Script'), local('Brush Script MT');
  size-adjust: 108%;
  ascent-override: 90%;
  descent-override: 40%;
  line-gap-override: 0%;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: #0a0a0a; /* evita striscia bianca sull'overscroll */
  overscroll-behavior-y: none;
}
body {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}
/* Header is always fixed+transparent overlay — no body padding needed */
body.home,
body:not(.home) { padding-top: 0; }
/* Home: sfondo scuro coerente con l'hero per evitare il flash di una banda
   bianca nella parte alta dello schermo durante il caricamento del video. */
body.home { background: #0a0a0a; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-h);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
img { max-width:100%; height:auto; display:block; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--red);
  color: var(--white) !important;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background .25s var(--ease), transform .2s var(--ease), box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content:'';
  position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition: background .25s;
}
.btn:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(208,31,43,.35); }
.btn:hover::after { background: rgba(255,255,255,0.05); }

.btn-outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white) !important;
}
.btn-outline:hover { background: var(--white); color: var(--dark) !important; transform: translateY(-2px); }

.btn-dark {
  background: var(--dark);
  color: var(--white) !important;
}
.btn-dark:hover { background: #333; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.3); }

/* ============================================
   HEADER / NAV  — transparent overlay (Turner/Bechtel style)
   The header sits on top of the hero at full transparency.
   After scroll it becomes a solid white bar.
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  height: var(--header-h);
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  z-index: 1000;
  box-sizing: border-box;
  transition: background .35s ease, box-shadow .35s, height .35s, border-color .35s;
}
/* WordPress admin bar — compensa i 32px (desktop) o 46px (mobile) */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  /* Su mobile la admin bar di WP è position:absolute e scorre via con la pagina:
     NON va compensata, altrimenti l'header resta staccato dal bordo superiore.
     Header ancorato a filo schermo. */
  body.admin-bar .site-header { top: 0; }
}
.site-header.scrolled {
  background: var(--white);
  box-shadow: 0 4px 30px rgba(0,0,0,.12);
  border-bottom-color: transparent;
  height: 72px;
}

.header-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 16px;
}
.brand img { height: 64px; width: auto; transition: height .35s ease, opacity .35s; }

/* ═══════════════════════════════════════════════════════════
   LOGO SCROLLED — sempre più piccolo dell'header scrolled.
   Header scrolled è 72px, quindi logo deve stare ≤ 56px per
   avere padding verticale sufficiente e NON sporgere.
   Questo vale a TUTTE le risoluzioni.
   ═══════════════════════════════════════════════════════════ */
.site-header.scrolled .brand img,
.site-header.scrolled .brand__logo-wrap { height: 56px; }

/* Grande su schermi larghi (1440px+): header 96px, logo hero 78px, logo scrolled 56px */
@media (min-width: 1440px) {
  :root { --header-h: 96px; }
  .brand img { height: 78px; }
  .site-header.scrolled .brand img,
  .site-header.scrolled .brand__logo-wrap { height: 56px; }
  .primary-menu > li > a { font-size: .95rem; padding: 0 14px; letter-spacing: .08em; }
  .brand__name { font-size: 1.5rem; }
  .header-bar__cta { padding: 12px 22px; font-size: .78rem; }
}

/* Monitor 27" (1920px+): header 108px, logo hero 90px, scrolled 88/60 */
@media (min-width: 1920px) {
  :root { --header-h: 108px; }
  .site-header { overflow: visible; }
  .brand img { height: 90px; width: auto; }
  .brand__logo-wrap { height: 90px; overflow: visible; }
  .brand { overflow: visible; }
  .header-bar__inner { max-width: 1600px; overflow: visible; }

  /* Stato SCROLLED su 27" — header più alto e logo ben contenuto */
  .site-header.scrolled { height: 88px; }
  .site-header.scrolled .brand img,
  .site-header.scrolled .brand__logo-wrap { height: 64px; width: auto; }
  .site-header.scrolled .primary-menu > li > a { height: 88px; }
}

/* Logo bianco/scuro — position absolute per evitare traslazione al cambio */
.brand { position: relative; }
/* Wrapper logo — altezza fissa per evitare ogni spostamento */
.brand { position: relative; display: flex; align-items: center; }
.brand__logo-wrap {
  position: relative;
  height: 64px;
  width: auto;
  display: flex; align-items: center;
}
@media (min-width: 1440px) { .brand__logo-wrap { height: 78px; overflow: visible; } }

.brand__logo--white {
  display: block;
  height: 100%;
  width: auto;
  opacity: 1;
  transition: opacity .35s;
  position: relative;
  z-index: 1;
}
.brand__logo--dark {
  display: block;
  height: 100%;
  width: auto;
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 2;
}
.site-header.scrolled .brand__logo--white { opacity: 0; pointer-events: none; }
.site-header.scrolled .brand__logo--dark  { opacity: 1; pointer-events: auto; }

/* Se usa custom_logo di WP */
.site-header:not(.scrolled) .custom-logo { filter: brightness(0) invert(1); }
.site-header.scrolled .custom-logo { filter: none; }
.brand__text { display:flex; flex-direction:column; line-height:1.15; }
.brand__name {
  font-family: 'Bebas Neue', 'Bebas Neue Fallback', 'Barlow Condensed Fallback', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  transition: color .35s;
}
.site-header.scrolled .brand__name { color: var(--dark); }
.brand__tagline {
  font-size: .50rem;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-top: 3px;
  transition: color .35s;
}
.site-header.scrolled .brand__tagline { color: var(--text-light); }

/* Navigation */
.main-navigation { display: flex; align-items: center; }

.primary-menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-menu > li {
  position: relative;
}

.primary-menu > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 11px;
  height: var(--header-h);
  font-family: var(--font-h);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.9);
  transition: color .2s, background .2s;
  white-space: nowrap;
  position: relative;
}
.site-header.scrolled .primary-menu > li > a { color: var(--dark); height: 72px; }

.primary-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  transform: translateX(-50%);
  height: 3px;
  background: var(--red);
  transition: width .25s var(--ease);
}
.primary-menu > li:hover > a::after,
.primary-menu > li.current-menu-item > a::after { width: calc(100% - 28px); }

.primary-menu > li:hover > a,
.primary-menu > li.current-menu-item > a { color: var(--red); }

/* Dropdown chevron */
.primary-menu > li.menu-item-has-children > a .chevron {
  font-size: .6rem;
  transition: transform .2s var(--ease);
  margin-left: 2px;
}
.primary-menu > li.menu-item-has-children:hover > a .chevron { transform: rotate(180deg); }

/* SUB MENU — THE FIX: pointer-events on the gap between menu and submenu */
.primary-menu > li.menu-item-has-children {
  /* Create invisible bridge so mouse doesn't lose hover when moving to sub-menu */
}
.primary-menu > li.menu-item-has-children > a::before {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0; right: 0;
  height: 16px;
  background: transparent;
}

.sub-menu {
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  min-width: 280px;
  background: var(--white);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  border-top: 3px solid transparent;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

/* KEY FIX: keep submenu visible while hovering it */
.primary-menu > li.menu-item-has-children:hover > .sub-menu,
.primary-menu > li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.sub-menu li a {
  display: block;
  padding: 11px 22px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dark);
  text-transform: none;
  letter-spacing: .01em;
  transition: background .15s, color .15s, padding-left .15s;
  border-left: 3px solid transparent;
}
.sub-menu li a:hover {
  background: var(--gray);
  color: var(--red);
  padding-left: 28px;
  border-left-color: var(--red);
}

/* CTA Header */
.header-bar__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-h);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
  margin-left: 10px;
}
.header-bar__cta:hover { background: var(--red-dark); transform: translateY(-1px); }

/* Language switcher — SVG inline bandiere */
.lang-switcher {
  display: flex; align-items: center; gap: 2px;
  margin-left: 8px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.2);
}
.site-header.scrolled .lang-switcher { border-left-color: var(--gray2); }

.lang-switcher a,
.lang-switcher .lang-item {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 6px;
  border-radius: 3px;
  transition: opacity .2s, transform .2s, background .2s;
  opacity: .55;
  text-decoration: none;
  line-height: 0;
  position: relative;
}
.lang-switcher a:hover,
.lang-switcher .lang-item:hover { opacity: 1; transform: translateY(-1px); background: rgba(255,255,255,.08); }
.site-header.scrolled .lang-switcher a:hover,
.site-header.scrolled .lang-switcher .lang-item:hover { background: rgba(0,0,0,.05); }

/* Lingua corrente — piena opacità + underline rosso sottile */
.lang-switcher .lang-item--current { opacity: 1; }
.lang-switcher .lang-item--current::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; bottom: 0;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  pointer-events: none;
}

/* SVG bandiere */
.lang-switcher svg,
.lang-switcher .lang-item svg {
  width: 22px !important;
  height: 15px !important;
  display: block;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  overflow: hidden;
}
.lang-switcher img {
  width: 22px; height: auto;
  display: block;
  border-radius: 2px;
}

/* DIFESA ULTRA-AGGRESSIVA contro pallini/separatori residui */
.lang-switcher ul,
.lang-switcher ul li,
.lang-switcher li { list-style: none !important; padding: 0; margin: 0; }
.lang-switcher ul { display: flex; align-items: center; gap: 4px; }

.lang-switcher li.separator,
.lang-switcher li[class*="separator"],
.lang-switcher .pll-parent-menu-item,
.lang-switcher [class*="pll-parent"] { display: none !important; width: 0 !important; height: 0 !important; }

.lang-switcher li a::before,
.lang-switcher li a::after,
.lang-switcher li::before,
.lang-switcher li::after,
.lang-switcher a::before { display: none !important; content: none !important; }

.lang-switcher .screen-reader-text { display: none !important; }

/* DIFESA contro voci-pallino nel menu principale */
.primary-menu > li > a:empty,
.primary-menu > li:empty { display: none !important; }
.primary-menu > li[class*="lang-item"],
.primary-menu > li[class*="pll-"],
.primary-menu > li.current-lang { display: none !important; }

.lang-flag--static {
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: default;
  opacity: .7;
  transition: opacity .2s;
}
.lang-flag--static:hover { opacity: 1; }

/* Mobile Toggle */
.mobile-menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; color: var(--white); padding: 8px;
  transition: color .35s;
}
.site-header.scrolled .mobile-menu-toggle { color: var(--dark); }

/* ============================================
   HERO SLIDER
   ============================================ */
.hero-slider {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.slider-wrapper { position: relative; width:100%; height:100%; }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.slide.active { opacity: 1; }

/* Ken Burns — zoom marcato 1.15 → 1.0 in 8 secondi */
.slide img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.48);
  transform: scale(1.15);
  will-change: transform;
  transition: transform 8s linear, filter 1.2s ease;
}
.slide.active img {
  transform: scale(1.0);
}

/* Slide 2 — zoom + leggero pan verso destra */
.slide:nth-child(2) img {
  transform: scale(1.15) translateX(-3%);
}
.slide:nth-child(2).active img {
  transform: scale(1.02) translateX(2%);
}

/* Slide 3 — zoom dal basso */
.slide:nth-child(3) img {
  transform: scale(1.18) translateY(4%);
}
.slide:nth-child(3).active img {
  transform: scale(1.02) translateY(-1%);
}

/* Placeholder gradient slides when no images */
.slide-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #111 100%);
  display: flex; align-items: center; justify-content: center;
}
.slide-placeholder-1 { background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%); }
.slide-placeholder-2 { background: linear-gradient(135deg, #1a0a0a 0%, #2d0f0f 100%); }
.slide-placeholder-3 { background: linear-gradient(135deg, #0a0f0a 0%, #0f1a0f 100%); }

.slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.slide-content {
  text-align: center;
  color: var(--white);
  max-width: 900px;
}
.slide-content .eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
  padding: 6px 16px;
  border: 1px solid rgba(208,31,43,.4);
}
.slide-content h2 {
  color: var(--white);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s;
}
.slide.active .slide-content h2 { opacity:1; transform:translateY(0); }
.slide-content p {
  font-size: 1.1rem;
  color: rgba(255,255,255,.8);
  max-width: 600px;
  margin: 0 auto 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;
}
.slide.active .slide-content p { opacity:1; transform:translateY(0); }
.slide-content .btn {
  opacity: 0;
  transition: opacity .6s var(--ease) .7s, background .25s, transform .2s;
}
.slide.active .slide-content .btn { opacity:1; }

.slider-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  width: 52px; height: 52px;
  display: flex; align-items:center; justify-content:center;
  cursor: pointer;
  font-size: 1rem;
  transition: background .2s, border-color .2s;
  z-index: 10;
}
.slider-arrow:hover { background: var(--red); border-color: var(--red); }
.slider-arrow.prev { left: 32px; }
.slider-arrow.next { right: 32px; }

.slider-dots {
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 10;
}
.slider-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none; cursor: pointer;
  transition: background .2s, transform .2s;
}
.slider-dot.active { background: var(--red); transform: scale(1.3); }

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 32px; right: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.5);
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  z-index: 10;
  animation: scrollHint 2s ease infinite;
}
.scroll-hint i { font-size: 1.2rem; }
@keyframes scrollHint { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ============================================
   SECTION COMMONS
   ============================================ */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}
.section-header .label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-light);
  font-size: 1.05rem;
}

.section-line {
  width: 48px; height: 3px;
  background: var(--red);
  margin: 16px auto 0;
}

/* ============================================
   WHO WE ARE — Chi è Notarfer
   ============================================ */
.whoweare {
  padding: 100px 0;
  background: #f8f8f8;
  overflow: hidden;
}

.whoweare__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;   /* asimmetrico: la foto è più ampia (era 1fr 1fr) */
  gap: 80px;
  align-items: start;                /* allinea in alto, evita spazio vuoto se le colonne hanno altezze diverse */
}

.whoweare__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.whoweare__text h2 { margin-bottom: 24px; }
.whoweare__text p { color: var(--text-light); margin-bottom: 20px; font-size: 1.05rem; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--gray2);
}
.stat-item {}
.stat-num {
  font-family: var(--font-h);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}
.stat-unit { font-size: 1.2rem; }
.stat-label { font-size: .8rem; color: var(--text-light); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

.whoweare__visual {
  position: relative;
  /* La foto resta dentro il container — niente bleed fuori viewport
     che su monitor wide tagliava badge e foto. */
}
/* Frame offset rosso dietro la foto: dà profondità e ancora visivamente
   l'immagine al layout. Niente più "foto buttata lì". */
.whoweare__visual::before {
  content: "";
  position: absolute;
  top: 28px; bottom: -28px;
  left: -28px; right: 28px;
  border: 2px solid var(--red);
  z-index: 0;
  pointer-events: none;
}
.whoweare__img-wrap {
  position: relative;
  width: 100%;
  height: 560px;          /* era 620px → meglio bilanciato col testo Chi siamo */
  overflow: hidden;
  background: linear-gradient(135deg,#1a1a2d,#111);
  z-index: 1;
  box-shadow: 0 32px 80px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
}
.whoweare__img-main {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}
/* Placeholder SVG "Chi siamo" quando nessuna foto è caricata dal Customizer */
.whoweare__img-placeholder {
  width: 100%;
  height: 560px;
  display: block;
  overflow: hidden;
}
.whoweare__img-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
}
.whoweare__img-secondary {
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 45%;
  height: 200px;
  object-fit: cover;
  border: 6px solid var(--white);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.whoweare__badge {
  position: absolute;
  top: 28px; right: -32px;
  background: var(--red);
  color: var(--white);
  width: 130px; height: 130px;
  border-radius: 50%;
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  text-align: center;
  font-family: var(--font-h);
  box-shadow: 0 12px 32px rgba(200,40,45,.35), 0 4px 12px rgba(0,0,0,.15);
  z-index: 2;
}
.whoweare__badge .num { font-size: 2.4rem; font-weight: 800; line-height:1; }
.whoweare__badge .txt { font-size: .6rem; text-transform:uppercase; letter-spacing:.12em; margin-top:4px; }

/* Animated counters */
.stat-num[data-count] { }

/* ============================================
   SERVICES GRID — Lavorazioni
   ============================================ */
.services-section {
  padding: 100px 0;
  background: var(--dark);
}
.services-section .section-header h2 { color: var(--white); }
.services-section .section-header p { color: rgba(255,255,255,.6); }
.services-section .section-header .label { color: var(--red); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.service-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  background: #222;
}
.service-card__img {
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.70);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.service-card:hover .service-card__img {
  transform: scale(1.08);
  filter: brightness(.88);
}

/* Placeholder colored backgrounds when no real images */
.service-card__placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size: 3rem; color:rgba(255,255,255,.1);
  transition: transform .6s var(--ease);
}
.service-card:hover .service-card__placeholder { transform: scale(1.08); }
.sp-1 { background: linear-gradient(135deg,#1a1a1a,#2d1a1a); }
.sp-2 { background: linear-gradient(135deg,#1a1a2d,#1a1a1a); }
.sp-3 { background: linear-gradient(135deg,#1a2d1a,#1a1a1a); }
.sp-4 { background: linear-gradient(135deg,#2d1a2d,#1a1a1a); }
.sp-5 { background: linear-gradient(135deg,#2d2d1a,#1a1a1a); }
.sp-6 { background: linear-gradient(135deg,#1a2d2d,#1a1a1a); }
.sp-7 { background: linear-gradient(135deg,#2d1a1a,#1a1a2d); }
.sp-8 { background: linear-gradient(135deg,#1a2d1a,#2d1a1a); }
.sp-9 { background: linear-gradient(135deg,#2d2d2d,#1a1a1a); }

.service-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 60%);
}
.service-card__icon {
  font-size: 1.6rem;
  color: var(--red);
  margin-bottom: 8px;
  transform: translateY(4px);
  transition: transform .3s var(--ease);
}
.service-card:hover .service-card__icon { transform: translateY(0); }
.service-card__title {
  color: var(--white);
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
  font-family: var(--font-h);
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease) .05s, transform .3s var(--ease) .05s;
}
.service-card:hover .service-card__link { opacity:1; transform:translateY(0); }
.service-card__link i { font-size: .7rem; transition: transform .2s; }
.service-card__link:hover i { transform: translateX(4px); }

/* ============================================
   HOW WE WORK — Come lavoriamo
   ============================================ */
.howwework {
  padding: 100px 0;
  background: var(--gray);
  overflow: hidden;
}

.howwework__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.howwework__label { color: var(--red); font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px; }
.howwework__text h2 { margin-bottom: 24px; }
.howwework__text p { color: var(--text-light); margin-bottom: 16px; }

.steps-list { margin-top: 40px; }
.step-item {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gray2);
}
.step-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.step-num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex; align-items:center; justify-content:center;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: .9rem;
}
.step-body h4 { font-size: 1rem; margin-bottom: 4px; }
.step-body p { font-size: .9rem; color: var(--text-light); margin:0; }

.howwework__image {
  position: relative;
}
.howwework__img-wrap {
  width: 100%;
  height: 520px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg,#2a2a2a,#1a1a1a);
}
.howwework__img {
  width:100%; height:520px; object-fit:cover; display:block;
}
/* Placeholder SVG "Come lavoriamo" quando nessuna foto è caricata dal Customizer */
.howwework__img-placeholder {
  width:100%; height:520px;
  display:block;
  overflow:hidden;
}
.howwework__img-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
}
.howwework__material-box {
  position: absolute;
  bottom: -20px; right: -20px;
  background: var(--dark);
  color: var(--white);
  padding: 24px 28px;
  max-width: 260px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.howwework__material-box h4 { color: var(--red); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; }
.howwework__material-box ul { list-style:disc; padding-left:16px; }
.howwework__material-box li { font-size:.8rem; color:rgba(255,255,255,.7); margin-bottom:4px; }

/* ============================================
   SECTORS — I Settori
   ============================================ */
.sectors {
  padding: 100px 0;
  background: var(--white);
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 3px;
}

.sector-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.sector-card.tall { grid-row: span 2; }
.sector-card__bg {
  width:100%;
  height: 340px;
  object-fit: cover;
  display: block;
  filter: brightness(.62);
  transition: transform .7s var(--ease), filter .45s var(--ease);
}
.sector-card.tall .sector-card__bg { height: 683px; }.sector-card__bg-placeholder {
  width:100%; height:340px;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; color:rgba(255,255,255,.08);
  transition: transform .7s var(--ease);
}
.sector-card.tall .sector-card__bg-placeholder { height: 683px; }
.s-bg-1 { background: linear-gradient(135deg,#1a2d3d,#0d1520); }
.s-bg-2 { background: linear-gradient(135deg,#2d1a1a,#1a0d0d); }
.s-bg-3 { background: linear-gradient(135deg,#1a2d1a,#0d1a0d); }
.s-bg-4 { background: linear-gradient(135deg,#2d2d1a,#1a1a0d); }
.s-bg-5 { background: linear-gradient(135deg,#2d1a2d,#1a0d1a); }
.s-bg-6 { background: linear-gradient(135deg,#1a1a2d,#0d0d1a); }

.sector-card:hover .sector-card__bg,
.sector-card:hover .sector-card__bg-placeholder { transform: scale(1.06); filter: brightness(.90); }

.sector-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transition: background .4s;
  z-index: 2;
}
.sector-card:hover .sector-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 45%); }

.sector-card__icon {
  font-size: 1.5rem;
  color: var(--red);
  margin-bottom: 12px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .4s var(--ease) .1s, opacity .4s var(--ease) .1s;
}
.sector-card:hover .sector-card__icon { transform:translateY(0); opacity:1; }

.sector-card__title {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
  font-family: var(--font-h);
}
.sector-card__desc {
  color: rgba(255,255,255,.0);
  font-size: .85rem;
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: color .4s var(--ease), max-height .4s var(--ease);
}
.sector-card:hover .sector-card__desc { color: rgba(255,255,255,.8); max-height: 100px; }

.sector-card__line {
  width: 0; height: 2px;
  background: var(--red);
  margin-top: 12px;
  transition: width .4s var(--ease) .1s;
}
.sector-card:hover .sector-card__line { width: 40px; }

/* ============================================
   QUOTE / PREVENTIVO
   ============================================ */
.quote-section {
  padding: 0;
  background: var(--dark);
}
.quote-section .container { padding: 0; max-width: 100%; }

.quote-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
.quote-image {
  position: relative;
  overflow: hidden;
}
.quote-image img {
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.75);
}
.quote-image-placeholder {
  width:100%; height:100%;
  background: linear-gradient(135deg,#1a1a2d,#2d1a1a);
  display:flex; align-items:center; justify-content:center;
  font-size: 8rem; color:rgba(255,255,255,.05);
}
.quote-image-overlay {
  position: absolute;
  inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,.38) 55%, rgba(13,13,13,.82) 100%);
}

.quote-form-wrapper {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote-form-wrapper h2 { color: var(--white); margin-bottom: 12px; }
.quote-form-wrapper > p { color: rgba(255,255,255,.6); margin-bottom: 40px; }
.quote-form-wrapper > p strong { color: var(--red); }

.quote-form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quote-form input,
.quote-form textarea,
.quote-form select {
  width:100%;
  padding: 16px 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  font-family: var(--font-b);
  font-size: 1rem;
  transition: border-color .2s, background .2s;
  outline: none;
}
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: rgba(255,255,255,.4); font-size: .95rem; }
.quote-form input:focus,
.quote-form textarea:focus { border-color: var(--red); background: rgba(255,255,255,.09); }
.quote-form textarea { height: 150px; resize: vertical; }
.privacy-check { display:flex; align-items:flex-start; gap:10px; }
.privacy-check input { width:auto; flex-shrink:0; margin-top:3px; }
.privacy-check label { font-size:.8rem; color:rgba(255,255,255,.5); }
.privacy-check a { color:rgba(255,255,255,.7); text-decoration:underline; }
#form-message.success { color:#4caf50; }
#form-message.error { color:#f44336; }

/* ============================================
   BLOG
   ============================================ */
.blog-section {
  padding: 100px 0;
  background: var(--gray);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
/* Up to 6 articles: 3 per row */

.blog-card {
  background: var(--white);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,.12); }

.blog-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #ddd;
}
.blog-card__image img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s var(--ease);
}
.blog-card:hover .blog-card__image img { transform: scale(1.06); }

.blog-card__cat {
  position: absolute;
  top:16px; left:16px;
  background: var(--red);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.blog-card__content { padding: 24px; }
.blog-card__meta {
  font-size: .75rem;
  color: var(--text-light);
  margin-bottom: 10px;
  display: flex; gap:16px; align-items:center;
}
.blog-card__meta i { color: var(--red); }
.blog-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
  transition: color .2s;
}
.blog-card:hover .blog-card__title { color: var(--red); }
.blog-card__excerpt { font-size: .88rem; color: var(--text-light); margin-bottom: 16px; }
.blog-card__link {
  display: inline-flex; align-items:center; gap:6px;
  color: var(--red); font-size: .8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition: gap .2s;
}
.blog-card__link:hover { gap: 10px; }
.blog-cta { text-align:center; margin-top:48px; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--dark2);
  color: rgba(255,255,255,.7);
  padding: 80px 0 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand img { height: 48px; width:auto; margin-bottom:20px; }
.footer-brand p { font-size:.875rem; line-height:1.7; margin-bottom:20px; }
.footer-brand-name {
  font-family: 'Bebas Neue', 'Bebas Neue Fallback', var(--font-h), sans-serif;
  font-size: 2rem;
  font-weight: 400;  /* Bebas Neue non ha bold, 400 è il peso corretto */
  color: var(--white);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}
.footer-tagline {
  font-size: .7rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.footer-social { display:flex; gap:12px; }
.footer-social a {
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); font-size:.9rem;
  transition: border-color .2s, color .2s, background .2s;
}
.footer-social a:hover { border-color:var(--red); color:var(--white); background:var(--red); }

.footer-col h4 {
  color: var(--white);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color:rgba(255,255,255,.6); font-size:.875rem; transition:color .2s, transform .2s; display:inline-flex; align-items:center; gap:8px; }
.footer-col a:hover { color:var(--red); transform: translateX(4px); }
.footer-col a i { font-size:.75rem; color:var(--red); }
.footer-contact p { font-size:.875rem; margin-bottom:10px; display:flex; gap:8px; align-items:flex-start; }
.footer-contact i { color:var(--red); flex-shrink:0; margin-top:3px; }
.footer-contact a { color:rgba(255,255,255,.7); }
.footer-contact a:hover { color:var(--white); }

/* Blocco indirizzo con icona e testo allineati */
.footer-addr {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.footer-addr__icon {
  color: var(--red);
  font-size: .8rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.footer-addr__body {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
}
.footer-addr__label {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 1px;
}

/* Email in colonna, allineate sotto l'icona */
.footer-emails-block {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.footer-emails-block__icon {
  color: var(--red);
  font-size: .8rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.footer-emails-block__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.footer-emails-block__list a {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  transition: color .2s;
  display: block;
}
.footer-emails-block__list a:hover { color: var(--white); transform: none; }

.footer-bottom {
  padding: 20px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size: .78rem; color:rgba(255,255,255,.4);
}
.footer-bottom a { color:rgba(255,255,255,.4); transition:color .2s; }
.footer-bottom a:hover { color:rgba(255,255,255,.7); }
.footer-bottom-links { display:flex; gap:20px; }

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-to-top {
  position:fixed; bottom:32px; right:32px;
  width:46px; height:46px;
  background:var(--red); color:var(--white);
  border:none; cursor:pointer; z-index:900;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s, background .2s;
}
.scroll-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.scroll-to-top:hover { background:var(--red-dark); }

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-50px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left.revealed { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(50px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-right.revealed { opacity:1; transform:translateX(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }
.reveal-delay-5 { transition-delay:.5s; }

/* ============================================
   PAGE TEMPLATES — Inner pages HERO (Professional v2)
   ============================================ */
.page-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
  padding-bottom: 0;
  margin-top: 0;
}

/* Titolo animato — entra dal basso con fade */
.page-hero__content {
  opacity: 0;
  transform: translateY(30px);
  animation: heroContentIn 1s cubic-bezier(0.4,0,0.2,1) .3s forwards;
}
@keyframes heroContentIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Su pagine interne (non-home) la hero deve toccare l'header senza banda bianca */
body:not(.home) .page-hero:first-of-type {
  margin-top: 0;
  box-shadow: none;
}

/* Animated steel-grid pattern overlay */
.page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* Red glow bottom-left */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(208,31,43,.18) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.3) saturate(.8);
}
.page-hero__bg-placeholder {
  position: absolute; inset: 0; z-index: 0;
}

/* Diagonal cut at the bottom */
.page-hero__cut {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 60px;
  background: var(--white);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 3;
}
.page-hero__cut--gray { background: var(--gray); }
.page-hero__cut--dark { background: var(--dark); }

.page-hero__content {
  position: relative; z-index: 2;
  color: var(--white);
}
.page-hero .container { width: 100%; }

.page-hero__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.page-hero__label::before {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--red);
  flex-shrink: 0;
}

.page-hero__title {
  color: var(--white);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 0;
  line-height: 1.1;
  /* Subtle text shadow for depth */
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}

.page-hero__subtitle {
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  margin-top: 12px;
  margin-bottom: 20px;
  max-width: 520px;
}

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  margin-top: 16px;
  font-size: .78rem;
  color: rgba(255,255,255,.4);
}
.page-hero__breadcrumb a {
  color: rgba(255,255,255,.4);
  transition: color .2s;
  padding: 0;
}
.page-hero__breadcrumb a:hover { color: rgba(255,255,255,.8); }
.page-hero__breadcrumb .sep {
  margin: 0 10px;
  font-size: .55rem;
  color: rgba(255,255,255,.25);
}
.page-hero__breadcrumb span { color: var(--red); }

/* ============================================
   LAVORAZIONI PAGE — Tab System
   ============================================ */
.lavorazioni-page { padding: 80px 0; }

.lavorazioni-tabs {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--white);
  box-shadow: 0 4px 40px rgba(0,0,0,.1);
  align-items: start; /* key: grid non si allunga col contenuto */
}

.tabs-nav {
  background: var(--dark);
  padding: 0;
  position: sticky;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--red) var(--dark);
}
.tabs-nav::-webkit-scrollbar { width: 4px; }
.tabs-nav::-webkit-scrollbar-track { background: var(--dark); }
.tabs-nav::-webkit-scrollbar-thumb { background: var(--red); }
.tab-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background .2s, border-color .2s;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tab-nav-item:hover { background: rgba(255,255,255,.05); border-left-color: rgba(208,31,43,.5); }
.tab-nav-item.active { background: rgba(208,31,43,.12); border-left-color: var(--red); }
.tab-nav-item i { color: var(--red); font-size: 1rem; flex-shrink:0; width:20px; text-align:center; }
.tab-nav-item span { color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 600; font-family: var(--font-h); }
.tab-nav-item.active span { color: var(--white); }

.tabs-content { padding: 48px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel h2 { margin-bottom: 8px; }
.tab-panel .tab-label { color:var(--red); font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px; display:block; }
.tab-panel p { color:var(--text-light); margin-bottom:16px; }
.tab-panel-images {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px;
}
.tab-panel-img { overflow: hidden; }
.tab-panel-img img { width:100%; height:260px; object-fit:cover; transition: transform .4s; }
.tab-panel-img img:hover { transform: scale(1.03); }
.tab-panel-images img { width:100%; height:260px; object-fit:cover; }
.tab-panel-images .img-placeholder {
  width:100%; height:260px;
  background: var(--gray);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray2); font-size:2rem;
  border: 2px dashed var(--gray2);
}

/* ============================================
   PLASMA PAGE
   ============================================ */
.plasma-page { padding: 80px 0; }
.plasma-intro {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:80px;
}
.plasma-intro h2 { margin-bottom:20px; }
.plasma-intro p { color:var(--text-light); margin-bottom:16px; }
.plasma-intro img { width:100%; height:400px; object-fit:cover; }

.plasma-specs {
  background:var(--dark); padding:60px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:60px;
}
.spec-item { text-align:center; }
.spec-icon { font-size:2rem; color:var(--red); margin-bottom:16px; }
.spec-value { font-family:var(--font-h); font-size:1.8rem; font-weight:800; color:var(--white); margin-bottom:6px; }
.spec-label { font-size:.8rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.1em; }

.plasma-gallery {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
}
.plasma-gallery img { width:100%; height:300px; object-fit:cover; transition:transform .4s; cursor:pointer; }
.plasma-gallery img:hover { transform:scale(.98); }

/* ============================================
   AZIENDA PAGE
   ============================================ */
.azienda-page { padding: 80px 0; }
.azienda-intro {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:80px;
}
.azienda-intro p { color:var(--text-light); margin-bottom:16px; }
.azienda-values {
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:80px;
}
.value-card {
  text-align:center; padding:40px 24px;
  border: 1px solid var(--gray2);
  transition: border-color .3s, box-shadow .3s;
}
.value-card:hover { border-color:var(--red); box-shadow:0 10px 40px rgba(0,0,0,.08); }
.value-icon { font-size:2rem; color:var(--red); margin-bottom:20px; }
.value-card h3 { font-size:1.1rem; margin-bottom:12px; }
.value-card p { font-size:.9rem; color:var(--text-light); }
.azienda-team { background:var(--gray); padding:80px 0; margin:0 -24px; padding-left:24px; padding-right:24px; }
.azienda-team h2 { margin-bottom:48px; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.team-card { background:var(--white); overflow:hidden; }
.team-photo { height:260px; background:var(--gray2); display:flex; align-items:center; justify-content:center; font-size:4rem; color:var(--gray2); }
.team-photo img { width:100%; height:100%; object-fit:cover; }
.team-info { padding:24px; }
.team-info h3 { font-size:1rem; margin-bottom:4px; }
.team-info p { font-size:.85rem; color:var(--red); font-weight:600; margin:0; }

/* ============================================
   CONTATTI PAGE
   ============================================ */
.contatti-page { padding: 80px 0 0; }
.contatti-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-bottom:80px;
}
.contatti-info h2 { margin-bottom:32px; }
.contatti-grid > div > h2,
.contatti-grid .reveal-left > h2 { margin-bottom: 48px; padding-bottom: 20px; border-bottom: 3px solid var(--red); font-size: 2rem; }
.contatti-info-item {
  display:flex; gap:24px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid var(--gray2);
}
.contatti-info-item:last-child { border-bottom:none; }
.contatti-icon {
  width:58px; height:58px; flex-shrink:0;
  background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.contatti-info-text h4 { font-size:1.05rem; font-weight:700; margin-bottom:8px; font-family: var(--font-h); letter-spacing:.05em; text-transform:uppercase; }
.contatti-info-text p, .contatti-info-text a { font-size:1rem; color:var(--text-light); line-height:1.7; }
.contatti-info-text a:hover { color:var(--red); }
.contatti-map {
  background:var(--gray); height:480px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0;
  overflow:hidden;
}
.contatti-form-section h2 { margin-bottom:40px; }

/* ============================================
   FABBRO PAGE
   ============================================ */
.fabbro-page { padding: 80px 0; }
.fabbro-intro {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:80px;
}
.fabbro-intro p { color:var(--text-light); margin-bottom:16px; }
.fabbro-services {
  display:grid; grid-template-columns:repeat(2,1fr); gap:3px;
  margin-bottom:80px;
}
.fabbro-card {
  position:relative; overflow:hidden;
  height:320px; cursor:pointer;
  background:var(--dark);
}
.fabbro-card__bg {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.5);
  transition: transform .5s var(--ease), filter .5s;
}
.fabbro-card:hover .fabbro-card__bg { transform:scale(1.07); filter:brightness(.3); }
.fabbro-card__bg-ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; color:rgba(255,255,255,.06);
  transition:transform .5s var(--ease);
}
.fabbro-card:hover .fabbro-card__bg-ph { transform:scale(1.07); }
.f-bg1 { background:linear-gradient(135deg,#1a1a2d,#111); }
.f-bg2 { background:linear-gradient(135deg,#2d1a1a,#111); }
.f-bg3 { background:linear-gradient(135deg,#1a2d1a,#111); }
.f-bg4 { background:linear-gradient(135deg,#2d2d1a,#111); }
.fabbro-card__content {
  position:absolute; bottom:0; left:0; right:0;
  padding:28px;
  background:linear-gradient(to top, rgba(0,0,0,.9), transparent);
}
.fabbro-card__content h3 { color:var(--white); font-size:1rem; margin-bottom:6px; }
.fabbro-card__content p {
  color:rgba(255,255,255,0); font-size:.85rem;
  transition: color .3s var(--ease);
  max-height:0; overflow:hidden;
}
.fabbro-card:hover .fabbro-card__content p { color:rgba(255,255,255,.7); max-height:80px; }

/* ============================================
   ALLESTIMENTI PAGE
   ============================================ */
.allestimenti-page { padding: 80px 0; }
.allestimenti-showcase {
  display:grid; grid-template-columns:2fr 1fr; gap:3px;
  margin-bottom:80px;
}
.allestimenti-showcase .main-img,
.allestimenti-showcase .side-imgs { display:flex; flex-direction:column; gap:3px; }
.allestimenti-showcase img,
.showcase-ph { height:360px; width:100%; object-fit:cover; }
.side-imgs img,
.side-imgs .showcase-ph { height:176px; }
.showcase-ph {
  background:linear-gradient(135deg,#1a1a2d,#111);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:rgba(255,255,255,.06);
}
.allestimenti-types {
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:80px;
}
.alles-showcase-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.alles-type {
  padding:32px; border:1px solid var(--gray2);
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.alles-type:hover { border-color:var(--red); box-shadow:0 10px 40px rgba(0,0,0,.08); transform:translateY(-4px); }
.alles-type i { font-size:1.8rem; color:var(--red); margin-bottom:16px; display:block; }
.alles-type h3 { font-size:1rem; margin-bottom:10px; }
.alles-type p { font-size:.88rem; color:var(--text-light); }

/* ============================================
   STRUTTURE FV PAGE
   ============================================ */
.fv-page { padding: 80px 0; }
.fv-hero-visual {
  background:linear-gradient(135deg,#0d1520,#1a2d1a);
  height:360px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:64px;
  position:relative; overflow:hidden;
}
.fv-hero-visual::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(208,31,43,.08) 0%, transparent 70%);
}
.fv-icon-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  padding:48px; position:relative; z-index:1;
}
.fv-icon-item {
  text-align:center; color:rgba(255,255,255,.6);
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s, background .3s;
}
.fv-icon-item:hover { border-color:var(--red); background:rgba(208,31,43,.1); }
.fv-icon-item i { font-size:2rem; color:var(--red); display:block; margin-bottom:12px; }
.fv-icon-item span { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.fv-content {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-bottom:80px; align-items:center;
}
.fv-content p { color:var(--text-light); margin-bottom:16px; }
.fv-types {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.fv-type {
  padding:28px; background:var(--gray);
  border-bottom:3px solid var(--red);
  transition:transform .3s, box-shadow .3s;
}
.fv-type:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.fv-type h4 { margin-bottom:8px; font-size:.95rem; }
.fv-type p { font-size:.85rem; color:var(--text-light); margin:0; }

/* ============================================
   BLOG - Archive & Single
   ============================================ */
.blog-archive { padding: 80px 0; }
.blog-archive-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.blog-single { padding: 80px 0; }
.blog-single__inner {
  display:grid; grid-template-columns:1fr 320px; gap:64px;
}
.post-content { max-width:100%; }
.post-content h1 { margin-bottom:20px; }
.post-meta { display:flex; gap:24px; align-items:center; margin-bottom:32px; font-size:.85rem; color:var(--text-light); }
.post-meta a { color:var(--red); }
.post-featured-img { width:100%; height:460px; object-fit:cover; margin-bottom:40px; }
.post-body h2 { font-size:1.4rem; margin:32px 0 16px; }
.post-body p { margin-bottom:20px; color:var(--text-light); }
.post-body img { max-width:100%; margin:24px 0; }
.sidebar { }
.sidebar-widget { background:var(--gray); padding:28px; margin-bottom:28px; }
.sidebar-widget h4 { font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--red); display:inline-block; }
.recent-post { display:flex; gap:12px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--gray2); }
.recent-post:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.recent-post img { width:64px; height:64px; object-fit:cover; flex-shrink:0; }
.recent-post-info h5 { font-size:.85rem; margin-bottom:4px; }
.recent-post-info span { font-size:.75rem; color:var(--text-light); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .primary-menu > li > a { padding: 0 8px; font-size: .68rem; }
  .brand__name { font-size: 1.25rem; }
  .header-bar__cta { padding: 9px 14px; font-size: .68rem; margin-left: 8px; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Fix zoom alto (125%-175%) su schermi piccoli */
@media (max-width: 1024px) and (min-width: 901px) {
  .primary-menu > li > a { padding: 0 7px; font-size: .65rem; letter-spacing: .04em; }
  .brand__name { font-size: 1.15rem; }
  .brand img { height: 44px; }
  .header-bar__cta { padding: 8px 12px; font-size: .65rem; margin-left: 6px; }
  .lang-switcher { margin-left: 6px; padding-left: 6px; }
}

@media (max-width: 900px) {
  .mobile-menu-toggle { display: flex; align-items: center; }
  /* Header mobile compatto — ANCORATO IN ALTO (fix sticky: top:0 esplicito) */
  :root { --header-h: 68px; }
  .site-header { height: var(--header-h); top: 0; border-bottom-color: transparent; }
  /* admin bar mobile gestita sopra (≤782px → top:0) */
  .header-bar { height: 100%; }

  /* Hamburger SEMPRE visibile: quando il menu è aperto l'icona diventa scura
     così non sparisce sullo sfondo del menu. Forziamo il colore in entrambi gli stati. */
  .mobile-menu-toggle { color: var(--white); z-index: 1002; position: relative; }
  .site-header.scrolled .mobile-menu-toggle { color: var(--dark); }
  /* Quando il menu è aperto, l'icona X resta bianca e ben visibile sul menu scuro */
  .main-navigation.open ~ .mobile-menu-toggle,
  body.nav-open .mobile-menu-toggle { color: var(--white) !important; }
  .header-bar__inner {
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand { gap: 10px; align-items: center; }
  .brand img { height: 38px; }
  .brand__name { font-size: 1.15rem; }
  .brand__tagline { font-size: .48rem; }

  /* Menu mobile — sfondo DARK per coerenza col tema */
  .main-navigation {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    background: var(--dark);
    z-index: 999;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 32px;
    -webkit-overflow-scrolling: touch;
  }
  .main-navigation.open { display: flex; }

  /* Lang switcher IN CIMA al menu mobile */
  .main-navigation .lang-switcher {
    order: -1;
    padding: 16px 24px 8px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin: 0;
  }

  .primary-menu { flex-direction:column; gap:0; width:100%; padding:16px 0; }
  /* Voci centrate, testo bianco sul fondo scuro */
  .primary-menu > li { width:100%; text-align:center; }
  .primary-menu > li > a {
    height:auto; padding:16px 24px; font-size:.95rem;
    color:#fff !important;
    justify-content:center; text-align:center;
    display:flex; align-items:center; gap:0;
    position: relative;
  }
  /* La parola della voce ha un piccolo intorno cliccabile (qualche mm): toccando
     QUI si apre la pagina. Tutto il resto della barra apre/chiude la tendina. */
  .primary-menu > li.menu-item-has-children > a .menu-label {
    display: inline-block;
    padding: 10px 16px;
    margin: -10px 0;
    position: relative;
    z-index: 4;
  }
  .primary-menu > li:not(.menu-item-has-children) > a .menu-label {
    display: inline-block;
  }
  .primary-menu > li > a::after { display:none; }
  /* Freccia dropdown: absolute a destra, NON nel flusso flex
     così il testo rimane perfettamente centrato */
  .primary-menu > li.menu-item-has-children > a .chevron {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: transform .2s;
    margin-left: 0;
    cursor: pointer;
    z-index: 3;
  }
  /* La direzione della freccia è gestita via JS (fa-chevron-down/up):
     niente rotazione CSS qui, altrimenti su tap l'hover "appiccicato"
     e .open si sommano e la freccia non gira. */
  .primary-menu > li.menu-item-has-children.open > a .chevron,
  .primary-menu > li.menu-item-has-children:hover > a .chevron {
    transform: none;
  }
  /* Sottomenu: si apre verso il basso, centrato, sfondo leggermente più chiaro */
  .sub-menu {
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none;
    background:rgba(255,255,255,.04);
    display:none; pointer-events:auto;
    width:100%; text-align:center;
  }
  .primary-menu > li.open > .sub-menu { display:block; }
  .sub-menu li { text-align:center; }
  .sub-menu li a {
    padding:13px 32px; color:rgba(255,255,255,.7) !important;
    justify-content:center; text-align:center;
  }
  .sub-menu li a:hover { color:#fff !important; background:rgba(208,31,43,.15); }
  .header-bar__cta { display:none; }
  .lang-switcher { margin-left: auto; margin-right: 12px; border-left: none; padding-left: 0; }

  /* Lavorazioni tab mobile — simmetria fissa */
  .lavorazioni-tabs { grid-template-columns:1fr; }
  .tabs-nav { display:flex; flex-wrap:wrap; }
  .tab-nav-item {
    border-bottom: none;
    border-left: none;
    border-bottom: 3px solid transparent;
    flex: 0 0 50%; /* 2 colonne simmetriche */
    min-height: 52px; /* altezza fissa per simmetria */
    display: flex;
    align-items: center;
  }
  .tab-nav-item.active { border-bottom-color:var(--red); border-left:none; }

  .whoweare__grid, .howwework__grid, .quote-wrapper, .plasma-intro, .azienda-intro, .contatti-grid, .fabbro-intro, .fv-content { grid-template-columns:1fr; }

  /* Reset frame e margin negative su mobile per Chi siamo
     (la sporgenza fuori container non funziona a viewport stretto) */
  .whoweare__visual { margin-left: 0; margin-right: 0; }
  .whoweare__visual::before { display: none; }
  .whoweare__img-wrap, .whoweare__img-main, .whoweare__img-placeholder { height: 420px; }

  .footer-top { grid-template-columns:1fr 1fr; }
  .sectors-grid { grid-template-columns:1fr; }
  .sector-card.tall .sector-card__bg { height:340px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .allestimenti-showcase { grid-template-columns:1fr; }

  /* Overlay hero -30% SOLO su mobile: su schermi scuri i video erano troppo bui */
  .page-hero__overlay { background: rgba(0,0,0,.18) !important; }
  .hero-video-overlay { background: rgba(0,0,0,.20) !important; }
  /* Overlay inline dei singoli hero (allestimenti, contatti, ecc.) attenuati su mobile */
  .page-hero > div[style*="rgba(0,0,0"] { opacity: .7; }
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns:1fr; }
  .blog-grid, .blog-archive-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr; gap:20px; }
  .plasma-specs { grid-template-columns:1fr; padding:32px; }
  .azienda-values, .team-grid, .allestimenti-types, .fv-types { grid-template-columns:1fr; }
  .quote-form-wrapper { padding:48px 24px; }
  .footer-top { grid-template-columns:1fr; }
  .blog-single__inner { grid-template-columns:1fr; }
  .fv-icon-grid { grid-template-columns:repeat(2,1fr); }
  .fabbro-services { grid-template-columns:1fr; }
  .tab-panel-images { grid-template-columns:1fr; }
  /* Griglia 3 card allestimenti → 1 colonna, niente scroll orizzontale */
  .alles-showcase-grid { grid-template-columns: 1fr; }
  /* Box statistiche 40+/24-48h/100%: impila in verticale, niente testo mozzato */
  .contatti-stats, .stats-inline, .stats-3 { grid-template-columns:1fr !important; }
  .stats-4 { grid-template-columns:repeat(2,1fr) !important; padding:40px 24px !important; gap:32px 16px !important; }
}

/* end of styles */

/* ============================================================
   PRO ANIMATIONS — Notarfer v3
   ============================================================ */

/* ── REVEAL AL SCROLL con stagger ── */
/* Le definizioni base di .reveal/.reveal-left/.reveal-right sono unificate sopra
   (sezione SCROLL REVEAL). Qui restano solo le regole di stagger sui figli. */

/* Stagger: ogni figlio .reveal ritarda leggermente */
.stagger-children .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children .reveal:nth-child(2) { transition-delay: .1s; }
.stagger-children .reveal:nth-child(3) { transition-delay: .2s; }
.stagger-children .reveal:nth-child(4) { transition-delay: .3s; }
.stagger-children .reveal:nth-child(5) { transition-delay: .4s; }
.stagger-children .reveal:nth-child(6) { transition-delay: .5s; }

/* ── LINEA ROSSA che si disegna prima dei titoli ── */
.section-title-wrap {
  position: relative;
  overflow: hidden;
}
.section-title-wrap::before {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: var(--red);
  margin-bottom: 16px;
  transition: width .7s cubic-bezier(0.4,0,0.2,1);
}
.section-title-wrap.revealed::before {
  width: 60px;
}

/* ── HOVER SULLE CARD ── */
.service-card,
.lav-card,
.sector-card,
.blog-card,
.cert-card {
  transition: transform .3s cubic-bezier(0.4,0,0.2,1),
              box-shadow .3s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.service-card::after,
.lav-card::after,
.sector-card::after,
.blog-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(0.4,0,0.2,1);
}
.service-card:hover,
.lav-card:hover,
.sector-card:hover,
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}
.service-card:hover::after,
.lav-card:hover::after,
.sector-card:hover::after,
.blog-card:hover::after {
  transform: scaleX(1);
}

/* ── PARALLAX HERO ── */
.hero-parallax-bg {
  will-change: transform;
  transition: none;
}

/* ── CONTATORI ANIMATI ── */
.stat-num[data-target] {
  display: inline-block;
}

/* Reduced motion — rispetta le preferenze utente */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .section-title-wrap::before { width: 60px !important; transition: none !important; }
  .hero-parallax-bg { transform: none !important; }
}

/* ============================================================
   VIDEO DI SFONDO nelle hero delle pagine interne
   Pronti ad accogliere video in loop quando caricati
   ============================================================ */
.page-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.75); /* leggero scurimento, video ben visibile */
  pointer-events: none;
}

/* Quando c'è un video, nasconde il bg placeholder */
.page-hero:has(.page-hero__video) .page-hero__bg-placeholder { display: none; }
.page-hero:has(.page-hero__video) .page-hero__bg { display: none; }

/* Overlay minimo — solo per leggibilità testo */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.28);
}

/* Assicura che il contenuto sia sempre sopra video e overlay */
.page-hero .container { position: relative; z-index: 2; }

/* ============================================================
   HERO VIDEO HOMEPAGE — sostituisce lo slider
   ============================================================ */
.hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.30);
}

.hero-video-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  max-width: 860px;
  padding: 0 24px;
  /* Animazione fade in dal basso */
  opacity: 0;
  transform: translateY(28px);
  animation: heroVideoIn 1.1s cubic-bezier(0.4,0,0.2,1) .8s forwards;
}

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

/* Linea rossa che si disegna */
.hero-video-line {
  width: 0;
  height: 2px;
  background: var(--red);
  margin: 0 auto 24px;
  animation: heroLineIn .7s cubic-bezier(0.4,0,0.2,1) 1.4s forwards;
}
@keyframes heroLineIn {
  to { width: 48px; }
}

/* Opzione C — label uppercase piccolo sopra, titolo Cormorant elegante sotto */
.hero-video-eyebrow {
  font-family: var(--font-b);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 18px;
  opacity: 0;
  animation: heroVideoIn 1s cubic-bezier(0.4,0,0.2,1) 1.5s forwards;
}

.hero-video-title {
  font-family: 'Bebas Neue', 'Bebas Neue Fallback', 'Barlow Condensed Fallback', sans-serif;
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 24px;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
  opacity: 0;
  animation: heroVideoIn 1s cubic-bezier(0.4,0,0.2,1) 1.8s forwards;
}

/* Parola corsiva stile Turner — avvolge "metallurgica" */
.hero-script-word {
  font-family: 'Dancing Script', 'Dancing Script Fallback', cursive;
  font-weight: 700;
  font-size: 1.1em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--white);
  position: relative;
  display: inline-block;
}
.hero-script-word::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  animation: heroUnderline .6s cubic-bezier(0.4,0,0.2,1) 2.8s forwards;
}
@keyframes heroUnderline {
  to { transform: scaleX(1); }
}

.hero-video-sub {
  font-family: var(--font-b);
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 44px;
  opacity: 0;
  animation: heroVideoIn 1s cubic-bezier(0.4,0,0.2,1) 2.1s forwards;
}

.hero-video-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroVideoIn 1s cubic-bezier(0.4,0,0.2,1) 2.3s forwards;
}

/* Scroll hint */
.hero-video-section .scroll-hint {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 3;
}

/* Pagine interne — hero full screen */
.page-hero {
  height: 100vh;
  min-height: 600px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-video-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .hero-video-cta { flex-direction: column; align-items: center; }
  .page-hero { height: 100vh; min-height: 500px; }
}

/* Scroll hint nelle pagine interne */
.page-scroll-hint {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.7);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  animation: scrollHint 2s ease-in-out infinite;
  cursor: pointer;
}
.page-scroll-hint i { font-size: 1.1rem; }

/* ============================================================
   HERO PAGINE MINORI — 85vh (certificazioni, partner, blog, contatti)
   ============================================================ */
.page-hero--minor {
  height: 85vh;
  min-height: 480px;
}
@media (max-width: 768px) {
  .page-hero--minor { height: 70vh; min-height: 400px; }
}


/* ============================================================
   CONTATTI — Box social sotto il form preventivo
   ============================================================ */
.page-hero--contact {
  height: 85vh;
  min-height: 480px;
}

.contact-social-box {
  margin-top: 34px;
  padding: 34px;
  background: #f7f7f7;
  border: 1px solid #e7e7e7;
  border-left: 5px solid var(--red);
}

.contact-social-box__label {
  display: block;
  margin-bottom: 10px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.contact-social-box h3 {
  margin: 0 0 14px;
  color: var(--dark);
  font-size: 28px;
  line-height: 1.1;
  text-transform: uppercase;
}

.contact-social-box p {
  margin: 0 0 26px;
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.7;
}

.contact-social-box__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-social-box__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  background: var(--dark);
  color: var(--white);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all .25s ease;
}

.contact-social-box__links a:hover {
  background: var(--red);
  color: var(--white);
}

@media (max-width: 768px) {
  .page-hero--contact { height: 70vh; min-height: 400px; }
  .contact-social-box { padding: 28px 24px; }
  .contact-social-box__links { flex-direction: column; }
  .contact-social-box__links a { width: 100%; }
}