/* =========================================================
   DATECH TP — Tecnology Piping
   Design system: grigio caldo + azzurro/blu · editorial industrial
   ========================================================= */

:root{
  /* — warm neutrals (grigio caldo) — */
  --ink:        #16181B;
  --ink-2:      #20242A;
  --ink-3:      #2B3037;
  --paper:      #F7F4EE;   /* warm white */
  --bg:         #ECE7DE;   /* grigio caldo */
  --bg-2:       #E2DCCF;   /* warm gray deep */
  --bg-3:       #D6CFC0;

  /* — blue / azzurro — */
  --blue:       #0C4E86;   /* deep corporate blue */
  --blue-2:     #1872B8;
  --azzurro:    #3AA0E0;   /* accent azzurro */
  --azzurro-2:  #7FC2EC;
  --steel:      #6E8494;   /* steel blue-gray */

  /* — semantic — */
  --fg:         var(--ink);
  --fg-soft:    #585B5F;
  --fg-mute:    #8C8A84;
  --line:       rgba(22,24,27,.14);
  --line-2:     rgba(22,24,27,.08);
  --line-light: rgba(247,244,238,.16);

  /* — type — */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  /* — layout — */
  --gut: clamp(20px, 5vw, 96px);
  --maxw: 1560px;
  --radius: 8px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.62,.05,.01,.99);

  /* — blueprint texture (griglia tecnica) — */
  --blueprint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cpath d='M220 .5H0M.5 0v220' fill='none' stroke='rgba(22,24,27,.022)' stroke-width='1'/%3E%3Cpath d='M110 104v12M104 110h12' fill='none' stroke='rgba(12,78,134,.04)' stroke-width='1'/%3E%3C/svg%3E");

  --nav-h: 84px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip; }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--fg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--azzurro); color:#fff; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(90px,12vw,190px); }

/* thin custom scrollbar */
html{ scrollbar-width:thin; scrollbar-color:rgba(22,24,27,.32) transparent; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(22,24,27,.26); border-radius:10px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:rgba(22,24,27,.45); }

/* =========================================================
   PAGE TRANSITIONS (View Transitions API — progressive)
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-old(root){ animation:vt-out .4s cubic-bezier(.55,0,.6,.4) both; }
  ::view-transition-new(root){ animation:vt-in .65s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-1.6vh) scale(.992); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(1.8vh); } }

/* ---------- grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:8000; background:transparent; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--azzurro)); transform-origin:left; }

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; mix-blend-mode:difference; display:none; }
.cursor__dot{ position:fixed; width:6px; height:6px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
.cursor__ring{
  position:fixed; width:38px; height:38px; border:1px solid rgba(255,255,255,.85); border-radius:50%;
  transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;
}
.cursor__label{
  position:fixed; transform:translate(-50%,-50%); color:#fff; font:600 11px/1 var(--mono);
  letter-spacing:.06em; text-transform:uppercase; opacity:0; transition:opacity .25s;
}
.cursor.is-grow .cursor__ring{ width:74px; height:74px; background:rgba(255,255,255,.06); }
.cursor.is-label .cursor__label{ opacity:1; }
.cursor.is-hide .cursor__ring{ opacity:0; }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{ position:fixed; inset:0; z-index:9999; background:var(--ink); display:grid; place-items:center; }
.preloader__inner{ width:min(440px,72vw); text-align:center; }
.preloader__logo{ width:190px; margin:0 auto 28px; opacity:.95; }
.preloader__bar{ height:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.preloader__bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--azzurro)); }
.preloader__count{ margin-top:14px; font:400 12px/1 var(--mono); color:rgba(255,255,255,.55); letter-spacing:.1em; }
.preloader__count i{ font-style:normal; }
.preloader.is-done{ transform:translateY(-100%); transition:transform 1s var(--ease) .15s; }

/* =========================================================
   NAV
   ========================================================= */
.nav{ position:fixed; top:0; left:0; right:0; z-index:7000; transition:transform .5s var(--ease); }
.nav.is-hidden{ transform:translateY(-100%); }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--nav-h); padding-inline:var(--gut);
  transition:background .45s var(--ease), backdrop-filter .45s, border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.is-solid .nav__inner{
  background:rgba(247,244,238,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.nav__brand{ position:relative; z-index:2; display:block; }
.nav__logo{ height:26px; width:auto; transition:opacity .4s; }
.nav__logo--dark{ position:absolute; top:0; left:0; opacity:0; }
.nav.is-solid .nav__logo--light{ opacity:0; }
.nav.is-solid .nav__logo--dark{ opacity:1; }

.nav__menu{ display:flex; gap:6px; margin-left:auto; }
.nav__menu a{
  position:relative; padding:10px 16px; font:500 14px/1 var(--body); color:#fff;
  letter-spacing:.01em; transition:color .4s;
}
.nav.is-solid .nav__menu a{ color:var(--ink); }
.nav__menu a span{ position:relative; }
.nav__menu a span::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:currentColor;
  transition:width .4s var(--ease);
}
.nav__menu a:hover span::after{ width:100%; }

.nav__cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:100px;
  background:var(--blue); color:#fff; font:600 13.5px/1 var(--body);
  border:1px solid var(--blue); transition:transform .35s var(--ease), box-shadow .35s;
}
.nav__cta>span,.nav__cta>svg{ position:relative; z-index:2; }
.nav__cta::before{
  content:""; position:absolute; z-index:1; left:var(--mx,50%); top:var(--my,50%);
  width:22px; height:22px; border-radius:50%; background:var(--blue-2);
  transform:translate(-50%,-50%) scale(0); transition:transform .55s var(--ease);
}
.nav__cta:hover::before{ transform:translate(-50%,-50%) scale(16); }
.nav__cta svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.nav__cta:hover{ box-shadow:0 10px 30px -10px rgba(12,78,134,.6); transform:scale(1.04); }

.nav__burger{ display:none; width:46px; height:46px; position:relative; z-index:2; }
.nav__burger span{
  position:absolute; left:11px; right:11px; height:1.6px; background:#fff; transition:.4s var(--ease);
}
.nav.is-solid .nav__burger span{ background:var(--ink); }
.nav__burger span:nth-child(1){ top:19px; } .nav__burger span:nth-child(2){ bottom:19px; }
body.menu-open .nav__burger span{ background:#fff; }
body.menu-open .nav__burger span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ bottom:22px; transform:rotate(-45deg); }

/* ---------- mobile overlay menu ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:6500; background:var(--ink);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
  display:flex; flex-direction:column; justify-content:center; padding:var(--gut);
}
body.menu-open .menu-overlay{ clip-path:inset(0 0 0 0); }
.menu-overlay__nav{ display:flex; flex-direction:column; gap:6px; }
.menu-overlay__nav a{
  display:flex; align-items:baseline; gap:18px; padding:10px 0;
  font:800 clamp(40px,11vw,86px)/.98 var(--display); color:var(--paper);
  letter-spacing:-.02em; opacity:0; transform:translateY(30px);
}
body.menu-open .menu-overlay__nav a{ opacity:1; transform:none; transition:opacity .6s var(--ease),transform .6s var(--ease); }
body.menu-open .menu-overlay__nav a:nth-child(1){ transition-delay:.18s; }
body.menu-open .menu-overlay__nav a:nth-child(2){ transition-delay:.26s; }
body.menu-open .menu-overlay__nav a:nth-child(3){ transition-delay:.34s; }
body.menu-open .menu-overlay__nav a:nth-child(4){ transition-delay:.42s; }
.menu-overlay__nav a i{ font:400 14px/1 var(--mono); color:var(--azzurro); }
.menu-overlay__nav a:hover{ color:var(--azzurro); }
.menu-overlay__foot{ position:absolute; bottom:var(--gut); left:var(--gut); right:var(--gut); display:flex; flex-wrap:wrap; gap:8px 28px; font:400 13px/1 var(--mono); color:rgba(255,255,255,.5); }
.menu-overlay__foot a:hover{ color:#fff; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  position:absolute; inset:0; width:100%; height:120%; object-fit:cover; object-position:center 30%;
  will-change:transform;
}
.hero__media-tint{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,12,18,.62) 0%, rgba(8,12,18,.30) 30%, rgba(8,12,18,.42) 60%, rgba(8,12,18,.94) 100%),
    linear-gradient(90deg, rgba(8,12,18,.88) 0%, rgba(8,12,18,.55) 30%, rgba(8,12,18,.10) 62%, rgba(12,78,134,.20) 100%),
    radial-gradient(120% 90% at 12% 78%, rgba(8,12,18,.55) 0%, rgba(8,12,18,0) 55%);
}
.hero__grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:calc(var(--nav-h) + 28px) var(--gut) clamp(64px,9vw,118px); }
.hero__content{ max-width:min(960px,92%); }
.hero__title{
  font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(44px, min(8.6vw, 13.2vh), 138px); line-height:.93; letter-spacing:-.035em;
  text-shadow:0 2px 40px rgba(6,10,16,.45);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line>span{ display:block; will-change:transform; }
.hero__title em{ font-style:normal; color:var(--azzurro); }
.hero__sub{ margin-top:30px; max-width:620px; font-size:clamp(16px,1.4vw,20px); color:rgba(255,255,255,.82); line-height:1.55; }
.hero__actions{ margin-top:38px; display:flex; flex-wrap:wrap; gap:16px; }

.hero__meta{
  position:absolute; z-index:2; right:var(--gut); top:calc(var(--nav-h) + 26px);
  display:flex; flex-direction:column; gap:6px; text-align:right;
  font:400 11.5px/1.4 var(--mono); letter-spacing:.04em; color:rgba(255,255,255,.55);
}
.hero__scroll{
  position:absolute; z-index:2; left:var(--gut); bottom:clamp(70px,10vw,130px);
  display:none; flex-direction:column; align-items:center; gap:10px;
  font:400 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7);
  writing-mode:vertical-rl;
}
.hero__scroll i{ width:1px; height:46px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:#fff; transform:translateY(-100%); animation:scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:translateY(-100%)} 50%{transform:translateY(0)} 100%{transform:translateY(100%)} }

.hero__marquee{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 0;
  border-top:1px solid var(--line-light); overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{ display:flex; align-items:center; gap:30px; width:max-content; animation:marquee 32s linear infinite; }
.hero__marquee span{ font:400 13px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap; }
.hero__marquee b{ color:var(--azzurro); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   shared section bits
   ========================================================= */
.sec-label{
  display:inline-block; font:400 12.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); padding-bottom:14px;
}
.sec-label--light{ color:var(--azzurro); }
.sec-head{ border-top:1px solid var(--line); padding-top:22px; margin-bottom:clamp(40px,6vw,90px); }

em{ font-style:normal; }

/* buttons — directional fill dal punto di ingresso del mouse */
.btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px; padding:16px 30px; border-radius:100px; font:600 14.5px/1 var(--body); transition:transform .4s var(--ease),color .35s,box-shadow .35s,border-color .35s; }
.btn>span,.btn>svg{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; z-index:1; left:var(--mx,50%); top:var(--my,50%);
  width:26px; height:26px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .65s var(--ease);
}
.btn:hover::before{ transform:translate(-50%,-50%) scale(24); }
.btn svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.btn:not(.btn--block):hover{ transform:scale(1.035); }
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary::before{ background:var(--blue-2); }
.btn--primary:hover{ box-shadow:0 16px 40px -14px rgba(12,78,134,.7); }
.btn--primary:hover svg{ transform:translate(3px,0); }
.btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover{ color:var(--ink); }
.btn--block{ width:100%; justify-content:center; margin-top:8px; }
.btn--block:hover{ box-shadow:0 16px 40px -14px rgba(12,78,134,.7); }

/* =========================================================
   MISSION
   ========================================================= */
.mission{ background:var(--bg); }
.mission__grid{ display:grid; grid-template-columns:1.55fr .85fr; gap:clamp(40px,6vw,100px); align-items:start; }
.mission__statement{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,4.6vw,68px); line-height:1.06; letter-spacing:-.025em;
}
.mission__statement em{ color:var(--blue); }
.mission__aside{ padding-top:8px; }
.mission__aside p{ color:var(--fg-soft); font-size:16.5px; }
.mission__aside strong{ color:var(--ink); font-weight:600; }
.mission__values{ list-style:none; margin-top:26px; display:flex; flex-direction:column; }
.mission__values li{ padding:13px 0; border-top:1px solid var(--line); font:500 15px/1 var(--body); display:flex; align-items:center; gap:12px; }
.mission__values li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--azzurro); }
.mission__values li:last-child{ border-bottom:1px solid var(--line); }

.stats{ margin-top:clamp(56px,8vw,120px); display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--bg); padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,34px); }
.stat__num{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(46px,6vw,92px); line-height:1; letter-spacing:-.04em; color:var(--ink); }
.stat__label{ display:block; margin-top:12px; font-size:14px; color:var(--fg-soft); max-width:180px; }

/* =========================================================
   CORE — produzione & manutenzione
   ========================================================= */
.core{ background:var(--paper); padding-block:clamp(90px,12vw,190px); position:relative; }
.core__head{ max-width:1000px; }
.core__title{ font-family:var(--display); font-weight:700; font-size:clamp(32px,5.2vw,80px); line-height:1.02; letter-spacing:-.03em; margin-top:6px; }
.core__title em{ color:var(--blue); }
.core__intro{ margin-top:28px; max-width:620px; font-size:clamp(16px,1.3vw,19px); color:var(--fg-soft); }

/* sticky split */
.prod{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); margin-top:clamp(40px,6vw,90px); }
.prod__visual{ position:sticky; top:0; height:100svh; display:flex; align-items:center; }
.prod__visual-inner{ position:relative; width:100%; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--bg-2); box-shadow:0 40px 90px -50px rgba(16,24,34,.6); }
.prod__visual-inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .55s var(--ease),transform .9s var(--ease); }
.prod__visual-inner img.is-active{ opacity:1; transform:scale(1); }
.prod__visual-tag{ position:absolute; left:18px; bottom:18px; z-index:2; padding:9px 16px; background:rgba(12,78,134,.92); color:#fff; font:400 12px/1 var(--mono); letter-spacing:.06em; backdrop-filter:blur(4px); }

.prod__list{ list-style:none; }
.prod__entry{ position:relative; padding:clamp(36px,6vw,72px) 0; border-top:1px solid var(--line); opacity:.45; transition:opacity .5s var(--ease); }
.prod__cover{ position:absolute; inset:0; z-index:3; }
.prod__entry.is-active{ opacity:1; }
.prod__entry:last-child{ border-bottom:1px solid var(--line); }
.prod__entry-head{ display:flex; align-items:baseline; gap:18px; }
.prod__no{ font:400 13px/1 var(--mono); color:var(--steel); padding-top:6px; }
.prod__entry h3{ font-family:var(--display); font-weight:700; font-size:clamp(24px,2.9vw,40px); line-height:1.05; letter-spacing:-.02em; }
.prod__entry.is-active h3{ color:var(--blue); }
.prod__media{ display:none; margin:22px 0 0; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; }
.prod__media img{ width:100%; height:100%; object-fit:cover; }
.prod__entry p{ margin-top:18px; color:var(--fg-soft); max-width:440px; }
.prod__tags{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.prod__tags span{ font:400 11.5px/1 var(--mono); letter-spacing:.04em; color:var(--ink-3); padding:7px 12px; border:1px solid var(--line); border-radius:100px; }

/* full-bleed break */
.core-break{ position:relative; height:clamp(420px,70vh,760px); margin-top:clamp(70px,10vw,150px); overflow:hidden; background:var(--ink); }
.core-break img{ position:absolute; inset:0; width:100%; height:130%; top:-15%; object-fit:cover; object-position:center 35%; will-change:transform; }
.core-break::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,14,20,.18) 0%,rgba(10,14,20,.06) 38%,rgba(10,14,20,.55) 76%,rgba(10,14,20,.9) 100%); }
.core-break__quote{ position:absolute; inset:auto 0 0 0; z-index:2; padding-bottom:clamp(40px,6vw,80px); }
.core-break__quote p{ max-width:980px; font-family:var(--display); font-weight:600; font-size:clamp(26px,3.6vw,56px); line-height:1.1; letter-spacing:-.02em; color:#fff; }

/* manutenzione */
.maint{ margin-top:clamp(80px,11vw,170px); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,90px); align-items:end; }
.maint__title{ font-family:var(--display); font-weight:700; font-size:clamp(34px,5vw,76px); line-height:1; letter-spacing:-.03em; margin:8px 0 22px; }
.maint__title em{ color:var(--blue); }
.maint__head p{ color:var(--fg-soft); max-width:420px; }
.maint__cards{ display:grid; grid-template-columns:1fr; gap:14px; }
.mcard{ color:var(--ink); padding:30px clamp(24px,2.6vw,36px); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); transition:transform .5s var(--ease),box-shadow .5s,border-color .5s; }
.mcard:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -40px rgba(16,24,34,.5); border-color:transparent; }
.mcard__ico{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; margin-bottom:18px; }
.mcard__ico svg{ width:22px; height:22px; }
.mcard h3{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.01em; margin-bottom:8px; }
.mcard p{ color:var(--fg-soft); font-size:15.5px; }

/* metodo */
.method{ margin-top:clamp(80px,11vw,160px); border-top:1px solid var(--line); padding-top:36px; }
.method__steps{ margin-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.method__step{ background:var(--paper); padding:clamp(26px,3vw,44px) clamp(22px,2.4vw,34px); min-height:230px; display:flex; flex-direction:column; }
.method__step i{ font:400 13px/1 var(--mono); color:var(--azzurro); font-style:normal; }
.method__step h4{ margin-top:auto; font-family:var(--display); font-weight:700; font-size:clamp(22px,2.4vw,32px); letter-spacing:-.02em; }
.method__step p{ margin-top:12px; color:var(--fg-soft); font-size:15px; }

/* =========================================================
   PARTNERS
   ========================================================= */
.partners{ background:var(--bg-2); overflow:hidden; }
.partners__intro{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(30px,5vw,80px); align-items:end; margin-bottom:clamp(44px,6vw,84px); }
.partners__intro h2{ font-family:var(--display); font-weight:700; font-size:clamp(32px,4.6vw,72px); line-height:1.02; letter-spacing:-.03em; }
.partners__intro h2 em{ color:var(--blue); }
.partners__intro p{ color:var(--fg-soft); }

.partners__marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(42px,5vw,74px) 0; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.partners__marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track--logos{ gap:clamp(60px,7.4vw,120px); animation-duration:52s; align-items:center; }
.marquee__track--logos img{ height:clamp(72px,7.6vw,104px); width:auto; object-fit:contain; filter:grayscale(1) brightness(.55) contrast(1.2); opacity:.72; transition:opacity .4s var(--ease),filter .4s var(--ease); }
.marquee__track--logos img:hover{ opacity:1; filter:grayscale(0); }

/* =========================================================
   CONTATTI + FOOTER
   ========================================================= */
.contact{ background:var(--ink); color:var(--paper); padding-top:clamp(90px,12vw,180px); }
.contact .sec-head{ border-color:var(--line-light); }
.contact__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(48px,7vw,120px); align-items:start; }
.contact__title{ font-family:var(--display); font-weight:700; font-size:clamp(40px,6.4vw,104px); line-height:.96; letter-spacing:-.035em; }
.contact__title em{ color:var(--azzurro); }
.contact__lead{ margin-top:26px; max-width:420px; color:rgba(247,244,238,.66); font-size:17px; }
.contact__info{ list-style:none; margin-top:clamp(40px,5vw,70px); }
.contact__info li{ display:flex; flex-direction:column; gap:4px; padding:22px 0; border-top:1px solid var(--line-light); }
.contact__info li:last-child{ border-bottom:1px solid var(--line-light); }
.contact__info-label{ font:400 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:6px; }
.contact__info a{ font-size:17px; color:var(--paper); width:fit-content; transition:color .3s; }
.contact__info a:hover{ color:var(--azzurro); }

.contact__form{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.field{ position:relative; }
.field--full{ grid-column:1/-1; }
.field input,.field textarea{
  width:100%; padding:26px 18px 12px; background:rgba(255,255,255,.04); border:1px solid var(--line-light);
  border-radius:var(--radius); color:var(--paper); font:400 16px/1.4 var(--body); transition:border-color .35s,background .35s;
  resize:none;
}
.field textarea{ min-height:120px; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--azzurro); background:rgba(255,255,255,.07); }
.field label{
  position:absolute; left:18px; top:20px; font-size:15px; color:rgba(247,244,238,.5); pointer-events:none;
  transition:transform .3s var(--ease),color .3s,font-size .3s; transform-origin:left;
}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-12px) scale(.78); color:var(--azzurro);
}
.contact__note{ grid-column:1/-1; min-height:20px; font:400 13px/1.5 var(--mono); color:var(--azzurro-2); }
.contact__note a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
/* honeypot antispam: fuori schermo, non display:none (i bot lo compilano lo stesso) */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn:disabled{ opacity:.55; }
.btn:disabled:hover{ transform:none; box-shadow:none; }

/* footer */
.footer{ background:var(--ink); color:var(--paper); padding-top:clamp(90px,12vw,170px); }
.footer__top{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:40px; border-bottom:1px solid var(--line-light); flex-wrap:wrap; }
.footer__brand img{ height:24px; }
.footer__nav{ display:flex; gap:28px; font:500 14px/1 var(--body); }
.footer__nav a{ color:rgba(247,244,238,.7); transition:color .3s; }
.footer__nav a:hover{ color:#fff; }
.footer__wordmark{ font-family:var(--display); font-weight:800; font-size:clamp(64px,22vw,340px); line-height:.82; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(247,244,238,.12); text-stroke:1px rgba(247,244,238,.12); padding:40px 0 20px; user-select:none; }
.footer__bottom{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-bottom:44px; font:400 12.5px/1.5 var(--mono); color:rgba(247,244,238,.4); letter-spacing:.02em; }

/* =========================================================
   REVEAL ANIMATIONS (JS adds .is-in)
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal-words{ overflow:hidden; padding-bottom:.08em; }
.js .reveal-words>.rw-inner{ display:block; transform:translateY(110%); transition:transform 1.05s var(--ease); }
.js .reveal-words.is-in>.rw-inner{ transform:none; }

/* curtain reveal per i media (clip-path dal basso + scale interno) */
.js .reveal-img{ clip-path:inset(100% 0 0 0); transition:clip-path 1.05s cubic-bezier(.65,.05,.2,1); }
.js .reveal-img img{ transform:scale(1.16) translateY(20px); transition:transform 1.3s var(--ease),opacity .6s var(--ease); }
.js .reveal-img.is-in{ clip-path:inset(0 0 0 0); }
.js .reveal-img.is-in img{ transform:none; }

/* odometer counters */
.stat__num{ white-space:nowrap; }
.odo{ display:inline-flex; align-items:flex-start; }
.odo-digit{ display:inline-block; height:1em; overflow:hidden; }
.odo-reel{ display:flex; flex-direction:column; will-change:transform; }
.odo-reel span{ display:block; height:1em; line-height:1; }

/* cursor label state */
.cursor.is-label .cursor__ring{ width:92px; height:92px; background:rgba(255,255,255,.08); }

/* method connecting line (draw on scroll) */
.method__line{ margin:30px 0 -6px; }
.method__line svg{ display:block; width:100%; height:64px; overflow:visible; }
.method__line path{ fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.method__line .ml-ghost{ stroke:var(--line); stroke-dasharray:3 7; }
.method__line .ml-draw{ stroke:var(--azzurro); }
.js .hero__title .line>span{ transform:translateY(105%); }
.js .hero__title.is-in .line>span{ transform:none; transition:transform 1s var(--ease); }
.js .hero__title.is-in .line:nth-child(2)>span{ transition-delay:.08s; }
.js .hero__title.is-in .line:nth-child(3)>span{ transition-delay:.16s; }
.js .hero__title.is-in .line:nth-child(4)>span{ transition-delay:.24s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .mission__grid{ grid-template-columns:1fr; }
  .maint{ grid-template-columns:1fr; align-items:start; }
  .partners__intro{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  :root{ --nav-h:72px; }
  .nav__menu{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .hero__meta{ display:none; }
  .hero__scroll{ display:none; }

  .prod{ grid-template-columns:1fr; gap:0; }
  .prod__visual{ display:none; }
  .prod__entry{ opacity:1; }
  .prod__media{ display:block; }
  .prod__entry p{ max-width:none; }

  .stats{ grid-template-columns:repeat(2,1fr); }
  .method__steps{ grid-template-columns:repeat(2,1fr); }
  .contact__form{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  :root{ --gut:20px; }
  .stats{ grid-template-columns:1fr; }
  .method__steps{ grid-template-columns:1fr; }
  .footer__top{ flex-direction:column; align-items:flex-start; gap:24px; }
  .footer__bottom{ flex-direction:column; gap:8px; }
  .btn{ width:100%; justify-content:center; }
  .hero__actions{ flex-direction:column; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal,.js .reveal-words .word>i,.js .hero__title .line>span{ opacity:1 !important; transform:none !important; }
  .js .reveal-img{ clip-path:none !important; }
  .js .reveal-img img{ transform:none !important; }
  .hero__media img,.core-break img,.subhero__media img{ height:100% !important; top:0 !important; }
  .cursor{ display:none !important; }
  .method__line .ml-draw{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
}

/* =========================================================
   SUBPAGES — shared components
   (mission · cosa-facciamo · partners · contatti)
   ========================================================= */

/* section background modifiers */
.section--paper{ background:var(--paper); }
.section--bg{ background:var(--bg); }
.section--bg2{ background:var(--bg-2); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink .sec-head{ border-color:var(--line-light); }
.section--ink .sec-label{ color:var(--azzurro); }
.section--ink .prose p,.section--ink .head2 p{ color:rgba(247,244,238,.7); }
.section--ink .prose strong,.section--ink .head2 h2{ color:#fff; }

/* nav active state */
.nav__menu a[aria-current="page"] span::after{ width:100%; }
.menu-overlay__nav a[aria-current="page"]{ color:var(--azzurro); }

/* ---------- page hero ---------- */
.subhero{ position:relative; min-height:clamp(420px,64svh,640px); display:flex; align-items:flex-end; background:var(--ink); overflow:hidden; }
.subhero__media{ position:absolute; inset:0; z-index:0; }
.subhero__media img{ width:100%; height:116%; object-fit:cover; }
.subhero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,18,.5) 0%,rgba(8,12,18,.34) 42%,rgba(8,12,18,.88) 100%),linear-gradient(90deg,rgba(8,12,18,.72),rgba(8,12,18,.12) 72%); }
.subhero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:calc(var(--nav-h) + 40px) var(--gut) clamp(46px,6vw,82px); }
.crumb{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:400 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(247,244,238,.6); margin-bottom:26px; }
.crumb a{ color:rgba(247,244,238,.6); transition:color .3s; }
.crumb a:hover{ color:#fff; }
.crumb i{ font-style:normal; color:var(--azzurro); }
.crumb b{ font-weight:400; color:rgba(247,244,238,.95); }
.subhero__title{ font-family:var(--display); font-weight:800; color:#fff; font-size:clamp(38px,6.2vw,98px); line-height:.97; letter-spacing:-.035em; max-width:15ch; text-shadow:0 2px 40px rgba(6,10,16,.4); }
.subhero__title em{ font-style:normal; color:var(--azzurro); }
.subhero__lead{ margin-top:24px; max-width:640px; font-size:clamp(16px,1.4vw,20px); line-height:1.55; color:rgba(247,244,238,.82); }

/* ---------- lead / prose ---------- */
.lead{ font-family:var(--display); font-weight:500; font-size:clamp(22px,3vw,44px); line-height:1.18; letter-spacing:-.02em; color:var(--ink); max-width:20ch; }
.lead em{ font-style:normal; color:var(--blue); }
.lead--wide{ max-width:24ch; }
.prose{ max-width:760px; }
.prose>p{ color:var(--fg-soft); margin-bottom:1.05em; font-size:clamp(16px,1.15vw,18px); line-height:1.7; }
.prose>p:last-child{ margin-bottom:0; }
.prose h3{ font-family:var(--display); font-weight:700; font-size:clamp(21px,2.3vw,30px); letter-spacing:-.02em; margin:1.7em 0 .5em; color:var(--ink); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ul{ list-style:none; margin:1.1em 0; }
.prose li{ padding:11px 0 11px 26px; position:relative; border-top:1px solid var(--line); color:var(--fg-soft); }
.prose li:last-child{ border-bottom:1px solid var(--line); }
.prose li::before{ content:""; position:absolute; left:0; top:19px; width:8px; height:8px; border-radius:50%; background:var(--azzurro); }

/* ---------- two-column header (big title + intro) ---------- */
.head2{ display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(30px,5vw,80px); align-items:end; }
.head2 h2{ font-family:var(--display); font-weight:700; font-size:clamp(30px,4.4vw,66px); line-height:1.03; letter-spacing:-.03em; }
.head2 h2 em{ color:var(--blue); font-style:normal; }
.head2 p{ color:var(--fg-soft); }

/* ---------- split rows (image + text, alternating) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,84px); align-items:center; padding:clamp(40px,5vw,76px) 0; border-top:1px solid var(--line); }
.split:first-child{ border-top:0; }
.split--rev .split__media{ order:2; }
.split__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--bg-2); box-shadow:0 36px 80px -56px rgba(16,24,34,.6); }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__kicker{ display:block; font:400 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.split__title{ font-family:var(--display); font-weight:700; font-size:clamp(25px,3vw,42px); line-height:1.05; letter-spacing:-.02em; margin-bottom:16px; }
.split__body p{ color:var(--fg-soft); }
.split__body .prod__tags{ margin-top:20px; }

/* ---------- timeline ---------- */
.timeline{ margin-top:clamp(30px,4vw,54px); }
.tl{ display:grid; grid-template-columns:170px 1fr; gap:clamp(20px,3vw,54px); padding:clamp(26px,3vw,42px) 0; border-top:1px solid var(--line); }
.tl:last-child{ border-bottom:1px solid var(--line); }
.tl__year{ font-family:var(--display); font-weight:800; font-size:clamp(28px,3vw,46px); color:var(--blue); letter-spacing:-.02em; line-height:1; }
.tl__title{ font-family:var(--display); font-weight:600; font-size:clamp(19px,2vw,24px); margin-bottom:8px; letter-spacing:-.01em; }
.tl__text{ color:var(--fg-soft); max-width:600px; }

/* ---------- feature grid (reuses .mcard) ---------- */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.fgrid--2{ grid-template-columns:repeat(2,1fr); }
.fgrid--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); max-width:920px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:26px 0; display:flex; justify-content:space-between; gap:24px; align-items:center; font-family:var(--display); font-weight:600; font-size:clamp(18px,2vw,25px); letter-spacing:-.01em; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-family:var(--mono); font-size:26px; color:var(--blue); transition:transform .35s var(--ease); flex:none; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ color:var(--fg-soft); padding:0 0 28px; max-width:760px; line-height:1.65; }

/* ---------- spec / definition list ---------- */
.deflist{ border-top:1px solid var(--line); }
.deflist__row{ display:grid; grid-template-columns:.55fr 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }
.deflist__k{ font:400 12.5px/1.5 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--steel); }
.deflist__v{ color:var(--ink); font-size:16.5px; }
.section--ink .deflist,.section--ink .deflist__row{ border-color:var(--line-light); }
.section--ink .deflist__v{ color:var(--paper); }

/* ---------- map ---------- */
.map{ aspect-ratio:16/7; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-light); }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.05) brightness(.95); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:var(--paper); padding:clamp(70px,9vw,140px) 0; text-align:center; position:relative; overflow:hidden; }
.cta-band__label{ display:inline-block; font:400 12.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--azzurro); margin-bottom:22px; }
.cta-band__title{ font-family:var(--display); font-weight:700; font-size:clamp(34px,5.2vw,82px); line-height:1; letter-spacing:-.03em; max-width:20ch; margin:0 auto 34px; }
.cta-band__title em{ font-style:normal; color:var(--azzurro); }
.cta-band__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- read-more link + outline button ---------- */
.more-link{ display:inline-flex; align-items:center; gap:11px; font:600 14.5px/1 var(--body); color:var(--blue); }
.more-link svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
.more-link:hover svg{ transform:translateX(5px); }
.more-link--light{ color:var(--azzurro); }
.btn--line{ color:var(--ink); border:1px solid var(--line); }
.btn--line:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- lead + media (intro con foto) ---------- */
.lead-media{ display:grid; grid-template-columns:1.05fr .92fr; gap:clamp(36px,5vw,84px); align-items:center; }
.lead-media__text h2{ font-family:var(--display); font-weight:700; font-size:clamp(30px,4.4vw,62px); line-height:1.04; letter-spacing:-.03em; }
.lead-media__text h2 em{ font-style:normal; color:var(--blue); }
.lead-media__text p{ margin-top:20px; color:var(--fg-soft); font-size:clamp(16px,1.15vw,18px); line-height:1.7; max-width:50ch; }
.lead-media__text strong{ color:var(--ink); font-weight:600; }
.lead-media__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--bg-2); box-shadow:0 44px 90px -55px rgba(16,24,34,.6); }
.lead-media__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- product cards (foto sopra, testo sotto) ---------- */
.pcard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); margin-top:clamp(36px,4vw,58px); }
.pcard{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s; }
.pcard:hover{ transform:translateY(-6px); box-shadow:0 46px 84px -52px rgba(16,24,34,.5); border-color:transparent; }
.pcard__media{ position:relative; display:block; width:100%; padding:0; border:0; text-align:left; cursor:pointer; aspect-ratio:3/2; overflow:hidden; background:var(--bg-2); }
.pcard__media:focus-visible{ outline:2px solid var(--azzurro); outline-offset:-2px; }
.pcard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease),opacity .6s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.06); }
.pcard__count{
  position:absolute; right:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:7px 11px; border-radius:100px; background:rgba(22,24,27,.6); color:#fff; backdrop-filter:blur(6px);
  font:400 11px/1 var(--mono); letter-spacing:.08em; pointer-events:none;
}
.pcard__count b{ font-weight:400; }
.pcard__count svg{ width:12px; height:12px; }

/* filmstrip: miniature che cambiano la foto della card */
.pcard__strip{ display:flex; gap:6px; padding:10px 10px 0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pcard__strip::-webkit-scrollbar{ display:none; }
.pcard__thumb{ flex:0 0 auto; width:54px; height:40px; padding:0; border-radius:4px; overflow:hidden; opacity:.5; outline:1px solid transparent; outline-offset:-1px; transition:opacity .3s,outline-color .3s; }
.pcard__thumb img{ width:100%; height:100%; object-fit:cover; }
.pcard__thumb:hover{ opacity:.9; }
.pcard__thumb.is-active{ opacity:1; outline-color:var(--blue); }
.pcard__thumb:focus-visible{ opacity:1; outline:2px solid var(--azzurro); }
.pcard__body{ display:flex; flex-direction:column; gap:13px; padding:clamp(22px,2vw,30px); flex:1; }
.pcard__no{ font:400 12px/1 var(--mono); letter-spacing:.1em; color:var(--steel); }
.pcard__title{ font-family:var(--display); font-weight:700; font-size:clamp(19px,1.55vw,24px); line-height:1.08; letter-spacing:-.01em; }
.pcard__text{ color:var(--fg-soft); font-size:14.5px; line-height:1.62; }
.pcard .prod__tags{ margin-top:auto; padding-top:6px; }

/* compact partner carousel inside a section */
.partners__marquee--tight{ margin-top:clamp(40px,5vw,72px); padding-block:clamp(34px,4vw,54px); }

/* tighten section vertical rhythm where needed */
.psection.is-pb0{ padding-bottom:0; }
.psection.is-pt-sm{ padding-top:clamp(44px,5vw,72px); }

/* map fills the full height of its column
   (niente aspect-ratio qui: la colonna si adatta alla mappa, altrimenti
   l'iframe deborda dal contenitore e finisce sopra al testo) */
.split--map{ align-items:stretch; }
.split--map .split__media{ display:flex; aspect-ratio:auto; }
.split--map .map{ flex:1 1 auto; aspect-ratio:auto; height:auto; min-height:clamp(360px,46vh,520px); }

/* ---------- generic page section rhythm ---------- */
.psection{ padding-block:clamp(70px,10vw,150px); }

/* ---------- progettazione & direzione lavori ---------- */
.split-wrap{ margin-top:clamp(10px,2vw,24px); }
.split__body .prose{ margin-top:18px; }
.split__body .prose li{ font-size:15.5px; }
.mcard .prod__tags{ margin-top:16px; }
.method__more{ color:var(--blue); font-weight:600; white-space:nowrap; }
.method__more:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- lightbox gallerie ---------- */
.lb{
  position:fixed; inset:0; z-index:9800; background:rgba(12,14,18,.96); color:var(--paper);
  display:grid; grid-template-rows:1fr auto; opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s .45s;
}
.lb.is-open{ opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
body.lb-open{ overflow:hidden; }
.lb__fig{ min-height:0; margin:0; display:flex; align-items:center; justify-content:center; padding:76px clamp(70px,9vw,140px) 12px; }
.lb__img{
  max-width:100%; max-height:calc(100svh - 160px); width:auto; height:auto; object-fit:contain;
  border-radius:var(--radius); box-shadow:0 60px 120px -50px rgba(0,0,0,.85);
  opacity:0; transform:scale(.97); transition:opacity .4s var(--ease),transform .6s var(--ease);
}
.lb__img.is-in{ opacity:1; transform:none; }
.lb__cap{ display:flex; justify-content:space-between; gap:20px; padding:12px var(--gut) 28px; font:400 12.5px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(247,244,238,.55); }
.lb__cap b{ font-weight:400; color:#fff; }
.lb__close,.lb__nav{
  position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(247,244,238,.22); background:rgba(12,14,18,.5); color:#fff;
  transition:background .3s,border-color .3s;
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,255,255,.12); border-color:rgba(247,244,238,.6); }
.lb__close:focus-visible,.lb__nav:focus-visible{ outline:2px solid var(--azzurro); outline-offset:2px; }
.lb__close{ top:18px; right:var(--gut); }
.lb__nav{ top:50%; transform:translateY(-50%); }
.lb__nav--prev{ left:var(--gut); }
.lb__nav--next{ right:var(--gut); }
.lb__close svg,.lb__nav svg{ width:20px; height:20px; }
.lb.is-single .lb__nav{ display:none; }
@media (max-width:900px){
  .lb__fig{ padding:70px 12px 8px; }
  .lb__img{ max-height:calc(100svh - 150px); }
  .lb__nav{ width:44px; height:44px; }
  .lb__nav--prev{ left:10px; } .lb__nav--next{ right:10px; }
}

@media (max-width:1080px){
  .head2{ grid-template-columns:1fr; align-items:start; }
  .fgrid,.fgrid--4{ grid-template-columns:repeat(2,1fr); }
  .pcard-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:28px; }
  .split--rev .split__media{ order:0; }
  .tl{ grid-template-columns:1fr; gap:8px; }
  .fgrid,.fgrid--2,.fgrid--4{ grid-template-columns:1fr; }
  .deflist__row{ grid-template-columns:1fr; gap:6px; }
  .lead-media{ grid-template-columns:1fr; gap:30px; }
  .lead-media__media{ aspect-ratio:16/10; }
  .pcard-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   BLUEPRINT TEXTURE — in coda per vincere sugli shorthand `background:`
   ========================================================= */
.mission,.core,.partners,.section--paper,.section--bg,.section--bg2{ background-image:var(--blueprint); }

/* =========================================================
   PROGETTAZIONE — dal disegno all'impianto
   (home + cosa-facciamo; il JS aggiunge .is-anim e guida
   lo scrub con ScrollTrigger; senza JS si vede lo stato finale)
   ========================================================= */
:root{
  --blueprint-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cpath d='M220 .5H0M.5 0v220' fill='none' stroke='rgba(191,227,255,.06)' stroke-width='1'/%3E%3Cpath d='M110 104v12M104 110h12' fill='none' stroke='rgba(58,160,224,.16)' stroke-width='1'/%3E%3C/svg%3E");
  --bp-blue: #0B3763;
}
.design{ position:relative; background:var(--ink); color:var(--paper); padding-top:clamp(90px,12vw,190px); overflow:hidden; }
.design::before{ content:""; position:absolute; inset:0; background-image:var(--blueprint-dark); pointer-events:none; }
.design>*{ position:relative; }
.design .sec-head{ border-color:var(--line-light); }
.design__head{ display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(30px,5vw,90px); align-items:end; }
.design__title{ font-family:var(--display); font-weight:700; font-size:clamp(34px,5.4vw,84px); line-height:.98; letter-spacing:-.035em; color:#fff; }
.design__title em{ color:var(--azzurro); }
.design__aside p{ color:rgba(247,244,238,.72); font-size:clamp(16px,1.2vw,18px); line-height:1.65; }
.design__aside .more-link{ margin-top:22px; }

/* stage: la tavola che si trasforma */
.design__stage{ margin-top:clamp(40px,5.5vw,84px); }
.design__frame{
  position:relative; margin:0; width:100%; height:min(62vw, calc(100svh - 170px)); min-height:320px;
  border-radius:var(--radius); overflow:hidden; background:var(--bp-blue);
  border:1px solid rgba(191,227,255,.18); box-shadow:0 60px 120px -60px rgba(0,0,0,.85);
}
.design__bp,.design__real{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.design__real{ clip-path:inset(0 0 0 0); will-change:clip-path; }
.design.is-anim .design__real{ clip-path:inset(0 100% 0 0); }
.design__scan{ position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--azzurro); box-shadow:0 0 28px 6px rgba(58,160,224,.55); opacity:0; pointer-events:none; }
.design.is-anim .design__scan{ opacity:1; }
.design__scan::after{
  content:"SCAN"; position:absolute; top:14px; left:10px; font:700 10px/1 var(--mono); letter-spacing:.2em; color:var(--azzurro);
}
.design__corner{ position:absolute; width:22px; height:22px; border:2px solid rgba(191,227,255,.7); pointer-events:none; }
.design__corner--tl{ top:12px; left:12px; border-right:0; border-bottom:0; }
.design__corner--tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.design__corner--bl{ bottom:12px; left:12px; border-right:0; border-top:0; }
.design__corner--br{ bottom:12px; right:12px; border-left:0; border-top:0; }
.design__cap{
  position:absolute; left:18px; bottom:16px; display:flex; align-items:center; gap:10px;
  padding:9px 14px; background:rgba(22,24,27,.72); backdrop-filter:blur(6px); border:1px solid rgba(247,244,238,.14);
  font:400 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(247,244,238,.85);
}
.design__cap b{ font-weight:400; color:var(--azzurro); }
.design__cap [data-state]{ display:none; }
.design__cap [data-state="real"]{ display:inline; }
.design.is-anim .design__cap:not(.is-real) [data-state="bp"]{ display:inline; }
.design.is-anim .design__cap:not(.is-real) [data-state="real"]{ display:none; }

/* callout numerati sulla tavola */
.design__marks{ list-style:none; position:absolute; inset:0; pointer-events:none; }
.design__marks li{ position:absolute; left:var(--x); top:var(--y); display:flex; align-items:center; gap:10px; transform:translate(-9px,-50%); }
.design__marks li::before{ content:""; width:18px; height:18px; border-radius:50%; background:var(--azzurro); box-shadow:0 0 0 6px rgba(58,160,224,.25); flex:none; }
.design__marks i{ font:700 11px/1 var(--mono); color:var(--ink); position:absolute; left:4.5px; top:50%; transform:translateY(-50%); font-style:normal; }
.design__marks b{
  font:600 12.5px/1.2 var(--body); color:#fff; padding:8px 12px; background:rgba(22,24,27,.78); backdrop-filter:blur(6px);
  border:1px solid rgba(247,244,238,.16); border-radius:4px; white-space:nowrap;
}
.design__marks li.is-flip{ flex-direction:row-reverse; transform:translate(calc(-100% + 9px),-50%); }
.design__marks li.is-flip i{ left:auto; right:4.5px; }

/* HUD: fasi + barra di avanzamento */
.design__hud{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-top:18px; }
.design__steps{ display:flex; gap:clamp(12px,2.2vw,34px); flex-wrap:wrap; }
.design__steps span{ display:flex; align-items:center; gap:8px; font:400 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(247,244,238,.4); transition:color .35s; white-space:nowrap; }
.design__steps span::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.design__steps span.is-on,.design:not(.is-anim) .design__steps span{ color:var(--azzurro); }
.design__bar{ flex:1 1 120px; height:1px; background:rgba(247,244,238,.16); overflow:hidden; }
.design__bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--azzurro)); transform:scaleX(0); transform-origin:left; }
.design:not(.is-anim) .design__bar span{ transform:none; }

/* nastro di tavole */
.design__strip{ margin-top:clamp(48px,6vw,96px); padding-bottom:clamp(90px,12vw,190px); overflow:hidden; }
.design__track{ display:flex; gap:clamp(14px,1.6vw,24px); width:max-content; padding-inline:var(--gut); will-change:transform; }
.design__card{ flex:0 0 auto; width:clamp(280px,30vw,460px); margin:0; }
.design__card-media{ position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--bp-blue); border:1px solid rgba(191,227,255,.14); }
.design__card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.design__card-bp{ opacity:0; transition:opacity .55s var(--ease); }
.design__card:hover .design__card-bp{ opacity:1; }
.design__card figcaption{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:baseline; margin-top:14px; }
.design__card figcaption i{ font:400 12px/1 var(--mono); color:var(--azzurro); font-style:normal; grid-row:span 2; padding-top:3px; }
.design__card figcaption span{ font:600 16px/1.2 var(--display); color:#fff; letter-spacing:-.01em; }
.design__card figcaption small{ font-size:13.5px; color:rgba(247,244,238,.6); line-height:1.5; }

/* cosa-facciamo: la parte "cosa consegniamo" + card, dentro il blocco scuro */
.design__deliver{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,90px); align-items:start; padding-bottom:clamp(60px,7vw,110px); }
.design__deliver h3{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3.2vw,46px); line-height:1.04; letter-spacing:-.03em; color:#fff; }
.design__deliver h3 em{ font-style:normal; color:var(--azzurro); }
.design__deliver>div>p{ margin-top:16px; color:rgba(247,244,238,.72); max-width:46ch; }
.design__deliver .prose li{ color:rgba(247,244,238,.8); border-color:var(--line-light); }
.design__deliver .prose li:last-child{ border-bottom-color:var(--line-light); }
.design .fgrid{ padding-bottom:clamp(90px,12vw,190px); }

@media (max-width:1080px){
  .design__head{ grid-template-columns:1fr; align-items:start; }
  .design__deliver{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .design__frame{ height:auto; aspect-ratio:4/3; min-height:0; }
  .design__marks b{ font-size:11px; padding:6px 9px; }
  .design__marks li::before{ width:14px; height:14px; box-shadow:0 0 0 4px rgba(58,160,224,.25); }
  .design__marks i{ font-size:9px; left:3.5px; }
  .design__hud{ flex-direction:column; align-items:stretch; gap:12px; }
  .design__steps{ gap:10px 16px; }
  .design__strip{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .design__strip::-webkit-scrollbar{ display:none; }
  .design__track{ transform:none !important; }
  .design__card{ width:78vw; scroll-snap-align:start; }
}
@media (prefers-reduced-motion:reduce){
  .design.is-anim .design__real{ clip-path:none !important; }
  .design__scan{ display:none !important; }
}