@font-face { font-family: Bebas; src: url('../progettazione-contenuto/font/BebasNeue-Regular.ttf'); }
@font-face { font-family: Poppins; src: url('../progettazione-contenuto/font/Poppins-Regular.ttf'); }
@font-face { font-family: Poppins; src: url('../progettazione-contenuto/font/Poppins-SemiBold.ttf'); font-weight: 600; }
:root { --gold: #e3a836; --navy: #071f48; --ink: #111; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); font-family: Poppins, Arial, sans-serif; }
body { overflow-x: hidden; }
h1, h2, h3, p { margin-top: 0; }
.section-pad { padding: 46px clamp(20px, 6vw, 58px); }
.mobile-phase-section { padding: 30px 0 22px; overflow: hidden; }
.phase-nav { display:grid; grid-template-columns:repeat(5,180px); gap:28px; overflow-x:auto; padding:30px 28px 24px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.phase-nav::-webkit-scrollbar { display:none; }
.phase-card { position:relative; min-height:225px; padding:46px 14px 20px; text-align:center; background:transparent; clip-path:none; filter:none; isolation:isolate; overflow:visible; scroll-snap-align:center; }
.phase-card::before { content:""; position:absolute; inset:0; z-index:0; background:#fff; clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px); filter:drop-shadow(12px 16px 10px rgba(0,0,0,.24)); }
.phase-card > * { position:relative; z-index:2; }
.phase-card:not(:last-child)::after { content:""; position:absolute; right:-29px; top:42%; z-index:3; border-left:22px solid var(--gold); border-top:34px solid transparent; border-bottom:34px solid transparent; }
.phase-card img { display:block; width:76px; height:76px; object-fit:contain; margin:0 auto 15px; }
.phase-card strong { display:block; font-size:15px; line-height:1.3; }
.phase-card .hex { position:absolute; top:-25px; left:50%; translate:-50% 0; z-index:4; width:58px; height:51px; display:grid; place-items:center; background:var(--gold); clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); font:28px Bebas,Impact,sans-serif; }
.phase-card.inactive { color:#999; }
.phase-card.inactive img { filter:grayscale(1); opacity:.52; }
.phase-card.inactive .hex { background:#d4d4d4; }
.phase-card.inactive::after { filter:grayscale(1); opacity:.45; }
.phase-link { cursor: pointer; }
.phase-link:focus-visible { outline: 4px solid var(--navy); outline-offset: 5px; }
.hero.cut-card { max-width:calc(100% - 42px); margin:24px auto 20px; min-height:0; padding:0; text-align:center; background:transparent; clip-path:none; filter:drop-shadow(0 18px 14px rgba(0,0,0,.28)); box-shadow:none; }
.hero.cut-card::before { display:none; }
.hero .card-face { background:#fff; clip-path:polygon(34px 0,calc(100% - 34px) 0,100% 34px,100% calc(100% - 34px),calc(100% - 34px) 100%,34px 100%,0 calc(100% - 34px),0 34px); }
.eyebrow { margin-bottom: 12px; font-family: Bebas, Impact, sans-serif; font-size: 22px; text-transform: uppercase; }
.hero h1, .process-title h2, .gold-band > h2, .benefits > h2 { font-family: Bebas, Impact, sans-serif; text-transform: uppercase; line-height: 1; }
.hero h1 { margin-bottom:14px; color:var(--gold); font-size:clamp(34px,7vw,46px); }
.hero h2 { margin-bottom:14px; font-size:clamp(18px,3.6vw,24px); }
.hero .card-face > p:last-child { max-width:950px; margin:0 auto; font-size:clamp(14px,2.4vw,17px); line-height:1.45; }
.process-title { padding-bottom: 18px; text-align: center; }
.process-title h2 { margin:0; font-size:clamp(32px,6vw,44px); }
.process-title span, .gold-band h2 span, .benefits h2 span, .final-message span { color: var(--gold); }
.fixed-info { position: relative; width: 100%; padding-top: 0; overflow-x: auto; overflow-y: hidden; background: #fff; touch-action: pan-x pan-y; user-select: none; cursor: grab; scrollbar-color: var(--gold) #f0f1f3; scrollbar-width: thin; }
.fixed-info.is-dragging { cursor: grabbing; }
.fixed-info__canvas { position: relative; top: auto; left: auto; width: 1120px; overflow: hidden; background: #fff; transform: none; }
.fixed-info__canvas iframe { position: absolute; left: 0; width: 1920px; height: 2585px; border: 0; pointer-events: none; transform-origin: top left; transform: scale(.5833333); }
.phase-canvas { height: 210px; }
.phase-canvas iframe { top: -28px; }
.process-canvas { height: 345px; }
.process-canvas iframe { top: -465px; }
.internal-logo-mask { position: absolute; z-index: 2; left: 965px; top: 0; width: 155px; height: 120px; background: #fff; }
.zoom-controls { position: absolute; z-index: 4; top: 10px; right: 14px; display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(10,35,72,.18); }
.zoom-controls button { min-width: 38px; height: 36px; padding: 0 10px; border: 1px solid rgba(10,35,72,.13); border-radius: 8px; background: #fff; color: var(--navy); font: 600 14px Poppins, Arial, sans-serif; cursor: pointer; touch-action: manipulation; }
.zoom-controls button:first-child, .zoom-controls button:last-child { font-size: 22px; }
.gold-band { padding: 52px clamp(20px, 5vw, 54px) 60px; background: var(--gold); }
.gold-band > h2, .benefits > h2 { margin-bottom: 40px; text-align: center; font-size: clamp(40px, 8vw, 64px); }
.gold-band > h2 { color: #111; }
.gold-band > h2 span { color: #fff; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.cut-card { min-height: 245px; padding: 42px 26px 28px; text-align: center; background: #fff; clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px); filter: drop-shadow(10px 14px 12px rgba(0,0,0,.22)); }
.cut-card img { width: 74px; height: 74px; object-fit: contain; margin: -29px auto 15px; }
.cut-card h3 { margin-bottom: 12px; font-size: 18px; line-height: 1.25; }
.cut-card p { margin-bottom: 0; font-size: 14px; line-height: 1.42; }
.benefits { padding-top: 62px; padding-bottom: 74px; }
.benefit-grid .cut-card { min-height:0; padding:0; background:transparent; clip-path:none; filter:drop-shadow(10px 14px 12px rgba(0,0,0,.22)); }
.benefit-grid .card-face { min-height:210px; padding:34px 26px 28px; background:#fff; clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px); }
.final-message { max-width:1080px; margin:50px auto 0; padding:0; text-align:center; background:transparent; clip-path:none; box-shadow:none; filter:drop-shadow(12px 16px 12px rgba(0,0,0,.16)); font:400 clamp(27px,5vw,42px)/1.08 Bebas,Impact,sans-serif; text-transform:uppercase; }
.final-message .card-face { padding:34px 28px; background:#fff; clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px); }
@media (max-width: 900px) {
  .section-pad { padding: 38px 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .cut-card { min-height: 0; }
  .benefit-grid { gap: 28px; }
  .benefit-grid .cut-card {
    width: min(100%, 620px);
    min-height:0;
    margin-inline: auto;
    padding:0;
    background:transparent;
    clip-path:none;
    filter:drop-shadow(12px 16px 12px rgba(0,0,0,.26));
    box-shadow:none;
  }
  .benefit-grid .card-face { min-height:185px; padding:48px 28px 38px; clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 30px,100% calc(100% - 30px),calc(100% - 30px) 100%,30px 100%,0 calc(100% - 30px),0 30px); }
  .final-message {
    width: min(100%, 620px);
    margin-top: 42px;
    padding:0;
    background:transparent;
    clip-path:none;
    filter:drop-shadow(12px 16px 12px rgba(0,0,0,.26));
    box-shadow:none;
  }
  .final-message .card-face { padding:34px 28px; clip-path:polygon(30px 0,calc(100% - 30px) 0,100% 30px,100% calc(100% - 30px),calc(100% - 30px) 100%,30px 100%,0 calc(100% - 30px),0 30px); }
}
@media (max-width: 620px) {
  .phase-nav { margin-inline:-13px; padding-inline:28px; }
}

/* One fitted view with explicit zoom controls, matching the Homepage viewer. */
.fixed-info{padding-top:58px;overflow:hidden;touch-action:pan-y}
.fixed-info__canvas{position:absolute;top:58px;left:0;transform-origin:top left;transform:none}