/* Clip landing — from ic_clip_IT_v8.html */

/* DIMENSIONI IMMAGINI (export finale)
   Hero ............................ 16:9   1920×1080
   Card Passo 12/15/18 ............. 3:2    1080×720  (3 foto)
   Tile varianti Standard/SZ/T ...... 3:2    900×600   (3 foto)
   Slideshow gamma (5 slide) ........ 3:2    1080×720
   Clip for you ..................... ~1,54  800×520 */

/* Ω: Google Fonts non scarica la Ω del Raleway (il sottoinsieme greco non viene servito).
   Qui è incorporata la sola Ω estratta dal Raleway variabile (circa 1 kB): stesso disegno su ogni
   dispositivo e peso che segue il testo (100–900). Il testo resta testo: selezionabile e indicizzabile. */
@font-face { font-family: 'IC Omega'; src: url(data:font/woff2;base64,d09GMgABAAAAAAU4ABIAAAAAC+wAAATVAAQGqAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcMD9IVkFSTAZgP1NUQVSBOCcyADwvfhEICoIAghwwg1YBNgIkAwoLCAAEIAWJCgcgG8cKKJ6DTdmNVd6qbsiobbfZrV8XovHwn039+2ZW8grMawdIcYCVzwAVU52T8gN1hFQBgIxa0y0Awj0kueQuH2BVAiU6dRWuNT66MhaYcHHPuBtyamHkVeC3EWsro5YOMizSPERKYkiUIiIvqhGxEP89NA3JJJmGSPomGioh1ve3fJbF0aIgHCLysiNE5A/RMvRygabpZootljcPkaqAXg8ASZfqyn8rPNxpYqg+gVj0qE5kpranwlaBaEg6r4P5QmLKillb3ywE+tKE+H0cSVKktRwhiXRlOgVsb3YSB6E/1qbM8/FK9n9E/iL4y9+zm/MdvXEoLvQ1AlJfegYdWQilhEoTc6Wz1RpLHI4dwuJGhUrHUuvYxqFbjMOTgAhHgEMkz90ux1JkpCjietJDAG21+JWIetqnsg8kytwRNfLFhllIUREKfk3NxzwGSrWtcrV2KDUy3DFlRStmf9GLxd+MYo27Zs0CCRmVLFApLERdIaTBunsxeEf/nn3iFlc4OVQamjN1QoLNUXFYiHCrFM1IeI5oRSaWEu0oiOuJ/qgRvxIDUSftA8Rg9D3eQgxFSe4Qw9EgX0yMCNGLGQQZ1JFwALgeUABCdLvbZ7zz78T9u+++2/p8++23nf/WW3tkaMe7Eot7INr8oIa3nE8btiUyW/HSBRI/bNXBtP/StS17zzkljtFtVjersTrRpbXAGlqBC31YVDe2Seahi3O3dScNb7j4jJ0r0who3azG6kSn1gqsYb2wGAbX36pj78u4JlJcheky6IATub+zc+8SKnsGsAmckrjgDOR/3vzi98eWWCQU8HlVgmrOP+L/5+77UXvw5a/+yWpbf6uG6e6QnILfJY6vt+789pVF5vx17a4XFI6vv+qsht++8pSe+sqnv6Exa9X117uk3PP1+/nPquaNpmQMTe7M3X/NvZW2RRGf7MdmPdc6sHbdXV+3Og9bxKuVt6deXdeNjI19h/ELUjnXrFY3yyJdWMYXZXPmNhrOo33OJ6c0v73nzXpamldecue3zbIN9pPAcz/aXrRTE8U/y/hms/G7uzW/uMKzyDUbbXNXMqZeIfHWasZMMHY2EV1/37CaTwJF/ZbJoad3usnZ4LcyI38Jb350UAN8uMRii1XF6pKmFucB6hIIfnzR2toIM3rZEoLWXkqHoD8nq1pVIDtWipMk47fLMqbHXkgQRQPP4SBM9hySAZ8h6/q+sgBRMzWmy+omx1ozgnbsRAhl7IekisOQNeMsFAZ8hpp2nI+6obgafcpYidJI3ICGZtyDpol4DC3d+AJtc9MQ+i1Ma2DA/HQABi1OF2LIRLoDw5amVzBibvobo9p55v9SaebFNqcwcDKh1DQsaq1mFataRcceNGS1dkMwMjvCqdYuTBRaMpFFrU1ZWWgoTMxqLXQszoBgGMKEmqXGERTT7XAKrs1SHWejJ+wfE8nMVzexkUlqbUWhZ1FrJwSvtIQJzyXqdX1XfRGlH5GpWavU1qCuVaxmLevbyY5tSyYOMLpIx0MmZpQraqWwHOnEPaY7OG6Jg4UJsQlk2sBW24mUFXcgJD53noKRjOdMZmxvtZRIV0d1n4IjnmIFYnnrFZgpHsyevFA4s3uBnHOUAnEPVmzjIhOZEzetsdwXUiInEqil3kqrAQ==) format('woff2');
  font-weight: 100 900; font-style: normal; unicode-range: U+03A9, U+2126; font-display: swap; }

:root {
  --navy:    #162C4E;
  --blue:    #1A5FA8;
  --azure:   #0090D4;
  --sky:     #4DB8E8;
  --white:   #FFFFFF;
  --offwhite:#F5F9FD;
  --text:    #1E2D3D;
  --muted:   #536070;
  --border:  #C8DCEA;
  --lighthr: #E0EEF6;
  --head:    'Raleway', 'IC Omega', sans-serif;
  --body:    'Lato', 'IC Omega', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }.page-clip{ scroll-behavior: smooth; }.page-clip{ font-family: var(--body); font-size: 15px; line-height: 1.7; color: var(--text); background: var(--white); }.page-clip a{ color: inherit; text-decoration: none; }.page-clip img{ display: block; width: 100%; }.page-clip .container{ max-width: 1180px; margin: 0 auto; padding: 0 48px; }.page-clip .ph{
  background: linear-gradient(135deg, #C8DCEA 0%, #9DBFD8 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #4A7A9B; font-family: var(--head); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; gap: 10px; text-align: center; padding: 20px;
}.page-clip .ph.onblue{ background: linear-gradient(135deg, #1A4880 0%, #162C4E 100%); color: #4A8DB5; }.page-clip .eyebrow{ font-family: var(--head); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--azure); margin-bottom: 10px; }.page-clip .sh{ font-family: var(--head); font-weight: 800; line-height: 1.15; margin-bottom: 18px; }.page-clip .sh.on-white{ font-size: 32px; color: var(--navy); }.page-clip .sh.on-blue{ font-size: 32px; color: var(--white); }.page-clip .sh.lg.on-blue{ font-size: 38px; }.page-clip .sh.lg.on-white{ font-size: 38px; }.page-clip .sdesc{ font-size: 14.5px; font-weight: 300; line-height: 1.85; }.page-clip .sdesc.on-white{ color: var(--muted); }.page-clip .sdesc.on-blue{ color: rgba(255,255,255,.72); }.page-clip .sdesc strong{ font-weight: 600; }.page-clip .sdesc.on-white strong{ color: var(--text); }.page-clip .sdesc.on-blue  strong{ color: var(--white); }.page-clip .btn{ display: inline-block; font-family: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 13px 28px; border: 2px solid transparent; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }.page-clip .btn-solid{ background: var(--azure); color: var(--white); border-color: var(--azure); }.page-clip .btn-solid:hover{ background: #0078B4; border-color: #0078B4; }.page-clip .btn-ghost-white{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }.page-clip .btn-ghost-white:hover{ border-color: var(--white); background: rgba(255,255,255,.1); }.page-clip .btn-ghost{ background: transparent; color: var(--blue); border-color: var(--blue); }.page-clip .btn-ghost:hover{ background: var(--blue); color: var(--white); }

/* ── BOZZA BANNER ── */
.draft-banner { background: #FEF9E7; border-bottom: 3px solid #D4A017; padding: 10px 48px; font-family: var(--head); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7D6608; display: flex; align-items: center; gap: 10px; }.page-clip .draft-banner svg{ width: 16px; height: 16px; fill: #D4A017; flex-shrink: 0; }

/* ── 01 HERO ── */
.hero { padding: 52px 0 0; background: var(--white); }.page-clip .hero-title-block{ padding: 0 48px 32px; max-width: 1180px; margin: 0 auto; }.page-clip .hero-title-block h1{ font-family: var(--head); font-size: 48px; font-weight: 900; color: var(--blue); line-height: 1.1; margin-bottom: 10px; }.page-clip .hero-title-block .hero-sub{ font-size: 15px; font-weight: 300; color: var(--muted); max-width: 680px; line-height: 1.8; }.page-clip .hero-title-block .hero-sub strong{ color: var(--text); font-weight: 600; }

/* Two-format intro strip */
.format-strip { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; gap: 1px; background: var(--border); border: 1px solid var(--border); }.page-clip .format-item{ background: var(--offwhite); padding: 18px 24px; display: flex; gap: 16px; align-items: flex-start; }.page-clip .format-item.active{ background: var(--white); }.page-clip .format-item-icon{ width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }.page-clip .format-item-icon svg{ width: 32px; height: 32px; color: var(--navy); }.page-clip .format-item-title{ font-family: var(--head); font-size: 22px; font-weight: 900; color: var(--navy); line-height: 1.1; margin-bottom: 8px; }.page-clip .format-item-desc{ font-size: 12.5px; font-weight: 300; color: var(--muted); line-height: 1.6; }.page-clip .format-item-desc em{ font-style: normal; color: var(--text); font-weight: 400; }.page-clip .format-anchor{ font-family: var(--head); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azure); margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; }.page-clip .format-anchor::after{ content: '↓'; }.page-clip .hero-img-full{ width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-top: 28px; }.page-clip .hero-img-full img{ width: 100%; height: 100%; object-fit: cover; display: block; }.page-clip .hero-img-full .ph{ height: 100%; font-size: 11px; }

/* KPI STRIP */
.kpi-strip { background: var(--blue); display: grid; grid-template-columns: repeat(var(--kpi-n, 3), 1fr); }.page-clip .kpi-item{ padding: 20px 32px; border-right: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; gap: 3px; }.page-clip .kpi-item:last-child{ border-right: none; }.page-clip .kpi-num{ font-family: var(--head); font-size: 28px; font-weight: 900; color: var(--white); line-height: 1; }.page-clip .kpi-lbl{ font-family: var(--head); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ── 02 SISTEMA CLIP ── */
.system-section { background: var(--white); padding: 72px 0 80px; border-top: 1px solid var(--lighthr); }.page-clip .system-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }.page-clip .clip-diagram-box{ background: var(--offwhite); border: 1px solid var(--border); padding: 28px 24px 20px; }.page-clip .clip-diagram-label{ font-family: var(--head); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azure); margin-bottom: 14px; }.page-clip .clip-diagram-code{ font-family: var(--head); font-size: 30px; font-weight: 900; color: var(--navy); letter-spacing: .02em; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--lighthr); }.page-clip .clip-diagram-code span{ color: var(--azure); }.page-clip .clip-svg-wrap{ margin-bottom: 20px; }.page-clip .clip-svg-wrap svg, .page-clip .clip-svg-real svg{ width: 100%; height: auto; display: block; }.page-clip .clip-svg-real{ margin-bottom: 20px; }

/* Image placeholder for technical drawing slot */
.drawing-slot { border: 2px dashed var(--border); background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; margin-bottom: 20px; }.page-clip .drawing-slot-label{ font-family: var(--head); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--azure); }.page-clip .drawing-slot-desc{ font-size: 11px; font-weight: 300; color: var(--muted); line-height: 1.5; }.page-clip .drawing-slot img{ width: 100%; height: auto; display: block; }.page-clip .code-params{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }.page-clip .code-param{ display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-left: 3px solid var(--azure); background: var(--white); }.page-clip .code-param-letter{ font-family: var(--head); font-size: 20px; font-weight: 900; color: var(--navy); line-height: 1; }.page-clip .code-param-name{ font-family: var(--head); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azure); }.page-clip .code-param-desc{ font-size: 11.5px; font-weight: 300; color: var(--muted); line-height: 1.5; }.page-clip .download-card{ margin-top: 28px; border: 1.5px solid var(--border); padding: 18px 22px; display: flex; align-items: center; gap: 16px; transition: border-color .2s; }.page-clip .download-card:hover{ border-color: var(--azure); }.page-clip .download-icon{ color: var(--azure); flex-shrink: 0; }.page-clip .download-icon svg{ width: 32px; height: 32px; fill: currentColor; }.page-clip .download-title{ font-family: var(--head); font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 2px; }.page-clip .download-sub{ font-size: 11.5px; font-weight: 300; color: var(--muted); }.page-clip .download-btn{ margin-left: auto; flex-shrink: 0; }.page-clip .download-btn span{ display: inline-block; font-family: var(--head); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: var(--azure); padding: 7px 14px; }

/* ── 03 I TRE PITCH ── */
.products { background: var(--blue); padding: 72px 0 80px; }.page-clip .products-head{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 48px; }
/* Card prodotto — stesso schema dei Budelli: righe orizzontali, CSS Grid 42% / 1fr.
   FIX 1: Grid al posto di flex+aspect-ratio (niente gap tra foto e testo).
   FIX 2: min-width:0 su entrambe le celle (la foto ad alta risoluzione non invade il testo).
   FIX 3: align-self:start sulla foto (resta 3:2 anche se il testo accanto è lungo). */
.cards-pitch { display: flex; flex-direction: column; gap: 20px; }.page-clip .pcard{ background: var(--white); display: grid; grid-template-columns: 42% 1fr; align-items: stretch; transition: box-shadow .2s; }.page-clip .pcard:hover{ box-shadow: 0 6px 28px rgba(0,0,0,.18); }.page-clip .pcard-img{ aspect-ratio: 3 / 2; overflow: hidden; position: relative; min-width: 0; align-self: start; }.page-clip .pcard-img .ph{ height: 100%; }.page-clip .pcard-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }.page-clip .pcard-body{ padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; border-left: 3px solid var(--azure); min-width: 0; }.page-clip .pcard-tag{ font-family: var(--head); font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--azure); margin-bottom: 6px; }.page-clip .pcard h3{ font-family: var(--head); font-size: 22px; font-weight: 900; color: var(--navy); margin-bottom: 12px; line-height: 1.1; }.page-clip .pcard p{ font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.75; margin-bottom: 16px; flex: 1; }.page-clip .pcard p strong{ color: var(--text); font-weight: 600; }.page-clip .pcard-vars{ border-top: 1px solid var(--lighthr); padding-top: 14px; }.page-clip .v-lbl{ font-family: var(--head); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
/* FIX SAFARI (come Budelli): margin-right al posto di gap su flex con pseudo-elemento */
.v-item { display: flex; align-items: flex-start; font-size: 12.5px; font-weight: 300; color: var(--text); padding: 2px 0; line-height: 1.5; }.page-clip .v-item::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--azure); flex-shrink: 0; margin-top: 7px; margin-right: 10px; }.page-clip .v-item-code{ font-family: var(--head); font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .05em; }

/* ── 04 VARIANTI DI CLIP ── */
.variants { background: var(--white); padding: 72px 0 80px; border-top: 1px solid var(--lighthr); }.page-clip .variants-head{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 44px; }

/* 3 tile varianti */
.tiles-3-wrap {}.page-clip .tiles-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 1px; }.page-clip .tile{ background: var(--offwhite); display: flex; flex-direction: column; text-align: center; cursor: pointer; transition: background .2s; min-width: 0; }.page-clip .tile:hover, .page-clip .tile:focus-visible{ background: var(--navy); }.page-clip .tile:hover .tile-name, .page-clip .tile:hover .tile-desc, .page-clip .tile:focus-visible .tile-name, .page-clip .tile:focus-visible .tile-desc{ color: rgba(255,255,255,.85); }.page-clip .tile:hover .tile-tag, .page-clip .tile:focus-visible .tile-tag{ color: var(--sky); }

/* Box media 3:2 — icona e foto sovrapposte, dissolvenza al passaggio (stesso schema logo → foto dei fornitori) */
.tile-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--border); }.page-clip .tile-media-icon, .page-clip .tile-media-photo{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: opacity .4s ease; }.page-clip .tile-media-icon{ display: flex; align-items: center; justify-content: center; opacity: 1; z-index: 2; }.page-clip .tile-media-photo{ opacity: 0; z-index: 1; }.page-clip .tile-media-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }.page-clip .tile-media-photo .ph{ height: 100%; font-size: 9px; }.page-clip .tile:hover .tile-media-icon, .page-clip .tile:focus-visible .tile-media-icon{ opacity: 0; }.page-clip .tile:hover .tile-media-photo, .page-clip .tile:focus-visible .tile-media-photo{ opacity: 1; }.page-clip .tile-inner{ padding: 22px 20px 26px; display: flex; flex-direction: column; align-items: center; }

/* FIX 4: le icone usano stroke="currentColor" → si colora con color, non con fill */
.tile-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }.page-clip .tile-icon svg{ width: 56px; height: 56px; color: var(--navy); }

/* Rollover photo layer inside tile */
.tile-photo {
  position: absolute; inset: 0; opacity: 0; z-index: 5;
  transition: opacity .35s ease;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}.page-clip .tile-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }.page-clip .tile-photo .ph{ width: 100%; height: 100%; font-size: 9px; }
/* On hover show photo then pull back to show text at bottom */
.tile:hover .tile-photo { opacity: 0.88; }
/* Ensure text stays visible above photo on hover */
.tile-inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; }.page-clip .tile-icon{ margin: 0 auto 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }.page-clip .tile-icon svg{ width: 44px; height: 44px; fill: var(--navy); transition: fill .2s; }.page-clip .tile-tag{ font-family: var(--head); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azure); margin-bottom: 4px; transition: color .2s; }.page-clip .tile-name{ font-family: var(--head); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); line-height: 1.2; margin-bottom: 10px; transition: color .2s; }.page-clip .tile-desc{ font-size: 12px; font-weight: 300; color: var(--muted); line-height: 1.65; transition: color .2s; }

/* ── 05 QUALITÀ ── */
.quality { background: var(--navy); padding: 72px 0 80px; }.page-clip .quality-head{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 52px; }.page-clip .cert-badges{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }.page-clip .cert-badge{ flex: 1 1 0; border: 1.5px solid rgba(255,255,255,.25); padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 88px; text-align: center; }.page-clip .cert-badge-main{ font-family: var(--head); font-size: 11px; font-weight: 800; color: var(--white); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }.page-clip .cert-badge-sub{ font-family: var(--head); font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }.page-clip .quality-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }.page-clip .q-item{ background: rgba(255,255,255,.04); padding: 28px 24px 26px; display: flex; flex-direction: column; gap: 10px; transition: background .2s; }.page-clip .q-item:hover{ background: rgba(255,255,255,.09); }.page-clip .q-icon{ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }.page-clip .q-icon svg{ width: 32px; height: 32px; color: var(--sky); transition: color .2s; }.page-clip .q-item:hover .q-icon svg{ color: var(--white); }.page-clip .q-title{ font-family: var(--head); font-size: 13px; font-weight: 800; color: var(--white); line-height: 1.2; }.page-clip .q-desc{ font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.55); line-height: 1.65; }

/* ── 06 GAMMA DEI FORMATI (catalogo) + SLIDESHOW ── */
.gamma { background: var(--offwhite); padding: 72px 0 80px; border-top: 1px solid var(--lighthr); }.page-clip .gamma-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }.page-clip .gamma-inner > *{ min-width: 0; }.page-clip .gamma .btn{ margin-top: 12px; }.page-clip .slideshow{ position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--white); }.page-clip .slide{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }.page-clip .slide.is-active{ opacity: 1; z-index: 1; }.page-clip .slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }.page-clip .slide .ph{ height: 100%; }.page-clip .ss-btn{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border: none; background: rgba(22,44,78,.72); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }.page-clip .ss-btn:hover{ background: var(--azure); }.page-clip .ss-btn svg{ width: 18px; height: 18px; fill: currentColor; }.page-clip .ss-prev{ left: 0; }.page-clip .ss-next{ right: 0; }.page-clip .ss-dots{ position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 6px; }.page-clip .ss-dot{ width: 22px; height: 4px; border: none; padding: 0; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(22,44,78,.25); cursor: pointer; transition: background .2s, width .2s; }.page-clip .ss-dot.is-active{ background: var(--azure); width: 34px; }

/* ── 08 CLIP FOR YOU ── */
.clipforyou { background: var(--navy); padding: 72px 0; }.page-clip .clipforyou-inner{ display: grid; grid-template-columns: 1fr 400px; gap: 72px; align-items: center; }.page-clip .clipforyou-inner > *{ min-width: 0; }.page-clip .clipforyou-service-label{ font-family: var(--head); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; }.page-clip .clipforyou-service-name{ font-family: var(--head); font-size: 42px; font-weight: 900; color: var(--white); line-height: 1; margin-bottom: 12px; letter-spacing: -.01em; }.page-clip .clipforyou-service-name em{ color: var(--sky); font-style: normal; }.page-clip .clipforyou-subtitle{ font-family: var(--head); font-size: 18px; font-weight: 600; color: rgba(255,255,255,.72); line-height: 1.35; margin-bottom: 24px; }.page-clip .clipforyou-img{ aspect-ratio: 400 / 260; overflow: hidden; }.page-clip .clipforyou-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }.page-clip .clipforyou-img .ph.onblue{ height: 100%; }.page-clip .clipforyou-btns{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ── 09 FORM CONTATTO ── */
.contact { padding: 72px 0; background: var(--white); border-top: 1px solid var(--lighthr); }.page-clip .contact-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }.page-clip .contact-text p{ font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.85; margin-bottom: 16px; }.page-clip .contact-text p strong{ color: var(--text); font-weight: 600; }
/* FAQ highlight boxes */
.faq-examples { margin: 20px 0 8px; display: flex; flex-direction: column; gap: 12px; }.page-clip .faq-box{ background: var(--offwhite); border: 1px solid var(--border); border-left: 3px solid var(--azure); padding: 14px 18px; }.page-clip .faq-q{ font-family: var(--head); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azure); margin-bottom: 5px; }.page-clip .faq-text{ font-size: 13.5px; font-weight: 400; color: var(--text); line-height: 1.6; font-style: italic; }.page-clip .faq-note{ font-size: 12px; font-weight: 300; color: var(--muted); margin-top: 5px; line-height: 1.55; }.page-clip .form-box{ background: var(--offwhite); border: 1.5px solid var(--border); padding: 36px; }.page-clip .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }.page-clip .fld{ display: flex; flex-direction: column; gap: 5px; }.page-clip .fld.full{ grid-column: 1 / -1; }.page-clip .fld label{ font-family: var(--head); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }.page-clip .fld input, .page-clip .fld select, .page-clip .fld textarea{ padding: 10px 12px; border: 1.5px solid var(--border); font-family: var(--body); font-size: 13px; color: var(--text); background: var(--white); outline: none; resize: vertical; transition: border-color .15s; }.page-clip .fld input:focus, .page-clip .fld select:focus, .page-clip .fld textarea:focus{ border-color: var(--azure); }.page-clip .form-submit{ margin-top: 18px; }.page-clip .form-submit .btn{ display: block; width: 100%; text-align: center; padding: 14px; }.page-clip .form-note{ margin-top: 10px; font-size: 11px; color: var(--muted); font-weight: 300; line-height: 1.6; }.page-clip .form-note a{ color: var(--azure); }.page-clip .foot{ background: var(--navy); padding: 30px 40px; border-top: 3px solid var(--azure); text-align: center; font-family: var(--head); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.28); }
/* ══ RESPONSIVE ══ */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .hero-title-block { padding: 0 32px 28px; }
  .draft-banner { padding: 10px 32px; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-item:nth-child(2) { border-right: none; }
  .kpi-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); }
  .products-head, .variants-head, .quality-head { grid-template-columns: 1fr; gap: 16px; }
  .system-inner, .gamma-inner, .clipforyou-inner, .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-inner > *, .form-row > * { min-width: 0; }
  .fld input, .fld select, .fld textarea { width: 100%; }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
}@media (max-width: 768px){
  .hero { padding-top: 36px; }
  .hero-title-block h1 { font-size: 36px; }
  .sh.lg.on-white, .sh.lg.on-blue { font-size: 30px; }
  .system-section, .products, .variants, .quality, .gamma, .clipforyou, .contact { padding-top: 56px; padding-bottom: 64px; }
  .pcard { grid-template-columns: 1fr; }
  .pcard-body { border-left: none; border-top: 3px solid var(--azure); padding: 22px 24px 26px; }
  .form-row { grid-template-columns: 1fr; }
  .form-box { padding: 24px; }
  .download-card { flex-wrap: wrap; }
  .download-btn { margin-left: 0; }
  .format-strip { grid-template-columns: 1fr; }
  .tiles-3 { grid-template-columns: 1fr; }
  .clipforyou-service-name { font-size: 34px; }
  .clip-diagram-code { font-size: 24px; }
}@media (max-width: 480px){
  .container { padding: 0 20px; }
  .hero-title-block { padding: 0 20px 24px; }
  .draft-banner { padding: 10px 20px; }
  .hero-title-block h1 { font-size: 30px; }
  .kpi-item { padding: 16px 20px; }
  .kpi-num { font-size: 24px; }
  .quality-grid { grid-template-columns: 1fr; }
  .code-params { grid-template-columns: 1fr; }
}

/* ══ ACCESSIBILITÀ ══ */
a:focus-visible, button:focus-visible, .tile:focus-visible {
  outline: 2px solid var(--azure); outline-offset: 3px;
}@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}


/* Offset header fisso (.top-menu), come .page-budelli */
.page-clip {
  padding-top: calc(100vw * 72 / var(--viewSize));
}
@media screen and (max-width: 992px) {
  .page-clip {
    padding-top: calc(100vw * 64 / var(--viewSize));
  }
}

/* Joomla page wrapper */
.page-clip,
.page-clip section { position: relative; z-index: 2; }
.page-clip img { display: block; max-width: 100%; }
.page-clip a.download-card { text-decoration: none; color: inherit; }

/* Header light override (same as budelli) */
.logo-top > svg,
.logo-top > svg path { fill: var(--blue-40) !important; }
.top-menu { background: var(--neutral-10) !important; }
#language_btn_113 { color: var(--blue-40) !important; }
@media screen and (max-width: 992px) {
  .logo-top > svg, .logo-top > svg path { fill: var(--blue-40) !important; }
  #language_btn_113 { color: var(--blue-40) !important; }
}

/* ══ MOBILE — selettori .page-clip, dopo le regole desktop ══ */
@media (max-width: 1024px) {
  .page-clip .container { padding: 0 24px; }
  .page-clip .hero-title-block { padding: 0 24px 28px; }
  .page-clip .draft-banner { padding: 10px 24px; }
  .page-clip .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-clip .kpi-item:nth-child(2) { border-right: none; }
  .page-clip .kpi-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); }
  .page-clip .products-head,
  .page-clip .variants-head,
  .page-clip .quality-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 28px;
  }
  .page-clip .products-head .sh,
  .page-clip .variants-head .sh,
  .page-clip .quality-head .sh { margin-bottom: 0; }
  .page-clip .products-head .sdesc,
  .page-clip .variants-head .sdesc,
  .page-clip .quality-head .sdesc { margin: 0; }
  .page-clip .products-head .sdesc > p,
  .page-clip .variants-head .sdesc > p,
  .page-clip .quality-head .sdesc > p { margin: 0; }
  .page-clip .system-inner,
  .page-clip .gamma-inner,
  .page-clip .clipforyou-inner,
  .page-clip .contact-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .page-clip .products,
  .page-clip .quality,
  .page-clip .clipforyou { padding: 48px 0; }
  .page-clip .quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-clip .products-head > *,
  .page-clip .variants-head > *,
  .page-clip .quality-head > *,
  .page-clip .system-inner > *,
  .page-clip .gamma-inner > *,
  .page-clip .clipforyou-inner > *,
  .page-clip .contact-inner > *,
  .page-clip .q-item,
  .page-clip .tile,
  .page-clip .pcard-body { min-width: 0; }
  .page-clip .clipforyou-img { width: 100%; max-width: 100%; }
}
@media (max-width: 768px) {
  .page-clip .hero { padding-top: 28px; }
  .page-clip .hero-title-block h1 { font-size: 34px; }
  .page-clip .sh,
  .page-clip .sh.on-white,
  .page-clip .sh.on-blue,
  .page-clip .sh.lg,
  .page-clip .sh.lg.on-white,
  .page-clip .sh.lg.on-blue { font-size: 22px; line-height: 1.25; }
  .page-clip .system-section,
  .page-clip .products,
  .page-clip .variants,
  .page-clip .quality,
  .page-clip .gamma,
  .page-clip .clipforyou,
  .page-clip .contact { padding-top: 48px; padding-bottom: 52px; }
  .page-clip .pcard { grid-template-columns: minmax(0, 1fr); }
  .page-clip .pcard-body {
    border-left: none;
    border-top: 3px solid var(--azure);
    padding: 20px 18px 22px;
  }
  .page-clip .format-strip,
  .page-clip .tiles-3,
  .page-clip .form-row,
  .page-clip .code-params,
  .page-clip .quality-grid { grid-template-columns: minmax(0, 1fr); }
  .page-clip .form-box { padding: 20px 16px; }
  .page-clip .download-card { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .page-clip .download-btn { margin-left: 0; }
  .page-clip .clipforyou-service-name { font-size: 32px; }
  .page-clip .clip-diagram-code { font-size: 22px; word-break: break-word; }
  .page-clip .cert-badge { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .page-clip .format-item { padding: 16px; }
  .page-clip .format-item-title { font-size: 20px; }
  .page-clip .q-title,
  .page-clip .q-desc,
  .page-clip .tile-name,
  .page-clip .tile-desc { overflow-wrap: anywhere; }
  .page-clip .form-box .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  .page-clip .form-box .row > .col-md-3:not(:has(*)) { display: none !important; }
  .page-clip .form-box .formControls,
  .page-clip .form-box .d-flex.justify-content-end,
  .page-clip .form-box .d-flex.justify-content-end > .rsform-block { width: 100%; flex: 1 1 100%; justify-content: stretch !important; }
  .page-clip .form-box .rsform-submit-button,
  .page-clip .form-box .formControls > .rsform-submit-button,
  .page-clip .form-box button[type="submit"] { width: 100% !important; }
  .page-clip .form-box input,
  .page-clip .form-box select,
  .page-clip .form-box textarea { max-width: 100%; }
  .page-clip .form-box .form-check,
  .page-clip .form-box .form-check-inline { display: flex; width: 100%; margin-right: 0; white-space: normal; }
}
@media (max-width: 480px) {
  .page-clip .container { padding: 0 16px; }
  .page-clip .hero-title-block { padding: 0 16px 20px; }
  .page-clip .draft-banner { padding: 10px 16px; }
  .page-clip .hero-title-block h1 { font-size: 30px; }
  .page-clip .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-clip .kpi-item { padding: 14px 16px; }
  .page-clip .kpi-num { font-size: 24px; }
}

.page-clip p:empty { display: none; }

/* Corpo unico: stessa misura e interlinea, anche sul grassetto */
.page-clip p,
.page-clip p span,
.page-clip .pcard p,
.page-clip .pcard p span,
.page-clip .sdesc,
.page-clip .sdesc span,
.page-clip .sdesc > p,
.page-clip .sdesc > p span,
.page-clip .hero-sub,
.page-clip .hero-title-block .hero-sub,
.page-clip .hero-title-block p,
.page-clip .format-item-desc,
.page-clip .tile-desc,
.page-clip .q-desc,
.page-clip .faq-text,
.page-clip .faq-note,
.page-clip .contact-text p {
  font-family: Campton, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.page-clip p strong,
.page-clip p b,
.page-clip p em,
.page-clip .sdesc strong,
.page-clip .sdesc b,
.page-clip .sdesc em,
.page-clip li strong,
.page-clip li b,
.page-clip .v-item strong,
.page-clip .format-item-desc strong,
.page-clip .format-item-desc em {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  font-style: normal;
  line-height: inherit;
  letter-spacing: 0;
}
.page-clip .format-item-title,
.page-clip .pcard h3,
.page-clip h1,
.page-clip .sh {
  line-height: 1.2;
}

/* Scheda passo: macchine / matrici / taglie — stesso font e pallino a sinistra */
.page-clip .pcard-vars .v-lbl {
  font-family: var(--head);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 6px;
}
.page-clip .pcard-vars .v-lbl:first-child { margin-top: 0; }
.page-clip .pcard-vars .v-item {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  font-family: Campton, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  padding: 0;
  margin: 0;
}
.page-clip .pcard-vars .v-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azure);
  margin-top: 0.5em;
  margin-right: 0;
  flex-shrink: 0;
}
.page-clip .pcard-vars .v-codes,
.page-clip .pcard-vars .v-item-code,
.page-clip .pcard-vars .v-item p,
.page-clip .pcard-vars .v-item span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: 0;
  color: inherit;
}
.page-clip .pcard-vars .v-codes {
  min-width: 0;
  overflow-wrap: anywhere;
}