/* ============================================================
   PG&W cultura e territorio — Foglio di stile
   ============================================================ */


/* ============================================================
   1. FONT FACES
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/ff8563d0-8414-40b3-bf29-113720794b84.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f6fa391f-fdac-49e4-b260-ea5716604f01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2f7ed108-d5c5-4e61-81cd-0360c9468e49.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/ff8563d0-8414-40b3-bf29-113720794b84.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f6fa391f-fdac-49e4-b260-ea5716604f01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2f7ed108-d5c5-4e61-81cd-0360c9468e49.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/ff8563d0-8414-40b3-bf29-113720794b84.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f6fa391f-fdac-49e4-b260-ea5716604f01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2f7ed108-d5c5-4e61-81cd-0360c9468e49.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/ff8563d0-8414-40b3-bf29-113720794b84.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/f6fa391f-fdac-49e4-b260-ea5716604f01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/2f7ed108-d5c5-4e61-81cd-0360c9468e49.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/77d1d0c6-71bf-48d6-979d-efe320b7c658.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/1213f7b7-a594-4b77-b4a7-3fd9521ef7fd.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/b2acd12b-ba56-44e5-bd79-4834c70226a9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fcbe5114-183f-4757-935f-716658a7f28c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/49138f24-bd24-42d5-90af-aad0e7d6bc32.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/0d692d2f-04e2-4d18-9b43-68c074209cd3.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/07487600-49c9-4c16-93ff-350f2e3f0d66.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/3e75dd2d-1bf8-4d6d-95cf-2a263be93b1d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/b5e6b561-1609-470e-bb25-c251e196251e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/74d9d734-cb7c-4d6b-98fe-21a06ccc0d9f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/e239913d-3a7e-44e7-a0a5-1ab6e311561d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/617ac886-2b93-491c-b0a7-3f3739300aec.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/7f4c4678-f15c-4de7-a346-ed9b02408d48.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/7c07532e-2e25-4f66-8888-c75578dee401.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   2. RESET & VARIABILI DI BASE
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}

:root{
  --paper:#F3F1EB;
  --ink:#171511;
  --ink2:rgba(23,21,17,.62);
  --ink3:rgba(23,21,17,.34);
  --accent:#FF4317;
  --sans:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono','SF Mono',ui-monospace,monospace;
  --gut:clamp(20px,4.2vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

body{
  font-size:17px;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{color:inherit}


/* ============================================================
   3. UTILITY CONDIVISE (etichette, serif, frecce, icone SVG)
   ============================================================ */

.lbl{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0;
  text-transform:uppercase;
  font-weight:500;
}
.lbl-dim{color:var(--ink2)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;}
.deco-arrow { display:inline-block; margin-right: 5px; font-size: 22px; }
body[data-arrows="off"] .deco-arrow{display:none;}

/* Fill delle icone SVG inline (es. logo pgw-logo.svg) */
.cls-1 {
  fill: currentColor;
}

/* Effetto hover sui titoli in serif — condiviso da più sezioni:
   Intro, Chi siamo (.acronimo), Contatti (.end-h) */
.intro-stmt .serif,.acronimo .serif,.end-h .serif{transition:color .25s;cursor:default}
.intro-stmt .serif:hover,.acronimo .serif:hover,.end-h .serif:hover{color:var(--accent)}
body[data-color="none"] .intro-stmt .serif:hover,
body[data-color="none"] .acronimo .serif:hover,
body[data-color="none"] .end-h .serif:hover{color:inherit}


/* ============================================================
   4. SISTEMA DI ANIMAZIONI ALL'INGRESSO (scroll reveal)
   Guidato da .rv / .rv-group / .lm / .rule-draw, applicato via
   IntersectionObserver in art.js. Disattivato automaticamente
   se l'utente preferisce animazioni ridotte.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s linear var(--d,0s),transform 1s var(--ease) var(--d,0s)}
  .rv.in{opacity:1;transform:none}
  .lm{display:block;overflow:hidden}
  .lm>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease) var(--d,0s)}
  .in .lm>span{transform:none}
  .rule-draw{transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease) var(--d,0s)}
  .rule-draw.in,.in .rule-draw{transform:scaleX(1)}

  .rv.in.settled{transition:none!important;opacity:1!important;transform:none!important}
  .in.settled .lm>span{transition:none!important;transform:none!important}
  .rule-draw.in.settled,.in.settled .rule-draw{transition:none!important;transform:scaleX(1)!important}

  section.sec-armed .sec-body{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease)}
  section.sec-armed.sec-in .sec-body{clip-path:inset(0 0 0 0)}
  section.sec-armed.sec-done .sec-body{clip-path:none;transition:none}

  .sec-head{position:relative}
  section.sec-armed .sec-head::before{
    content:'';position:absolute;top:-5px;left:-48px;width:48px;height:8px;
    background:var(--accent);opacity:0;pointer-events:none;z-index:3;
  }
  section.sec-armed.sec-in .sec-head::before{animation:railRun 1.5s var(--ease) .25s forwards}
  @keyframes railRun{
    0%{opacity:0;left:-48px}
    8%{opacity:1;left:0}
    72%{opacity:1}
    100%{opacity:0;left:100%}
  }

  .tw-typing::after{
    content:'';display:inline-block;width:.6em;height:.6em;margin-left:.08em;
    background:var(--accent);vertical-align:-.02em;
    animation:twBlink .55s steps(1) infinite;
  }
  #case .tw-typing::after,
  .svc-card:is(:hover,:focus-visible,.open) .tw-typing::after,
  .step:is(:hover,:focus-visible,.sel) .tw-typing::after{background:var(--ink)}
  body[data-color="none"] .svc-card:is(:hover,:focus-visible,.open) .tw-typing::after,
  body[data-color="none"] .step:is(:hover,:focus-visible,.sel) .tw-typing::after{background:var(--accent)}
  @keyframes twBlink{50%{opacity:0}}
}


/* ============================================================
   5. NAV — barra di navigazione (desktop)
   ============================================================ */

nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--gut);
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}

/* Logo + sottotitolo "Cultura e Territorio" */
nav > a[aria-label="PG&W"]{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.sottotitolo{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1;
  color:var(--ink);
  background:var(--accent);
  padding:5px 8px;
  border-radius:3px;
  white-space:nowrap;
}

.pgw-logo{height:30px;width:auto;color:var(--ink);display:block}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{text-decoration:none;color:var(--ink2);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-mail{text-decoration:none;color:var(--ink)}
.nav-mail:hover{background:var(--ink);color:var(--paper)}

.nav-burger{display:none}


/* ============================================================
   6. NAV — menu mobile a schermo intero
   ============================================================ */

.m-menu{
  position:fixed;inset:0;z-index:49;
  background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:max(96px,16vh) var(--gut) calc(32px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s;
  overflow-y:auto;
}
body.menu-open .m-menu{opacity:1;visibility:visible;transform:none}
@media(min-width:901px){.m-menu{display:none}}
.m-menu-kicker{display:block;margin-bottom:18px}
.m-menu-links{list-style:none;border-top:1px solid var(--ink)}
.m-menu-links a{
  display:flex;align-items:baseline;gap:16px;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:clamp(15px,2.4vh,22px) 0;
  font-weight:800;text-transform:uppercase;letter-spacing:0;
  font-size:2.5rem;line-height:1;
  transition:color .2s,padding-left .35s var(--ease);
}
.m-menu-links a:active{color:var(--accent);padding-left:10px}
.m-menu-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:10px}
.m-menu-mail{font-family:var(--mono);text-decoration:none;font-size:14px;letter-spacing:0;color:var(--ink)}


/* ============================================================
   7. STRUTTURA DI SEZIONE (comune a tutte le section)
   ============================================================ */

section{padding:0 var(--gut);scroll-margin-top:50px}
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-top:2px solid var(--ink);
  margin:0 calc(var(--gut)*-1);
  padding:14px var(--gut) 0;
}
.sec-title-row{display:flex;gap:18px;align-items:baseline}
.sec-body{padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(64px,9vw,150px)}


/* ============================================================
   8. HERO
   ============================================================ */

#hero{
  height:100svh;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:76px;
}
.hero-stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4.5vh,64px) 0 clamp(10px,1.6vh,20px)}
.hero-h1{
  font-weight:800;
  text-transform:none;
  font-size:clamp(3rem, 9vh, 8.25rem);
  line-height:.92;
  letter-spacing:0;
}
.hero-h1 .h1-serif{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  font-size:1.06em;
  letter-spacing:0;
}
.hero-h1 .h1-dot{
  display:inline-block;
  width:.13em;height:.13em;border-radius:50%;
  background:var(--accent);
  margin-left:.08em;
  transition:background .4s;
}
body[data-color="none"] .hero-h1 .h1-dot{background:var(--ink)}
.hero-h1 .h1-indent{padding-left:clamp(40px,12vw,220px)}

/* .hero-foot era dichiarato due volte: la seconda regola
   (justify-content:flex-end) sovrascriveva silenziosamente
   space-between della prima. Unificato qui nel valore
   realmente applicato. */
.hero-foot{
  display:flex;justify-content:flex-end;align-items:flex-end;gap:32px;
  border-top:1px solid var(--ink);
  padding:20px 0 28px;
}
.hero-sub{
  font-size:1.25rem;
  line-height:1.4;
  color:var(--accent);
  transition:color .4s;
  padding:0 0 28px;
}
body[data-color="none"] .hero-sub{color:var(--ink)}
.hero-scroll{white-space:nowrap}
.delay-schema{--d:.4s}
.delay-scroll{--d:.6s}

/* Schema SVG interattivo (mappa dei servizi) dentro l'hero */
.hero-schema{padding:6px 0 30px;}
.schema{display:block;width:100%;height:auto;max-height:54vh;margin:0 auto}
.schema circle{fill:none;stroke:var(--ink);stroke-width:1.2}
.hero-schema-m{display:none}
.schema .dotted{stroke-dasharray:.2 7.5;stroke-linecap:round;stroke-width:1.7;opacity:.85}
@media (prefers-reduced-motion: no-preference){
  .schema .dotted{animation:schemaSpin 80s linear infinite;transform-box:fill-box;transform-origin:center}
  .schema .dotted.rev{animation-direction:reverse;animation-duration:64s}
}
@keyframes schemaSpin{to{transform:rotate(360deg)}}
.schema rect{fill:var(--accent);transition:fill .4s}
body[data-color="none"] .schema rect{fill:var(--ink)}
.schema text{fill:var(--ink);font-family:var(--sans)}
.schema .sc-main{font-weight:700;font-size:26px;letter-spacing:0;}
.schema .sc-word{font-size:22px;paint-order:stroke;stroke:var(--paper);stroke-width:14px;stroke-linejoin:round}
.schema .sc-link{transition:fill .25s;cursor:pointer;outline:none}
.schema .sc-link:hover,.schema .sc-link:focus{fill:var(--accent)}
body[data-color="none"] .schema .sc-link:hover{fill:var(--ink)}


/* ============================================================
   9. INTRO
   ============================================================ */

.intro-stmt .punct{color:var(--accent);transition:color .4s}
body[data-color="none"] .intro-stmt .punct{color:var(--ink)}
.intro-stmt{
  font-weight:700;
  font-size:4.5rem;
  line-height:1.02;
  letter-spacing:0;
}
.intro-stmt .serif{font-size:1.05em}
.intro-aside{
  display:flex;gap:14px;align-items:baseline;
  max-width:380px;
  margin-top:clamp(32px,4vw,64px);
  color:var(--ink2);
  font-size:15px;line-height:1.6;
}


/* ============================================================
   10. SERVIZI (svc-grid / svc-card)
   ============================================================ */

.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);border-left:1px solid var(--ink);
}
.svc-card{
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:flex;flex-direction:row;
  min-height:clamp(168px,17vw,228px);
  cursor:pointer;outline:none;
  transition:background .3s;
  scroll-margin-top:104px;
}
.svc-media{
  flex:0 0 16.666%;align-self:stretch;position:relative;
  border-right:1px solid var(--ink);
  background:
    repeating-linear-gradient(-45deg,transparent 0 7px,rgba(23,21,17,.06) 7px 8px),
    rgba(23,21,17,.025);
  overflow:hidden;
}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.svc-main{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;
  padding:clamp(20px,2.3vw,38px) clamp(18px,2vw,34px) clamp(22px,2.6vw,42px);
}
.svc-card:hover,.svc-card:focus-visible,.svc-card.open{background:var(--accent)}
body[data-color="none"] .svc-card:hover,
body[data-color="none"] .svc-card:focus-visible,
body[data-color="none"] .svc-card.open{background:transparent}
.svc-card-head{display:flex;justify-content:space-between;align-items:center}
.svc-plus{font-family:var(--mono);font-size:20px;line-height:1;transition:transform .45s var(--ease),color .3s}
.svc-card:is(:hover,:focus-visible,.open) .svc-plus{transform:rotate(45deg)}
.svc-title{
  font-weight:700;text-transform:uppercase;
  font-size:1.28rem;letter-spacing:0;line-height:1.12;
  transition:color .3s;
}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.svc-card:is(:hover,:focus-visible,.open) .svc-body{grid-template-rows:1fr}
.svc-body-in{overflow:hidden}
.svc-txt{color:var(--ink2);font-size:14.5px;line-height:1.6;text-wrap:pretty;padding-top:6px;transition:color .3s}
.svc-card:is(:hover,:focus-visible,.open) .svc-txt{color:#fff}
body[data-color="none"] .svc-card:is(:hover,:focus-visible,.open) .svc-txt{color:var(--ink2)}


/* ============================================================
   11. COME LAVORIAMO (steps)
   ============================================================ */

.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:0 calc(var(--gut)*-1)}
.step:first-child{padding-left:var(--gut)}
.step:last-child{padding-right:var(--gut)}
.step{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.2vw,38px) clamp(12px,1.6vw,28px) clamp(20px,2.4vw,40px);border-right:1px solid var(--ink);cursor:pointer;outline:none;transition:background .3s}
.step:last-child{border-right:none}
.step-num{font-weight:800;font-size:4.2rem;line-height:.9;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--accent);transition:color .3s}
body[data-color="none"] .step-num,body[data-color="case"] .step-num{color:var(--ink)}
.step:hover .step-num,.step:focus-visible .step-num,.step.sel .step-num{color:var(--ink)}
body[data-color="none"] .step:hover .step-num,
body[data-color="none"] .step:focus-visible .step-num,
body[data-color="none"] .step.sel .step-num{color:var(--ink)}
.step-body{display:grid;grid-template-rows:1fr}
.step-body-in{overflow:hidden;display:flex;flex-direction:column;gap:12px;opacity:.6;transition:opacity .3s}
.step:hover .step-body-in,.step:focus-visible .step-body-in,.step.sel .step-body-in{opacity:1}
.step-body .step-sub{margin-top:2px}
.step-title{font-weight:700;text-transform:uppercase;font-size:1.25rem;letter-spacing:0;line-height:1.08;margin-top:4px;transition:color .3s}
.step-sub{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink);transition:color .3s}
.step-txt{color:var(--ink);font-size:13px;line-height:1.6;text-wrap:pretty;transition:color .3s}
.step-esito{margin-top:6px;border-top:1px solid var(--ink3);padding-top:12px}
.step-esito .lbl{display:block;margin-bottom:8px}
.step-esito p{font-size:12.5px;line-height:1.55;text-wrap:pretty;transition:color .3s}
.step:hover,.step:focus-visible,.step.sel{background:var(--accent)}
.step:is(:hover,:focus-visible,.sel) :is(.step-sub,.step-txt,.step-esito p,.step-esito .lbl){color:#fff}
.step:is(:hover,:focus-visible,.sel) .step-title{color:var(--ink)}
.step:is(:hover,:focus-visible,.sel) .step-esito{border-top-color:rgba(255,255,255,.45)}
body[data-color="none"] .step:is(:hover,:focus-visible,.sel) :is(.step-title,.step-txt,.step-esito p){color:var(--ink)}
body[data-color="none"] .step:is(:hover,:focus-visible,.sel) :is(.step-sub,.step-esito .lbl){color:var(--ink2)}
body[data-color="none"] .step:is(:hover,:focus-visible,.sel) .step-esito{border-top-color:var(--ink3)}
body[data-color="none"] .step:hover,
body[data-color="none"] .step:focus-visible,
body[data-color="none"] .step.sel{background:transparent}

/* Touch device senza hover, indipendentemente dalla larghezza:
   il testo dello step resta sempre visibile (niente hover per aprirlo) */
@media (hover:none){
  .step-body-in{opacity:1}
}

/* ============================================================
   12. CASE HISTORY
   ============================================================ */

#case{
  background:var(--accent);
  transition:background .5s;
  margin-top:clamp(64px,9vw,150px);
}
body[data-color="none"] #case{background:transparent}
#case .sec-head{border-top-color:var(--ink)}
.case-spacer{padding-top:clamp(40px,5vw,80px)}
.case-list{border-top:1px solid var(--ink)}
.case-row{border-bottom:1px solid var(--ink)}
.case-head{
  display:grid;
  grid-template-columns:minmax(44px,52px) 1fr auto auto;
  align-items:baseline;gap:clamp(12px,2vw,32px);
  width:100%;text-align:left;
  background:none;border:none;color:inherit;font:inherit;cursor:pointer;
  padding:clamp(16px,2vw,26px) 0;
  position:relative;
  transition:opacity .4s;
}
.case-row.hot .case-head{z-index:2}
.case-list.peeking .case-row:not(.hot) .case-head{opacity:.16}
.case-namewrap{display:flex;flex-direction:column;gap:6px;min-width:0;transition:transform .35s var(--ease)}
.case-head:hover .case-namewrap{transform:translateX(clamp(8px,1.2vw,20px))}
.case-name{
  font-weight:800;text-transform:uppercase;letter-spacing:0;
  font-size:2.7rem;line-height:1.02;
}
.case-place{align-self:flex-start}
.case-tag{text-align:right}
.case-pill{
  justify-self:end;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-width: 90px;
  padding:5px 12px;
  border:1px solid currentColor;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:0;line-height:1.2;
}
.case-pill .p-plus{transition:opacity .25s,transform .45s var(--ease)}
.case-pill .p-year{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;
}
.case-row.hot .case-pill .p-plus,.case-row.open .case-pill .p-plus{opacity:0}
.case-row.hot .case-pill .p-year,.case-row.open .case-pill .p-year{opacity:1}
body:not([data-color="none"]) .case-row.open .case-head, .case-row.open .lbl-dim{color:#fff}
.case-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.case-row.open .case-panel{grid-template-rows:1fr}
.case-panel-inner{overflow:hidden}
.case-row.zoomable .case-panel-inner{overflow:visible}
.case-cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,56px);
  padding:6px 0 clamp(22px,2.6vw,40px);
}
.case-col .lbl{display:block;border-top:1px solid var(--ink);padding-top:10px;margin-bottom:12px;transition:color .4s,border-color .4s}
.case-col p{font-size:15px;line-height:1.65;text-wrap:pretty;transition:color .4s}
body:not([data-color="none"]) .case-row.open .case-col p,
body:not([data-color="none"]) .case-row.open .case-col .lbl{color:#fff}
body:not([data-color="none"]) .case-row.open .case-col .lbl{border-top-color:rgba(255,255,255,.55)}
.case-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;
  padding-bottom:clamp(28px,3.4vw,52px);
}
.gcell{position:relative;aspect-ratio:1920/1334;overflow:visible}
.gcell img{
  position:absolute;top:50%;left:50%;
  width:250%;height:250%;object-fit:cover;
  transform:translate(-50%,-50%) scale(.4);
  transform-origin:center center;
  transition:transform .5s var(--ease);
  display:block;--is-bg:transparent;
}
.gcell:hover{z-index:6}
.gcell:hover img{transform:translate(-50%,-50%) scale(1)}

.tinted{filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;transition:filter .5s,opacity .5s}
.tinted:hover{filter:none;mix-blend-mode:normal}
body[data-color="none"] .tinted{mix-blend-mode:normal}

/* Su touch (niente hover) le immagini restano sempre a colori,
   indipendentemente dalla larghezza dello schermo */
@media (hover:none){
  .tinted{filter:none;mix-blend-mode:normal}
  body[data-color]:not([data-color="none"]) .tinted{mix-blend-mode:normal}
  .svc-body{grid-template-rows:1fr}
  .svc-txt{color:var(--ink2)}
}


/* ============================================================
   13. PEEK — anteprima immagine al passaggio del mouse
   ============================================================ */

#peek{
  position:fixed;z-index:1;left:0;top:0;
  width:min(42vw,580px);aspect-ratio:16/11;
  pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.55);
  transition:opacity .26s,transform .38s var(--ease);
  background:
    repeating-linear-gradient(-45deg,transparent 0 9px,rgba(23,21,17,.08) 9px 10px),
    var(--paper);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#peek img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:none;
}
#peek.has-img img{display:block}
#peek .peek-cap{padding:0 32px;text-align:center;color:var(--ink2)}
#peek.has-img .peek-cap{display:none}
.peek-year{
  display:none;
  position:absolute;top:12px;right:14px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:0;
  border:1px solid var(--ink);border-radius:999px;padding:4px 12px;
}


/* ============================================================
   14. CHI SIAMO 
   ============================================================ */

.acronimo{
  font-weight:800;text-transform:uppercase;letter-spacing:0;
  font-size:4.75rem;line-height:.95;
}
.acronimo .serif{text-transform:none;font-weight:400}
.trio{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-top:clamp(40px,6vw,90px);
}
.trio-col{
  padding:clamp(24px,2.6vw,44px) clamp(20px,2.2vw,40px) clamp(32px,3.4vw,56px);
  border-right:1px solid var(--ink);
  display:flex;flex-direction:column;gap:18px;
}
.trio-col:last-child{border-right:none}
.trio-name{display:flex;justify-content:space-between;align-items:baseline}
.trio-name--wordmark{align-items:flex-start;gap:14px}
.trio-word--svg{display:block;flex:1 1 auto;max-width:220px;min-width:0;line-height:0}
.trio-word--svg img{display:block;width:100%;height:auto}
.trio-claim{font-weight:700;font-size:1.35rem;letter-spacing:0;}
.trio-txt{color:var(--ink2);font-size:15px;line-height:1.65;text-wrap:pretty}


/* ============================================================
   15. CONTATTI
   ============================================================ */

.end-h{
  font-weight:800;text-transform:uppercase;letter-spacing:0;
  font-size:7.25rem;line-height:.92;
}
.end-h .serif{text-transform:none;font-weight:400;font-size:1.06em}
.end-h-sm{font-size:3.5rem;line-height:.98}
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(24px,4vw,80px);
  margin-top:clamp(40px,6vw,90px);
  align-items:start;
}
.contact-links{border-top:1px solid var(--ink)}
.contact-link{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--ink);
  text-decoration:none;
  font-weight:700;font-size:1.35rem;letter-spacing:0;
  transition:background .3s,color .3s,padding .3s var(--ease);
}
.contact-link:hover{background:var(--ink);color:var(--paper);padding-left:14px;padding-right:14px}
.contact-side{color:var(--ink2);font-size:14px;line-height:1.7}
.contact-side .pgw-logo{height:44px;margin-bottom:18px;color:var(--ink)}


/* ============================================================
   16. TICKER + FOOTER
   ============================================================ */

.tick{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  overflow:hidden;padding:13px var(--gut);
  margin:0;
}
.tick-in{display:inline-flex;white-space:nowrap;animation:tick 36s linear infinite}
.tick-in span{padding:0 22px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.tick-in{animation:none}}

footer{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px var(--gut) 26px;
}
.to-top{text-decoration:none}


/* ============================================================
   17. CURSORE PERSONALIZZATO (overlay globale, solo mouse fine)
   ============================================================ */

@media (pointer:fine){
  body.has-cur, body.has-cur *{cursor:none!important}
}
#cur-dot{position:fixed;left:-60px;top:-60px;z-index:9999;width:7px;height:7px;border-radius:50%;background:var(--ink);pointer-events:none;transform:translate(-50%,-50%)}
#cur-ring{position:fixed;left:-60px;top:-60px;z-index:9999;width:32px;height:32px;border-radius:50%;border:1.2px solid var(--ink);pointer-events:none;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,opacity .3s}
body.cur-hot #cur-ring{width:48px;height:48px;border-color:var(--accent)}
body[data-color="none"].cur-hot #cur-ring{border-color:var(--ink)}


/* ============================================================
   18. MEDIA QUERY RESPONSIVE — accorpate per breakpoint,
   dal più largo al più stretto (1100 → 900 → 780 → 700 → 600 → 560)
   ============================================================ */

/* ---------- ≤1100px — riduzione tipografica dei titoli grandi ---------- */
@media(max-width:1100px){
  .hero-h1{font-size:clamp(2.6rem, 8.5vh, 6.25rem)}
  .intro-stmt{font-size:3.55rem}
  .acronimo{font-size:3.7rem}
  .case-name{font-size:2.15rem}
  .end-h{font-size:5.5rem}
  .end-h-sm{font-size:3rem}
  .step-num{font-size:3.2rem}
}

/* ---------- ≤900px — passaggio a layout mobile ---------- */
@media(max-width:900px){
  /* Nav: mail nascosta, appare il burger */
  .nav-mail{display:none}
  nav{gap:16px}
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:7px;
    width:46px;height:46px;margin-right:-12px;padding:13px 9px;
    background:none;border:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;position:relative;z-index:51;
  }
  .nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--ink);
    transition:transform .38s var(--ease),opacity .2s;transform-origin:center}
  body.menu-open .nav-burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
  body.menu-open .nav-burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
  body.menu-open .nav-burger{margin-right:-12px}
  .nav-links{display:none}

  /* Chi siamo: trio a colonna singola */
  .trio{grid-template-columns:1fr}
  .trio-col{border-right:none;border-bottom:1px solid var(--ink)}
  .trio-col:last-child{border-bottom:none}

  /* Case history a colonna singola */
  .case-cols{grid-template-columns:1fr}

  /* Peek nascosto (non ha senso su schermi stretti/touch) */
  #peek{display:none}

  /* Contatti a colonna singola */
  .contact-grid{grid-template-columns:1fr}

  /* Servizi: griglia 2 colonne */
  .svc-grid{grid-template-columns:1fr 1fr}

  /* Steps: padding e tipografia ridotti */
  .step{padding:14px 10px 18px;gap:8px}
  .step-num{font-size:2.2rem}
  .step-title{font-size:12px;letter-spacing:0;}
  .step-sub{font-size:13px}
}

/* ---------- ≤780px — steps: numero in colonna a sinistra, titolo in alto a destra, testo sotto ---------- */
@media(max-width:780px){
  .steps{grid-template-columns:1fr}
  .step{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:18px;
    border-right:none;border-bottom:1px solid var(--ink);
    padding:18px var(--gut) 22px;
  }
  .step:first-child{padding-left:var(--gut)}
  .step:last-child{padding-right:var(--gut);border-bottom:none}
  .step-num{grid-column:1;grid-row:1 / 3;font-size:2.2rem;align-self:start}
  .step-title{grid-column:2;grid-row:1;font-size:16px;letter-spacing:0;margin-top:0}
  .step-body{grid-column:2;grid-row:2}
  .step-body-in{opacity:1}
  .step-sub{font-size:14px}
  .step-txt{font-size:14px}
  .step-esito p{font-size:13px}
}

/* ---------- ≤700px — schema hero mobile + ulteriore riduzione tipografica ---------- */
@media(max-width:700px){
  .hero-schema-d{display:none}
  .hero-schema-m{display:block}
  .hero-schema-m .schema{max-height:60vh}
  .hero-schema-m .schema .sc-main{font-size:19px}
  .hero-schema-m .schema .sc-word{font-size:14px;stroke-width:8px}
  .case-head{grid-template-columns:minmax(27px,36px) 1fr auto;gap:10px}

  body{font-size:16px}
  .hero-h1{font-size:clamp(2rem, 8vh, 2.5rem)}
  .intro-stmt{font-size:2.45rem}
  .acronimo{font-size:2.7rem}
  .case-name{font-size:1.3rem}
  .end-h,.end-h-sm{font-size:2.8rem}
  .m-menu-links a{font-size:2rem}
}

/* ---------- ≤600px — case history compatta ---------- */
@media(max-width:600px){
  .case-head{grid-template-columns:minmax(24px,34px) 1fr auto;gap:10px}
  .case-tag{display:none}
  .case-name{font-size:1.3rem}
  .case-gallery{grid-template-columns:1fr;gap:8px}
  .gcell{overflow:hidden}
  .gcell img{width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%) scale(1)}
}

/* ---------- ≤560px — servizi impilati, hero, cursore ---------- */
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .svc-card{flex-direction:column;min-height:0}
  .svc-media{
    flex:none;width:100%;align-self:auto;aspect-ratio:16/10;
    border-right:none;border-bottom:1px solid var(--ink);
  }
  .svc-main{padding:18px 18px 24px}
  .svc-title{font-size:20px}

  #hero{padding-top:68px}
  .hero-meta{font-size:10px}
}