/* ==========================================================================
   B2B EFFECT AGENCY — v4 «lavori veri, tecnica calma»
   Stesso blu della home ufficiale (hsl 218 50% 10%), arancio→oro, Jost + DM Sans.
   Il trattamento Agency è tecnico e misurato:
     · i materiali dei clienti al centro, ognuno con il suo contesto
     · pochi gesti, sempre gli stessi: il mirino che mette a fuoco, il titolo
       che emerge, i media che si aprono, il percorso a schede
     · griglia sottile e fasci di luce solo nelle aperture
   Regola di fluidità: si anima solo opacity, transform, clip-path, una volta.
   ========================================================================== */
#bfx-agency{
  --bgh:218 50% 10%;
  --bg:hsl(var(--bgh));
  --bg-deep:hsl(218 54% 7.5%);
  --card:hsl(218 44% 12.5%);
  --card-2:hsl(218 40% 15.5%);
  --fg:hsl(40 30% 96%);
  --soft:hsl(218 16% 78%);
  --muted:hsl(218 13% 61%);
  --line:hsl(215 45% 82% / .1);
  --line-2:hsl(215 45% 82% / .18);
  --gl:hsl(215 60% 82% / .065);
  --p:hsl(22 95% 55%);
  --a:hsl(38 92% 60%);
  --grad:linear-gradient(135deg,hsl(22 95% 55%),hsl(38 92% 60%));
  --grad-x:linear-gradient(90deg,hsl(22 95% 55%),hsl(38 92% 60%));
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-brand:cubic-bezier(.45,.02,.12,1);
  --snap:cubic-bezier(.3,1.45,.5,1);
  --r:16px;
  --cell:72px;
  --max:1200px;
  --pad:clamp(20px,4vw,40px);
  position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);overflow-x:clip;
  background:var(--bg);color:var(--fg);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-size:16px;font-weight:400;line-height:1.6;text-align:left;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#bfx-agency *,#bfx-agency *::before,#bfx-agency *::after{box-sizing:border-box}
/* fondale fisso: tre aloni e una vignetta che restano fermi mentre la pagina scorre */
#bfx-agency::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60% 50% at 0% 0%,hsl(218 70% 30% / .30),transparent 70%),
  radial-gradient(50% 45% at 100% 30%,hsl(218 70% 34% / .18),transparent 70%),
  radial-gradient(60% 50% at 50% 110%,hsl(22 95% 55% / .06),transparent 70%),
  radial-gradient(62% 58% at 50% 50%,transparent 45%,hsl(218 60% 5% / .38) 100%)}
#bfx-agency :where(h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,figcaption,blockquote,fieldset,legend,q){margin:0;padding:0;border:0}
#bfx-agency :where(ul,ol){list-style:none}
#bfx-agency :where(img,video,svg){display:block;max-width:100%}
#bfx-agency a,#bfx-agency a:hover,#bfx-agency a:focus,#bfx-agency a:visited{color:inherit;text-decoration:none}
#bfx-agency button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
#bfx-agency :where(h1,h2,h3,h4){font-family:'Jost',system-ui,sans-serif;font-weight:400;color:var(--fg);letter-spacing:-.025em;line-height:1.1;text-transform:none}
#bfx-agency q{quotes:"«" "»"}
#bfx-agency ::selection{background:hsl(22 95% 55% / .85);color:#fff}
#bfx-agency :focus-visible{outline:2px solid hsl(32 100% 62%);outline-offset:4px;border-radius:6px}
#bfx-agency p{text-wrap:pretty}

/* ---------- Ossatura ---------- */
#bfx-agency .ax-wrap{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
#bfx-agency .ax-sec{position:relative;padding:clamp(96px,13vh,150px) 0}
/* il filo tra le sezioni: una riga sottile che si accende dal centro quando arriva */
#bfx-agency .ax-sec::before{content:"";position:absolute;top:0;left:50%;width:min(var(--max),100%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
#bfx-agency .ax-head{display:grid;justify-items:center;gap:1.2rem;max-width:48rem;margin:0 auto clamp(3rem,7vh,4.4rem);text-align:center}
#bfx-agency .ax-h2{font-size:clamp(2.1rem,3.8vw,3.4rem);line-height:1.06;letter-spacing:-.038em;text-wrap:balance}
#bfx-agency .ax-lead{max-width:38rem;font-size:clamp(1.02rem,1.15vw,1.12rem);font-weight:300;line-height:1.7;color:var(--soft);text-wrap:balance}
#bfx-agency .ax-grad{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#bfx-agency .ax-note{font-size:.86rem;line-height:1.5;color:var(--muted)}
#bfx-agency .ax-cap{font-size:.86rem;line-height:1.5;color:var(--muted)}
#bfx-agency .ax-center{text-align:center}

/* ==========================================================================
   I GESTI — pochi, sempre gli stessi, una volta sola
   ========================================================================== */
/* 1. entrata dei blocchi di testo */
#bfx-agency.ax-live .ax-r{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ease) calc(var(--i,0) * 90ms),transform 1.1s var(--ease) calc(var(--i,0) * 90ms)}
#bfx-agency.ax-live .ax-r.is-in{opacity:1;transform:none}
/* 2. i titoli emergono parola per parola (le parole le prepara il JS) */
#bfx-agency .ax-w{display:inline-block}
#bfx-agency.ax-live .ax-t .ax-w{opacity:0}
#bfx-agency.ax-live .ax-t.is-in .ax-w{animation:ax-rise .7s var(--ease) both;animation-delay:calc(var(--w,0) * 60ms)}
#bfx-agency.ax-live .ax-h1.ax-t.is-in .ax-w{animation:ax-focus .62s var(--ease) both;animation-delay:calc(120ms + var(--w,0) * 52ms)}
@keyframes ax-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes ax-focus{0%{opacity:0;filter:blur(20px);transform:translate3d(0,-40px,0)}50%{opacity:.5;filter:blur(10px);transform:translate3d(0,7px,0)}100%{opacity:1;filter:none;transform:none}}
#bfx-agency .ax-grad .ax-w{background:var(--grad);background-size:var(--gw,100%) 100%;background-position:var(--gx,0) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* nelle aperture sottotitolo e bottoni aspettano che il titolo abbia finito */
#bfx-agency.ax-live .ax-hero .ax-r{transition-delay:calc(var(--i,0) * 110ms)}
/* 3. i media si aprono dal centro e si posano */
#bfx-agency.ax-live .ax-m{opacity:0;clip-path:inset(7% 7% 7% 7% round 18px);transform:translate3d(0,26px,0) scale(.985);transition:opacity .8s ease calc(var(--i,0) * 110ms),clip-path 1.25s var(--ease) calc(var(--i,0) * 110ms),transform 1.25s var(--ease) calc(var(--i,0) * 110ms)}
#bfx-agency.ax-live .ax-m.is-in{opacity:1;clip-path:inset(0 0 0 0 round 0);transform:none}
/* 4. il mirino: quattro angoli che mettono a fuoco (lo stesso della home) */
#bfx-agency .ax-vf{position:relative}
#bfx-agency .ax-vf::after{
  content:"";position:absolute;z-index:6;inset:-12px;pointer-events:none;
  --vc:hsl(30 100% 62%);--vl:20px;--vt:1.5px;
  background:
    linear-gradient(var(--vc),var(--vc)) 0 0/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 0 0/var(--vt) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 100% 0/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 100% 0/var(--vt) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 0 100%/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 0 100%/var(--vt) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 100% 100%/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 100% 100%/var(--vt) var(--vl);
  background-repeat:no-repeat;filter:drop-shadow(0 0 6px hsl(28 100% 55% / .5));opacity:.9
}
#bfx-agency.ax-live .ax-vf::after{opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform .8s var(--snap)}
#bfx-agency.ax-live .ax-vf.is-focus::after{opacity:.9;transform:none}

/* ---------- Bottoni (come da brand) ---------- */
#bfx-agency .ax-btn{position:relative;display:inline-flex;align-items:center;gap:.7rem;padding:1.02rem 1.7rem;border-radius:999px;background:var(--grad-x);color:#fff;font:600 12.5px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;isolation:isolate;box-shadow:0 10px 36px -12px hsl(22 95% 55% / .75),inset 0 1px 0 hsl(0 0% 100% / .25);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
#bfx-agency a.ax-btn,#bfx-agency a.ax-btn:hover,#bfx-agency a.ax-btn:visited{color:#fff}
#bfx-agency .ax-btn::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,hsl(0 0% 100% / .4),transparent);transform:skewX(-20deg);transition:transform .9s var(--ease)}
#bfx-agency .ax-btn:hover::before{transform:skewX(-20deg) translateX(420%)}
#bfx-agency .ax-btn:hover{box-shadow:0 16px 46px -12px hsl(22 95% 55% / .95),inset 0 1px 0 hsl(0 0% 100% / .3);transform:translateY(-1px)}
#bfx-agency .ax-btn:active{transform:translateY(0) scale(.98)}
#bfx-agency .ax-btn svg{width:15px;height:15px;stroke:currentColor;transition:transform .5s var(--ease)}
#bfx-agency .ax-btn:hover svg{transform:translateX(4px)}
#bfx-agency .ax-link{position:relative;display:inline-flex;align-items:center;gap:.5rem;font:500 .95rem/1.2 'DM Sans',sans-serif;color:var(--fg)}
#bfx-agency .ax-link svg{width:15px;height:15px;stroke:var(--a);transition:transform .5s var(--ease)}
#bfx-agency .ax-link:hover svg{transform:translateX(4px)}
#bfx-agency .ax-link::after{content:"";position:absolute;left:0;right:1.4rem;bottom:-5px;height:1px;background:var(--grad-x);transform:scaleX(.3);transform-origin:left;transition:transform .6s var(--ease)}
#bfx-agency .ax-link:hover::after{transform:scaleX(1)}
#bfx-agency .ax-more{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;font-size:.95rem;color:var(--fg)}
#bfx-agency .ax-more svg{width:15px;height:15px;stroke:var(--a);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
#bfx-agency .ax-more:hover svg,#bfx-agency .ax-card:hover .ax-more svg{transform:translateX(4px)}

/* ==========================================================================
   APERTURE DELLE PAGINE SERVIZIO — griglia sottile e fasci sulle linee
   ========================================================================== */
#bfx-agency .ax-hero{position:relative;overflow:hidden;padding:clamp(150px,20vh,196px) 0 clamp(90px,12vh,130px);text-align:center;background:radial-gradient(ellipse 80% 60% at 50% 0%,hsl(218 70% 30% / .32),transparent 70%)}
#bfx-agency .ax-grid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background-image:linear-gradient(to right,var(--gl) 1px,transparent 1px),linear-gradient(to bottom,var(--gl) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:calc(50% + var(--cell) / 2) 0}
#bfx-agency .ax-grid::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 58% at 50% 30%,hsl(var(--bgh) / 0) 0%,hsl(var(--bgh) / .55) 55%,var(--bg) 82%),linear-gradient(180deg,hsl(var(--bgh) / 0) 50%,var(--bg) 90%)}
#bfx-agency .ax-glow{position:absolute;z-index:0;left:50%;top:-260px;width:min(1100px,120vw);height:620px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,hsl(22 95% 55% / .13),hsl(22 95% 55% / 0))}
#bfx-agency .ax-beam{position:absolute;z-index:1;opacity:0;pointer-events:none;will-change:transform,opacity}
#bfx-agency .ax-beam--h{left:0;top:calc(var(--row) * var(--cell));width:200px;height:1px;background:linear-gradient(90deg,hsl(26 100% 60% / 0),hsl(26 100% 60% / .9) 70%,#fff);box-shadow:0 0 14px 1px hsl(26 100% 58% / .6);animation:ax-bh var(--t,9s) linear var(--d,0s) infinite}
#bfx-agency .ax-beam--v{top:0;left:calc(50% + var(--col) * var(--cell));width:1px;height:180px;background:linear-gradient(180deg,hsl(26 100% 60% / 0),hsl(26 100% 60% / .9) 70%,#fff);box-shadow:0 0 14px 1px hsl(26 100% 58% / .6);animation:ax-bv var(--t,9s) linear var(--d,0s) infinite}
@keyframes ax-bh{0%{transform:translate3d(-220px,0,0);opacity:0}5%{opacity:1}50%{opacity:1}56%{transform:translate3d(calc(100vw + 20px),0,0);opacity:0}100%{transform:translate3d(calc(100vw + 20px),0,0);opacity:0}}
#bfx-agency .ax-beam--rev{left:auto;right:0;background:linear-gradient(270deg,hsl(26 100% 60% / 0),hsl(26 100% 60% / .9) 70%,#fff);animation-name:ax-bhr}
@keyframes ax-bhr{0%{transform:translate3d(220px,0,0);opacity:0}5%{opacity:1}50%{opacity:1}56%{transform:translate3d(calc(-100vw - 20px),0,0);opacity:0}100%{transform:translate3d(calc(-100vw - 20px),0,0);opacity:0}}
@keyframes ax-bv{0%{transform:translate3d(0,-200px,0);opacity:0}5%{opacity:1}48%{opacity:1}54%{transform:translate3d(0,900px,0);opacity:0}100%{transform:translate3d(0,900px,0);opacity:0}}
#bfx-agency .ax-hero.is-off .ax-beam{animation-play-state:paused}
#bfx-agency .ax-hero__in{position:relative;z-index:2}
#bfx-agency .ax-h1{font-size:clamp(2.8rem,6.6vw,6.2rem);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
#bfx-agency .ax-h1--s{font-size:clamp(2.5rem,5.2vw,4.9rem);line-height:1.02;letter-spacing:-.045em}
#bfx-agency .ax-hero__sub{max-width:37rem;margin:1.6rem auto 0;font-size:clamp(1.04rem,1.25vw,1.18rem);font-weight:300;line-height:1.65;color:var(--soft);text-wrap:balance}
#bfx-agency .ax-hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 1.8rem;margin-top:2.3rem}
#bfx-agency .ax-show{position:relative;z-index:2;max-width:1060px;margin:clamp(3.6rem,8vh,5.2rem) auto 0}
#bfx-agency .ax-show::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;bottom:-50px;height:140px;background:radial-gradient(closest-side,hsl(22 95% 55% / .22),transparent);pointer-events:none}
#bfx-agency .ax-show>.ax-note{margin-top:1.1rem}

/* ==========================================================================
   CORNICI DEI MATERIALI — browser, telefono, post, pagine, video
   ========================================================================== */
#bfx-agency .ax-browser{position:relative;overflow:hidden;border-radius:14px;background:var(--bg-deep);box-shadow:0 0 0 1px var(--line-2),0 40px 100px -40px rgba(0,0,0,.9)}
#bfx-agency .ax-browser__bar{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:6px;height:32px;padding:0 13px;background:hsl(218 45% 13%);border-bottom:1px solid var(--line)}
#bfx-agency .ax-browser__bar i{width:8px;height:8px;border-radius:50%;background:hsl(215 40% 80% / .2)}
#bfx-agency .ax-browser__bar b{justify-self:center;margin-right:42px;padding:.12rem .9rem;border-radius:99px;background:hsl(218 54% 8%);font:400 .72rem/1.4 'DM Sans',sans-serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#bfx-agency .ax-browser__view{position:relative;aspect-ratio:16/9;overflow:hidden;background:#05080f}
#bfx-agency .ax-browser__view video,#bfx-agency .ax-browser__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
#bfx-agency .ax-phone{position:relative;width:100%;aspect-ratio:9/19;padding:7px;border-radius:30px;background:linear-gradient(160deg,hsl(218 30% 30%),hsl(218 40% 12%) 40%,hsl(218 30% 22%));box-shadow:0 0 0 1px var(--line-2),0 40px 80px -30px rgba(0,0,0,.9)}
#bfx-agency .ax-phone__screen{position:relative;height:100%;overflow:hidden;border-radius:24px;background:#000}
#bfx-agency .ax-phone__screen video,#bfx-agency .ax-phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bfx-agency .ax-post{overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 30px 70px -30px rgba(0,0,0,.85)}
#bfx-agency .ax-post img{width:100%;height:auto}
#bfx-agency .ax-film{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#05080f;box-shadow:0 0 0 1px var(--line-2),0 40px 100px -40px rgba(0,0,0,.9)}
#bfx-agency .ax-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bfx-agency .ax-film__cap,#bfx-agency .ax-yt__cap{position:absolute;z-index:2;left:14px;bottom:14px;padding:.4rem .85rem;border-radius:999px;background:hsl(218 54% 7% / .82);box-shadow:inset 0 0 0 1px var(--line-2);font-size:.82rem;color:var(--soft)}
/* video YouTube: copertina finché non si clicca (niente iframe al caricamento) */
#bfx-agency .ax-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000;box-shadow:0 0 0 1px var(--line-2),0 40px 100px -40px rgba(0,0,0,.9)}
#bfx-agency .ax-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s ease}
#bfx-agency .ax-yt:hover img{transform:scale(1.03);filter:brightness(1.08)}
#bfx-agency .ax-yt__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:hsl(218 54% 7% / .55);box-shadow:inset 0 0 0 1px hsl(0 0% 100% / .35),0 10px 40px -10px rgba(0,0,0,.8);transition:transform .5s var(--ease),background .4s ease}
#bfx-agency .ax-yt__play svg{width:26px;height:26px;margin-left:4px;fill:#fff}
#bfx-agency .ax-yt:hover .ax-yt__play{transform:scale(1.08);background:var(--p)}
#bfx-agency .ax-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#bfx-agency .ax-docs{position:relative;width:100%;height:100%}
#bfx-agency .ax-doc{position:absolute;inset:0;margin:auto;width:auto;max-width:none;height:86%;border-radius:4px;box-shadow:0 0 0 1px var(--line-2),0 30px 60px -20px rgba(0,0,0,.9);transform:translate3d(calc(var(--k) * 34%),calc(var(--k) * var(--k) * 4%),0) rotate(calc(var(--k) * 6deg));transition:transform 1s var(--ease)}
#bfx-agency .ax-tour__layer.is-on .ax-doc{transform:translate3d(calc(var(--k) * 40%),calc(var(--k) * var(--k) * 3%),0) rotate(calc(var(--k) * 7deg))}
#bfx-agency .ax-panel{border-radius:16px;background:var(--bg-deep);box-shadow:0 0 0 1px var(--line-2),0 40px 100px -40px rgba(0,0,0,.9)}
/* i video "al passaggio" compaiono solo quando girano davvero */
#bfx-agency [data-hover] video,#bfx-agency .ax-thumb video,#bfx-agency .ax-tile video,#bfx-agency .ax-work__media video,#bfx-agency .ax-mat__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
#bfx-agency video.is-playing{opacity:1!important}

/* ==========================================================================
   IL PERCORSO A SCHEDE — a sinistra le voci, a destra il lavoro che cambia
   ========================================================================== */
#bfx-agency .ax-tour{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
#bfx-agency .ax-tour__steps{display:grid}
#bfx-agency .ax-tour__step{display:grid;align-content:center;justify-items:start;gap:.9rem;min-height:min(62vh,560px);padding:2rem 0 2rem 1.6rem;border-left:1px solid var(--line);position:relative;opacity:.38;transition:opacity .6s ease}
#bfx-agency .ax-tour__step::before{content:"";position:absolute;left:-1px;top:30%;bottom:30%;width:2px;background:var(--grad);transform:scaleY(0);transition:transform .7s var(--ease)}
#bfx-agency .ax-tour__step.is-on{opacity:1}
#bfx-agency .ax-tour__step.is-on::before{transform:scaleY(1)}
#bfx-agency .ax-tour__step h3{font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.03em}
#bfx-agency .ax-tour__step p{max-width:28rem;font-weight:300;font-size:1.03rem;color:var(--soft)}
#bfx-agency .ax-tour__step .ax-cap{font-size:.88rem;color:var(--muted)}
#bfx-agency .ax-tour__logo{height:24px;width:auto;opacity:.85}
#bfx-agency .ax-tour__logo.is-tall{height:34px}
#bfx-agency .ax-tour__logo.is-wide{height:18px}
#bfx-agency .ax-tour__stage{position:sticky;top:max(110px,calc(50vh - 260px));aspect-ratio:16/11.5;border-radius:20px;background:radial-gradient(ellipse at 50% 110%,hsl(22 95% 55% / .12),transparent 60%),var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-tour__layer{position:absolute;inset:clamp(18px,3vw,40px);display:grid;place-items:center;opacity:0;transform:scale(.975);transition:opacity .7s ease,transform 1s var(--ease);pointer-events:none}
#bfx-agency .ax-tour__layer.is-on{opacity:1;transform:none}
#bfx-agency .ax-tour__layer>.ax-browser{width:100%}
#bfx-agency .ax-duo{display:grid;grid-template-columns:auto auto;align-items:center;gap:clamp(14px,2.4vw,28px);height:100%}
#bfx-agency .ax-duo .ax-phone{height:100%;width:auto;aspect-ratio:9/19}
#bfx-agency .ax-duo .ax-post{width:clamp(180px,17vw,250px);transform:rotate(2.5deg)}

/* ==========================================================================
   I CASI — un materiale grande, il racconto, i materiali piccoli
   ========================================================================== */
#bfx-agency .ax-case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"main copy" "strip strip";gap:clamp(1.8rem,3.4vw,3.2rem) clamp(2rem,5vw,4.4rem);align-items:center}
#bfx-agency .ax-case+.ax-case{margin-top:clamp(6rem,14vh,9rem)}
#bfx-agency .ax-case--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"copy main" "strip strip"}
#bfx-agency .ax-case--solo{grid-template-areas:"main copy"}
#bfx-agency .ax-case__main{grid-area:main}
#bfx-agency .ax-case__copy{grid-area:copy;display:grid;justify-items:start;gap:1.15rem}
#bfx-agency .ax-case__copy>p{font-weight:300;font-size:1.03rem;color:var(--soft)}
#bfx-agency .ax-case__logo{height:24px;width:auto;opacity:.9}
#bfx-agency .ax-case__logo.is-tall{height:36px}
#bfx-agency .ax-case__logo.is-wide{height:19px}
#bfx-agency .ax-case__title{font-size:clamp(1.8rem,2.9vw,2.6rem);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
#bfx-agency .ax-case__strip{grid-area:strip;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
#bfx-agency .ax-case--flip .ax-case__strip{--n:3}
#bfx-agency .ax-case__strip li{display:grid;gap:.7rem;font-size:.88rem;color:var(--muted)}
#bfx-agency .ax-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-thumb--16{aspect-ratio:16/9}
#bfx-agency .ax-thumb--916{aspect-ratio:4/5}
#bfx-agency .ax-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)}
#bfx-agency .ax-case__strip li:hover .ax-thumb img{transform:scale(1.04)}
/* un numero solo, grande, con la sua frase */
#bfx-agency .ax-fact{display:grid;gap:.35rem;padding-top:1.1rem;border-top:1px solid var(--line);width:100%}
#bfx-agency .ax-fact b{font:300 clamp(2.4rem,3.8vw,3.4rem)/1 'Jost',sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#bfx-agency .ax-fact>span{max-width:24rem;font-size:.93rem;color:var(--soft)}
#bfx-agency .ax-facts{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;width:100%}
#bfx-agency .ax-odo{display:inline-flex;align-items:flex-end;white-space:nowrap}
#bfx-agency .ax-odo__d{display:inline-block;height:1em;overflow:hidden}
#bfx-agency .ax-odo__c{display:flex;flex-direction:column;transition:transform 1.4s var(--ease) calc(var(--k,0) * 70ms)}
#bfx-agency .ax-odo__c span,#bfx-agency .ax-odo__s{display:block;height:1em;line-height:1}
#bfx-agency .ax-fact b.is-odo,#bfx-agency .ax-big-n b.is-odo,#bfx-agency .ax-phones b.is-odo{background:none;color:hsl(30 96% 62%);-webkit-text-fill-color:currentColor;line-height:1}
#bfx-agency .ax-big-n b{display:block;font:200 clamp(4rem,10vw,8.4rem)/.9 'Jost',sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ==========================================================================
   GALLERIE — produzione, formati, telefoni, materiali
   ========================================================================== */
#bfx-agency .ax-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(220px,24vw,330px);gap:clamp(12px,1.4vw,18px)}
#bfx-agency .ax-tile{position:relative;overflow:hidden;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-tile--wide{grid-column:span 2}
#bfx-agency .ax-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
#bfx-agency .ax-tile:hover img{transform:scale(1.035)}
#bfx-agency .ax-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,hsl(218 54% 6% / .88));pointer-events:none}
#bfx-agency .ax-tile figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;gap:.3rem;max-width:32rem;padding:clamp(1.1rem,2vw,1.6rem);font-size:.92rem;line-height:1.5;color:var(--soft)}
#bfx-agency .ax-tile figcaption b,#bfx-agency .ax-work figcaption b,#bfx-agency .ax-phones figcaption b{display:block;font:400 1.3rem/1.2 'Jost',sans-serif;letter-spacing:-.02em;color:var(--fg)}

#bfx-agency .ax-works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,26px) clamp(14px,1.6vw,22px);align-items:start}
#bfx-agency .ax-works--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(26px,3vw,40px)}
#bfx-agency .ax-works--3 .ax-work__media{aspect-ratio:16/10}
#bfx-agency .ax-work{display:grid;gap:.9rem;align-content:start;font-size:.88rem;line-height:1.5;color:var(--muted)}
#bfx-agency .ax-work--wide{grid-column:span 2}
#bfx-agency .ax-work--tall{grid-row:span 2}
#bfx-agency .ax-work__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-work__media--phone{aspect-ratio:9/16}
#bfx-agency .ax-work__media--45{aspect-ratio:4/5}
#bfx-agency .ax-work__media--post{aspect-ratio:4/5;background:#fff}
#bfx-agency .ax-work__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)}
#bfx-agency .ax-work:hover .ax-work__media img{transform:scale(1.03)}
#bfx-agency .ax-work figcaption b{font-size:1.15rem;margin-bottom:.15rem}

#bfx-agency .ax-phones{display:grid;grid-template-columns:repeat(3,minmax(0,250px));justify-content:center;gap:clamp(18px,4vw,56px)}
#bfx-agency .ax-phones figure{display:grid;gap:1.2rem;text-align:center}
#bfx-agency .ax-phones figure:nth-child(2){transform:translateY(-26px)}
#bfx-agency .ax-phones figcaption{font-size:.88rem;color:var(--muted)}
#bfx-agency .ax-phones figcaption b{font:300 2rem/1 'Jost',sans-serif;letter-spacing:-.04em;margin-bottom:.4rem;font-variant-numeric:tabular-nums}

#bfx-agency .ax-mats+.ax-note{margin-top:1.8rem}
#bfx-agency .ax-mats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
#bfx-agency .ax-mat{border-radius:18px}
#bfx-agency .ax-mat__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.2rem,2.4vw,2rem);align-items:center;height:100%;padding:clamp(1rem,1.6vw,1.4rem);border-radius:17px;background:var(--card)}
#bfx-agency .ax-mat__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:#05080f}
#bfx-agency .ax-mat__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bfx-agency .ax-mat__media--doc{background:#fff}
#bfx-agency .ax-mat__media--doc>img{object-position:top}
#bfx-agency .ax-mat__media .ax-yt{height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
#bfx-agency .ax-mat__copy{display:grid;gap:.8rem}
#bfx-agency .ax-mat__copy h3{font-size:1.35rem;line-height:1.2}
#bfx-agency .ax-mat__copy q,#bfx-agency .ax-rows2 q{font:300 1.05rem/1.45 'Jost',sans-serif;color:var(--soft)}
#bfx-agency .ax-mat__copy>span{font-size:.84rem;color:var(--muted)}

/* scena d'apertura dei piani editoriali: articolo, reel e post insieme */
#bfx-agency .ax-scene{position:relative;z-index:2;max-width:980px;height:clamp(340px,44vw,540px);margin:clamp(3.6rem,8vh,5rem) auto 0}
#bfx-agency .ax-scene__back{position:absolute;left:12%;right:12%;top:0}
#bfx-agency .ax-scene__l{position:absolute;left:2%;bottom:0;width:clamp(150px,19%,200px)}
#bfx-agency .ax-scene__r{position:absolute;right:3%;bottom:2%;width:clamp(170px,22%,240px);transform:rotate(3deg)}
#bfx-agency .ax-scene__caps{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;margin-top:1.6rem;font-size:.86rem;color:var(--muted)}
#bfx-agency .ax-scene__caps span::before{content:"";display:inline-block;width:6px;height:6px;margin:0 .55rem .12rem 0;border-radius:50%;background:var(--p);box-shadow:0 0 8px var(--p)}

/* lead magnet: landing e pagine sfogliabili */
#bfx-agency .ax-lm{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
#bfx-agency .ax-lm__pages{display:grid;gap:1rem;min-width:0}
#bfx-agency .ax-pages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;scrollbar-width:thin;scrollbar-color:hsl(215 45% 82% / .25) transparent;cursor:grab}
#bfx-agency .ax-pages img{flex:0 0 72%;width:72%;height:auto;scroll-snap-align:start;border-radius:6px;box-shadow:0 0 0 1px var(--line-2),0 24px 50px -24px rgba(0,0,0,.9)}

/* ---------- liste sobrie al posto delle schede (meno riquadri, più respiro) ---------- */
#bfx-agency .ax-rows2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4.4rem)}
#bfx-agency .ax-rows2--3{grid-template-columns:repeat(3,minmax(0,1fr))}
#bfx-agency .ax-rows2 li{display:grid;align-content:start;gap:.55rem;padding:1.6rem 0;border-top:1px solid var(--line)}
#bfx-agency .ax-rows2 h3{font-size:1.35rem;line-height:1.2}
#bfx-agency .ax-rows2 p{font-weight:300;font-size:.98rem;color:var(--soft)}
#bfx-agency .ax-rows2 li>span{font-size:.82rem;color:var(--muted)}
#bfx-agency .ax-rows2 q{margin-top:.2rem}
#bfx-agency .ax-fix{padding-left:.9rem;border-left:2px solid var(--p);color:var(--fg)!important;font-weight:400!important}
#bfx-agency .ax-rows2+.ax-note{margin-top:1.6rem}
#bfx-agency .ax-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1.2rem,3vw,2.6rem)}
#bfx-agency .ax-kpis li{display:grid;align-content:start;gap:.5rem;padding-top:1.4rem;border-top:1px solid var(--line-2);position:relative}
#bfx-agency .ax-kpis li::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--grad-x)}
#bfx-agency .ax-kpis h3{font-size:1.22rem;line-height:1.25}
#bfx-agency .ax-kpis p{font-weight:300;font-size:.94rem;color:var(--soft)}

/* ---------- schede (altri servizi) — bordo che si accende sotto il cursore ---------- */
#bfx-agency .ax-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#bfx-agency .ax-card,#bfx-agency .ax-mat{position:relative;display:block;padding:1px;border-radius:var(--r);background:var(--line);isolation:isolate;transition:transform .5s var(--ease-brand),box-shadow .5s var(--ease-brand)}
#bfx-agency .ax-card::before,#bfx-agency .ax-mat::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--o,0);background:conic-gradient(from var(--ang,45deg),hsl(30 100% 64%) 0 18%,hsl(30 100% 64% / 0) 34% 66%,hsl(30 100% 64%) 82%);transition:opacity .75s ease-in-out}
#bfx-agency .ax-card:hover::before,#bfx-agency .ax-mat:hover::before{transition:opacity .25s ease-out}
#bfx-agency .ax-card:hover,#bfx-agency .ax-mat:hover{transform:translate3d(0,-4px,0);box-shadow:0 24px 50px -24px rgba(0,0,0,.8),0 0 30px -6px hsl(22 95% 55% / .18)}
#bfx-agency .ax-card__in{position:relative;z-index:1;display:flex;flex-direction:column;gap:.9rem;height:100%;padding:clamp(1.5rem,2.4vw,2.1rem);border-radius:calc(var(--r) - 1px);background:var(--card);overflow:hidden}
#bfx-agency .ax-card__in::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-30%),hsl(26 100% 60% / .075),transparent 58%);opacity:0;transition:opacity .45s ease}
#bfx-agency .ax-card:hover .ax-card__in::before{opacity:1}
#bfx-agency .ax-card__in>*{position:relative}
#bfx-agency .ax-card :where(h3){font-size:clamp(1.3rem,1.6vw,1.55rem);line-height:1.2;letter-spacing:-.02em}
#bfx-agency .ax-card :where(p){font-weight:300;font-size:.97rem;color:var(--soft)}
#bfx-agency .ax-card .ax-more{margin-top:auto;padding-top:.5rem}
#bfx-agency .ax-bridge{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1.6rem;margin-top:clamp(3rem,7vh,4.4rem);text-align:center;font-size:1rem;color:var(--soft)}
#bfx-agency .ax-bridge b{font-weight:500;color:var(--fg)}

/* ==========================================================================
   PASSI DEL METODO — linea con nodi, un fascio la percorre una volta
   ========================================================================== */
#bfx-agency .ax-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(1rem,2.2vw,2.2rem)}
#bfx-agency .ax-steps__track{position:absolute;left:10px;right:10px;top:8px;height:3px;overflow:hidden;background:linear-gradient(var(--line),var(--line)) 0 1px/100% 1px no-repeat}
#bfx-agency .ax-steps__track::before{content:"";position:absolute;left:0;right:0;top:1px;height:1px;background:linear-gradient(90deg,hsl(22 95% 55% / .9),hsl(38 92% 60% / .7));transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease-brand) .2s}
#bfx-agency .ax-steps.is-in .ax-steps__track::before,#bfx-agency.ax-still .ax-steps__track::before{transform:scaleX(1)}
#bfx-agency .ax-steps__track i{position:absolute;top:0;left:0;width:22%;height:3px;border-radius:3px;background:linear-gradient(90deg,hsl(26 100% 60% / 0),hsl(26 100% 60%),#fff);box-shadow:0 0 12px hsl(26 100% 58% / .8);transform:translate3d(-110%,0,0);opacity:0}
#bfx-agency .ax-steps.is-in .ax-steps__track i{animation:ax-run 2.4s var(--ease-brand) .2s 1 forwards}
@keyframes ax-run{0%{transform:translate3d(-110%,0,0);opacity:1}88%{opacity:1}100%{transform:translate3d(470%,0,0);opacity:0}}
#bfx-agency .ax-step{position:relative;display:grid;align-content:start;gap:.55rem;padding-top:2.3rem}
#bfx-agency .ax-step::before{content:"";position:absolute;top:0;left:0;width:19px;height:19px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .6s ease calc(var(--i,0) * 420ms + 300ms),box-shadow .6s ease calc(var(--i,0) * 420ms + 300ms)}
#bfx-agency .ax-steps.is-in .ax-step::before{background:radial-gradient(circle,#fff 16%,var(--p) 52%,var(--bg) 58%);box-shadow:inset 0 0 0 1.5px hsl(30 100% 64%),0 0 16px hsl(22 95% 55% / .6)}
#bfx-agency .ax-step h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.015em}
#bfx-agency .ax-step p{font-weight:300;font-size:.93rem;color:var(--soft)}

/* ---------- persone ---------- */
#bfx-agency .ax-team{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem 1.4rem;margin-top:clamp(3.4rem,8vh,5rem)}
#bfx-agency .ax-team li{flex:0 0 11.5rem;display:grid;align-content:start;justify-items:center;gap:.8rem;text-align:center}
#bfx-agency .ax-team img{width:64px;height:64px;border-radius:50%;object-fit:cover;filter:grayscale(1);box-shadow:0 0 0 1px var(--line-2);transition:filter .5s ease}
#bfx-agency .ax-team li:hover img{filter:none}
#bfx-agency .ax-team b{display:block;font-weight:500;font-size:.95rem;color:var(--fg)}
#bfx-agency .ax-team span{font-size:.82rem;color:var(--muted)}

/* ---------- FAQ ---------- */
#bfx-agency .ax-faq{max-width:52rem;margin:0 auto;border-bottom:1px solid var(--line)}
#bfx-agency .ax-faq__item{border-top:1px solid var(--line)}
#bfx-agency .ax-faq__q{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;padding:1.35rem 0;font:400 clamp(1.08rem,1.4vw,1.28rem)/1.3 'Jost',sans-serif;color:var(--fg);transition:color .3s ease}
#bfx-agency .ax-faq__q:hover{color:hsl(30 95% 66%)}
#bfx-agency .ax-faq__q i{position:relative;flex:0 0 auto;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .5s var(--ease)}
#bfx-agency .ax-faq__q i::before,#bfx-agency .ax-faq__q i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--a);transition:transform .45s var(--ease)}
#bfx-agency .ax-faq__q i::after{transform:rotate(90deg)}
#bfx-agency .ax-faq__q[aria-expanded="true"] i{transform:rotate(180deg)}
#bfx-agency .ax-faq__q[aria-expanded="true"] i::after{transform:rotate(0)}
#bfx-agency .ax-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
#bfx-agency .ax-faq__a>div{overflow:hidden}
#bfx-agency .ax-faq__a p{max-width:44rem;padding:0 3rem 1.4rem 0;font-weight:300;color:var(--soft)}
#bfx-agency .ax-faq__item.is-open .ax-faq__a{grid-template-rows:1fr}

/* ---------- contatti ---------- */
#bfx-agency .ax-contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.4rem,6vw,6rem);align-items:start}
#bfx-agency .ax-contact__copy{display:grid;gap:1.4rem;justify-items:start}
#bfx-agency .ax-contact__title{font-size:clamp(2.3rem,4.2vw,3.8rem);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
#bfx-agency .ax-contact__sub{max-width:30rem;font-weight:300;font-size:1.04rem;color:var(--soft)}
#bfx-agency .ax-contact__alt{display:grid;gap:.9rem;width:100%;margin-top:.4rem;padding-top:1.3rem;border-top:1px solid var(--line)}
#bfx-agency .ax-contact__alt li{display:grid;gap:.25rem;justify-items:start;font-size:.92rem;color:var(--muted)}
#bfx-agency .ax-form{display:grid;gap:1rem}
#bfx-agency .ax-goals{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.4rem}
#bfx-agency .ax-goals legend{width:100%;margin-bottom:.8rem;font:400 1.15rem/1.3 'Jost',sans-serif;color:var(--fg)}
#bfx-agency .ax-goals label{position:relative}
#bfx-agency .ax-goals input{position:absolute;opacity:0;pointer-events:none}
#bfx-agency .ax-goals span{display:inline-block;padding:.6rem 1rem;border-radius:999px;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-2);font-size:.88rem;color:var(--soft);cursor:pointer;transition:box-shadow .3s ease,background .3s ease,color .3s ease}
#bfx-agency .ax-goals span:hover{box-shadow:inset 0 0 0 1px hsl(22 95% 55% / .5)}
#bfx-agency .ax-goals input:checked+span{background:hsl(22 95% 55% / .15);box-shadow:inset 0 0 0 1px hsl(22 95% 55% / .9);color:#fff}
#bfx-agency .ax-goals input:focus-visible+span{outline:2px solid hsl(32 100% 62%);outline-offset:2px}
#bfx-agency .ax-goals.is-invalid span{box-shadow:inset 0 0 0 1px hsl(0 75% 62% / .7)}
#bfx-agency .ax-form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#bfx-agency .ax-field label{display:block;margin-bottom:.4rem;font-size:.85rem;color:var(--muted)}
#bfx-agency .ax-field input,#bfx-agency .ax-field textarea{display:block;width:100%;padding:.9rem 1rem;border-radius:10px;border:1px solid var(--line-2);background:hsl(218 54% 7%);color:var(--fg);font:400 1rem/1.4 'DM Sans',sans-serif;outline:0;resize:vertical;transition:border-color .3s ease,box-shadow .3s ease}
#bfx-agency .ax-field input::placeholder{color:hsl(218 10% 45%)}
#bfx-agency .ax-field input:focus,#bfx-agency .ax-field textarea:focus{border-color:hsl(22 95% 55% / .85);box-shadow:0 0 0 4px hsl(22 95% 55% / .14)}
#bfx-agency .ax-field .is-invalid{border-color:hsl(0 75% 62% / .9)}
#bfx-agency .ax-consent{display:flex;align-items:flex-start;gap:.7rem;font-size:.86rem;line-height:1.5;color:var(--muted);cursor:pointer}
#bfx-agency .ax-consent input{flex:0 0 auto;width:17px;height:17px;margin-top:.15rem;accent-color:hsl(22 95% 55%)}
#bfx-agency .ax-consent a{text-decoration:underline;text-underline-offset:2px}
#bfx-agency .ax-consent.is-invalid{color:hsl(0 80% 72%)}
#bfx-agency .ax-form__submit{justify-self:start;margin-top:.4rem}
#bfx-agency .ax-form__submit[disabled]{filter:saturate(.6);cursor:progress}
#bfx-agency .ax-form__msg{min-height:1.4em;font-size:.92rem}
#bfx-agency .ax-form__msg.is-error{color:hsl(0 80% 72%)}
#bfx-agency .ax-form__msg.is-success{color:hsl(140 55% 66%)}
#bfx-agency .ax-form__msg.is-info{color:var(--a)}

/* ==========================================================================
   MODULI SPECIFICI
   ========================================================================== */
/* Piani editoriali: il ritmo di un anno, una riga sola */
#bfx-agency .ax-rhythm{display:grid;justify-items:center;gap:1.6rem;max-width:980px;margin:0 auto;text-align:center}
#bfx-agency .ax-toggle{display:inline-flex;padding:4px;border-radius:999px;background:var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line-2)}
#bfx-agency .ax-toggle button{padding:.66rem 1.2rem;border-radius:999px;font-size:.9rem;color:var(--soft);white-space:nowrap;transition:background .45s var(--ease),color .3s ease}
#bfx-agency .ax-toggle button[aria-selected="true"]{background:var(--grad-x);color:#fff}
#bfx-agency .ax-rhythm__line{display:grid;grid-template-columns:repeat(52,minmax(0,1fr));align-items:end;gap:clamp(2px,.45vw,6px);width:100%;height:110px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
#bfx-agency .ax-rhythm__line i{display:block;height:28%;border-radius:2px;background:hsl(215 45% 82% / .12);transform-origin:bottom;transition:height .7s var(--ease) calc(var(--k,0) * 14ms),background-color .5s ease calc(var(--k,0) * 14ms),box-shadow .5s ease calc(var(--k,0) * 14ms)}
#bfx-agency .ax-rhythm[data-state="senza"] .ax-rhythm__line i.s{height:62%;background:hsl(40 30% 96% / .85)}
#bfx-agency .ax-rhythm[data-state="con"] .ax-rhythm__line i{height:52%;background:hsl(26 95% 58% / .78)}
#bfx-agency .ax-rhythm[data-state="con"] .ax-rhythm__line i.f{height:100%;background:hsl(40 30% 96%);box-shadow:0 0 12px hsl(30 100% 70% / .5)}
#bfx-agency .ax-rhythm__months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));width:100%;margin-top:-.8rem;font-size:.76rem;color:var(--muted)}
#bfx-agency .ax-rhythm__cap{display:grid;max-width:40rem}
#bfx-agency .ax-rhythm__cap p{grid-area:1/1;font:300 clamp(1.2rem,1.8vw,1.55rem)/1.4 'Jost',sans-serif;color:var(--fg);opacity:0;transform:translate3d(0,8px,0);transition:opacity .5s ease,transform .7s var(--ease)}
#bfx-agency .ax-rhythm[data-state="senza"] .ax-rhythm__cap .is-s,#bfx-agency .ax-rhythm[data-state="con"] .ax-rhythm__cap .is-c{opacity:1;transform:none}

/* Siti: prima e dopo */
#bfx-agency .ax-ba__view{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:ew-resize;touch-action:pan-y;background:#05080f}
#bfx-agency .ax-ba__layer{position:absolute;inset:0}
#bfx-agency .ax-ba__layer img{width:100%;height:100%;object-fit:cover;object-position:top}
#bfx-agency .ax-ba__layer--before{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);background:#fff}
#bfx-agency .ax-ba__tag{position:absolute;z-index:2;top:14px;left:14px;padding:.4rem .85rem;border-radius:999px;background:hsl(218 54% 7% / .85);box-shadow:inset 0 0 0 1px var(--line-2);font-size:.84rem;color:var(--fg)}
#bfx-agency .ax-ba__tag--after{left:auto;right:14px;box-shadow:inset 0 0 0 1px hsl(22 95% 55% / .6)}
#bfx-agency .ax-ba__handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--x,50%);width:0;pointer-events:none}
#bfx-agency .ax-ba__handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,hsl(30 100% 70% / .2),#fff 50%,hsl(30 100% 70% / .2));box-shadow:0 0 14px 1px hsl(26 100% 56% / .7)}
#bfx-agency .ax-ba__handle i{position:absolute;top:50%;left:0;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--grad-x);box-shadow:0 8px 24px -8px hsl(22 95% 55% / .9)}
#bfx-agency .ax-ba__handle svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
#bfx-agency .ax-ba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
#bfx-agency .ax-ba__range:focus-visible~.ax-ba__handle i{outline:2px solid #fff;outline-offset:3px}
#bfx-agency figure.ax-show>figcaption{margin-top:1.1rem}

/* Outreach: sequenza su due settimane */
#bfx-agency .ax-seq{display:grid;gap:.5rem;padding:clamp(1.4rem,3vw,2.4rem);text-align:left}
#bfx-agency .ax-seq__days{display:flex;justify-content:space-between;margin-left:6.2rem;font-size:.76rem;color:var(--muted)}
#bfx-agency .ax-seq__lane{display:grid;grid-template-columns:6.2rem 1fr;align-items:center}
#bfx-agency .ax-seq__name{font-size:.88rem;color:var(--soft)}
#bfx-agency .ax-seq__track{position:relative;height:34px}
#bfx-agency .ax-seq__track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}
#bfx-agency .ax-seq__track i{position:absolute;top:50%;left:calc((100% - 13px) * (var(--d) - 1) / 13);width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .5s ease calc(var(--d) * 150ms + 300ms),box-shadow .5s ease calc(var(--d) * 150ms + 300ms)}
#bfx-agency .is-in .ax-seq__track i,#bfx-agency.ax-still .ax-seq__track i{background:var(--p);box-shadow:inset 0 0 0 1.5px hsl(30 100% 70%),0 0 14px hsl(22 95% 55% / .8)}
#bfx-agency .ax-seq__track i.is-goal{width:17px;height:17px;margin-top:-8.5px;left:calc(100% - 17px)}
#bfx-agency .ax-seq__goal{display:flex;justify-content:flex-end;margin-top:.4rem;font-size:.9rem;color:var(--soft)}
#bfx-agency .ax-seq__goal b{margin-left:.35rem;font-weight:600;color:var(--fg)}
#bfx-agency .ax-touches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--line)}
#bfx-agency .ax-touches li{display:grid;gap:.3rem;font-size:.85rem;line-height:1.4;color:var(--soft)}
#bfx-agency .ax-touches b{font-weight:500;color:var(--a)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  #bfx-agency .ax-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.4rem}
  #bfx-agency .ax-steps__track{display:none}
  #bfx-agency .ax-works{grid-template-columns:repeat(2,minmax(0,1fr))}
  #bfx-agency .ax-works--3{grid-template-columns:1fr 1fr}
  #bfx-agency .ax-works--3 .ax-work:first-child{grid-column:span 2}
  #bfx-agency .ax-kpis{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem}
  #bfx-agency .ax-mat__in{grid-template-columns:1fr}
  #bfx-agency .ax-mat__media{aspect-ratio:16/10}
}
@media (max-width:900px){
  #bfx-agency .ax-sec{padding:clamp(76px,10vh,100px) 0}
  #bfx-agency .ax-hero{padding-top:124px}
  #bfx-agency .ax-g3,#bfx-agency .ax-rows2,#bfx-agency .ax-rows2--3,#bfx-agency .ax-mats{grid-template-columns:1fr}
  /* percorso a schede: il lavoro resta in alto, le voci scorrono sotto */
  #bfx-agency .ax-tour{grid-template-columns:1fr;gap:0}
  #bfx-agency .ax-tour__stage{order:-1;top:78px;z-index:3;width:100%;aspect-ratio:16/11;background:var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line),0 -14px 0 10px var(--bg),0 26px 30px -6px var(--bg)}
  #bfx-agency .ax-tour__step{min-height:62vh;align-content:start;padding:2.6rem 0 2rem 1.2rem}
  #bfx-agency .ax-tour__step::before{top:2.6rem;bottom:auto;height:3.2rem}
  #bfx-agency .ax-duo .ax-post{width:38vw}
  #bfx-agency .ax-case,#bfx-agency .ax-case--flip,#bfx-agency .ax-case--solo{grid-template-columns:1fr;grid-template-areas:"main" "copy" "strip"}
  #bfx-agency .ax-case__strip,#bfx-agency .ax-case--flip .ax-case__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #bfx-agency .ax-bento{grid-template-columns:1fr;grid-auto-rows:clamp(240px,62vw,340px)}
  #bfx-agency .ax-tile--wide{grid-column:auto}
  #bfx-agency .ax-lm{grid-template-columns:1fr}
  #bfx-agency .ax-phones{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  #bfx-agency .ax-phones figure:nth-child(2){transform:none}
  #bfx-agency .ax-phones figcaption b{font-size:1.3rem}
  #bfx-agency .ax-phones figcaption{font-size:.74rem}
  #bfx-agency .ax-scene{height:clamp(300px,86vw,420px)}
  #bfx-agency .ax-scene__back{left:0;right:0}
  #bfx-agency .ax-scene__l{left:-2%;width:30%}
  #bfx-agency .ax-scene__r{right:-1%;width:34%}
  #bfx-agency .ax-steps{grid-template-columns:1fr;gap:1.6rem;padding-left:2.4rem}
  #bfx-agency .ax-steps::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:1px;background:var(--line-2)}
  #bfx-agency .ax-step{padding-top:0}
  #bfx-agency .ax-step::before{left:-2.4rem;top:.15rem}
  #bfx-agency .ax-contact__grid{grid-template-columns:1fr}
  #bfx-agency .ax-touches{grid-template-columns:1fr 1fr}
  #bfx-agency .ax-team li{flex-basis:9.6rem}
  #bfx-agency .ax-toggle{display:flex;width:100%}
  #bfx-agency .ax-toggle button{flex:1 1 0;padding:.66rem .5rem;font-size:.84rem}
  #bfx-agency .ax-rhythm__line{height:84px}
  #bfx-agency .ax-rhythm__months span:nth-child(even){visibility:hidden}
}
@media (max-width:560px){
  #bfx-agency .ax-form__row{grid-template-columns:1fr}
  #bfx-agency .ax-btn{padding:1rem 1.35rem;letter-spacing:.1em}
  #bfx-agency .ax-facts{grid-template-columns:1fr}
  #bfx-agency .ax-works--3{grid-template-columns:1fr}
  #bfx-agency .ax-works--3 .ax-work:first-child{grid-column:auto}
  #bfx-agency .ax-kpis{grid-template-columns:1fr}
  #bfx-agency .ax-seq__days{margin-left:4.8rem}
  #bfx-agency .ax-seq__lane{grid-template-columns:4.8rem 1fr}
  #bfx-agency .ax-faq__a p{padding-right:0}
  #bfx-agency .ax-beam--v{display:none}
  #bfx-agency .ax-browser__bar b{margin-right:0}
  #bfx-agency .ax-vf::after{inset:-7px;--vl:14px}
}
@media (prefers-reduced-motion:reduce){
  #bfx-agency .ax-beam{display:none}
  #bfx-agency *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ==========================================================================
   PRIMO PIANO — video e documenti si aprono sopra la pagina
   (velo scuro pieno, niente sfocatura dietro: costa zero)
   ========================================================================== */
#bfx-agency .ax-lb{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:hsl(218 60% 4% / .9);opacity:0;transition:opacity .3s var(--ease-brand)}
#bfx-agency .ax-lb[hidden]{display:none}
#bfx-agency .ax-lb.is-open{opacity:1}
#bfx-agency .ax-lb__card{position:relative;width:min(1200px,100%);max-height:100%;display:grid;place-items:center;opacity:0;transform:translate3d(0,12px,0) scale(.95);transition:opacity .3s var(--ease-brand),transform .3s var(--ease-brand)}
#bfx-agency .ax-lb.is-open .ax-lb__card{opacity:1;transform:none}
#bfx-agency .ax-lb__video{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line-2),0 50px 120px -40px #000}
#bfx-agency .ax-lb__video iframe{width:100%;height:100%;border:0}
#bfx-agency .ax-lb__img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:8px;box-shadow:0 0 0 1px var(--line-2),0 50px 120px -40px #000}
#bfx-agency .ax-lb__close{position:absolute;top:-52px;right:0;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:hsl(218 44% 14%);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s var(--ease-brand),transform .2s var(--ease-brand)}
#bfx-agency .ax-lb__close:hover{background:var(--p);transform:rotate(90deg)}
#bfx-agency .ax-lb__close svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
#bfx-agency [data-zoom]{cursor:zoom-in}
/* inclinazione leggera dei riquadri sotto il cursore (solo il contenitore interno) */
#bfx-agency [data-tilt]>*{transition:transform .9s var(--ease)}
/* la scena dei piani editoriali: i tre pezzi arrivano in fila (translate, non transform: la rotazione resta) */
#bfx-agency.ax-live [data-scene]>*{opacity:0;translate:0 44px;transition:opacity .9s var(--ease),translate 1.2s var(--ease)}
#bfx-agency.ax-live [data-scene].is-in>*{opacity:1;translate:0 0}
#bfx-agency.ax-live [data-scene].is-in>.ax-scene__l{transition-delay:.18s}
#bfx-agency.ax-live [data-scene].is-in>.ax-scene__r{transition-delay:.32s}

/* ==========================================================================
   APERTURA DELLA HOME — la hero della v2, riportata com'era:
   due pareti di lavori veri in prospettiva, il titolo che si apre dal centro,
   il mirino che mette a fuoco, i loghi che scorrono.
   Cosa cambia rispetto alla v2: la regia è tutta CSS (transform, opacity,
   clip) e parte una volta sola; niente GSAP e niente effetti legati allo scroll.
   ========================================================================== */
#bfx-agency .ax-hh{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(104px,13vh,140px);overflow:hidden;background:transparent}

/* ---------- Le pareti: colonne di lavori che scorrono, piegate in prospettiva ---------- */
#bfx-agency .ax-hall{position:absolute;inset:0;z-index:0;pointer-events:none;perspective:1250px;perspective-origin:var(--po-x,50%) var(--po-y,46%)}
#bfx-agency .ax-hall::before,#bfx-agency .ax-hall::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
#bfx-agency .ax-hall::before{top:0;height:28%;background:linear-gradient(180deg,var(--bg) 8%,hsl(var(--bgh) / 0))}
#bfx-agency .ax-hall::after{bottom:0;height:34%;background:linear-gradient(0deg,var(--bg) 18%,hsl(var(--bgh) / 0))}
#bfx-agency .ax-wall{position:absolute;top:-14%;bottom:-14%;display:flex;gap:14px;width:clamp(250px,30vw,560px);transform-style:preserve-3d;will-change:transform}
#bfx-agency .ax-wall--l{left:-1.5vw;transform-origin:0% 50%;transform:translate3d(0,0,0) rotateY(34deg)}
#bfx-agency .ax-wall--r{right:-1.5vw;transform-origin:100% 50%;transform:translate3d(0,0,0) rotateY(-34deg)}
#bfx-agency .ax-wall::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
#bfx-agency .ax-wall--l::after{background:linear-gradient(90deg,hsl(var(--bgh) / .22),hsl(var(--bgh) / .58) 55%,hsl(var(--bgh) / .97))}
#bfx-agency .ax-wall--r::after{background:linear-gradient(270deg,hsl(var(--bgh) / .22),hsl(var(--bgh) / .58) 55%,hsl(var(--bgh) / .97))}
#bfx-agency .ax-col{position:relative;flex:1;min-width:0;overflow:hidden}
#bfx-agency .ax-col__track{display:flex;flex-direction:column;animation:ax-up 70s linear infinite;will-change:transform}
#bfx-agency .ax-col[data-dir="down"] .ax-col__track{animation-name:ax-down;animation-duration:82s}
#bfx-agency .ax-wall--r .ax-col[data-dir="up"] .ax-col__track{animation-duration:76s}
#bfx-agency .ax-wall--r .ax-col[data-dir="down"] .ax-col__track{animation-duration:64s}
#bfx-agency .ax-col__set{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
@keyframes ax-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes ax-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
#bfx-agency .ax-tile{position:relative;aspect-ratio:var(--r);overflow:hidden;background:var(--card);outline:1px solid hsl(40 30% 96% / .06);outline-offset:-1px}
#bfx-agency .ax-tile img,#bfx-agency .ax-tile video{width:100%;height:100%;object-fit:cover}
/* fuori vista si ferma tutto */
#bfx-agency .ax-hh.is-off .ax-col__track,#bfx-agency .ax-hh.is-off .ax-marquee__track,#bfx-agency .ax-hh.is-off .ax-hh__rec{animation-play-state:paused}

/* ---------- Il titolo nel mirino ---------- */
#bfx-agency .ax-hh__copy{position:relative;z-index:3;display:grid;justify-items:center;width:100%;max-width:76rem;margin:0 auto;text-align:center;isolation:isolate}
#bfx-agency .ax-hh__copy::before{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:112%;height:150%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(closest-side,hsl(var(--bgh) / .95),hsl(var(--bgh) / .78) 52%,hsl(var(--bgh) / 0))}
#bfx-agency .ax-hh__stage{position:relative;padding:clamp(1.6rem,4vh,3rem) clamp(1.4rem,3.4vw,3.6rem)}
#bfx-agency .ax-hh__stage::after{
  content:"";position:absolute;z-index:6;inset:0;pointer-events:none;
  --vc:hsl(30 100% 62%);--vl:clamp(22px,2.6vw,38px);--vt:2px;
  background:
    linear-gradient(var(--vc),var(--vc)) 0 0/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 0 0/var(--vt) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 100% 0/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 100% 0/var(--vt) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 0 100%/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 0 100%/var(--vt) var(--vl),
    linear-gradient(var(--vc),var(--vc)) 100% 100%/var(--vl) var(--vt),linear-gradient(var(--vc),var(--vc)) 100% 100%/var(--vt) var(--vl);
  background-repeat:no-repeat;filter:drop-shadow(0 0 6px hsl(28 100% 55% / .55))
}
#bfx-agency .ax-hh__rec{position:absolute;z-index:7;top:clamp(14px,2.2vh,22px);left:clamp(14px,1.6vw,22px);width:9px;height:9px;border-radius:50%;background:var(--p);box-shadow:0 0 14px var(--p);animation:ax-blink 1.6s steps(1) infinite}
@keyframes ax-blink{50%{opacity:.15}}
#bfx-agency .ax-hh__title{font-size:clamp(3rem,min(7.3vw,13.5vh),8.8rem);line-height:.96;letter-spacing:-.055em}
#bfx-agency .ax-hh__title span{display:block;white-space:nowrap}
/* i due fasci che aprono il titolo dal centro: si muove solo il loro contenitore (transform) */
#bfx-agency .ax-hh__beam{position:absolute;z-index:6;top:4%;bottom:4%;width:50%;pointer-events:none}
#bfx-agency .ax-hh__beam--l{left:0}
#bfx-agency .ax-hh__beam--r{right:0}
#bfx-agency .ax-hh__beam i{position:absolute;top:0;bottom:0;width:2px;opacity:0;background:linear-gradient(180deg,transparent,hsl(30 100% 72%) 18%,#fff 50%,hsl(30 100% 72%) 82%,transparent);box-shadow:0 0 22px 3px hsl(26 100% 56% / .8)}
#bfx-agency .ax-hh__beam--l i{right:-1px}
#bfx-agency .ax-hh__beam--r i{left:-1px}
#bfx-agency .ax-hh__sub{max-width:40rem;margin-top:clamp(1rem,2.4vh,1.6rem);font-size:clamp(1.02rem,1.25vw,1.2rem);font-weight:300;line-height:1.6;color:var(--soft);text-wrap:balance}
#bfx-agency .ax-hh .ax-hero__ctas{margin-top:clamp(1.6rem,3.6vh,2.4rem)}

/* ---------- La fascia dei loghi ---------- */
#bfx-agency .ax-hh__logos{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2.5rem;margin-top:clamp(2rem,5vh,3.4rem);padding-top:1.5rem;padding-bottom:1.8rem}
#bfx-agency .ax-hh__logos::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--line)}
#bfx-agency .ax-hh__logos p{font-size:.92rem;line-height:1.3;color:var(--muted);white-space:nowrap}
#bfx-agency .ax-marquee{position:relative;overflow:hidden}
#bfx-agency .ax-marquee::before,#bfx-agency .ax-marquee::after{content:"";position:absolute;z-index:1;top:0;bottom:0;width:90px;pointer-events:none}
#bfx-agency .ax-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),hsl(var(--bgh) / 0))}
#bfx-agency .ax-marquee::after{right:0;background:linear-gradient(270deg,var(--bg),hsl(var(--bgh) / 0))}
#bfx-agency .ax-marquee__track{display:flex;width:max-content;align-items:center;animation:ax-marquee 40s linear infinite;will-change:transform}
#bfx-agency .ax-marquee:hover .ax-marquee__track{animation-play-state:paused}
#bfx-agency .ax-marquee__set{display:flex;align-items:center;gap:clamp(3rem,6vw,5.5rem);padding-right:clamp(3rem,6vw,5.5rem)}
#bfx-agency .ax-marquee img{height:24px;width:auto;opacity:.6}
#bfx-agency .ax-marquee img.is-tall{height:36px}
#bfx-agency .ax-marquee img.is-wide{height:20px}
@keyframes ax-marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- La regia d'apertura (una volta sola, parte quando il font è pronto) ---------- */
#bfx-agency.ax-live .ax-hh:not(.is-go) :is(.ax-hh__title,.ax-hh__in,.ax-wall,.ax-hh__rec){opacity:0}
#bfx-agency.ax-live .ax-hh:not(.is-go) .ax-hh__stage::after{opacity:0}
#bfx-agency.ax-live .ax-hh.is-go .ax-hh__title{animation:ax-hh-t 1.7s cubic-bezier(.87,0,.13,1) .15s backwards}
@keyframes ax-hh-t{from{clip-path:inset(-10% 50% -10% 50%);filter:blur(14px);letter-spacing:.01em}to{clip-path:inset(-10% 0 -10% 0);filter:blur(0);letter-spacing:-.055em}}
#bfx-agency.ax-live .ax-hh.is-go .ax-hh__beam--l{animation:ax-hh-bl 1.7s cubic-bezier(.87,0,.13,1) .15s both}
#bfx-agency.ax-live .ax-hh.is-go .ax-hh__beam--r{animation:ax-hh-br 1.7s cubic-bezier(.87,0,.13,1) .15s both}
#bfx-agency.ax-live .ax-hh.is-go .ax-hh__beam i{animation:ax-hh-bo 1.75s linear .15s both}
@keyframes ax-hh-bl{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@keyframes ax-hh-br{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}
@keyframes ax-hh-bo{0%,74%{opacity:1}100%{opacity:0}}
#bfx-agency.ax-live .ax-hh.is-go .ax-hh__stage::after{animation:ax-hh-vf .75s cubic-bezier(.3,1.45,.5,1) 1.4s backwards}
@keyframes ax-hh-vf{from{inset:-46px;opacity:0}}
#bfx-agency.ax-live .ax-hh.is-go .ax-hh__rec{animation:ax-hh-fade .6s ease 1.8s backwards,ax-blink 1.6s steps(1) 2.6s infinite}
@keyframes ax-hh-fade{from{opacity:0}}
#bfx-agency.ax-live .ax-hh.is-go .ax-hh__in{animation:ax-hh-up 1.1s var(--ease) calc(1.35s + var(--i,0) * .12s) backwards}
@keyframes ax-hh-up{from{opacity:0;transform:translate3d(0,24px,0)}}
#bfx-agency.ax-live .ax-hh.is-go .ax-wall--l{animation:ax-hh-wl 2.4s var(--ease) .1s backwards}
#bfx-agency.ax-live .ax-hh.is-go .ax-wall--r{animation:ax-hh-wr 2.4s var(--ease) .1s backwards}
@keyframes ax-hh-wl{from{opacity:0;transform:translate3d(-160px,0,0) rotateY(78deg)}}
@keyframes ax-hh-wr{from{opacity:0;transform:translate3d(160px,0,0) rotateY(-78deg)}}

/* ---------- Tablet e telefono: le pareti diventano una striscia sotto al titolo ---------- */
@media (max-width:1180px){
  #bfx-agency .ax-wall{width:clamp(220px,27vw,420px)}
}
@media (max-width:900px){
  #bfx-agency .ax-hh{justify-content:flex-start;padding-top:112px;min-height:0}
  #bfx-agency .ax-hh__copy{order:1}
  #bfx-agency .ax-hh__copy::before{width:130%}
  #bfx-agency .ax-hh__title{font-size:clamp(2.5rem,11vw,4.4rem)}
  #bfx-agency .ax-hh__stage{padding:1.6rem 1.2rem}
  #bfx-agency .ax-hh__stage::after{--vl:22px}
  #bfx-agency .ax-hall{position:relative;inset:auto;order:2;height:min(46vh,380px);margin-top:2.2rem;perspective:none;overflow:hidden}
  #bfx-agency .ax-wall{top:0;bottom:0;width:50%;gap:8px;transform:none!important}
  #bfx-agency .ax-wall--l{left:0;padding-right:4px}
  #bfx-agency .ax-wall--r{right:0;padding-left:4px}
  #bfx-agency .ax-wall--l::after,#bfx-agency .ax-wall--r::after{background:hsl(var(--bgh) / .38)}
  #bfx-agency .ax-col__set{gap:8px;padding-bottom:8px}
  #bfx-agency .ax-hall::before{height:22%}
  #bfx-agency .ax-hall::after{height:28%}
  #bfx-agency .ax-hh__logos{order:3;grid-template-columns:1fr;gap:1rem;margin-top:1rem;text-align:center}
}

/* ---------- Riduci movimento: tutto fermo e completo ---------- */
@media (prefers-reduced-motion:reduce){
  #bfx-agency .ax-col__track,#bfx-agency .ax-marquee__track,#bfx-agency .ax-hh__rec{animation:none!important}
  #bfx-agency .ax-marquee::before,#bfx-agency .ax-marquee::after{display:none}
  #bfx-agency .ax-marquee__track{flex-wrap:wrap;width:auto}
  #bfx-agency .ax-marquee__set[aria-hidden]{display:none}
  #bfx-agency .ax-marquee__set{flex-wrap:wrap;justify-content:center;gap:1.6rem 2.6rem;padding-right:0}
}

/* ==========================================================================
   v5 — problema prima dell'offerta, casi con i materiali, catalogo 3D,
   produzione come reel, grafici dei casi (eKò, newsletter ArSilicii)
   ========================================================================== */

/* ---------- CASI: punto di partenza e lavoro fatto ---------- */
#bfx-agency .ax-brief{display:grid;gap:1rem;width:100%}
#bfx-agency .ax-brief div{display:grid;gap:.25rem}
#bfx-agency .ax-brief dt{font:500 .98rem/1.3 'Jost',sans-serif;letter-spacing:-.01em;color:var(--fg)}
#bfx-agency .ax-brief dd{margin:0;font-weight:300;font-size:.98rem;line-height:1.6;color:var(--soft)}
#bfx-agency .ax-case{grid-template-areas:"main copy" "rail rail"}
#bfx-agency .ax-case--flip{grid-template-areas:"copy main" "rail rail"}
#bfx-agency .ax-case--flip.ax-case--book{grid-template-areas:"copy main" "book book" "rail rail"}
#bfx-agency .ax-head__logo{height:34px;width:auto;opacity:.9}

/* ---------- FASCIA DEI MATERIALI: si scorre, si trascina, le frecce ---------- */
#bfx-agency .ax-rail{grid-area:rail;position:relative;min-width:0;--rh:clamp(230px,24vw,320px)}
#bfx-agency .ax-rail__track{margin-right:calc((100vw - 100%) / -2);padding-right:var(--pad)!important;display:flex;gap:clamp(14px,1.4vw,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:2px;padding:4px 2px 18px;scrollbar-width:none;cursor:grab}
#bfx-agency .ax-rail__track::-webkit-scrollbar{display:none}
#bfx-agency .ax-rail__track.is-drag{cursor:grabbing;scroll-snap-type:none}
#bfx-agency .ax-rail__item{flex:0 0 auto;display:grid;gap:.75rem;align-content:start;scroll-snap-align:start;font-size:.86rem;line-height:1.45;color:var(--muted)}
#bfx-agency .ax-rail__item figcaption b{display:block;font:400 1.02rem/1.3 'Jost',sans-serif;color:var(--fg)}
#bfx-agency .ax-rail__media{position:relative;height:var(--rh);overflow:hidden;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-rail__media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)}
#bfx-agency .ax-rail__item:hover .ax-rail__media img{transform:scale(1.03)}
#bfx-agency .ax-rail__item--45 .ax-rail__media{aspect-ratio:4/5}
#bfx-agency .ax-rail__item--32 .ax-rail__media{aspect-ratio:3/2}
#bfx-agency .ax-rail__item--16 .ax-rail__media{aspect-ratio:16/9}
#bfx-agency .ax-rail__item--916 .ax-rail__media{aspect-ratio:9/16}
#bfx-agency .ax-rail__item--doc .ax-rail__media{aspect-ratio:760/1075;background:#fff}
#bfx-agency .ax-rail__item--post .ax-rail__media{aspect-ratio:3/4;background:#fff}
#bfx-agency .ax-rail__item--web{width:calc((var(--rh) - 32px) * 16 / 9)}
#bfx-agency .ax-rail__item--web .ax-browser{box-shadow:0 0 0 1px var(--line-2)}
#bfx-agency .ax-rail__nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.2rem}
#bfx-agency .ax-rail__nav button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .3s var(--ease-brand),background .3s var(--ease-brand),opacity .3s ease}
#bfx-agency .ax-rail__nav button:hover{background:hsl(22 95% 55% / .14);box-shadow:inset 0 0 0 1px hsl(22 95% 55% / .8)}
#bfx-agency .ax-rail__nav button[disabled]{opacity:.3;pointer-events:none}
#bfx-agency .ax-rail__nav svg{width:18px;height:18px;fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- IL CATALOGO OEMME: si sfoglia in 3D mentre si scorre ---------- */
#bfx-agency .ax-book{grid-area:book;position:relative;height:340vh;margin:clamp(1rem,3vh,2rem) 0}
#bfx-agency .ax-book__sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;gap:clamp(1.6rem,4vw,4rem)}
#bfx-agency .ax-book__title{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.12;letter-spacing:-.03em;margin-bottom:1.6rem}
#bfx-agency .ax-book__steps{display:grid}
#bfx-agency .ax-book__steps li{grid-area:1/1;font:300 clamp(1.1rem,1.5vw,1.3rem)/1.5 'Jost',sans-serif;color:var(--fg);opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s ease,transform .7s var(--ease)}
#bfx-agency .ax-book__steps li.is-on{opacity:1;transform:none}
#bfx-agency .ax-book__bar{position:relative;display:block;width:100%;max-width:18rem;height:2px;margin-top:1.8rem;border-radius:2px;background:var(--line-2);overflow:hidden}
#bfx-agency .ax-book__bar i{position:absolute;inset:0;background:var(--grad-x);transform-origin:left;transform:scaleX(var(--p,0))}
#bfx-agency .ax-book__stage{--S:clamp(150px,24vw,330px);position:relative;display:grid;place-items:center;height:calc(var(--S) * 1.5);perspective:2200px}
#bfx-agency .ax-book__stage::after{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:30%;background:radial-gradient(closest-side,hsl(22 95% 55% / .16),transparent);pointer-events:none;z-index:-1}
#bfx-agency .ax-book__obj{position:relative;width:calc(var(--S) * 2);height:var(--S);transform-style:preserve-3d;transform:rotateX(var(--rx,24deg)) rotateZ(var(--rz,-4deg)) translate3d(var(--tx,-25%),0,0);will-change:transform}
#bfx-agency .ax-book__base,#bfx-agency .ax-leaf{position:absolute;top:0;left:50%;width:50%;height:100%}
#bfx-agency .ax-book__base{box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px hsl(0 0% 100% / .06)}
#bfx-agency .ax-book__base img,#bfx-agency .ax-leaf img{display:block;width:100%;height:100%;object-fit:cover}
#bfx-agency .ax-leaf{transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(var(--a,0deg)) translateZ(calc(var(--z) * 1px));will-change:transform}
#bfx-agency .ax-leaf__f,#bfx-agency .ax-leaf__b{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#111}
#bfx-agency .ax-leaf__b{transform:rotateY(180deg)}
/* luce sulla pagina mentre gira: più scura a metà corsa */
#bfx-agency .ax-leaf__f::after,#bfx-agency .ax-leaf__b::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--sh,0)}
#bfx-agency .ax-leaf__f::after{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 60%,transparent)}
#bfx-agency .ax-leaf__b::after{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 60%,transparent)}
/* senza movimento: il catalogo resta aperto sulla prima doppia pagina */
#bfx-agency.ax-still .ax-book{height:auto}
#bfx-agency.ax-still .ax-book__sticky{position:relative;height:auto;padding:3rem 0}
#bfx-agency.ax-still .ax-book__steps li{grid-area:auto;opacity:1;transform:none;margin-bottom:.6rem}

/* ---------- UN SOLO TEAM: il reel della produzione ---------- */
#bfx-agency .ax-reel{max-width:1100px;margin:0 auto}
#bfx-agency .ax-reel__stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse at 50% 120%,hsl(22 95% 55% / .14),transparent 60%),var(--bg-deep);box-shadow:0 0 0 1px var(--line-2),0 50px 120px -50px #000}
#bfx-agency .ax-reel__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-brand)}
#bfx-agency .ax-reel__slide.is-on{opacity:1}
#bfx-agency .ax-reel__slide>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 9s linear}
#bfx-agency .ax-reel__slide.is-on>video{transform:none}
#bfx-agency .ax-reel__slide figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;gap:.2rem;padding:clamp(1.2rem,2.4vw,2rem);background:linear-gradient(180deg,transparent,hsl(218 54% 5% / .85));font-size:.95rem;color:var(--soft)}
#bfx-agency .ax-reel__slide figcaption b{font:400 clamp(1.3rem,2vw,1.7rem)/1.2 'Jost',sans-serif;letter-spacing:-.02em;color:var(--fg)}
#bfx-agency .ax-reel__slide--duo{display:grid;place-items:center;padding:6% 0 16%}
#bfx-agency .ax-reel__slide--duo .ax-phone{height:100%;width:auto;aspect-ratio:9/19}
#bfx-agency .ax-reel__slide--print{display:grid;place-items:center;padding:7% 6% 17%}
#bfx-agency .ax-print{display:grid;grid-template-columns:1fr 1fr;width:min(66%,620px);box-shadow:0 40px 80px -30px #000,0 0 0 1px hsl(0 0% 100% / .08);transform:rotate(-2deg)}
#bfx-agency .ax-print img{width:100%;height:auto}
#bfx-agency .ax-print__doc{position:absolute;right:9%;bottom:20%;width:min(19%,190px);height:auto;transform:rotate(5deg);box-shadow:0 30px 60px -20px #000,0 0 0 1px hsl(0 0% 100% / .1)}
#bfx-agency .ax-reel__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);margin-top:1.2rem}
#bfx-agency .ax-reel__tabs button{position:relative;display:block;padding:.9rem 0 .2rem;font:400 1.02rem/1.3 'Jost',sans-serif;color:var(--muted);text-align:left;transition:color .3s var(--ease-brand)}
#bfx-agency .ax-reel__tabs button:hover,#bfx-agency .ax-reel__tabs button[aria-selected="true"]{color:var(--fg)}
#bfx-agency .ax-reel__tabs button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--line-2)}
#bfx-agency .ax-reel__tabs i{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--grad-x);transform:scaleX(0);transform-origin:left}
#bfx-agency .ax-reel__tabs button.is-run i{animation:ax-prog var(--dur,8s) linear forwards}
#bfx-agency .ax-reel__tabs button.is-done i{transform:scaleX(1)}
#bfx-agency .ax-reel.is-paused .ax-reel__tabs button.is-run i{animation-play-state:paused}
@keyframes ax-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- GRAFICI DEI CASI ---------- */
#bfx-agency .ax-chart{max-width:1060px;margin:0 auto;padding:clamp(1.4rem,3vw,2.6rem);border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-chart__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem 2.4rem;margin-bottom:clamp(1.8rem,4vh,2.6rem)}
#bfx-agency .ax-chart__hero{display:grid;gap:.35rem}
#bfx-agency .ax-chart__hero b{font:300 clamp(3rem,6vw,4.8rem)/1 'Jost',sans-serif;letter-spacing:-.05em;color:hsl(30 96% 62%)}
#bfx-agency .ax-chart__hero>span{font-size:.95rem;color:var(--soft)}
#bfx-agency .ax-chart__kpis{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem}
#bfx-agency .ax-chart__kpis li{display:grid;gap:.2rem;max-width:13rem}
#bfx-agency .ax-chart__kpis b{font:400 1.7rem/1.1 'Jost',sans-serif;letter-spacing:-.03em;color:var(--fg)}
#bfx-agency .ax-chart__kpis li>span{font-size:.84rem;line-height:1.45;color:var(--muted)}
#bfx-agency .ax-chart>figcaption{margin-top:1.4rem}
/* eKò: due finestre su un asse di date */
#bfx-agency .ax-gantt{--name:5.4rem;--valw:3.6rem}
#bfx-agency .ax-gantt__plot{position:relative;margin-left:var(--name);margin-right:var(--valw);padding:2.2rem 0 .4rem;border-bottom:1px solid var(--line-2)}
#bfx-agency .ax-gantt__week{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
#bfx-agency .ax-gantt__overlap{position:absolute;top:0;bottom:0;background:hsl(30 96% 62% / .06);border-left:1px solid hsl(30 96% 62% / .3);border-right:1px solid hsl(30 96% 62% / .3)}
#bfx-agency .ax-gantt__overlap em{position:absolute;top:.5rem;left:.6rem;font-style:normal;font-size:.78rem;color:var(--soft);white-space:nowrap}
#bfx-agency .ax-gantt__row{position:relative;height:56px}
#bfx-agency .ax-gantt__name{position:absolute;right:calc(100% + 1rem);top:50%;transform:translateY(-50%);font-size:.92rem;color:var(--soft);white-space:nowrap}
#bfx-agency .ax-gantt__bar{position:absolute;top:50%;height:22px;margin-top:-11px;border-radius:4px;background:var(--p);transform-origin:left;cursor:default;outline-offset:3px;transition:filter .2s ease}
#bfx-agency .ax-gantt__bar.is-b{background:hsl(38 92% 60%)}
#bfx-agency .ax-gantt__bar:hover,#bfx-agency .ax-gantt__bar:focus-visible{filter:brightness(1.15)}
#bfx-agency .ax-gantt__val{position:absolute;top:50%;transform:translateY(-50%);margin-left:.7rem;font:400 1.35rem/1 'Jost',sans-serif;color:var(--fg)}
#bfx-agency .ax-gantt__axis{position:relative;height:1.8rem;margin-left:var(--name);margin-right:var(--valw);font-size:.78rem;color:var(--muted)}
#bfx-agency .ax-gantt__axis span{position:absolute;top:.5rem;transform:translateX(-50%);white-space:nowrap}
#bfx-agency .ax-gantt__axis span:first-child{transform:none}
#bfx-agency .ax-gantt__axis span:last-child{transform:translateX(-100%)}
/* newsletter: tre barre dalla stessa base */
#bfx-agency .ax-hbars{display:grid;gap:.9rem}
#bfx-agency .ax-hbars__row{display:grid;grid-template-columns:7rem minmax(0,1fr) 8.6rem;align-items:center;gap:1rem}
#bfx-agency .ax-hbars__name{font-size:.94rem;color:var(--soft)}
#bfx-agency .ax-hbars__lane{position:relative;height:22px}
#bfx-agency .ax-hbars__bar{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--p);transform-origin:left;cursor:default;outline-offset:3px;transition:filter .2s ease}
#bfx-agency .ax-hbars__bar:hover,#bfx-agency .ax-hbars__bar:focus-visible{filter:brightness(1.15)}
#bfx-agency .ax-hbars__val{font:400 1.35rem/1 'Jost',sans-serif;color:var(--fg);white-space:nowrap}
#bfx-agency .ax-hbars__val small{margin-left:.35rem;font:400 .82rem 'DM Sans',sans-serif;color:var(--muted)}
#bfx-agency .ax-logos2{display:flex;align-items:center;gap:1rem}
#bfx-agency .ax-logos2 figure{display:grid;justify-items:center;gap:.4rem;font-size:.78rem;color:var(--muted)}
#bfx-agency .ax-logos2 span{display:grid;place-items:center;height:56px;padding:0 .9rem;border-radius:10px}
#bfx-agency .ax-logos2__old{background:hsl(218 54% 8%);box-shadow:inset 0 0 0 1px var(--line-2)}
#bfx-agency .ax-logos2__old img{height:40px;width:auto}
#bfx-agency .ax-logos2__new{background:hsl(218 54% 8%);box-shadow:inset 0 0 0 1px var(--line-2)}
#bfx-agency .ax-logos2__new img{height:22px;width:auto}
#bfx-agency .ax-logos2>svg{width:18px;height:18px;fill:none;stroke:var(--a);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* le barre crescono dalla base una volta, quando il grafico arriva */
#bfx-agency.ax-live .ax-gantt__bar,#bfx-agency.ax-live .ax-hbars__bar{transform:scaleX(0);transition:transform 1.5s var(--ease) calc(.3s + var(--k,0) * .22s),filter .2s ease}
#bfx-agency.ax-live .ax-gantt__val,#bfx-agency.ax-live .ax-gantt__overlap,#bfx-agency.ax-live .ax-hbars__val{opacity:0;transition:opacity .7s ease calc(1s + var(--k,0) * .22s)}
#bfx-agency.ax-live .is-drawn .ax-gantt__bar,#bfx-agency.ax-live .is-drawn .ax-hbars__bar{transform:none}
#bfx-agency.ax-live .is-drawn .ax-gantt__val,#bfx-agency.ax-live .is-drawn .ax-gantt__overlap,#bfx-agency.ax-live .is-drawn .ax-hbars__val{opacity:1}
/* tooltip: il valore davanti, l'etichetta dietro */
#bfx-agency .ax-tip{position:fixed;z-index:9000;display:grid;gap:.15rem;max-width:16rem;padding:.65rem .8rem;border-radius:10px;background:hsl(218 50% 6% / .96);box-shadow:0 0 0 1px var(--line-2),0 16px 40px -12px #000;font-size:.82rem;line-height:1.4;color:var(--soft);pointer-events:none;opacity:0;transform:translate3d(0,4px,0);transition:opacity .15s ease,transform .2s var(--ease-brand)}
#bfx-agency .ax-tip.is-on{opacity:1;transform:none}
#bfx-agency .ax-tip b{font:500 1rem/1.2 'DM Sans',sans-serif;color:var(--fg)}
#bfx-agency .ax-tip span:first-child{display:flex;align-items:center;gap:.45rem}
#bfx-agency .ax-tip span:first-child::before{content:"";width:12px;height:2px;border-radius:2px;background:var(--tc,var(--p))}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  #bfx-agency .ax-case,#bfx-agency .ax-case--flip,#bfx-agency .ax-case--solo{grid-template-areas:"main" "copy" "rail"}
  #bfx-agency .ax-case--flip.ax-case--book{grid-template-areas:"main" "copy" "book" "rail"}
  #bfx-agency .ax-book{height:300vh}
  #bfx-agency .ax-book__sticky{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:2rem}
  #bfx-agency .ax-book__copy{order:2;min-height:9.5rem}
  #bfx-agency .ax-book__stage{--S:42vw;height:calc(var(--S) * 1.3)}
  #bfx-agency .ax-book__title{font-size:1.4rem;margin-bottom:1rem}
  #bfx-agency .ax-rail{--rh:220px}
  #bfx-agency .ax-reel__stage{aspect-ratio:4/5}
  #bfx-agency .ax-reel__slide--print{padding:10% 6% 30%}
  #bfx-agency .ax-print{width:88%}
  #bfx-agency .ax-print__doc{right:4%;bottom:30%;width:28%}
  #bfx-agency .ax-reel__slide--duo{padding:8% 0 30%}
  #bfx-agency .ax-reel__tabs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.4rem}
  #bfx-agency .ax-gantt{--name:3.8rem;--valw:2.8rem}
  #bfx-agency .ax-gantt__overlap em{display:none}
  #bfx-agency .ax-gantt__axis span:nth-child(2),#bfx-agency .ax-gantt__axis span:nth-child(4){display:none}
  #bfx-agency .ax-hbars__row{grid-template-columns:5.6rem minmax(0,1fr);row-gap:.35rem}
  #bfx-agency .ax-hbars__val{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  #bfx-agency .ax-reel__slide>video{transform:none!important}
}
#bfx-agency .ax-odo__pre{white-space:pre}

/* ---------- grafici dentro il percorso a schede della home (versione compatta) ---------- */
#bfx-agency .ax-chart--mini{width:100%;max-width:none;margin:0;padding:clamp(1rem,2.4vw,2rem);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),0 30px 70px -30px #000}
#bfx-agency .ax-chart--mini .ax-chart__head{align-items:flex-start;flex-wrap:nowrap;margin-bottom:clamp(1rem,2.4vw,1.8rem)}
#bfx-agency .ax-chart--mini .ax-chart__hero b{font-size:clamp(2.2rem,4vw,3.4rem)}
#bfx-agency .ax-chart--mini .ax-chart__hero>span{font-size:.88rem}
#bfx-agency .ax-chart__logo{flex:none;height:22px;width:auto;opacity:.85}
#bfx-agency .ax-chart__logo[src*="eko"]{height:30px}
#bfx-agency .ax-chart--mini .ax-gantt{--name:4.4rem;--valw:2.8rem}
#bfx-agency .ax-chart--mini .ax-gantt__row{height:46px}
#bfx-agency .ax-chart--mini .ax-gantt__plot{padding-top:1.6rem}
#bfx-agency .ax-chart--mini .ax-hbars__row{grid-template-columns:6.2rem minmax(0,1fr) 7.6rem}
#bfx-agency .ax-tour__layer.is-on{pointer-events:auto}
@media (max-width:900px){
  #bfx-agency .ax-chart--mini{padding:.8rem .9rem}
  #bfx-agency .ax-chart--mini .ax-chart__head{margin-bottom:.6rem}
  #bfx-agency .ax-chart--mini .ax-chart__hero b{font-size:1.8rem}
  #bfx-agency .ax-chart--mini .ax-chart__hero>span{font-size:.74rem}
  #bfx-agency .ax-chart__logo{height:16px}
  #bfx-agency .ax-chart__logo[src*="eko"]{height:22px}
  #bfx-agency .ax-chart--mini .ax-gantt{--name:3.2rem;--valw:2.2rem}
  #bfx-agency .ax-chart--mini .ax-gantt__row{height:32px}
  #bfx-agency .ax-chart--mini .ax-gantt__plot{padding-top:.9rem}
  #bfx-agency .ax-chart--mini .ax-gantt__bar{height:16px;margin-top:-8px}
  #bfx-agency .ax-chart--mini .ax-gantt__val{font-size:1rem;margin-left:.4rem}
  #bfx-agency .ax-chart--mini .ax-gantt__name{font-size:.78rem;right:calc(100% + .6rem)}
  #bfx-agency .ax-chart--mini .ax-gantt__axis{height:1.4rem;font-size:.68rem}
  #bfx-agency .ax-chart--mini .ax-hbars{gap:.45rem}
  #bfx-agency .ax-chart--mini .ax-hbars__row{grid-template-columns:4.6rem minmax(0,1fr) 3.6rem;gap:.6rem}
  #bfx-agency .ax-chart--mini .ax-hbars__val{grid-column:auto;font-size:1rem}
  #bfx-agency .ax-chart--mini .ax-hbars__val small{display:none}
  #bfx-agency .ax-chart--mini .ax-hbars__name{font-size:.78rem}
  #bfx-agency .ax-chart--mini .ax-hbars__lane{height:16px}
}

/* ---------- PIANI EDITORIALI: scegli cosa vuoi far capire, guarda l'esempio ---------- */
#bfx-agency .ax-ex{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:start}
#bfx-agency .ax-ex__list{display:grid;border-top:1px solid var(--line)}
#bfx-agency .ax-ex__list button{position:relative;display:grid;gap:.25rem;padding:1.05rem 1rem 1.05rem 1.4rem;border-bottom:1px solid var(--line);text-align:left;transition:background .35s var(--ease-brand)}
#bfx-agency .ax-ex__list button::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:2px;border-radius:2px;background:var(--grad);transform:scaleY(0);transition:transform .5s var(--ease)}
#bfx-agency .ax-ex__list button b{font:400 clamp(1.05rem,1.35vw,1.2rem)/1.3 'Jost',sans-serif;letter-spacing:-.01em;color:var(--soft);transition:color .3s ease}
#bfx-agency .ax-ex__list button span{font-size:.84rem;color:var(--muted)}
#bfx-agency .ax-ex__list button:hover b{color:var(--fg)}
#bfx-agency .ax-ex__list button[aria-selected="true"]{background:linear-gradient(90deg,hsl(22 95% 55% / .08),transparent 70%)}
#bfx-agency .ax-ex__list button[aria-selected="true"]::before{transform:scaleY(1)}
#bfx-agency .ax-ex__list button[aria-selected="true"] b{color:var(--fg)}
#bfx-agency .ax-ex__list button[aria-selected="true"] span{color:hsl(30 96% 64%)}
#bfx-agency .ax-ex__stage{position:sticky;top:110px;display:grid;padding:clamp(1.2rem,2.4vw,2rem);border-radius:20px;background:radial-gradient(ellipse at 50% 0%,hsl(22 95% 55% / .08),transparent 60%),var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-ex__panel{grid-area:1/1;display:grid;gap:1.4rem;align-content:start}
#bfx-agency .ax-ex__panel[hidden]{display:grid!important;visibility:hidden;opacity:0;pointer-events:none}
#bfx-agency .ax-ex__panel{opacity:1;transition:opacity .5s var(--ease-brand),visibility 0s}
#bfx-agency .ax-ex__panel.is-on .ax-ex__media>*{animation:ax-ex-in .7s var(--ease) both}
@keyframes ax-ex-in{from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}}
#bfx-agency .ax-ex__media{display:grid;place-items:center;height:clamp(300px,34vw,440px);border-radius:14px;background:var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;padding:clamp(14px,2vw,24px)}
#bfx-agency .ax-ex__media .ax-phone{height:100%;width:auto;aspect-ratio:9/19}
#bfx-agency .ax-ex__tall{position:relative;height:100%;aspect-ratio:4/5;overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px var(--line-2)}
#bfx-agency .ax-ex__tall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bfx-agency .ax-ex__post{height:100%;width:auto;max-width:100%}
#bfx-agency .ax-ex__post img{height:100%;width:auto;max-width:100%;object-fit:contain}
#bfx-agency .ax-ex__media--web .ax-browser,#bfx-agency .ax-ex__media--film .ax-film{width:100%}
#bfx-agency .ax-ex__shoot{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:10px;width:100%;height:100%}
#bfx-agency .ax-ex__shoot img{width:100%;height:100%;object-fit:cover;border-radius:10px}
#bfx-agency .ax-ex__shoot img:first-child{grid-row:span 2}
#bfx-agency .ax-ex__copy{display:grid;gap:.5rem}
#bfx-agency .ax-ex__copy h3{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.15;letter-spacing:-.025em}
#bfx-agency .ax-ex__copy p{font-weight:300;font-size:1.02rem;line-height:1.6;color:var(--soft)}
#bfx-agency .ax-ex__copy span{font-size:.88rem;color:hsl(30 96% 64%)}
/* rubriche: la domanda del cliente prima dell'esempio */
#bfx-agency .ax-rows2 .ax-ask{font:400 1.08rem/1.35 'Jost',sans-serif;color:hsl(30 96% 64%)}
@media (max-width:900px){
  #bfx-agency .ax-ex{grid-template-columns:1fr;gap:1.2rem}
  #bfx-agency .ax-ex__list{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x proximity;border-top:0;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) .4rem;scrollbar-width:none}
  #bfx-agency .ax-ex__list::-webkit-scrollbar{display:none}
  #bfx-agency .ax-ex__list button{flex:0 0 auto;max-width:15rem;scroll-snap-align:start;padding:.75rem .95rem;border:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2)}
  #bfx-agency .ax-ex__list button::before{display:none}
  #bfx-agency .ax-ex__list button[aria-selected="true"]{box-shadow:inset 0 0 0 1px hsl(22 95% 55% / .85)}
  #bfx-agency .ax-ex__list button b{font-size:.98rem}
  #bfx-agency .ax-ex__stage{position:relative;top:auto}
  #bfx-agency .ax-ex__media{height:min(80vw,380px)}
}

/* ---------- grafici dei risultati in apertura (Adv, Outreach) ---------- */
#bfx-agency .ax-chart--hero{position:relative;z-index:2;margin-top:clamp(3.6rem,8vh,5.2rem);text-align:left;box-shadow:inset 0 0 0 1px var(--line-2),0 50px 120px -50px #000}
#bfx-agency .ax-chart__label{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem;font-size:.9rem;color:var(--soft)}
#bfx-agency .ax-chart__label img{height:26px;width:auto;opacity:.9}
#bfx-agency .ax-chart__label img[src*="eko"]{height:32px}
#bfx-agency .ax-chart__title{margin-bottom:1.6rem;font-size:clamp(1.25rem,1.7vw,1.45rem);line-height:1.2;letter-spacing:-.02em}
#bfx-agency .ax-charts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);align-items:stretch}
#bfx-agency .ax-charts2 .ax-chart{max-width:none;margin:0;display:grid;align-content:start}
#bfx-agency .ax-charts2 .ax-chart>figcaption{margin-top:auto;padding-top:1.4rem}
/* quota sul totale: una barra sola, due segmenti separati da uno spazio */
#bfx-agency .ax-share{display:grid;gap:1.2rem}
#bfx-agency .ax-share__bar{display:flex;gap:2px;height:24px}
#bfx-agency .ax-share__seg{display:block;height:100%;background:var(--p);cursor:default;outline-offset:3px;transition:filter .2s ease}
#bfx-agency .ax-share__seg:first-child{border-radius:4px 0 0 4px}
#bfx-agency .ax-share__seg:last-child{border-radius:0 4px 4px 0}
#bfx-agency .ax-share__seg.is-b,#bfx-agency .ax-hbars__bar.is-b{background:hsl(38 92% 60%)}
#bfx-agency .ax-share__seg:hover,#bfx-agency .ax-share__seg:focus-visible{filter:brightness(1.15)}
#bfx-agency .ax-share__legend{display:flex;flex-wrap:wrap;gap:.8rem 2.2rem}
#bfx-agency .ax-share__legend li{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:.55rem}
#bfx-agency .ax-share__legend i{grid-row:span 2;align-self:center;width:12px;height:12px;border-radius:3px;background:var(--p)}
#bfx-agency .ax-share__legend i.is-b{background:hsl(38 92% 60%)}
#bfx-agency .ax-share__legend b{font:300 2.2rem/1 'Jost',sans-serif;letter-spacing:-.04em;color:var(--fg)}
#bfx-agency .ax-share__legend span{grid-column:2;font-size:.86rem;color:var(--muted)}
#bfx-agency.ax-live .ax-share__bar{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s var(--ease) .3s}
#bfx-agency.ax-live .is-drawn .ax-share__bar{clip-path:inset(0 0 0 0)}
#bfx-agency .ax-hbars--rate .ax-hbars__row{grid-template-columns:4.6rem minmax(0,1fr) 5.4rem}
@media (max-width:900px){
  #bfx-agency .ax-charts2{grid-template-columns:1fr}
  #bfx-agency .ax-chart--hero .ax-chart__head{flex-direction:column;align-items:flex-start}
  #bfx-agency .ax-hbars--rate .ax-hbars__row{grid-template-columns:4.2rem minmax(0,1fr) 4.4rem}
  #bfx-agency .ax-hbars--rate .ax-hbars__val{grid-column:auto}
}

/* ==========================================================================
   I RISULTATI DI eKò — ogni punto è un contatto
   L'Italia disegnata con 315 punti, l'estero con 83 punti su un globo che
   ruota. Scorrendo il tempo va dal 29 giugno al 26 luglio e i punti si
   accendono. Disegno su canvas; il JS lavora solo mentre la sezione è in vista.
   ========================================================================== */
#bfx-agency .ax-geo{position:relative;height:400vh;border-top:1px solid var(--line)}
#bfx-agency .ax-geo__sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;gap:clamp(1rem,3vw,3rem);max-width:1360px;margin:0 auto;padding:0 var(--pad);overflow:hidden}
#bfx-agency .ax-geo__sticky::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 55% 55% at 66% 55%,hsl(218 70% 30% / .25),transparent 70%)}
#bfx-agency .ax-geo__copy{position:relative;z-index:2;display:grid;gap:1.2rem;align-content:center}
#bfx-agency .ax-geo__copy .ax-chart__label{margin-bottom:0}
#bfx-agency .ax-geo__title{font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:1;letter-spacing:-.04em}
#bfx-agency .ax-geo__title b{display:block;font:200 clamp(4rem,8vw,7.4rem)/.9 'Jost',sans-serif;letter-spacing:-.06em;color:hsl(30 96% 62%);font-variant-numeric:tabular-nums}
#bfx-agency .ax-geo__legend{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;font-size:.95rem;color:var(--soft)}
#bfx-agency .ax-geo__legend li{display:flex;align-items:center;gap:.55rem}
#bfx-agency .ax-geo__legend i{width:10px;height:10px;border-radius:50%;background:hsl(24 96% 58%);box-shadow:0 0 10px hsl(24 96% 58% / .7)}
#bfx-agency .ax-geo__legend i.is-b{background:hsl(42 96% 64%);box-shadow:0 0 10px hsl(42 96% 64% / .7)}
#bfx-agency .ax-geo__legend b{min-width:2.4ch;font:400 1.35rem/1 'Jost',sans-serif;color:var(--fg);font-variant-numeric:tabular-nums}
#bfx-agency .ax-geo__steps{display:grid;min-height:4.6em}
#bfx-agency .ax-geo__steps li{grid-area:1/1;font:300 clamp(1.1rem,1.5vw,1.32rem)/1.45 'Jost',sans-serif;color:var(--fg);opacity:0;transform:translate3d(0,10px,0);transition:opacity .45s ease,transform .6s var(--ease)}
#bfx-agency .ax-geo__steps li.is-on{opacity:1;transform:none}
#bfx-agency .ax-geo__time{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;max-width:24rem;font-size:.8rem;color:var(--muted)}
#bfx-agency .ax-geo__time .ax-book__bar{margin:0;max-width:none}
#bfx-agency .ax-geo__date{min-width:4.2em;padding:.28rem .6rem;border-radius:999px;box-shadow:inset 0 0 0 1px hsl(30 96% 62% / .6);font-weight:500;color:var(--fg);text-align:center}
#bfx-agency .ax-geo__copy .ax-note{max-width:26rem;font-size:.8rem}
#bfx-agency .ax-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* la scena */
#bfx-agency .ax-geo__scene{position:relative;height:min(76vh,700px)}
#bfx-agency .ax-geo__scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#bfx-agency .ax-geo__hit{position:absolute;border-radius:50%;cursor:default;outline-offset:6px}
#bfx-agency .ax-geo__hit.is-it{border-radius:12px}
#bfx-agency .ax-geo__tag{position:absolute;transform:translateX(-50%);display:flex;align-items:baseline;gap:.5rem;font-size:.95rem;color:var(--soft);white-space:nowrap;pointer-events:none}
#bfx-agency .ax-geo__tag b{font:300 1.9rem/1 'Jost',sans-serif;letter-spacing:-.03em;color:var(--fg);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  #bfx-agency .ax-geo{height:360vh}
  #bfx-agency .ax-geo__sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding-top:96px;gap:.4rem}
  #bfx-agency .ax-geo__copy{gap:.6rem}
  #bfx-agency .ax-geo__title{font-size:1.5rem}
  #bfx-agency .ax-geo__title b{font-size:3.4rem}
  #bfx-agency .ax-geo__steps{min-height:4.4em}
  #bfx-agency .ax-geo__steps li{font-size:1rem}
  #bfx-agency .ax-geo__copy .ax-note,#bfx-agency .ax-geo__legend{display:none}
  #bfx-agency .ax-geo__scene{height:auto;min-height:46vh}
  #bfx-agency .ax-geo__tag{font-size:.8rem}
  #bfx-agency .ax-geo__tag b{font-size:1.3rem}
}
#bfx-agency.ax-still .ax-geo{height:auto}
#bfx-agency.ax-still .ax-geo__sticky{position:relative;height:auto;min-height:100vh}

/* ==========================================================================
   v6 — Agency come braccio operativo di B2B Effect
   problema → intervento → risultato, il sistema, anteprime dei casi
   ========================================================================== */

/* ---------- mappa Italia → estero, versione compatta dentro il percorso ---------- */
#bfx-agency .ax-geo--mini{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;padding:clamp(.8rem,1.6vw,1.4rem);border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2)}
#bfx-agency .ax-geo--mini .ax-geo__scene{height:auto;min-height:0}
#bfx-agency .ax-geo__mini-n{font-size:.92rem;color:var(--soft)}
#bfx-agency .ax-geo__mini-n b{margin-right:.4rem;font:300 clamp(2rem,3.4vw,2.8rem)/1 'Jost',sans-serif;letter-spacing:-.04em;color:hsl(30 96% 62%)}
#bfx-agency .ax-geo--mini .ax-geo__tag{font-size:.82rem}
#bfx-agency .ax-geo--mini .ax-geo__tag b{font-size:1.35rem}

/* ---------- newsletter: aperture e clic, due numeri grandi ---------- */
#bfx-agency .ax-chart__duo{display:flex;flex-wrap:wrap;gap:.8rem 2.4rem}

/* ---------- casi studio: anteprime problema → intervento → risultato ---------- */
#bfx-agency .ax-case-card .ax-card__in{gap:1rem}
#bfx-agency .ax-case-card__logo{height:22px;width:auto;align-self:flex-start;opacity:.9}
#bfx-agency .ax-case-card__logo.is-tall{height:32px}
#bfx-agency .ax-case-card__logo.is-wide{height:17px}
#bfx-agency .ax-brief--sm{gap:.7rem}
#bfx-agency .ax-brief--sm dt{font-size:.9rem}
#bfx-agency .ax-brief--sm dd{font-size:.9rem;line-height:1.5}
#bfx-agency .ax-case-card .ax-fact{padding-top:.9rem}
#bfx-agency .ax-case-card .ax-fact b{font-size:clamp(2rem,3vw,2.6rem)}
#bfx-agency .ax-case-card .ax-more{margin-top:auto}

@media (max-width:900px){
}

/* ---------- Adv: fila di indicatori della campagna ---------- */
#bfx-agency .ax-kpirow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1rem,2.6vw,2.4rem);margin-bottom:clamp(1.8rem,4vh,2.6rem)}
#bfx-agency .ax-kpirow li{display:grid;gap:.4rem;align-content:start;padding-top:1.1rem;border-top:1px solid var(--line-2);position:relative}
#bfx-agency .ax-kpirow li::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--grad-x)}
#bfx-agency .ax-kpirow b{font:300 clamp(2rem,3.2vw,2.8rem)/1 'Jost',sans-serif;letter-spacing:-.04em;color:var(--fg)}
#bfx-agency .ax-kpirow b.is-odo{color:hsl(30 96% 62%)}
#bfx-agency .ax-kpirow li>span{font-size:.86rem;color:var(--muted)}
#bfx-agency .ax-kpis--8{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.8rem}
@media (max-width:900px){
  #bfx-agency .ax-kpirow{grid-template-columns:1fr 1fr;row-gap:1.4rem}
}

/* ---------- Outreach: aperture e clic in grande, ogni punto un'email ---------- */
#bfx-agency .ax-mail__big{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem}
#bfx-agency .ax-mail__big p{display:grid;gap:.3rem}
#bfx-agency .ax-mail__big b{font:200 clamp(3.4rem,6.4vw,6rem)/.9 'Jost',sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:hsl(26 96% 60%)}
#bfx-agency .ax-mail__big p+p b{color:hsl(42 98% 64%)}
#bfx-agency .ax-mail__big span{font-size:.95rem;color:var(--soft)}
#bfx-agency .ax-mail__legend i.is-d{background:hsl(215 40% 85% / .45);box-shadow:none}
#bfx-agency .ax-mail .ax-book__bar{max-width:24rem}
@media (max-width:900px){
  #bfx-agency .ax-mail__big b{font-size:2.8rem}
  #bfx-agency .ax-mail .ax-geo__legend{display:flex;font-size:.8rem;gap:.4rem 1rem}
}

/* ---------- anteprime dei casi: l'immagine sempre nella sua cornice ---------- */
#bfx-agency .ax-case-card .ax-media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:10px;background:var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-case-card .ax-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)}
#bfx-agency .ax-case-card:hover .ax-media img{transform:scale(1.04)}

/* ---------- un mese di piano: quattro settimane, due uscite ciascuna ---------- */
#bfx-agency .ax-cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
#bfx-agency .ax-cal__week{display:grid;gap:.7rem;align-content:start;padding:1rem;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
#bfx-agency .ax-cal__wk{font:400 1.05rem/1.2 'Jost',sans-serif;color:var(--fg)}
#bfx-agency .ax-cal__post{display:grid;gap:.2rem;padding:.75rem .85rem;border-radius:11px;background:var(--bg-deep);box-shadow:inset 3px 0 0 var(--cc,var(--p));font-size:.86rem;line-height:1.4;color:var(--soft)}
#bfx-agency .ax-cal__post b{font-weight:500;font-size:.78rem;color:var(--muted)}
#bfx-agency .ax-cal__post span{font:400 .98rem/1.25 'Jost',sans-serif;color:var(--fg)}
#bfx-agency .ax-cal__post[style*="--c:1"],#bfx-agency .ax-cal__post[style*="--c:5"]{--cc:hsl(38 92% 60%)}
#bfx-agency .ax-cal__post[style*="--c:2"],#bfx-agency .ax-cal__post[style*="--c:6"]{--cc:hsl(205 60% 66%)}
#bfx-agency .ax-cal__post[style*="--c:3"],#bfx-agency .ax-cal__post[style*="--c:7"]{--cc:hsl(40 30% 90%)}
@media (max-width:900px){
  #bfx-agency .ax-cal{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  #bfx-agency .ax-cal{grid-template-columns:1fr}
}
@media (max-width:1100px){ #bfx-agency .ax-kpis--8{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ #bfx-agency .ax-kpis--8{grid-template-columns:1fr} }

/* ==========================================================================
   v7 — revisione di Davide (16/10/2026)
   apertura su tre righe brevi, sezione «un unico team» senza schema
   ========================================================================== */

/* apertura: tre righe brevi, una per beneficio, sempre senza andare a capo */
#bfx-agency .ax-hh__title--trio{font-size:clamp(2.6rem,min(6.2vw,10.4vh),7.2rem);line-height:.98}

/* un unico team: resta solo la frase, quindi niente spazio per uno schema sotto */
#bfx-agency #sistema .ax-head{margin-bottom:0}

@media (max-width:900px){
  #bfx-agency .ax-hh__title--trio{font-size:clamp(2.3rem,10.4vw,4.4rem)}
}
/* il bottone dell'apertura ha un testo lungo: sul telefono va su due righe
   invece di allargare la colonna e tagliare il sottotitolo */
@media (max-width:560px){
  #bfx-agency .ax-hh .ax-btn{max-width:100%;white-space:normal;text-wrap:balance;text-align:center;line-height:1.45;padding:.85rem 1.5rem}
  #bfx-agency .ax-hh .ax-btn svg{flex-shrink:0}
}

/* ---------- LE SFIDE → COME LO RISOLVIAMO: una coppia = un blocco ----------
   a sinistra la frase del cliente su fondo più scuro, a destra la soluzione
   più luminosa; la freccia sta sulla giuntura. Tutto resta visibile: all'arrivo
   compare la freccia ed entra la soluzione, una volta sola. */
#bfx-agency .ax-pairs__legend,#bfx-agency .ax-pair .ax-card__in{display:grid;grid-template-columns:minmax(0,44fr) 0 minmax(0,56fr)}
#bfx-agency .ax-pairs__legend{max-width:var(--max);margin:0 auto .9rem;padding:0 1px}
#bfx-agency .ax-pairs__legend p{padding:0 clamp(1.4rem,2.8vw,2.4rem);font-size:1rem;color:var(--muted)}
#bfx-agency .ax-pairs__legend p:last-child{padding-left:clamp(2.4rem,3.8vw,3.4rem);color:hsl(30 96% 64%)}
#bfx-agency .ax-pairs__legend span{visibility:hidden}
#bfx-agency .ax-pairs{display:grid;gap:14px;max-width:var(--max);margin:0 auto}
#bfx-agency .ax-pair .ax-card__in{padding:0;gap:0;background:var(--card)}
#bfx-agency .ax-pair__pb{display:flex;align-items:center;padding:clamp(1.5rem,2.8vw,2.3rem) calc(clamp(1.4rem,2.8vw,2.4rem) + 1.4rem) clamp(1.5rem,2.8vw,2.3rem) clamp(1.4rem,2.8vw,2.4rem);background:var(--bg-deep);box-shadow:inset -1px 0 0 var(--line)}
#bfx-agency .ax-pair__pb q{font:300 clamp(1.25rem,1.9vw,1.7rem)/1.3 'Jost',sans-serif;letter-spacing:-.02em;color:hsl(40 30% 96% / .86);text-wrap:balance}
#bfx-agency .ax-pair__go{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:0}
#bfx-agency .ax-pair__go i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad-x);box-shadow:0 0 0 6px var(--card),0 10px 30px -8px hsl(22 95% 55% / .8)}
#bfx-agency .ax-pair__go svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#bfx-agency .ax-pair__fix{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;gap:.55rem 1rem;padding:clamp(1.5rem,2.8vw,2.3rem) clamp(1.4rem,2.8vw,2.4rem) clamp(1.5rem,2.8vw,2.3rem) clamp(2.4rem,3.8vw,3.4rem);background:radial-gradient(ellipse 70% 120% at 0% 50%,hsl(22 95% 55% / .11),transparent 70%)}
#bfx-agency .ax-pair__ico{grid-row:1;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:hsl(22 95% 55% / .1);box-shadow:inset 0 0 0 1px hsl(22 95% 55% / .35)}
#bfx-agency .ax-pair__ico svg{width:21px;height:21px;fill:none;stroke:hsl(30 96% 64%);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#bfx-agency .ax-pair__fix h3{grid-row:1;align-self:center;font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.15}
#bfx-agency .ax-pair__fix p,#bfx-agency .ax-pair__fix .ax-more{grid-column:1 / -1}
#bfx-agency .ax-pair__fix p{max-width:38rem;font-weight:300;font-size:.96rem;line-height:1.6;color:var(--soft)}
#bfx-agency .ax-pair__fix .ax-more{justify-self:start;margin-top:.15rem;padding-top:0;font-size:.92rem}
/* tutto il blocco porta alla pagina del servizio */
/* (la regola generale .ax-card__in>* rende "relative" la metà della soluzione:
   va sciolta, altrimenti la copertura del link si ferma lì e la frase non è cliccabile) */
#bfx-agency .ax-pair .ax-pair__fix{position:static}
#bfx-agency .ax-pair__fix>:not(.ax-pair__link){position:relative}
#bfx-agency .ax-pair__link::after{content:"";position:absolute;inset:0;z-index:3}
#bfx-agency .ax-pair__link:focus-visible{outline:none}
#bfx-agency .ax-pair:has(.ax-pair__link:focus-visible){outline:2px solid hsl(30 96% 64%);outline-offset:3px}

/* entrata: la frase c'è già, la freccia compare, poi entra la soluzione */
#bfx-agency.ax-live .ax-pair__go i{opacity:0;transform:scale(.5);transition:opacity .4s ease .1s,transform .7s cubic-bezier(.3,1.5,.5,1) .1s}
#bfx-agency.ax-live .ax-pair__fix>*{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .7s var(--ease) .35s,transform .9s var(--ease) .35s}
#bfx-agency.ax-live .ax-pair.is-lit .ax-pair__go i,#bfx-agency.ax-live .ax-pair.is-lit .ax-pair__fix>*{opacity:1;transform:none}

/* telefono e tablet stretto: il problema sopra, la freccia sulla giuntura, la soluzione sotto */
@media (max-width:760px){
  #bfx-agency .ax-pairs__legend,#bfx-agency .ax-pair .ax-card__in{grid-template-columns:minmax(0,1fr)}
  #bfx-agency .ax-pairs__legend{display:flex;justify-content:center;align-items:center;gap:.6rem;margin-bottom:1.1rem;text-align:center}
  #bfx-agency .ax-pairs__legend p,#bfx-agency .ax-pairs__legend p:last-child{padding:0;font-size:.95rem}
  #bfx-agency .ax-pairs__legend span{visibility:visible}
  #bfx-agency .ax-pairs__legend svg{display:block;width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #bfx-agency .ax-pair__pb{padding:1.4rem 1.3rem 1.9rem;box-shadow:inset 0 -1px 0 var(--line)}
  #bfx-agency .ax-pair__go{width:auto;height:0}
  #bfx-agency .ax-pair__go i{width:42px;height:42px}
  #bfx-agency .ax-pair__go svg{transform:rotate(90deg)}
  #bfx-agency .ax-pair__fix{padding:2.4rem 1.3rem 1.5rem;background:radial-gradient(ellipse 90% 70% at 50% 0%,hsl(22 95% 55% / .11),transparent 70%)}
  #bfx-agency.ax-live .ax-pair__fix>*{transform:translate3d(0,10px,0)}
}
@media (max-width:420px){
  #bfx-agency .ax-pairs__legend{flex-direction:column;gap:.25rem}
  #bfx-agency .ax-pairs__legend svg{transform:rotate(90deg)}
}

/* ==========================================================================
   v8 — revisione di Davide sulle pagine servizio (21 e 25/10/2026)
   sezioni che continuano la precedente, titolo «Casi studio» dell'Adv,
   criticità dei siti come coppie criticità → come interveniamo
   ========================================================================== */

/* Social: gli esempi non hanno più un titolo e continuano «Ultimi casi studio»:
   niente riga di separazione e poco spazio sopra, così si leggono come un blocco solo */
#bfx-agency .ax-sec--cont{padding-top:clamp(36px,6vh,64px)}
#bfx-agency .ax-sec--cont::before{display:none}

/* Adv: il titolo «Casi studio» introduce la scena di eKò che segue */
#bfx-agency .ax-sec--cap{padding-bottom:clamp(28px,5vh,52px)}
#bfx-agency .ax-sec--cap .ax-head{margin-bottom:0}
#bfx-agency .ax-sec--cap+.ax-geo{border-top:0}

/* Siti: la criticità a sinistra (titolo e una frase), come interveniamo a destra
   con l'esempio. Il blocco non è un link: si accende ma non si solleva */
#bfx-agency .ax-pair--site .ax-pair__pb>div{display:grid;gap:.55rem}
#bfx-agency .ax-pair--site .ax-pair__pb h3{font:300 clamp(1.25rem,1.9vw,1.65rem)/1.25 'Jost',sans-serif;letter-spacing:-.02em;color:hsl(40 30% 96% / .86);text-wrap:balance}
#bfx-agency .ax-pair--site .ax-pair__pb p{max-width:30rem;font-size:.95rem;line-height:1.55;color:var(--muted)}
#bfx-agency .ax-pair__fix .ax-pair__ex{margin-top:.15rem;font-size:.86rem;font-weight:400;color:var(--muted)}
#bfx-agency .ax-pair__ex b{font-weight:500;color:var(--fg)}
#bfx-agency .ax-pair--site:hover{transform:none}

/* Aperture con il titolo lungo di Davide (Siti, Adv): corpo più piccolo e la
   riga in gradiente diventa un blocco a sé, bilanciato, così non resta una
   parola sola sull'ultima riga («sceglierti.») */
#bfx-agency .ax-h1--long{font-size:clamp(2.25rem,4.3vw,4.1rem);line-height:1.04}
#bfx-agency .ax-h1--long br{display:none}
#bfx-agency .ax-h1--long .ax-grad{display:block;text-wrap:balance}

/* modulo contatti: campo esca per i bot, fuori schermo (le persone non lo vedono) */
#bfx-agency .ax-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}