/* ============================================================
   AQUILAFRA — Francesco Aquilano | Portfolio one-page
   Mobile-first: base = mobile, poi @media 768px e 1024px
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
:root{
  --bg:        #0a0a0a;   /* nero base */
  --surface:   #141414;   /* sezioni alternate */
  --line:      #262626;   /* bordi */
  --text:      #f5f5f5;   /* testo */
  --muted:     #8a8a8a;   /* testo secondario */
  --accent:    #fcd757;   /* giallo pellicola */
  --accent-dk: #e0b93c;

  --ff-display: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --pad: 24px;                 /* padding orizzontale mobile */
  --maxw: 1280px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Focus visibile ovunque (accessibilità) */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* Parole in evidenza dentro i paragrafi */
strong{ font-weight:600; color:var(--text); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100px; left:var(--pad); z-index:999;
  background:var(--accent); color:#0a0a0a; padding:10px 16px;
  font-weight:600; border-radius:4px;
}
.skip-link:focus{ top:16px; }

/* ---------- 3. GRANA PELLICOLA ---------- */
.grain{
  position:fixed; inset:-50%;
  z-index:1; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width:1024px){
  .grain{ animation:grainShift 8s steps(6) infinite; }
  @keyframes grainShift{
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(-3%,2%); }
    40%{ transform:translate(2%,-3%); }
    60%{ transform:translate(-2%,-2%); }
    80%{ transform:translate(3%,1%); }
  }
}

/* ---------- 4. LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
main{ position:relative; z-index:2; }

section[data-section]{
  position:relative;
  padding-block:88px;
  /* compensa l'header fisso quando si arriva da un link interno */
  scroll-margin-top:72px;
}

/* ---------- 5. TIPOGRAFIA ---------- */
.label{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin-bottom:20px;
}
.label--dark{ color:#0a0a0a; opacity:.65; }

.big{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(3.2rem, 17vw, 7rem);
  line-height:.88;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin-bottom:32px;
}
.big em{ font-style:normal; color:var(--accent); }
.big--dark{ color:#0a0a0a; }

/* ---------- 6. BOTTONI ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  min-height:52px;
  padding:14px 26px;
  border-radius:100px;
  font-weight:600; font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .35s var(--ease), background-color .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn--accent{ background:var(--accent); color:#0a0a0a; }
.btn--ghost{ border:1px solid rgba(245,245,245,.28); color:var(--text); }
.btn--dark{ background:#0a0a0a; color:var(--accent); }
.btn--outline-dark{ border:1px solid rgba(10,10,10,.42); color:#0a0a0a; }
/* Accento solo di contorno: invita senza spingere */
.btn--outline-accent{ border:1px solid var(--accent); color:var(--accent); background:transparent; }
.btn--big{ min-height:62px; padding:18px 36px; font-size:1.05rem; }

@media (hover:hover){
  .btn--accent:hover{ background:#fff; transform:translateY(-2px); }
  .btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
  .btn--dark:hover{ background:#1a1a1a; transform:translateY(-2px); }
  .btn--outline-dark:hover{ border-color:#0a0a0a; background:rgba(10,10,10,.06); }
  .btn--outline-accent:hover{ background:var(--accent); color:#0a0a0a; }
}

/* ---------- 6b. HEADER ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:transform .45s var(--ease), opacity .35s, background-color .35s, border-color .35s;
}
.topbar.is-hidden{ transform:translateY(-105%); opacity:0; }
/* Sopra la foto dell'hero lo sfondo è assente: un'ombra sul testo basta a tenerlo leggibile */
.topbar:not(.is-solid) .topbar__nav a:not(.topbar__tel),
.topbar:not(.is-solid) .topbar__logo img{ text-shadow:0 1px 12px rgba(0,0,0,.6); }
/* Scorrendo, fondo pieno e piatto: nessuna sfumatura, nessuna ombra */
.topbar.is-solid{
  background:var(--bg);
  border-bottom-color:var(--line);
}

/* MOBILE: logo al centro, hamburger a destra */
.topbar__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:10px var(--pad);
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
}
.topbar__logo{ grid-column:2; justify-self:center; display:block; }
.topbar__logo img{ width:110px; height:auto; opacity:.92; }

.burger{
  grid-column:3; justify-self:end;
  width:42px; height:42px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.burger span{
  display:block; width:22px; height:1.5px;
  background:var(--text);
  transition:transform .35s var(--ease), opacity .25s;
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* Pannello del menu a tutto schermo */
.topbar__nav{
  position:fixed; inset:0; z-index:-1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px;
  background:var(--bg);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.topbar__nav.is-open{ opacity:1; visibility:visible; }
.topbar__nav a{ font-size:1.6rem !important; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.02em; }
.topbar__nav .topbar__tel{ font-size:.95rem !important; font-family:var(--ff-body); text-transform:none; letter-spacing:0; }
.topbar__nav a{
  font-size:.82rem; font-weight:500; color:#cfcfcf;
  transition:color .25s;
}
.topbar__tel{
  display:inline-flex; align-items:center; gap:7px;
  color:#0a0a0a !important; background:var(--accent);
  padding:9px 16px; border-radius:100px; font-weight:600;
}
.topbar__tel svg{ width:15px; height:15px; fill:currentColor; }
@media (hover:hover){
  .topbar__nav a:hover{ color:var(--accent); }
  .topbar__tel:hover{ background:#fff; }
}
/* DESKTOP: logo a sinistra, link in linea, niente hamburger */
@media (min-width:768px){
  .topbar__inner{
    padding:12px var(--pad);
    display:flex; justify-content:space-between; gap:16px;
  }
  .topbar__logo{ justify-self:auto; }
  .topbar__logo img{ width:136px; }
  .burger{ display:none; }
  .topbar__nav{
    position:static; inset:auto; z-index:auto;
    flex-direction:row; gap:26px;
    background:none; opacity:1; visibility:visible;
  }
  .topbar__nav a{ font-size:.88rem !important; font-family:var(--ff-body); text-transform:none; letter-spacing:0; }
  .topbar__tel{ padding:10px 20px; }
  .topbar__tel svg{ width:16px; height:16px; }
}

/* ---------- 7. INDICATORE SEZIONI (desktop) ---------- */
.dots{ display:none; }
@media (min-width:1024px){
  .dots{
    display:block;
    position:fixed; right:26px; top:50%; z-index:60;
    transform:translateY(-50%);
  }
  .dots li + li{ margin-top:16px; }
  .dots a{
    display:block; position:relative;
    width:26px; height:14px;
  }
  .dots a span{
    position:absolute; right:0; top:50%;
    width:14px; height:1px;
    background:rgba(245,245,245,.35);
    transform:translateY(-50%);
    transition:width .35s var(--ease), background-color .35s;
  }
  .dots a.is-active span{ width:26px; background:var(--accent); }
  .dots a::after{
    content:attr(data-label);
    position:absolute; right:36px; top:50%;
    transform:translateY(-50%);
    font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
    white-space:nowrap; color:var(--muted);
    opacity:0; transition:opacity .3s;
  }
  .dots a:hover::after, .dots a:focus-visible::after{ opacity:1; }
}

/* ---------- 8. CTA WHATSAPP STICKY ---------- */
.wa-sticky{
  position:fixed; z-index:70;
  left:50%; bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%, 140%);
  display:inline-flex; align-items:center; gap:9px;
  background:var(--accent); color:#0a0a0a;
  padding:14px 24px; border-radius:100px;
  font-weight:600; font-size:.95rem;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  transition:transform .5s var(--ease), opacity .4s;
  opacity:0;
}
.wa-sticky.is-visible{ transform:translate(-50%,0); opacity:1; }
.wa-sticky.is-hidden{ transform:translate(-50%,140%); opacity:0; pointer-events:none; }
.wa-sticky svg{ width:20px; height:20px; fill:currentColor; }

@media (min-width:1024px){
  .wa-sticky{ left:auto; right:26px; bottom:26px; transform:translate(0,140%); }
  .wa-sticky.is-visible{ transform:translate(0,0); }
  .wa-sticky.is-hidden{ transform:translate(0,140%); }
}

/* ============================================================
   9. HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) calc(64px + env(safe-area-inset-bottom));
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  /* La clip è chiara: va desaturata e abbassata per reggere il testo bianco */
  filter:grayscale(.15) contrast(1.08) saturate(.95) brightness(.52);
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(10,10,10,.34) 0%,
    rgba(10,10,10,.30) 26%,
    rgba(10,10,10,.66) 58%,
    rgba(10,10,10,.93) 84%,
    #0a0a0a 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; }

.hero__title{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(3.6rem, 19vw, 10rem);
  line-height:.85;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.hero__title .line{ display:block; overflow:hidden; }

.hero__claim{
  color:#cfcfcf;
  font-size:1.02rem;
  max-width:44ch;
  margin-bottom:30px;
}
.br-desktop{ display:none; }

.hero__cta{ display:flex; flex-direction:column; gap:12px; }
.hero__cta .btn{ width:100%; }

.hero__scroll{
  position:absolute; z-index:2;
  right:var(--pad); bottom:calc(64px + env(safe-area-inset-bottom));
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.hero__scroll span{
  display:block; width:1px; height:34px;
  background:linear-gradient(180deg, var(--accent), transparent);
  animation:scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%{ transform:scaleY(.3); transform-origin:top; opacity:.3; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  100%{ transform:scaleY(.3); transform-origin:bottom; opacity:.3; }
}

@media (min-width:768px){
  .hero__cta{ flex-direction:row; }
  .hero__cta .btn{ width:auto; }
  .hero__claim{ font-size:1.15rem; }
  .br-desktop{ display:block; }
}

/* ============================================================
   10. CHI SONO
   ============================================================ */
.chi{ background:var(--surface); }
.chi__text{ max-width:56ch; }
.chi__text p{ color:#c9c9c9; margin-bottom:16px; font-size:1.05rem; }
/* Su mobile la foto va da bordo a bordo, senza angoli arrotondati */
.chi picture{
  display:block;
  margin-inline:calc(var(--pad) * -1);
}
.chi__foto{
  width:100%; margin-top:40px; border-radius:0;
  filter:grayscale(.4) contrast(1.06) brightness(.94);
}

@media (min-width:1024px){
  .chi .wrap{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas:
      "label foto"
      "title foto"
      "text  foto";
    column-gap:56px;
  }
  .chi .label{ grid-area:label; }
  .chi .big{ grid-area:title; margin-bottom:28px; }
  .chi__text{ grid-area:text; align-self:start; }
  .chi__text p{ font-size:1.1rem; }
  .chi picture{ grid-area:foto; align-self:center; margin-inline:0; }
  .chi__foto{ margin-top:0; border-radius:14px; }
}

/* ============================================================
   11. SERVIZI
   ============================================================ */
.servizi__head{ margin-bottom:48px; }

.serv{ position:relative; border-top:1px solid var(--line); }
.servizi__list > .serv:last-child{ border-bottom:1px solid var(--line); }

/* Tutta la voce è cliccabile e porta ai lavori di quella nicchia */
.serv__link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  column-gap:18px;
  padding:30px var(--pad);
  max-width:var(--maxw);
  margin-inline:auto;
  transition:background-color .4s var(--ease);
}
.serv__num{
  font-family:var(--ff-display);
  font-size:1.5rem; line-height:1.1;
  color:var(--accent);
  padding-top:3px;
}
.serv__body{ display:block; }
.serv__body h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(2rem, 9vw, 3.4rem);
  line-height:.95;
  text-transform:uppercase;
  margin-bottom:10px;
  transition:color .35s var(--ease);
}
.serv__p{ display:block; color:var(--muted); font-size:.98rem; max-width:58ch; }
.serv__arrow{
  color:var(--muted); font-size:1.2rem;
  transition:transform .4s var(--ease), color .35s;
}

@media (hover:hover){
  .serv__link:hover{ background:rgba(252,215,87,.05); }
  .serv__link:hover h3{ color:var(--accent); }
  .serv__link:hover .serv__arrow{ transform:translate(4px,-4px); color:var(--accent); }
}
.serv__link:focus-visible{ outline-offset:-3px; }

@media (min-width:768px){
  .serv__link{ padding-block:44px; column-gap:36px; }
  .serv__num{ font-size:1.9rem; }
  .serv__p{ font-size:1.05rem; }
}

/* ============================================================
   12. PORTFOLIO
   ============================================================ */
.filters{
  display:flex; gap:8px;
  overflow-x:auto;
  margin:0 calc(var(--pad) * -1) 28px;
  padding:2px var(--pad) 12px;
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }

.chip{
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:100px;
  padding:9px 18px;
  font-size:.85rem; font-weight:500;
  color:var(--muted);
  white-space:nowrap;
  transition:background-color .3s, color .3s, border-color .3s;
}
.chip.is-active{ background:var(--accent); color:#0a0a0a; border-color:var(--accent); }

/* Puntino che stacca Social dagli altri filtri */
.chipsep{
  flex:0 0 auto;
  align-self:center;
  width:3px; height:3px;
  margin-inline:8px;
  border-radius:50%;
  background:#4a4a4a;
}
@media (min-width:768px){ .chipsep{ margin-inline:12px; } }
@media (hover:hover){ .chip:not(.is-active):hover{ color:var(--text); border-color:#3a3a3a; } }

/* Sotto-filtri: compaiono solo quando è attivo il filtro Social */
.subfilters{
  display:flex; gap:8px;
  overflow-x:auto;
  margin:-14px calc(var(--pad) * -1) 24px;
  padding:2px var(--pad) 12px;
  scrollbar-width:none;
}
.subfilters[hidden]{ display:none; }
.subfilters::-webkit-scrollbar{ display:none; }
.chip--sm{ padding:7px 15px; font-size:.78rem; }
.chip--sm.is-active{ background:transparent; color:var(--accent); border-color:var(--accent); }

.grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.grid[hidden], .reelgrid[hidden]{ display:none; }
@media (min-width:768px){ .grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (min-width:1280px){ .grid{ grid-template-columns:repeat(3,1fr); } }

.work{ transition:opacity .35s, transform .35s; }
.work[hidden]{ display:none; }

.work__btn{
  position:relative; display:block; width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:3px;
  background:#1a1a1a;
  text-align:left;
}
.work__thumb{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(.5) contrast(1.12) brightness(.82);
  transition:transform .8s var(--ease), filter .5s;
}
.work__btn::after{ /* velo per leggibilità del testo */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,10,10,.85) 100%);
}
.work__play{
  position:absolute; top:50%; left:50%;
  width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%;
  background:rgba(252,215,87,.94);
  z-index:2;
  transition:transform .4s var(--ease), background-color .3s;
}
.work__play::before{
  content:''; position:absolute; top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #0a0a0a;
}
.work__meta{
  position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  display:flex; flex-direction:column; gap:2px;
}
.work__cat{
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.work__title{ font-size:1rem; font-weight:600; line-height:1.25; }
.work__client{ font-size:.78rem; color:#b0b0b0; margin-top:2px; }

/* Box "nuovi progetti in arrivo" */
.work--soon .work__btn--static{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:16/9;
  border:1px dashed #3a3a2c; border-radius:3px;
  background:linear-gradient(160deg, rgba(252,215,87,.07), rgba(20,20,20,.6));
  cursor:default;
}
.soon__inner{ display:block; text-align:center; padding:0 16px; }
.soon__dot{
  display:block; width:8px; height:8px; margin:0 auto 12px;
  border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(252,215,87,.55);
  animation:soonPulse 2.4s var(--ease) infinite;
}
@keyframes soonPulse{
  0%{ box-shadow:0 0 0 0 rgba(252,215,87,.5); }
  70%{ box-shadow:0 0 0 14px rgba(252,215,87,0); }
  100%{ box-shadow:0 0 0 0 rgba(252,215,87,0); }
}
.soon__cat{
  display:block; margin-bottom:8px;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.soon__t{
  display:block;
  font-family:var(--ff-display); font-size:1.5rem; line-height:.95;
  text-transform:uppercase; color:var(--text);
}
.soon__s{ display:block; margin-top:8px; font-size:.78rem; color:var(--muted); }

@media (hover:hover){
  .work__btn:hover .work__thumb{ transform:scale(1.06); filter:grayscale(0) contrast(1.05) brightness(.9); }
  .work__btn:hover .work__play{ transform:scale(1.12); background:#fff; }
}

/* ---------- REEL INSTAGRAM (verticali 9:16, carosello) ---------- */
.reelblock{
  margin-top:56px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.reelblock[hidden]{ display:none; }
.reelblock__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.reelblock__label{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.reelblock__hint{ font-size:.78rem; color:#6d6d6d; }

.reelwrap{ position:relative; }
.reelrail{
  display:flex; gap:12px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  padding-bottom:4px;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.reelrail::-webkit-scrollbar{ display:none; }

.reel{ flex:0 0 46%; scroll-snap-align:start; }
.reel[hidden]{ display:none; }

@media (min-width:768px){
  .reelrail{ gap:16px; }
  .reel{ flex-basis:29%; }
}
@media (min-width:1024px){
  .reelrail{ margin-inline:0; padding-inline:0; }
  .reel{ flex-basis:calc((100% - 4 * 16px) / 5); }
}

/* Frecce di scorrimento (solo dove c'è il puntatore) */
.reelnav{
  display:none;
  position:absolute; top:50%; z-index:5;
  width:44px; height:44px;
  transform:translateY(-50%);
  border-radius:50%;
  background:rgba(12,12,12,.86);
  border:1px solid var(--line);
  color:var(--text);
  font-size:1.5rem; line-height:1;
  transition:background-color .3s, border-color .3s, opacity .3s, color .3s;
}
.reelnav--prev{ left:-14px; }
.reelnav--next{ right:-14px; }
.reelnav[disabled]{ opacity:0; pointer-events:none; }
@media (hover:hover) and (min-width:768px){
  .reelnav{ display:block; }
  .reelnav:hover{ background:var(--accent); color:#0a0a0a; border-color:var(--accent); }
}

.reel__btn{
  position:relative; display:block; width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:3px;
  background:#141414;
  border:1px solid var(--line);
}
/* Copertina grafica di default (nessun file immagine).
   Se in assets/reel/<codice>.jpg esiste un fermo-immagine, lo script
   lo imposta come background e questa copertina resta sotto. */
.reel__cover{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-image:
    radial-gradient(90% 55% at 50% 22%, rgba(252,215,87,.13), transparent 70%),
    linear-gradient(165deg, #1e1e1e 0%, #121212 55%, #0c0c0c 100%);
  transition:transform .8s var(--ease), filter .5s;
}
/* Senza fermo-immagine: copertina brandizzata col logo in filigrana */
.reel:not(.has-cover) .reel__cover::after{
  content:'';
  position:absolute; inset:0;
  background:url(assets/logo-aquilafra.png) center 30% / 66% auto no-repeat;
  opacity:.12;
}
.reel.has-cover .reel__cover{ filter:grayscale(.45) contrast(1.1) brightness(.8); }
.reel.has-cover .reel__btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(10,10,10,.85) 100%);
}
.reel__play{
  position:absolute; top:50%; left:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%;
  background:rgba(252,215,87,.94);
  z-index:2;
  transition:transform .4s var(--ease), background-color .3s;
}
.reel__play::before{
  content:''; position:absolute; top:50%; left:55%;
  transform:translate(-50%,-50%);
  border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #0a0a0a;
}
/* Sprite delle icone: non deve occupare spazio */
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Loghi Instagram e TikTok in alto a destra sulle anteprime verticali */
.reel__socials{
  position:absolute; top:9px; right:9px; z-index:3;
  display:flex; gap:6px;
}
.reel__ic{
  width:15px; height:15px;
  fill:#fff;
  opacity:.9;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
}

.reel__meta{
  position:absolute; left:10px; right:10px; bottom:12px; z-index:2;
  display:block;
}
.reel__cat{
  display:block;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
/* Titolo del reel: se il tag resta vuoto non occupa spazio */
.reel__title{ display:block; font-size:.82rem; font-weight:500; line-height:1.3; margin-top:2px; }
.reel__title:empty{ display:none; }
@media (hover:hover){
  .reel__btn:hover{ border-color:#3a3a3a; }
  .reel__btn:hover .reel__cover{ transform:scale(1.05); }
  .reel__btn:hover .reel__play{ transform:scale(1.12); background:#fff; }
}

/* Bottoni "mostra altri" */
.workmore{
  display:block; width:100%;
  margin-top:16px;
  padding:14px 20px;
  border:1px solid var(--line); border-radius:100px;
  color:var(--text); font-size:.9rem; font-weight:500;
  transition:border-color .3s, color .3s, background-color .3s;
}
.workmore[hidden]{ display:none; }
@media (hover:hover){ .workmore:hover{ border-color:var(--accent); color:var(--accent); background:rgba(252,215,87,.05); } }
@media (min-width:768px){ .workmore{ display:none !important; } }

.reelmore{
  display:block; width:100%;
  margin-top:16px;
  padding:14px 20px;
  border:1px solid var(--line); border-radius:100px;
  color:var(--text); font-size:.9rem; font-weight:500;
  transition:border-color .3s, color .3s, background-color .3s;
}
.reelmore[hidden]{ display:none; }
@media (hover:hover){ .reelmore:hover{ border-color:var(--accent); color:var(--accent); background:rgba(252,215,87,.05); } }
@media (min-width:768px){ .reelmore{ width:auto; margin-inline:auto; padding-inline:32px; } }

.portfolio__more{ margin-top:32px; color:var(--muted); font-size:.95rem; }
.portfolio__more a{ color:var(--text); border-bottom:1px solid var(--accent); padding-bottom:1px; }
@media (hover:hover){ .portfolio__more a:hover{ color:var(--accent); } }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,5,5,.96);
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad);
}
.lightbox[hidden]{ display:none; }
.lightbox__frame{ width:100%; max-width:1100px; aspect-ratio:16/9; }
.lightbox__frame iframe{ width:100%; height:100%; border:0; border-radius:3px; }

/* Variante verticale per i reel Instagram */
.lightbox--v{ flex-direction:column; gap:16px; }
.lightbox--v .lightbox__frame{
  aspect-ratio:auto;
  width:min(100%, 400px);
  height:min(76vh, 700px);
  background:#0f0f0f; border-radius:6px; overflow:hidden;
}
.lightbox__ext{
  color:var(--accent); font-size:.9rem; font-weight:600;
  border-bottom:1px solid var(--accent); padding-bottom:2px;
}
.lightbox__ext[hidden]{ display:none; }
.lightbox__close{
  position:absolute; top:14px; right:18px;
  width:44px; height:44px;
  font-size:2rem; line-height:1;
  color:var(--text);
}
@media (hover:hover){ .lightbox__close:hover{ color:var(--accent); } }

/* ============================================================
   13. PROCESSO
   ============================================================ */
.processo{ background:var(--surface); }
.steps{ display:grid; gap:0; }
.step{
  position:relative;
  padding:26px 0 26px 46px;
  border-left:1px solid var(--line);
}
.step:last-child{ border-left-color:transparent; }
.step__n{
  position:absolute; left:0; top:26px;
  transform:translateX(-50%);
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--bg); border:1px solid var(--accent);
  color:var(--accent);
  font-family:var(--ff-display); font-size:.95rem;
}
.step h3{
  font-family:var(--ff-display); font-weight:400;
  font-size:1.9rem; line-height:1; text-transform:uppercase;
  margin-bottom:8px;
}
.step p{ color:var(--muted); font-size:.98rem; max-width:52ch; }

@media (min-width:1024px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:32px; }
  .step{
    padding:56px 0 0 0;
    border-left:0; border-top:1px solid var(--line);
  }
  .step:last-child{ border-top-color:var(--line); }
  .step__n{ left:0; top:-17px; transform:none; }
}

/* ============================================================
   14. CONTATTI (blocco invertito)
   ============================================================ */
.contatti{
  background:var(--accent);
  color:#0a0a0a;
  padding-block:110px;
}
.contatti__sub{
  max-width:46ch;
  font-size:1.08rem;
  color:rgba(10,10,10,.78);
  margin-bottom:34px;
}
/* Su fondo giallo il grassetto deve essere nero, non bianco */
.contatti strong{ color:#0a0a0a; font-weight:600; }
.contatti__cta{ display:flex; flex-direction:column; gap:12px; }
.contatti__cta .btn{ width:100%; }

.contatti__zona{
  margin-top:24px;
  font-size:.92rem;
  color:rgba(10,10,10,.7);
}

.contatti__links{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:36px;
  padding-top:26px;
  border-top:1px solid rgba(10,10,10,.22);
  font-weight:600; font-size:.95rem;
}
.contatti__links a{ border-bottom:1px solid rgba(10,10,10,.3); padding-bottom:2px; }
@media (hover:hover){ .contatti__links a:hover{ border-bottom-color:#0a0a0a; } }

@media (min-width:768px){
  .contatti__cta{ flex-direction:row; }
  .contatti__cta .btn{ width:auto; }
}

/* ============================================================
   14b. BANNER COOKIE
   ============================================================ */
.cookiebar{
  position:fixed; z-index:120;
  left:0; right:0; bottom:0;
  background:#0f0f0f;
  border-top:1px solid var(--line);
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .5s var(--ease);
}
.cookiebar[hidden]{ display:none; }
.cookiebar.is-in{ transform:translateY(0); }

.cookiebar__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; flex-direction:column; gap:11px;
}
.cookiebar__title{ font-weight:600; font-size:.82rem; margin-bottom:3px; }
.cookiebar__text{ color:#7a7a7a; font-size:.76rem; line-height:1.5; max-width:80ch; }
.cookiebar__text a{
  color:#9a9a9a;
  border-bottom:1px solid #4a4a4a;
  white-space:nowrap;
}
.cookiebar__actions{ display:flex; gap:8px; }
.cookiebar__actions .btn{ flex:1 1 0; }
.btn--sm{ min-height:38px; padding:9px 18px; font-size:.82rem; }

@media (hover:hover){
  .cookiebar__text a:hover{ color:var(--text); border-bottom-color:var(--text); }
}
@media (min-width:768px){
  .cookiebar{ padding-block:14px; }
  .cookiebar__inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:28px; }
  .cookiebar__actions{ flex:0 0 auto; }
  .cookiebar__actions .btn{ flex:0 0 auto; min-width:104px; }
}

/* Riquadro di consenso dentro il lightbox */
.consent{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; height:100%; padding:28px; text-align:center;
  background:#111; border:1px solid var(--line); border-radius:4px;
}
.consent__t{ font-family:var(--ff-display); font-size:1.7rem; text-transform:uppercase; }
.consent__p{ color:var(--muted); font-size:.9rem; max-width:46ch; line-height:1.6; }
.consent__link{ color:#9a9a9a; font-size:.82rem; border-bottom:1px solid #4a4a4a; }
@media (hover:hover){ .consent__link:hover{ color:var(--text); border-bottom-color:var(--text); } }

/* ============================================================
   15. FOOTER
   ============================================================ */
.footer{
  background:var(--bg);
  padding-block:52px;
  position:relative; z-index:2;
}
.footer__inner{ display:flex; flex-direction:column; gap:22px; }
.footer img{ width:120px; opacity:.55; }
.footer__info p{ color:var(--muted); font-size:.9rem; }
.footer__info a{ border-bottom:1px solid transparent; }
.footer__social{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; }
.footer__prefs{
  color:var(--muted); font-size:.9rem;
  border-bottom:1px solid transparent; padding:0;
}
@media (hover:hover){ .footer__prefs:hover{ color:var(--accent); border-bottom-color:var(--accent); } }
.footer__copy{ color:#5a5a5a; font-size:.8rem; }
@media (hover:hover){ .footer__info a:hover{ color:var(--accent); border-bottom-color:var(--accent); } }

@media (min-width:768px){
  .footer__inner{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .footer__copy{ text-align:right; }
}

/* ============================================================
   15b. PAGINA PRIVACY
   ============================================================ */
.legal{ padding:118px 0 80px; }
.legal .big{ margin-bottom:14px; }
.legal__meta{ color:#6d6d6d; font-size:.82rem; margin-bottom:36px; }
.legal__lead{
  font-size:1.1rem; line-height:1.65; color:#c9c9c9;
  max-width:62ch; margin-bottom:12px;
  padding-bottom:32px; border-bottom:1px solid var(--line);
}
.legal h2{
  font-family:var(--ff-display); font-weight:400;
  font-size:2rem; line-height:1; text-transform:uppercase;
  margin:44px 0 14px;
}
.legal h3{
  font-size:.95rem; font-weight:600; color:var(--accent);
  margin:26px 0 8px;
}
.legal p{ color:var(--muted); font-size:.98rem; line-height:1.7; max-width:70ch; margin-bottom:14px; }
.legal a{ color:var(--text); border-bottom:1px solid var(--accent); }
.legal__list{ margin:0 0 16px; max-width:70ch; }
.legal__list li{
  color:var(--muted); font-size:.98rem; line-height:1.7;
  padding-left:18px; position:relative; margin-bottom:8px;
}
.legal__list li::before{
  content:''; position:absolute; left:0; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.legal__table{
  width:100%; border-collapse:collapse;
  margin:8px 0 22px; font-size:.88rem;
  display:block; overflow-x:auto;
}
.legal__table th, .legal__table td{
  border:1px solid var(--line);
  padding:11px 13px; text-align:left; vertical-align:top;
  min-width:130px;
}
.legal__table th{ background:var(--surface); color:var(--text); font-weight:600; }
.legal__table td{ color:var(--muted); line-height:1.55; }
.legal__table code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; color:var(--accent); }
.legal__btn{
  color:var(--accent); border-bottom:1px solid var(--accent);
  font-size:inherit; padding:0;
}
.legal__small{ font-size:.85rem; }
.legal__back{ margin-top:52px; padding-top:28px; border-top:1px solid var(--line); }
.legal__back a{ font-weight:600; }

@media (min-width:768px){
  .legal{ padding-top:140px; }
  .legal__table{ display:table; }
}

/* ============================================================
   16. SCROLL REVEAL (fallback CSS se GSAP non carica)
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); }
.no-gsap [data-reveal],
[data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}