/* servizi-flash.css — "flash card" dei sei servizi nella home (sezione scura sotto il carosello
   Metodo TOP). Modello: tessere fotografiche quadrate con etichetta centrata (riferimento EY
   "The EY approach"); al passaggio del mouse, al focus o al tocco la tessera si gira e mostra
   descrizione e link. Foto illustrative già presenti in assets/img. */
.sf{background:var(--navy);color:#dfe7ed}
.sf .eyebrow{color:#9ab2c6}
.sf h2{color:#fff}
.sf .lead{color:#c9d4de;max-width:760px;font-weight:300;margin-bottom:40px}
.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fc{position:relative;display:block;aspect-ratio:1/1;perspective:1400px;color:#fff;text-decoration:none;border-radius:var(--radius);outline:none}
.fc-inner{position:absolute;inset:0;transition:transform .7s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;border-radius:var(--radius)}
.fc-front,.fc-back{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fc-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fc-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,39,71,.62),rgba(15,39,71,.22) 55%,rgba(15,39,71,.32))}
.fc-front span{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.fc-back{transform:rotateY(180deg);background:linear-gradient(160deg,#16345c,#0F2747);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:center;gap:12px;padding:30px}
.fc-back strong{font-size:1.15rem;line-height:1.2;color:#fff}
.fc-back p{margin:0;font-size:.93rem;line-height:1.55;color:#dbe4ec;font-weight:300}
.fc-back .fc-link{margin-top:6px;font-weight:700;font-size:.9rem;color:#e0b98f}
.fc.is-flipped .fc-inner{transform:rotateY(180deg)}
@media(hover:hover){.fc:hover .fc-inner,.fc:focus-visible .fc-inner{transform:rotateY(180deg)}}
.fc:focus-visible{box-shadow:0 0 0 3px var(--copper)}
@media(prefers-reduced-motion:reduce){.fc-inner{transition:none}}
@media(max-width:950px){.sf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.sf-grid{grid-template-columns:1fr}.fc{aspect-ratio:4/3}.fc-back{padding:22px}.sf .lead{margin-bottom:28px}}