/*
Theme Name: Matt Martin
Theme URI: https://www.mattmartin.it/
Author: Matt Martin
Author URI: https://www.mattmartin.it/
Description: Tema WordPress per il sito personale di Matt Martin, comunicazione a 360 gradi a Treviso e in Veneto. Grafica, siti web, video e social seguiti da un solo professionista.
Version: 4.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mattmartin
*/

  :root{
    --antracite:#252525;
    --nero:#0D0C0D;
    --crema:#F3F1EA;
    --teal:#39AEBA;
    --teal-chiaro:#49BED2;
    --arancio:#F0893E;
    --lime:#ADCA3E;
    --viola:#A06CA6;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  @supports (scrollbar-gutter: stable){html{scrollbar-gutter:stable;}}
  html,body{overflow-x:hidden;max-width:100%;}
  body{
    background:var(--nero);
    color:var(--crema);
    font-family:'Plus Jakarta Sans',sans-serif;
    overflow-x:hidden;
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 48px;
    background:linear-gradient(180deg, rgba(13,12,13,0.85) 0%, rgba(13,12,13,0) 100%);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }
  .nav-mark{
    width:30px;height:30px;
    display:flex;align-items:center;
  }
  .nav-links{
    display:flex;
    gap:28px;
    list-style:none;
  }
  .nav-links a{
    color:var(--crema);
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    letter-spacing:.02em;
    opacity:.75;
    transition:opacity .2s, color .2s;
  }
  .nav-links a:hover{opacity:1;color:var(--teal-chiaro);}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 36px 90px;
    position:relative;
  }

  .mark-wrap{
    width:440px;
    margin-top:34px;
    margin-bottom:-6px;
    opacity:0;
  }
  .mark-wrap.ready{opacity:1;}
  .mark-wrap svg{display:block;width:100%;height:auto;overflow:visible;margin:0 auto;}

  /* Logo: M e stella si riempiono con un tratto che avanza sulla figura piena, poi la scritta appare lettera per lettera */
  .logo-word{
    opacity:0;
    transform:scale(.85);
    transform-origin:center;
    transition:opacity .18s ease-out, transform .18s ease-out;
  }
  .st2.logo-word{fill:var(--arancio);}
  .logo-word.shown{opacity:1;transform:scale(1);}

  .logo-accent{
    opacity:0;
    transform:scale(.85);
    transform-origin:center;
    transition:opacity .18s ease-out, transform .18s ease-out, fill .25s ease;
  }
  #logoDash{fill:var(--arancio);}
  #logoDot{fill:var(--viola);}
  .logo-accent.shown{opacity:1;transform:scale(1);}
  #logoDash.follow-dot{fill:var(--viola);}

  /* Nessun colore inizia a cambiare finche' non sono apparsi tutti gli elementi: fino a quel momento ogni pezzo resta fermo sul proprio colore di partenza */
  .logo-m.cycle{animation:logoCycleFromTeal 30s ease-in-out infinite;}
  .logo-star.cycle{animation:logoCycleFromArancio 30s ease-in-out infinite;}
  .logo-word.cycle{animation:logoCycleFromArancio 30s ease-in-out infinite;}
  .logo-accent.cycle-dot{animation:logoCycleFromViola 30s ease-in-out infinite;}

  @keyframes logoCycleFromTeal{
    0%,100%{fill:#49BED2;}
    33.333%{fill:#F0893E;}
    66.666%{fill:#A06CA6;}
  }
  @keyframes logoCycleFromArancio{
    0%,100%{fill:#F0893E;}
    33.333%{fill:#A06CA6;}
    66.666%{fill:#49BED2;}
  }
  @keyframes logoCycleFromViola{
    0%,100%{fill:#A06CA6;}
    33.333%{fill:#49BED2;}
    66.666%{fill:#F0893E;}
  }
  @keyframes logoCycleFromTealColor{
    0%,100%{color:#49BED2;}
    33.333%{color:#F0893E;}
    66.666%{color:#A06CA6;}
  }
  @keyframes logoCycleFromArancioBg{
    0%,100%{background:#F0893E;}
    33.333%{background:#A06CA6;}
    66.666%{background:#49BED2;}
  }
  .claim-fontswap.cycle{animation:logoCycleFromTealColor 30s ease-in-out infinite;}
  .cta a.cycle{animation:logoCycleFromArancioBg 30s ease-in-out infinite;}

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

  .claim{
    font-size:clamp(34px, 6vw, 58px);
    font-weight:800;
    line-height:1.12;
    max-width:680px;
    letter-spacing:.005em;
    opacity:0;
    transform:translateY(14px);
    animation:fadeUp .7s ease-out forwards;
    animation-delay:3.4s;
  }
  .claim-fontswap, .title-fontswap{
    display:inline-block;
    vertical-align:bottom;
  }
  .claim-fontswap{color:var(--teal-chiaro);}
  .title-fontswap{color:var(--nero);}
  .fs-window{
    display:inline-block;
    overflow:hidden;
    height:1.38em;
    vertical-align:bottom;
  }
  .fs-track{
    display:flex;
    flex-direction:column;
    transform:translateY(0%);
    animation:fsSlide 4s ease-in-out 3.4s infinite;
  }
  .fs-line{
    display:flex;
    align-items:center;
    justify-content:center;
    height:1.38em;
    line-height:1;
    color:inherit;
  }
  .fs-serif{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:1.05em;
    text-transform:none;
  }
  .fs-sans{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:800;
    font-size:1em;
    text-transform:uppercase;
  }
  @keyframes fsSlide{
    0%,42%{transform:translateY(0%);}
    50%,92%{transform:translateY(-50%);}
    100%{transform:translateY(0%);}
  }

  .subtitle{
    margin-top:18px;
    font-size:16px;
    color:#bdbab0;
    font-weight:400;
    max-width:460px;
    opacity:0;
    transform:translateY(10px);
    animation:fadeUp .7s ease-out forwards;
    animation-delay:3.95s;
  }

  .cta{
    margin-top:34px;
    opacity:0;
    transform:translateY(10px);
    animation:fadeUp .7s ease-out forwards;
    animation-delay:4.3s;
  }
  .cta a{
    display:inline-block;
    background:var(--arancio);
    color:var(--nero);
    text-decoration:none;
    font-weight:700;
    font-size:15px;
    padding:15px 34px;
    border-radius:40px;
    transition:transform .2s, box-shadow .2s;
  }
  .cta a:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(240,137,62,0.32);
  }

  .scroll-cue{
    position:absolute;
    bottom:58px;
    left:50%;
    transform:translateX(-50%);
    opacity:0;
    animation:scrollCueIn .6s ease-out forwards, bounce 2.2s ease-in-out 3.4s infinite;
    animation-delay:4.55s, 4.95s;
    color:#8a8880;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  @keyframes scrollCueIn{
    from{opacity:0;transform:translate(-50%,26px);}
    to{opacity:1;transform:translate(-50%,0);}
  }
  @keyframes bounce{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,6px);}
  }

  /* ---------- CLIENTS MARQUEE ---------- */
  .clients{
    width:100%;
    max-width:640px;
    margin-top:30px;
    opacity:0;
    transform:translateY(10px);
    animation:fadeUp .7s ease-out forwards;
    animation-delay:4.1s;
  }
  .clients-label{
    text-align:center;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#6f6d66;
    margin-bottom:18px;
  }
  .marquee{
    overflow:hidden;
    width:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .marquee-track{
    display:flex;
    align-items:center;
    gap:54px;
    width:max-content;
    animation:scrollX 22s linear infinite;
  }
  @keyframes scrollX{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .logo-chip{
    flex:0 0 auto;
    color:#8a8880;
    opacity:.6;
    transition:opacity .3s, color .3s;
  }
  .logo-chip:hover{opacity:1;color:var(--teal-chiaro);}
  .logo-chip img{display:block;height:28px;width:auto;}

  /* ---------- placeholder note ---------- */
  .note{
    text-align:center;
    font-size:12.5px;
    color:#6f6d66;
    padding:30px 24px 60px;
    border-top:1px solid rgba(255,255,255,0.07);
  }

  /* ---------- COOKIE BANNER ---------- */
  .cookie{
    position:fixed;
    bottom:18px;
    left:18px;
    right:18px;
    max-width:560px;
    margin:0 auto;
    background:var(--antracite);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:13px 16px;
    display:flex;
    align-items:center;
    gap:14px;
    z-index:100;
    box-shadow:0 12px 30px rgba(0,0,0,0.4);
    transition:opacity .3s, transform .3s;
  }
  .cookie p{
    font-size:13px;
    color:#cfcdc4;
    flex:1;
    line-height:1.5;
  }
  .cookie p a{
    color:var(--teal-chiaro);
    text-decoration:underline;
  }
  .cookie-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    flex:0 0 auto;
  }
  .cookie button{
    background:var(--teal);
    color:var(--nero);
    border:none;
    border-radius:30px;
    padding:9px 18px;
    font-size:13px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    white-space:nowrap;
  }
  .cookie button.cookie-secondary{
    background:none;
    border:1px solid rgba(255,255,255,0.28);
    color:var(--crema);
  }
  .cookie.hidden{
    opacity:0;
    transform:translateY(20px);
    pointer-events:none;
  }

  @media(max-width:560px){
    .nav{padding:14px 18px;}
    .nav-mark{width:26px;height:26px;}
    .nav-links{gap:11px;}
    .nav-links a{font-size:10.5px;letter-spacing:0;}
    .cookie{flex-direction:column;align-items:flex-start;left:14px;right:14px;}
    .cookie-actions{width:100%;}
    .cookie-actions button{flex:1;}
  }

  /* ---------- SCROLL REVEAL (riusato in tutte le sezioni) ---------- */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s ease-out, transform .8s ease-out;
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }
  .reveal.rv-words, .reveal.rv-lines{opacity:1;transform:none;transition:none;}
  .rv-word{display:inline-block;opacity:0;transform:translateY(16px);transition:opacity .5s ease-out, transform .5s ease-out;}
  .rv-word.in{opacity:1;transform:translateY(0);}
  .rv-line-mask{display:block;overflow:hidden;}
  .rv-line-inner{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.3,.1,.2,1);}
  .rv-line-inner.in{clip-path:inset(0 0% 0 0);}

  /* ---------- CERCHIO DISEGNATO A MANO (riusabile su qualsiasi titolo) ---------- */
  .title-circle-wrap{
    position:relative;
    display:inline-block;
    white-space:nowrap;
  }
  .title-circle-svg{
    position:absolute;
    top:-0.32em;
    left:-0.8em;
    right:-0.8em;
    bottom:-0.28em;
    width:calc(100% + 1.6em);
    height:calc(100% + 0.6em);
    overflow:visible;
    pointer-events:none;
    transform:rotate(-2.5deg);
  }
  .title-circle-path{
    fill:none;
    stroke:var(--teal-chiaro);
    stroke-width:4;
    stroke-linecap:round;
    stroke-dasharray:1450;
    stroke-dashoffset:1450;
    transition:stroke-dashoffset 1.3s cubic-bezier(.3,.1,.2,1) .5s;
  }
  .reveal.in-view .title-circle-path{
    stroke-dashoffset:0;
  }
  .circle-arancio .title-circle-path{stroke:var(--arancio);}
  .circle-lime .title-circle-path{stroke:var(--lime);}
  .circle-viola .title-circle-path{stroke:var(--viola);}

  /* ---------- WAVE DIVIDER (confine animato tra sezioni) ---------- */
  .wave-divider{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:64px;
    transform:translateY(-99%);
    overflow:hidden;
    line-height:0;
    pointer-events:none;
    z-index:2;
  }
  .wave-divider svg{
    width:200%;
    height:100%;
    display:block;
    animation:waveScroll 18s linear infinite;
  }
  @keyframes waveScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .wave-fill-viola{fill:var(--viola);}

  /* ---------- SEZIONE: CHI SONO ---------- */
  .section{
    padding:120px 56px;
    position:relative;
  }
  .chi-sono{
    background:var(--viola);
    color:var(--nero);
  }
  .cs-inner{
    max-width:960px;
    margin:0 auto;
  }
  .section-title{
    font-size:clamp(40px, 7vw, 64px);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.005em;
    color:var(--nero);
    margin-bottom:56px;
  }
  .cs-grid{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:56px;
    align-items:start;
  }
  .cs-photo{
    width:220px;
    height:220px;
    border-radius:50%;
    overflow:hidden;
    flex:0 0 auto;
  }
  .cs-photo svg{display:block;width:100%;height:100%;}
  .cs-photo img{display:block;width:100%;height:100%;object-fit:cover;}
  .cs-text p{
    font-size:17px;
    font-weight:600;
    line-height:1.65;
    margin-bottom:20px;
    color:var(--nero);
  }
  .cs-text .cs-zone{
    font-size:14px;
    font-weight:600;
    color:rgba(13,12,13,0.62);
    margin-top:8px;
  }
  .key{
    font-weight:800;
  }

  /* ---------- SEZIONE: SERVIZI ---------- */
  .wave-fill-arancio{fill:var(--arancio);}
  .servizi{
    background:var(--arancio);
    color:var(--nero);
  }
  .sv-inner{
    max-width:960px;
    margin:0 auto;
  }
  .sv-intro{
    font-size:17px;
    font-weight:600;
    max-width:520px;
    margin:-30px 0 50px;
    color:rgba(13,12,13,0.72);
  }
  .sv-list{
    border-top:1px solid rgba(13,12,13,0.18);
  }
  .sv-row{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:32px;
    align-items:start;
    padding:38px 0;
    border-bottom:1px solid rgba(13,12,13,0.18);
    transition:padding-left .35s ease, background .35s ease;
  }
  .sv-row:hover{
    padding-left:18px;
    background:rgba(13,12,13,0.05);
  }
  .sv-num{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:600;
    font-size:clamp(40px, 7vw, 64px);
    line-height:1;
    color:var(--nero);
    transition:color .35s ease, transform .35s ease;
  }
  .sv-row:hover .sv-num{
    color:var(--viola);
    transform:translateX(4px);
  }
  .sv-row h3{
    font-size:clamp(22px, 3vw, 30px);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.01em;
    color:var(--nero);
    margin:0 0 10px;
  }
  .sv-row p{
    font-size:15.5px;
    font-weight:600;
    line-height:1.62;
    max-width:560px;
    color:rgba(13,12,13,0.78);
    margin:0;
  }
  .sv-row:nth-child(1){transition-delay:0s;}
  .sv-row:nth-child(2){transition-delay:.06s;}
  .sv-row:nth-child(3){transition-delay:.12s;}
  .sv-row:nth-child(4){transition-delay:.18s;}

  /* ---------- PROCESSO PRODUTTIVO ---------- */
  .sv-process{
    margin-top:90px;
  }
  .sv-process-lead{
    text-align:center;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:rgba(13,12,13,0.55);
    margin-bottom:38px;
  }
  .sv-steps{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:start;
    gap:10px;
  }
  .sv-step{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .sv-step-icon{
    width:30px;
    height:30px;
    margin-bottom:4px;
  }
  .sv-step-icon svg{width:100%;height:100%;}
  .sv-step h4{
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.01em;
    color:var(--nero);
    margin:0;
  }
  .sv-step p{
    font-size:13.5px;
    font-weight:600;
    line-height:1.55;
    color:rgba(13,12,13,0.72);
    margin:0;
  }
  .sv-step-arrow{
    align-self:center;
    margin-top:34px;
    font-size:20px;
    color:var(--lime);
  }
  .sv-process-close{
    margin:50px 0 0;
    text-align:center;
    font-size:clamp(22px, 3vw, 30px);
    font-weight:800;
    color:var(--nero);
  }

  /* ---------- SEZIONE: PORTFOLIO ---------- */
  .wave-fill-nero{fill:var(--nero);}
  .wave-fill-antracite{fill:var(--antracite);}
  .portfolio{
    background:var(--nero);
    color:var(--crema);
  }
  .portfolio .section-title{
    color:var(--crema);
    text-align:center;
  }
  .pf-inner{
    max-width:900px;
    margin:0 auto;
    text-align:center;
  }
  .pf-intro{
    font-size:16px;
    color:#bdbab0;
    max-width:480px;
    margin:-20px auto 44px;
  }
  .pf-slideshow{
    background:var(--antracite);
    border-radius:16px;
    padding:18px 18px 16px;
    box-shadow:0 24px 60px rgba(0,0,0,0.45);
  }
  .pf-slide-viewport{
    position:relative;
    width:100%;
    aspect-ratio:822/585;
    background:#000;
    border-radius:8px;
    overflow:hidden;
  }
  .pf-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform .4s cubic-bezier(.3,.1,.2,1);
  }
  .pf-slide{
    flex:0 0 100%;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .pf-slide img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .pf-fullscreen-btn{
    position:absolute;
    bottom:12px;
    right:12px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(13,12,13,0.55);
    border:1px solid rgba(255,255,255,0.25);
    color:var(--crema);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:3;
    transition:background .2s, border-color .2s;
  }
  .pf-fullscreen-btn:hover{
    background:rgba(13,12,13,0.8);
    border-color:var(--teal-chiaro);
  }
  .pf-fullscreen-btn svg{width:16px;height:16px;}
  .pf-controls{
    position:absolute;
    bottom:12px;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    z-index:3;
    pointer-events:none;
  }
  .pf-controls button{
    pointer-events:auto;
    background:rgba(13,12,13,0.55);
    border:1px solid rgba(255,255,255,0.25);
    color:var(--crema);
    width:38px;
    height:38px;
    border-radius:50%;
    font-size:16px;
    font-family:inherit;
    cursor:pointer;
    transition:background .2s, border-color .2s, color .2s;
  }
  .pf-controls button:hover{
    background:rgba(13,12,13,0.85);
    border-color:var(--teal-chiaro);
    color:var(--teal-chiaro);
  }
  .pf-counter{
    font-size:13px;
    font-weight:600;
    color:var(--crema);
    min-width:64px;
    text-align:center;
    background:rgba(13,12,13,0.55);
    border-radius:20px;
    padding:8px 4px;
  }
  .pf-exit-btn{
    display:none;
    position:absolute;
    top:12px;
    left:12px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(13,12,13,0.55);
    border:1px solid rgba(255,255,255,0.25);
    color:var(--crema);
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:4;
    transition:background .2s, border-color .2s;
  }
  .pf-exit-btn:hover{
    background:rgba(13,12,13,0.8);
    border-color:var(--teal-chiaro);
  }
  .pf-exit-btn svg{width:16px;height:16px;}
  #pfViewport:fullscreen{
    background:#000;
  }
  #pfViewport:fullscreen .pf-exit-btn{display:flex;}
  #pfViewport:fullscreen .pf-fullscreen-btn{display:none;}
  #pfViewport:-webkit-full-screen .pf-exit-btn{display:flex;}
  #pfViewport:-webkit-full-screen .pf-fullscreen-btn{display:none;}
  .pf-link{
    display:inline-block;
    margin-top:26px;
    font-size:14px;
    font-weight:600;
    color:var(--teal-chiaro);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .25s;
  }
  .pf-link:hover{border-bottom-color:var(--teal-chiaro);}

  /* ---------- SEZIONE: CONTATTI ---------- */
  .contatti{
    background:var(--nero);
    color:var(--crema);
  }
  .contatti-close{
    padding-top:40px;
  }
  .contatti .section-title{
    color:var(--crema);
    text-align:center;
  }
  .ct-inner{
    max-width:600px;
    margin:0 auto;
    text-align:center;
  }
  .ct-intro{
    font-size:16px;
    color:#bdbab0;
    max-width:420px;
    margin:-20px auto 50px;
  }
  .ct-form{
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .ct-row{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .ct-row label{
    font-size:12.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#8a8880;
  }
  .ct-row input,
  .ct-row textarea{
    background:var(--antracite);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    padding:13px 16px;
    color:var(--crema);
    font-family:inherit;
    font-size:15px;
    transition:border-color .25s;
  }
  .ct-row textarea{resize:vertical;min-height:120px;}
  .ct-row input:focus,
  .ct-row textarea:focus{
    outline:none;
    border-color:var(--teal-chiaro);
    box-shadow:0 0 0 3px rgba(73,190,210,0.25);
  }
  .ct-privacy-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:4px;
  }
  .ct-privacy-row input[type="checkbox"]{
    width:18px;
    height:18px;
    margin-top:2px;
    flex:0 0 auto;
    accent-color:var(--teal-chiaro);
    cursor:pointer;
  }
  .ct-privacy-row label{
    font-size:13.5px;
    color:#bdbab0;
    line-height:1.5;
    font-weight:400;
    text-transform:none;
  }
  .ct-privacy-row label a{
    color:var(--teal-chiaro);
    text-decoration:underline;
  }
  .ct-submit{
    margin-top:8px;
    align-self:center;
    background:var(--arancio);
    color:var(--nero);
    border:none;
    font-weight:700;
    font-size:15px;
    padding:15px 38px;
    border-radius:40px;
    cursor:pointer;
    transition:transform .2s, box-shadow .2s;
  }
  .ct-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(240,137,62,0.32);
  }
  .ct-success{
    display:none;
    text-align:center;
    font-size:16px;
    font-weight:600;
    color:var(--lime);
    padding:30px 0;
  }
  .ct-success.show{display:block;}
  .ct-form.hide{display:none;}
  .ct-wizard.hide{display:none;}

  .ct-wizard{
    text-align:left;
    background:var(--antracite);
    border-radius:14px;
    padding:22px 22px 24px;
    margin-bottom:30px;
  }
  .ct-wizard-label{
    font-size:12.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#8a8880;
    margin:0 0 14px;
  }
  .ct-wizard-label .hint{color:#5e5c56;font-weight:400;text-transform:none;letter-spacing:0;}
  .ct-wizard-breadcrumb{
    font-size:13px;
    color:var(--teal-chiaro);
    margin:0 0 14px;
    display:none;
    align-items:center;
    gap:10px;
  }
  .ct-wizard-breadcrumb.show{display:flex;}
  .ct-wizard-back{
    background:none;
    border:none;
    color:#8a8880;
    font-family:inherit;
    font-size:12.5px;
    text-decoration:underline;
    cursor:pointer;
    padding:0;
  }
  .ct-wizard-back:hover{color:var(--teal-chiaro);}
  .ct-wizard-step{display:none;flex-wrap:wrap;gap:10px;}
  .ct-wizard-step.active{display:flex;}
  .ct-wizard-btn{
    background:none;
    border:1px solid rgba(255,255,255,0.18);
    color:var(--crema);
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    padding:11px 18px;
    border-radius:30px;
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .ct-wizard-btn:hover{
    border-color:var(--teal-chiaro);
    color:var(--teal-chiaro);
  }
  .ct-wizard-done{display:none;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--lime);font-weight:600;}
  .ct-wizard-done.show{display:flex;}
  .ct-wizard-done button{
    background:none;border:none;color:#8a8880;font-family:inherit;font-size:12.5px;
    font-weight:400;text-decoration:underline;cursor:pointer;padding:0;
  }
  .ct-wizard-done button:hover{color:var(--teal-chiaro);}
  .ct-direct{
    margin-top:46px;
    font-size:14px;
    color:#8a8880;
  }
  .ct-direct a{
    color:var(--teal-chiaro);
    text-decoration:none;
    font-weight:600;
    border-bottom:1px solid transparent;
    transition:border-color .25s;
  }
  .ct-direct a:hover{border-bottom-color:var(--teal-chiaro);}
  .site-footer{
    text-align:center;
    padding:34px 24px 44px;
    font-size:12.5px;
    color:#5e5c56;
    background:var(--nero);
  }
  .site-footer p{margin:0 0 6px;}
  .site-footer .footer-credit{color:#454339;}
  .site-footer a{color:#5e5c56;text-decoration:underline;}
  .site-footer a:hover{color:var(--teal-chiaro);}

  @media(max-width:720px){
    .hero{padding-bottom:150px;}
    .mark-wrap{width:240px;}
    .scroll-cue{bottom:95px;}
    .section{padding:90px 30px;}
    .cs-inner{display:flex;flex-direction:column;}
    .cs-grid{display:flex;flex-direction:column;align-items:center;gap:24px;}
    .cs-photo{width:190px;height:190px;margin:0 auto 0;order:-1;}
    .section-title{order:0;text-align:center;}
    .cs-text{order:1;}
    .cs-text p{font-size:15.5px;text-align:center;}
    .section-title{text-align:center;}
    .sv-intro{margin:-20px auto 40px;text-align:center;}
    .sv-row{grid-template-columns:1fr;gap:10px;padding:28px 0;}
    .sv-row:hover{padding-left:0;}
    .sv-steps{grid-template-columns:1fr;gap:26px;}
    .sv-step-arrow{display:none;}
    .pf-slideshow{padding:10px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
    .marquee-track{animation:none !important;}
    .wave-fill,[class*="wave-fill"]{animation:none !important;}
  }
  /* ================================================================
     PAGINE SERVIZI (Brand & Grafica, Web Design, Foto & Video, Social Media)
     Template dedicati: usano nav, section, section-title, wave-divider,
     title-circle-wrap e .cta gia' definiti sopra, piu' queste classi
     specifiche per hero, galleria portfolio e CTA finale.
     ================================================================ */

  .circle-teal .title-circle-path{stroke:var(--teal-chiaro);}

  .svc-back{
    position:relative;
    z-index:10;
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:118px 0 44px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.01em;
    text-decoration:none;
    color:inherit;
    opacity:.7;
    transition:opacity .2s, transform .2s;
  }
  .svc-back:hover{opacity:1;transform:translateX(-3px);}

  .svc-hero{
    padding:0 56px 100px;
    position:relative;
  }
  .svc-hero.bg-arancio{background:var(--arancio);color:var(--nero);}
  .svc-hero.bg-viola{background:var(--viola);color:var(--nero);}
  .svc-hero.bg-nero{background:var(--nero);color:var(--crema);}
  .svc-hero.bg-teal{background:var(--teal-chiaro);color:var(--nero);}
  .svc-hero.bg-lime{background:var(--lime);color:var(--nero);}
  .svc-hero-inner{max-width:820px;margin:0 auto;}
  .svc-eyebrow{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.14em;
    opacity:.62;
    margin:0 0 18px;
  }
  .svc-title{
    font-size:clamp(38px,6vw,60px);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.005em;
    line-height:1.04;
    margin:0 0 30px;
  }
  .svc-lead{
    font-size:18px;
    font-weight:600;
    line-height:1.68;
    max-width:640px;
  }
  .svc-lead p{margin:0 0 18px;}
  .svc-lead p:last-child{margin-bottom:0;}

  .svc-gallery-section{
    background:var(--nero);
    color:var(--crema);
    padding:110px 56px;
    position:relative;
  }
  .svc-gallery-inner{max-width:1100px;margin:0 auto;}
  .svc-gallery-lead{
    font-size:18px;
    font-weight:600;
    color:rgba(243,241,234,0.82);
    max-width:560px;
    margin:0;
  }
  .svc-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:0;
  }
  .svc-gallery-grid a{
    display:block;
    border-radius:6px;
    overflow:hidden;
  }
  .svc-gallery-grid img{
    width:100%;
    aspect-ratio:822/585;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
  }
  .svc-gallery-grid a:hover img{transform:scale(1.045);}

  .svc-cta-section{
    background:var(--antracite);
    color:var(--crema);
    padding:110px 56px;
    text-align:center;
  }
  .svc-cta-inner{max-width:620px;margin:0 auto;}
  .svc-cta-section h2{
    font-size:clamp(28px,4.4vw,42px);
    font-weight:800;
    text-transform:uppercase;
    margin:0 0 16px;
  }
  .svc-cta-section p{
    font-size:16px;
    font-weight:600;
    color:rgba(243,241,234,0.72);
    margin:0 0 34px;
  }

  /* Link "scopri di piu'" dentro le righe dei 4 servizi in home */
  .sv-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:14px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    color:var(--nero);
    opacity:.72;
    transition:opacity .2s, gap .2s;
  }
  .sv-link:hover{opacity:1;gap:10px;}

  @media(max-width:780px){
    .svc-back{margin-top:98px;}
    .svc-hero{padding:0 24px 76px;}
    .svc-gallery-section, .svc-cta-section{padding:76px 24px;}
    .svc-gallery-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  }
  @media(max-width:480px){
    .svc-gallery-grid{grid-template-columns:1fr;}
  }

  /* ---------- SITI WEB LIVE INCORPORATI (pagina Web Design) ---------- */
  .svc-liveweb-section{
    background:var(--antracite);
    color:var(--crema);
    padding:100px 56px;
    position:relative;
  }
  .svc-liveweb-inner{max-width:1240px;margin:0 auto;}
  .svc-liveweb-lead{
    font-size:18px;
    font-weight:600;
    color:rgba(243,241,234,0.82);
    max-width:560px;
    margin:0 0 44px;
  }
  .site-embed-grid{
    display:flex;
    flex-direction:column;
    gap:52px;
  }
  .site-embed{
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 24px 60px rgba(0,0,0,0.4);
  }
  .site-embed-bar{
    display:flex;
    align-items:center;
    gap:7px;
    padding:11px 14px;
    background:var(--nero);
  }
  .site-embed-bar .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .site-embed-bar .dot-red{background:#ff5f57;}
  .site-embed-bar .dot-yellow{background:#febc2e;}
  .site-embed-bar .dot-green{background:#28c840;}
  .site-embed-bar-url{
    margin-left:10px;
    flex:1;
    text-align:center;
    font-size:12px;
    font-weight:600;
    color:rgba(243,241,234,0.75);
    background:rgba(255,255,255,0.08);
    padding:5px 14px;
    border-radius:20px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .site-embed iframe{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    border:0;
    display:block;
    background:#f3f1ea;
  }
  .site-embed-caption{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
  }
  .site-embed-caption h3{
    font-size:17px;
    font-weight:800;
    margin:0;
  }
  .site-embed-caption a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    color:var(--teal-chiaro);
    opacity:.85;
    transition:opacity .2s;
  }
  .site-embed-caption a:hover{opacity:1;}
  @media(max-width:780px){
    .svc-liveweb-section{padding:76px 24px;}
    .site-embed-grid{gap:40px;}
    .site-embed iframe{aspect-ratio:4/5;}
  }

  /* ---------- LIGHTBOX (click per ingrandire) ---------- */
  .lightbox-overlay{
    position:fixed;
    inset:0;
    background:rgba(13,12,13,0.94);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    z-index:300;
    padding:50px;
    transition:opacity .25s ease, visibility .25s;
  }
  .lightbox-overlay.open{opacity:1;visibility:visible;}
  .lightbox-stage{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .lightbox-overlay img{
    position:absolute;
    top:50%;
    left:50%;
    max-width:90vw;
    max-height:86vh;
    border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,0.5);
    cursor:zoom-in;
    user-select:none;
    -webkit-user-drag:none;
  }
  .lightbox-close{
    position:absolute;
    top:22px;
    right:30px;
    background:none;
    border:0;
    color:#fff;
    font-size:38px;
    line-height:1;
    cursor:pointer;
    opacity:.75;
    transition:opacity .2s;
  }
  .lightbox-close:hover{opacity:1;}
  .lightbox-hint{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(243,241,234,0.6);
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
  }
  .svc-gallery-grid a, .gallery-cascade a{cursor:zoom-in;}

  /* ---------- GALLERIA MASONRY (Brand & Grafica: nessun ritaglio, come v2.6) ---------- */
  .gallery-masonry{
    columns:3 260px;
    column-gap:22px;
  }
  .gallery-masonry a{
    display:block;
    break-inside:avoid;
    margin-bottom:22px;
    border-radius:6px;
    overflow:hidden;
  }
  .gallery-masonry img{
    width:100%;
    display:block;
    transition:transform .4s ease;
  }
  .gallery-masonry a:hover img{transform:scale(1.03);}
  @media(max-width:780px){
    .gallery-masonry{
      display:flex;
      flex-direction:column;
      columns:auto;
    }
    .gallery-masonry a{margin-bottom:14px;}
    .gallery-masonry .cat-frullo{order:1;}
    .gallery-masonry .cat-ufo{order:2;}
  }

  /* ---------- GRIGLIA IMMAGINI (allineata, con ritaglio uniforme 4:5) ---------- */
  .gallery-cascade{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .gallery-cascade a{
    display:block;
    border-radius:6px;
    overflow:hidden;
  }
  .gallery-cascade img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
  }
  .gallery-cascade a:hover img{transform:scale(1.04);}
  .gallery-cascade.videos-row{grid-template-columns:repeat(4,1fr);}
  @media(max-width:780px){
    .gallery-cascade.videos-row{grid-template-columns:repeat(2,1fr);}
  }
  .gallery-cascade .span-2{
    grid-column:span 2;
  }
  .gallery-cascade .span-2 img{
    aspect-ratio:3/2;
  }
  @media(max-width:780px){
    .gallery-cascade .span-2{grid-column:span 2;}
  }
  @media(max-width:480px){
    .gallery-cascade .span-2{grid-column:span 1;}
  }
  .gallery-cascade .video-cell{
    position:relative;
    width:100%;
    aspect-ratio:9/16;
    border-radius:6px;
    overflow:hidden;
    background:#000;
  }
  .gallery-cascade .video-cell iframe{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    border:0;
  }
  @media(max-width:780px){
    .gallery-cascade{grid-template-columns:repeat(2,1fr);gap:14px;}
    .gallery-cascade:not(.videos-row) .cat-frullo{order:1;}
    .gallery-cascade:not(.videos-row) .cat-ufo{order:2;}
    .gallery-cascade:not(.videos-row) .cat-altro{order:3;}
  }
  @media(max-width:480px){
    .gallery-cascade{grid-template-columns:1fr;}
  }

  /* (sezione video dedicata rimossa: i video ora sono nella griglia foto) */

  /* ---------- POST INSTAGRAM (pagina Social Media) ---------- */
  .svc-instagram-section{
    background:var(--nero);
    color:var(--crema);
    padding:100px 56px;
    position:relative;
  }
  .svc-instagram-inner{max-width:1100px;margin:0 auto;}
  .instagram-embed-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
    margin:44px auto 0;
    max-width:760px;
  }
  .instagram-embed-grid > div{
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    display:flex;
    justify-content:center;
  }
  @media(max-width:560px){
    .instagram-embed-grid{grid-template-columns:1fr;}
  }

  /* ---------- DROPDOWN "SERVIZI" NELLA NAV ---------- */
  .nav-item-dropdown{position:relative;}
  .nav-caret{
    display:inline-block;
    font-size:9px;
    margin-left:3px;
    transform:translateY(-1px);
    transition:transform .2s ease;
  }
  .nav-item-dropdown:hover .nav-caret,
  .nav-item-dropdown:focus-within .nav-caret{transform:translateY(-1px) rotate(180deg);}

  /* la "hitzone" e' l'area invisibile che collega il link al menu:
     include il gap visivo nel proprio padding-top (non nel margin),
     cosi' il cursore resta sempre dentro un elemento cliccabile
     mentre scende dal link al menu, senza mai "uscire" e perdere l'hover */
  .nav-dropdown-hitzone{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    padding-top:14px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s;
    z-index:60;
  }
  .nav-item-dropdown:hover .nav-dropdown-hitzone,
  .nav-item-dropdown:focus-within .nav-dropdown-hitzone,
  .nav-item-dropdown.open-mobile .nav-dropdown-hitzone{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-dropdown{
    background:var(--antracite);
    border-radius:10px;
    padding:8px;
    min-width:186px;
    list-style:none;
    box-shadow:0 16px 34px rgba(0,0,0,0.4);
  }
  .nav-dropdown li{margin:0;}
  .nav-dropdown a{
    display:block;
    padding:9px 14px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0;
    opacity:1;
    border-radius:6px;
    white-space:nowrap;
  }
  .nav-dropdown a:hover{background:rgba(255,255,255,0.08);color:var(--teal-chiaro);}
  @media(max-width:560px){
    .nav-dropdown{min-width:160px;}
    .nav-dropdown a{font-size:12px;padding:8px 12px;}
  }