/* ==========================================================================
   MUSCLE DESIGNER — Design System
   Enzo Farsetti — Coaching online & personal training, evidence-based
   Direzione: dark editorial, oro/bronzo su nero profondo, panna.
   Segno distintivo: "the cut" — la linea diagonale dorata ripresa dalla
   lama del logo, usata come divisore prima/dopo e come struttura di sezione.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Tema scuro (definitivo, dopo un esperimento chiaro scartato dall'utente
     — "preferivo il tema scuro, torna ad un tema sui toni del nero"):
     superficie scura come base, bagliore rosso/ambra in gradiente sulle
     sezioni (vedi body + .section--dark/--raised/--band più sotto, rgba()
     hardcoded indipendenti da questi token), testo chiaro, accento BLU
     (--gold-*). --cream/--gold-* restano i nomi storici dei token per non
     riscrivere ogni riferimento nel file. */
  --ink:          #0B0D10;
  --ink-2:        #12151A;
  --ink-3:        #191D23;
  --ink-border:   rgba(191, 224, 245, 0.14);
  --gold-deep:    #2F5E82;
  --gold:         #5A8FB8;
  --gold-light:   #8FB8D9;
  --cream:        #F2F4F6;
  --cream-dim:    rgba(242, 244, 246, 0.68);
  --cream-faint:  rgba(242, 244, 246, 0.46);
  --whatsapp:     #25D366;
  --whatsapp-dark:#1DA851;
  --overlay-black: rgba(6, 5, 3, 0.55);
  /* Testo chiaro riservato alle sezioni "scure" autonome (video hero, badge
     su foto): non segue il flip chiaro/scuro del resto del sito. */
  --on-dark:        #F4F9FC;
  --on-dark-dim:    rgba(244, 249, 252, 0.78);
  --on-dark-faint:  rgba(244, 249, 252, 0.5);
  --on-dark-accent: #BFE0F5;
  --fsfx-bg:        #0B0E12;

  /* Tipografia — un solo font in tutto il sito (Geist, già in pagina),
     seguendo lo stile pulito/bold-sans dello screenshot di riferimento
     invece del condensed alto usato prima. */
  --font-display:   'Geist', sans-serif;
  --font-condensed: 'Geist', sans-serif;
  /* Riservato ai titoli sulle sezioni video (hero, logo reveal): condensed
     alto e d'impatto, come nello screenshot "NO LIMITS. MORE MOTION." */
  --font-hero:      'Big Shoulders Display', sans-serif;
  --font-body:      'Geist', sans-serif;
  /* Solo per il "nameplate" dietro la foto scontornata di Enzo: grottesco
     nero e compresso, come nel riferimento fotografico fornito. */
  --font-nameplate: 'Anton', 'Big Shoulders Display', sans-serif;
  /* Solo per i titoli editoriali della pagina Coaching (mockup fornito
     dall'utente): serif elegante minuscolo, non l'uppercase condensed
     usato per gli h1-h4 nel resto del sito. */
  --font-editorial: 'Fraunces', serif;

  --fs-hero:  clamp(2.6rem, 5vw + 1.2rem, 6.4rem);
  --fs-h1:    clamp(2.2rem, 3vw + 1.1rem, 4rem);
  --fs-h2:    clamp(1.75rem, 2vw + 1rem, 2.85rem);
  --fs-h3:    clamp(1.3rem, .9vw + 1rem, 1.65rem);
  --fs-lead:  clamp(1.1rem, .5vw + 1rem, 1.35rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;
  --fs-stat:  clamp(2.4rem, 3vw + 1rem, 4.2rem);

  /* Spaziatura 8pt */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 8rem;
  --sp-10: 10rem;

  --container: 1240px;
  --container-narrow: 820px;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-gold: 0 24px 64px -28px rgba(199, 154, 68, .45);
  --shadow-black: 0 30px 90px -30px rgba(0, 0, 0, .7);

  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);

  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  /* Celeste sfumato, non pieno: superficie scura di base con due aloni
     morbidi di celeste che sfumano nel buio invece di un riempimento
     piatto — l'accento resta presente ma "respira". */
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(226, 104, 90, .22), transparent 60%),
    radial-gradient(140% 160% at 82% 100%, rgba(184, 48, 42, .16), transparent 65%),
    var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-condensed);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
::selection { background: var(--gold); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibile ovunque */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 999;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--sp-9);
}
.section--tight { padding-block: var(--sp-8); }
.section--dark {
  background:
    radial-gradient(100% 130% at 88% 0%, rgba(184, 48, 42, .2), transparent 60%),
    var(--ink);
}
.section--raised {
  background:
    radial-gradient(110% 100% at 10% 100%, rgba(122, 36, 32, .18), transparent 55%),
    var(--ink-2);
}
.section--band {
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(226, 104, 90, .16), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
}

@media (max-width: 720px) {
  .section { padding-block: var(--sp-7); }
}

.grid { display: grid; gap: var(--sp-5); }

/* ---------- Typography helpers ---------- */
/* .eyebrow (trattino + label maiuscola sopra i titoli) nascosta ovunque su
   richiesta esplicita dell'utente ("non mi piace, toglile in tutto il
   sito") — markup lasciato intatto (usato anche per lo stagger di
   data-reveal-group), solo display:none. */
.eyebrow {
  display: none;
  align-items: center;
  gap: .6em;
  font-family: var(--font-condensed);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: skewX(-24deg);
}

.h-hero {
  font-size: var(--fs-hero);
  font-weight: 600;
  color: var(--cream);
}
.h-1 { font-size: var(--fs-h1); color: var(--cream); }
.h-2 { font-size: var(--fs-h2); color: var(--cream); }
.h-3 { font-size: var(--fs-h3); color: var(--cream); font-weight: 600; }

.lead {
  font-size: var(--fs-lead);
  color: var(--cream-dim);
  line-height: 1.55;
  max-width: 46ch;
}
/* Più protagonista: usata dove il sottotitolo deve avere peso visivo
   proprio, non solo accompagnare il titolo. */
.lead--big {
  font-size: clamp(1.4rem, 1vw + 1.2rem, 1.85rem);
  font-weight: 700;
  color: var(--cream);
  max-width: 34ch;
}

/* Sempre usata dentro .subhero__content, su foto scurita: gradiente chiaro
   che risalta contro l'overlay scuro, non contro lo sfondo chiaro del sito. */
.gold-text {
  background: linear-gradient(100deg, #EAF5FC 10%, #BFDDF0 45%, var(--gold-light) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-dim { color: var(--cream-dim); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------- The Cut — signature diagonal motif ---------- */
.cut {
  position: relative;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold-light) 50%, var(--gold) 88%, transparent);
  transform: skewY(-0.6deg);
}
.cut::after {
  content: '';
  position: absolute;
  top: -3px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  background: var(--gold-light);
  transform: rotate(45deg);
  box-shadow: 0 0 18px 2px rgba(233, 206, 140, .55);
}
.cut--section { margin-block: 0; }

.divider-diagonal {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  transform: skewX(-8deg);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-pad-y: 1rem;
  --btn-pad-x: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
  min-height: 48px;
}
.btn:active { transform: translateY(1px) scale(.98); }
/* Alcune CTA hanno testo lungo ("Scopri di più sul servizio di coaching",
   "Richiedi informazioni per le lezioni one-to-one", ecc.): il
   white-space:nowrap del .btn di base, pensato per i bottoni corti, su
   schermi stretti allargava il bottone oltre il viewport causando scroll
   orizzontale reale della pagina — bug mobile confermato, non solo
   visivo. Sotto i 480px il testo può andare a capo su più righe. */
@media (max-width: 480px) {
  /* min-width:0 è la parte che conta davvero: di default un flex item non
     si restringe mai sotto la sua dimensione di contenuto ("min-width:auto"
     implicito), quindi anche con testo che va a capo il bottone (e la
     .btn-row che lo contiene) restava largo quanto il contenuto non
     wrappato, sporgendo dal viewport. */
  .btn { white-space: normal; text-align: center; max-width: 100%; min-width: 0; }
  .btn-row { min-width: 0; }
}

.btn--primary {
  background: linear-gradient(105deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  color: var(--cream);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { box-shadow: 0 28px 70px -22px rgba(233, 206, 140, .6); transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--ink-border);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(143, 184, 217, .08); }

.btn--sm { --btn-pad-y: .75rem; --btn-pad-x: 1.4rem; font-size: .875rem; min-height: 44px; }

.btn--whatsapp {
  background: var(--whatsapp);
  color: #06210F;
}
.btn--whatsapp:hover { background: var(--whatsapp-dark); transform: translateY(-2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---------- Form "Richiedi consulenza" ---------- */
/* Backend reale = WhatsApp: il submit non fa POST, costruisce un deep link
   wa.me precompilato (vedi js/main.js, data-wa-form). */
.form-card {
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(184, 48, 42, .16), transparent 58%),
    var(--ink-2);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-black);
}
.form { display: grid; gap: var(--sp-4); }
.form-field { display: grid; gap: var(--sp-1); }
.form-label {
  font-family: var(--font-condensed);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.form-input {
  width: 100%;
  min-height: 52px;
  padding: .85rem 1.1rem;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.form-input::placeholder { color: var(--cream-faint); }
.form-input:hover { border-color: var(--gold-deep); }
.form-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(90, 143, 184, .22);
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238FB8D9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}
.form-select:invalid { color: var(--cream-faint); }
.form-select option { color: var(--cream); background: var(--ink-2); }
.form-submit { width: 100%; margin-top: var(--sp-1); }
.form-submit svg { width: 22px; height: 22px; }
.form-note {
  font-size: var(--fs-small);
  color: var(--cream-faint);
  text-align: center;
}

/* ---------- Header ---------- */
/* Sempre trasparente (nessuno sfondo pieno, per non stonare con le sezioni
   sotto, tutte scure nel tema definitivo): l'header si nasconde scorrendo
   verso il basso e riappare scorrendo verso l'alto — vedi .header--hidden,
   gestito in main.js. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: transparent;
  transition: transform var(--dur-med) var(--ease-out-soft), height var(--dur-med) var(--ease);
}
.header.is-scrolled { height: calc(var(--header-h) - 14px); }
.header--hidden { transform: translateY(-100%); }
.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
@media (min-width: 1080px) {
  .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header__left { grid-column: 1; justify-self: start; }
  .nav { grid-column: 2; justify-self: center; }
  .header__actions { grid-column: 3; justify-self: end; }
}
.header__left { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 6px rgba(6,5,3,.35));
}
.brand img { height: 44px; width: auto; }
.brand__word {
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.1;
}
.brand__word span { display: block; font-size: .65em; color: var(--gold-light); letter-spacing: .3em; }

.header__social { display: none; align-items: center; gap: .3rem; }
@media (min-width: 640px) { .header__social { display: flex; } }
.header__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--on-dark-dim);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.header__social-link:hover { color: var(--on-dark); background: rgba(255, 255, 255, .14); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.nav__list { display: flex; align-items: center; gap: var(--sp-5); }
/* Testo sempre chiaro e in grassetto, non solo in cima: l'header è
   trasparente su tutta la pagina (niente sfondo che ne garantisca la
   leggibilità), quindi il colore non deve dipendere dallo scroll — con
   testo scuro spariva ogni volta che dietro c'era ancora il video/foto. */
.nav__link {
  position: relative;
  font-family: var(--font-condensed);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-block: 6px;
  text-shadow: 0 1px 6px rgba(6,5,3,.55);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--on-dark-accent);
  transition: right var(--dur-med) var(--ease-out-soft);
}
.nav__link:hover, .nav__link.is-active { color: var(--on-dark); }
.nav__link:hover::after, .nav__link.is-active::after { right: 0; }

/* Niente pill/sfondo colorato: la nav galleggia trasparente in ogni punto
   della pagina, con solo un'ombra leggera sul testo per restare leggibile
   sia sul video scuro in cima sia sulle sezioni chiare più in basso. */
@media (min-width: 1080px) {
  .nav__list {
    gap: .4rem;
    padding: .35rem .35rem;
  }
  .nav__list li { display: flex; }
  .nav__link {
    padding: .6rem 1rem;
    border-radius: var(--radius-pill);
  }
  .nav__link.is-active::before {
    content: '';
    position: absolute;
    left: 50%; bottom: 1px;
    transform: translateX(-50%);
    width: 18px; height: 2px;
    border-radius: 2px;
    background: var(--on-dark-accent);
  }
}

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

.header__icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38);
  color: var(--on-dark-dim);
  filter: drop-shadow(0 1px 5px rgba(6,5,3,.35));
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.header__icon-btn:hover { color: var(--whatsapp); border-color: var(--whatsapp); }
@media (min-width: 640px) { .header__icon-btn { display: inline-flex; } }
@media (min-width: 1080px) { .nav > .btn-row { display: none; } }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--on-dark);
  filter: drop-shadow(0 1px 4px rgba(6,5,3,.5));
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* Il pannello mobile aperto è sempre una superficie scura (vedi .nav.is-open
   più sotto, background: var(--ink)): qui l'icona "X" resta chiara come il
   resto del testo del pannello. */
.nav-toggle[aria-expanded="true"] span { background: var(--cream); filter: none; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1080px) { .nav-toggle { display: none; } }

@media (max-width: 1079px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--sp-6) clamp(1.25rem, 6vw, 3rem);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out-soft);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .nav__link { font-size: 1.5rem; }
  .header__actions .btn--primary { display: none; }
  .nav .btn-row { margin-top: var(--sp-5); flex-direction: column; align-items: stretch; }
  /* Il pannello mobile aperto è una superficie chiara indipendente dallo
     stato di scroll dell'header: il testo qui è sempre scuro. */
  .nav.is-open .nav__link { color: var(--cream-dim); }
  .nav.is-open .nav__link:hover, .nav.is-open .nav__link.is-active { color: var(--cream); }
  .nav.is-open .nav__link::after { background: var(--gold-light); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(.15) contrast(1.08) brightness(.78);
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--ink) 2%, rgba(11,9,6,.35) 42%, rgba(11,9,6,.15) 65%),
    linear-gradient(100deg, rgba(11,9,6,.75) 0%, rgba(11,9,6,.15) 46%, rgba(11,9,6,.55) 100%);
}
.hero__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  right: -18vw;
  top: -10vw;
  background: radial-gradient(circle, rgba(199,154,68,.28), transparent 65%);
  filter: blur(10px);
  z-index: 1;
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-9);
}
.hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.hero h1 {
  font-size: var(--fs-hero);
  max-width: 15ch;
  color: var(--cream);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  margin-top: var(--sp-4);
  max-width: 48ch;
  font-size: var(--fs-lead);
  color: var(--cream-dim);
}
.hero__actions { margin-top: var(--sp-6); }
.hero__proof {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(244,238,224,.14);
}
.hero__proof-item strong {
  display: block;
  font-family: var(--font-condensed);
  font-size: 1.5rem;
  color: var(--gold-light);
  letter-spacing: .02em;
}
.hero__proof-item span { font-size: .82rem; color: var(--cream-faint); letter-spacing: .02em; }

.scroll-cue {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: var(--sp-5);
  z-index: 2;
  display: none;
  align-items: center;
  gap: .6rem;
  writing-mode: vertical-rl;
  color: var(--cream-faint);
  font-family: var(--font-condensed);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.scroll-cue__line { width: 1px; height: 46px; background: linear-gradient(180deg, var(--gold), transparent); }
@media (min-width: 720px) { .scroll-cue { display: flex; } }

@media (max-width: 720px) {
  .hero { align-items: flex-end; }
  .hero__media img { object-position: 62% 18%; }
}

/* ---------- Sub-hero (pagine interne) ---------- */
.subhero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8);
  overflow: hidden;
}
.subhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.subhero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.4) contrast(1.25); }
.subhero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,9,6,.55), var(--ink) 92%);
}
.subhero__content { position: relative; z-index: 1; max-width: 62ch; }
.subhero .lead { margin-top: var(--sp-3); }
/* Il subhero sta sempre su una foto scurita: il testo resta chiaro a
   prescindere dal tema chiaro del resto del sito. */
.subhero__content .crumb,
.subhero__content .crumb a { color: var(--on-dark-faint); }
.subhero__content .crumb a:hover { color: var(--on-dark); }
.subhero__content .eyebrow { color: var(--on-dark); }
.subhero__content .eyebrow::before { background: linear-gradient(90deg, var(--on-dark), transparent); }
.subhero__content .h-1 { color: var(--on-dark); }
.subhero__content .lead { color: var(--on-dark-dim); }

/* ---------- Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Scorrimento laterale "firma" — su richiesta esplicita, più ampio e più
   lento del default [data-reveal] perché l'ingresso da sinistra verso
   destra sia chiaramente riconoscibile (sezione Instagram, narrativa del
   metodo su Enzo Farsetti, testimonianze). Scoped a .reveal-lateral per
   non toccare il reveal generico usato altrove nel sito. */
.reveal-lateral[data-reveal="left"] {
  transform: translateX(-110px);
  transition-duration: 1100ms;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
.reveal-lateral[data-reveal="left"].is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Pillars (perché funziona) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-border);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--sp-7);
}
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: var(--ink-2);
  padding: var(--sp-6) var(--sp-5);
  transition: background var(--dur-med) var(--ease);
}
.pillar:hover { background: var(--ink-3); }
.pillar__num {
  font-family: var(--font-condensed);
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--gold);
}
.pillar h3 { margin-top: var(--sp-3); font-size: 1.35rem; }
.pillar p { margin-top: var(--sp-2); color: var(--cream-dim); font-size: .96rem; }

/* ---------- Steps (metodo) ---------- */
.steps { margin-top: var(--sp-8); display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 120px 1px 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  position: relative;
}
.step + .step { border-top: 1px solid var(--ink-border); }
.step__index {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--gold-light);
  line-height: 1;
  font-weight: 600;
}
.step__line { background: linear-gradient(180deg, var(--gold), transparent); }
.step__body h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.step__body p { color: var(--cream-dim); max-width: 62ch; }
.step__tag {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-condensed);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
}

@media (max-width: 720px) {
  .step { grid-template-columns: 60px 1px 1fr; gap: var(--sp-4); }
  .step__index { font-size: 2.2rem; }
}

/* ---------- Cards genériche ---------- */
.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
a.card:hover, a.card:focus-visible {
  border-color: var(--gold-deep);
  transform: translateY(-4px);
}

/* ---------- Result / testimonial cards ---------- */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (max-width: 980px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .results-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.results-grid--five { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .results-grid--five { grid-template-columns: repeat(2, 1fr); } }
.result-card {
  background: var(--ink-2);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.result-card:hover { transform: translateY(-6px); border-color: var(--gold-deep); }
.result-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-3);
}
.result-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.45) contrast(1.3) brightness(.95);
}
.result-card__cut {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-deep));
  box-shadow: 0 0 24px rgba(233,206,140,.7);
  z-index: 2;
  transform: skewX(-6deg);
}
.result-card__tag {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  font-family: var(--font-condensed);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(11,9,6,.72);
  border: 1px solid rgba(244, 249, 252, .22);
  color: var(--on-dark);
  padding: .35rem .6rem;
  border-radius: var(--radius-pill);
  z-index: 3;
}
.result-card__tag--after { left: auto; right: var(--sp-3); color: var(--on-dark-accent); }
.result-card__body { padding: var(--sp-5); }
.result-card__stat {
  font-family: var(--font-condensed);
  font-size: 1.5rem;
  letter-spacing: .01em;
  color: var(--gold-light);
}
.result-card__name { margin-top: var(--sp-1); font-size: 1.05rem; font-weight: 600; }
.result-card__desc { margin-top: var(--sp-2); color: var(--cream-dim); font-size: .93rem; }

/* ---------- Credential strip ---------- */
.credentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (max-width: 780px) { .credentials { grid-template-columns: 1fr; } }
.credential {
  border-left: 2px solid var(--gold);
  padding-left: var(--sp-4);
}
.credential strong { display: block; font-family: var(--font-condensed); font-size: 1.1rem; letter-spacing: .03em; color: var(--cream); }
.credential span { color: var(--cream-dim); font-size: .9rem; }

/* ---------- Stat counters ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-5);
  text-align: center;
}
.stat {
  padding: var(--sp-5) var(--sp-3);
}
.stat strong {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--fs-stat);
  color: var(--gold-light);
  line-height: 1;
}
.stat span { display: block; margin-top: var(--sp-2); font-size: .85rem; letter-spacing: .04em; color: var(--cream-dim); text-transform: uppercase; }

/* ---------- Split section (immagine + testo) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.25) brightness(.96); }
.split__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(199,154,68,.16), transparent 55%);
  mix-blend-mode: overlay;
}
.split__frame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(233,206,140,.35);
  border-radius: calc(var(--radius-lg) - 6px);
  pointer-events: none;
}
.split ul { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.split ul li { display: flex; gap: .8rem; align-items: flex-start; color: var(--cream-dim); }
.split ul li svg { flex-shrink: 0; margin-top: 3px; color: var(--gold); }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--reverse .split__media { order: 0; }
}

/* ---------- Teaser cards (home -> pagine interne) ---------- */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (max-width: 780px) { .teaser-grid { grid-template-columns: 1fr; } }
.teaser-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .teaser-grid--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .teaser-grid--three { grid-template-columns: 1fr; } }
.teaser-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--ink-border);
}
.teaser-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-soft); }
.teaser-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,9,6,.94) 10%, rgba(11,9,6,.2) 60%, rgba(11,9,6,.35));
}
.teaser-card:hover img { transform: scale(1.06); }
.teaser-card__body { position: relative; z-index: 1; padding: var(--sp-5); width: 100%; }
/* Dentro .teaser-card il testo sta sempre su una foto scurita: chiaro a
   prescindere dal tema. .teaser-card__link è invece riusato anche da solo
   su sfondo piatto (vedi regola base sotto), quindi qui va scoped. */
.teaser-card__tag { font-family: var(--font-condensed); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark); }
.teaser-card__body h3 { margin-top: var(--sp-2); font-size: 1.5rem; color: var(--on-dark); }
.teaser-card__body p { margin-top: var(--sp-2); color: var(--on-dark-dim); font-size: .92rem; }
.teaser-card .teaser-card__link { color: var(--on-dark); }
.teaser-card__link { margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-condensed); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.teaser-card__link svg { transition: transform var(--dur-med) var(--ease); }
.teaser-card:hover .teaser-card__link svg { transform: translateX(4px); }

/* ---------- Quote block ---------- */
.quote {
  position: relative;
  max-width: 60ch;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.5vw + 1rem, 2.1rem);
  line-height: 1.35;
  color: var(--cream);
}
.quote::before {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background: var(--gold);
  margin-bottom: var(--sp-4);
  transform: skewX(-24deg);
}
.quote cite { display: block; margin-top: var(--sp-4); font-family: var(--font-condensed); font-style: normal; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); }

/* ---------- FAQ (coaching page) ---------- */
.faq { margin-top: var(--sp-7); border-top: 1px solid var(--ink-border); }
.faq-item { border-bottom: 1px solid var(--ink-border); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cream);
}
.faq-item__icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-item__icon::before, .faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; transition: transform var(--dur-med) var(--ease); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.faq-item__a { padding-bottom: var(--sp-5); color: var(--cream-dim); max-width: 62ch; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: radial-gradient(120% 140% at 50% -10%, rgba(199,154,68,.22), transparent 60%), var(--ink-2);
  border: 1px solid var(--ink-border);
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lead { max-width: 50ch; margin-inline: auto; margin-top: var(--sp-3); }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-6); }

/* ==========================================================================
   FULLSCREEN SCROLL FX — hero video pinnato con testo a maschera
   Porting fedele (stessa logica/tempistiche) del componente React
   FullScreenScrollFX, adattato a HTML/CSS/JS vanilla + GSAP/ScrollTrigger.
   Sfondo video fisso (nessun crossfade, per richiesta): cambia solo il testo.
   ========================================================================== */
/* Il video hero resta un'isola scura anche nel sito a tema chiaro (come le
   sezioni video di tante pagine prodotto): niente flip qui, testo e sfondo
   di fallback restano fissi indipendentemente dai token del resto del sito. */
.fsfx {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--fsfx-bg);
  color: var(--on-dark);
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.fsfx-fixed-section { position: relative; height: 500vh; }
.fsfx-fixed {
  position: sticky; top: 0; height: 100dvh; width: 100%; overflow: hidden; background: var(--fsfx-bg);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.fsfx-bg { position: absolute; inset: 0; z-index: 0; background: var(--fsfx-bg); transform: translateZ(0); }
.fsfx-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.1) contrast(1.08) brightness(.68);
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}
.fsfx-bg-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(6,5,3,.65) 0%, rgba(6,5,3,.2) 45%, rgba(6,5,3,.35) 100%),
    linear-gradient(180deg, rgba(6,5,3,.7) 0%, transparent 22%);
}

.fsfx-grid {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.fsfx-content {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: center;
  height: 100%;
  padding-top: var(--header-h);
}

.fsfx-left, .fsfx-right {
  height: 60vh;
  overflow: hidden;
  display: grid;
  align-content: center;
}
.fsfx-left { justify-items: start; }
.fsfx-right { justify-items: end; }
.fsfx-track { will-change: transform; }

.fsfx-item {
  color: var(--on-dark);
  font-weight: 600;
  line-height: 1;
  margin: 10px 0;
  opacity: 0.35;
  position: relative;
  font-size: clamp(.9rem, 1.6vw, 1.3rem);
  user-select: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 4px 0;
}
.fsfx-left-item.active,
.fsfx-right-item.active { opacity: 1; }
.fsfx-left-item.active { padding-left: 18px; }
.fsfx-right-item.active { padding-right: 18px; }
.fsfx-left-item.active::before,
.fsfx-right-item.active::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--on-dark-accent);
  box-shadow: 0 0 10px rgba(191,224,245,.7);
}
.fsfx-left-item.active::before { left: 0; }
.fsfx-right-item.active::after { right: 0; }

.fsfx-center { display: grid; place-items: center; text-align: center; height: 60vh; overflow: hidden; position: relative; }
.fsfx-featured { position: absolute; opacity: 0; visibility: hidden; padding-inline: 4vw; }
.fsfx-featured.active { opacity: 1; visibility: visible; }
.fsfx-title {
  margin: 0;
  color: var(--on-dark);
  font-family: var(--font-hero);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: .96;
  font-size: clamp(2.4rem, 7.5vw, 5.8rem);
}
/* Obliquo come nel riferimento "NO LIMITS. MORE MOTION.": Big Shoulders
   Display non ha un vero corsivo, quindi il font-style è simulato con uno
   skew leggero, più naturale del corsivo sintetico del browser. */
.fsfx-title--stacked { line-height: 1.02; transform: skewX(-6deg); }
.fsfx-word--accent { color: var(--on-dark-accent); }
/* "Enzo Farsetti" nel font del riferimento fotografico, distinto da
   "costruisci il tuo standard" che resta nel condensed del titolo hero. */
.fsfx-word--name { font-family: var(--font-nameplate); font-weight: 400; }

/* Composizione editoriale dell'hero: "Enzo Farsetti" è un blocco tipografico
   dominante e separato da "Costruisci il tuo standard", non più due righe
   dello stesso paragrafo. "Enzo" e "Farsetti" sono un unico nome: stessa
   dimensione, stesso peso visivo, entrambi grandi — poi un vero distacco
   verticale prima della headline sottostante. */
.fsfx-title--stacked .fsfx-title__name { display: block; line-height: .9; }
.fsfx-title--stacked .fsfx-word--enzo,
.fsfx-title--stacked .fsfx-word--farsetti { font-size: clamp(3.4rem, 10.5vw, 7.4rem); }
.fsfx-title--stacked .fsfx-word--farsetti { margin-left: .14em; }
.fsfx-title--stacked .fsfx-title__standard {
  display: block;
  margin-top: clamp(1.4rem, 4vw, 3rem);
  font-size: clamp(1.4rem, 3.8vw, 2.6rem);
}
@media (max-width: 720px) {
  .fsfx-title--stacked .fsfx-word--enzo,
  .fsfx-title--stacked .fsfx-word--farsetti { font-size: clamp(3rem, 15.5vw, 4.2rem); }
  .fsfx-title--stacked .fsfx-title__standard { font-size: clamp(1.15rem, 5.6vw, 1.6rem); margin-top: clamp(1rem, 5vw, 1.6rem); }
}
.fsfx-title em {
  font-style: normal;
  background: linear-gradient(100deg, #EAF5FC, var(--on-dark-accent) 55%, var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fsfx-word-mask { display: inline-block; overflow: hidden; vertical-align: middle; }
.fsfx-word { display: inline-block; vertical-align: middle; }

/* Variante centrata: nessuna lista laterale, il centro occupa tutta la larghezza */
.fsfx-content--centered { grid-template-columns: 1fr; }
.fsfx-content--centered .fsfx-center { width: 100%; max-width: 920px; margin-inline: auto; height: auto; min-height: 60vh; overflow: visible; position: relative; }
.fsfx-content--centered .fsfx-featured { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.fsfx-title--sentence {
  font-family: var(--font-display);
  text-transform: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  max-width: 20ch;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
}

.fsfx-title--cta {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--dur-med) var(--ease);
}
.fsfx-title--cta .fsfx-word {
  color: var(--on-dark);
}
.fsfx-title--cta:hover .fsfx-word { color: var(--on-dark-accent); }
.fsfx-title--cta:focus-visible { outline: 2px solid var(--on-dark-accent); outline-offset: 8px; }

.fsfx-footer { align-self: end; padding-bottom: 4.5vh; text-align: center; }
.fsfx-progress { width: 220px; height: 2px; margin: 0 auto; background: rgba(244,249,252,.2); position: relative; }
.fsfx-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--gold-light), var(--on-dark-accent)); height: 100%; transition: width .3s ease; }
.fsfx-progress-numbers {
  position: absolute; inset: auto 0 100% 0;
  display: flex; justify-content: space-between;
  margin-bottom: 10px;
  font-size: .78rem; letter-spacing: .1em; color: var(--on-dark-dim);
  font-family: var(--font-condensed);
}
.fsfx-progress-numbers span:first-child { color: var(--on-dark-accent); }

.fsfx-hint {
  position: absolute; z-index: 2;
  bottom: 4.5vh; left: clamp(1.25rem, 4vw, 3rem);
  font-size: .7rem; letter-spacing: .18em; color: var(--on-dark-faint);
  writing-mode: vertical-rl;
}

@media (max-width: 900px) {
  .fsfx-content { grid-template-columns: 1fr; row-gap: 2vh; padding-top: calc(var(--header-h) + 2vh); }
  .fsfx-left, .fsfx-right, .fsfx-center { height: auto; }
  .fsfx-left, .fsfx-right { justify-items: center; }
  .fsfx-track { transform: none !important; }
  .fsfx-center { order: -1; height: 34vh; }
}

@media (prefers-reduced-motion: reduce) {
  .fsfx-word { opacity: 1 !important; transform: none !important; }
  .fsfx-featured { transition: none; }
}

/* ---------- Intro logo reveal — variante scrubbata dell'fsfx ---------- */
/* Video pilotato a mano (currentTime = progresso scroll): niente autoplay/loop.
   Filtro più leggero della hero, per lasciare leggibili le braci e l'oro del logo. */
.fsfx--intro .fsfx-bg-video {
  filter: contrast(1.05) brightness(.92) saturate(1.05);
  opacity: .82;
}
/* Vignette totale (non solo in basso): il video deve "emergere" dal nero
   della sezione precedente e "rientrarci" in quella successiva, senza mai
   mostrare un bordo netto tra sfondo piatto e fotogramma. */
.fsfx--intro .fsfx-bg-overlay {
  background:
    linear-gradient(0deg,
      rgba(11,9,6,.95) 0%,
      rgba(20,8,5,.55) 14%,
      rgba(6,5,3,.05) 34%,
      rgba(6,5,3,0) 50%,
      rgba(6,5,3,0) 62%,
      rgba(6,5,3,.35) 82%,
      rgba(11,9,6,.95) 100%);
}
.fsfx--intro .fsfx-center { min-height: 46vh; }
/* Telefono in verticale: il video del logo è 16:9 e su uno schermo alto, a
   tutta altezza con object-fit:cover, risultava troppo ingrandito (solo la
   striscia centrale, ~26% della larghezza). Qui resta a tutta larghezza e con
   cover, ma in una fascia alta il 75% dello schermo invece del 100%: meno
   zoom (si vede ~35% della larghezza); sopra e sotto la fascia sfuma nel nero
   con un alone caldo come le braci del video. Per più/meno zoom cambia
   --intro-band (più alto = più ingrandito e meno nero). Desktop e orizzontale
   invariati. */
@media (max-width: 880px) and (orientation: portrait) {
  .fsfx--intro { --intro-band: 75dvh; }
  .fsfx--intro .fsfx-bg {
    background:
      radial-gradient(90% 38% at 70% 50%, rgba(110, 22, 10, .38), transparent 70%),
      var(--fsfx-bg);
  }
  .fsfx--intro .fsfx-bg-video {
    inset: auto 0 auto 0;
    top: 50%;
    height: var(--intro-band);
    object-fit: cover;
    transform: translateY(-50%) translateZ(0);
    -webkit-transform: translateY(-50%) translateZ(0);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}

/* Titolo che entra/esce dai lati invece che dal basso (vedi .fsfx-title--sides
   in JS): la maschera per-parola non deve più clippare il movimento orizzontale. */
.fsfx-title--sides .fsfx-word-mask { overflow: visible; }

/* ---------- Galleria testimonianze — ventaglio di card ---------- */
/* Il video del logo resta un'isola scura (vedi --fsfx-bg): questa sezione
   parte scura in cima per continuare la dissolvenza, poi schiarisce nel
   celestino del sito, con un accento caldo residuo delle braci nel mezzo. */
.section--ember {
  position: relative;
  /* Stop in px, non %: la dissolvenza deve restare confinata a una fascia
     fissa in alto (sotto il testo dell'header) a prescindere dall'altezza
     reale della sezione, che varia con il numero di card. */
  background:
    linear-gradient(180deg, var(--fsfx-bg) 0, rgba(11, 9, 6, .5) 40px, rgba(11, 9, 6, 0) 100px),
    radial-gradient(120% 420px at 50% 0, rgba(138, 36, 18, .14) 0%, rgba(138, 36, 18, 0) 100%),
    var(--ink);
  overflow: hidden;
}

.fan-gallery { position: relative; margin-top: var(--sp-8); }
.fan-gallery__track {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  min-height: 27rem;
  padding-inline: var(--sp-4);
}
@media (max-width: 640px) {
  /* Le card sono molto più piccole a questa larghezza: la riserva verticale
     va ridotta di conseguenza, altrimenti resta un vuoto sopra al ventaglio. */
  .fan-gallery { margin-top: var(--sp-6); }
  .fan-gallery__track { min-height: 17rem; }
}
.fan-card {
  position: relative;
  grid-area: 1 / 1;
  width: clamp(9.5rem, 17vw, 15rem);
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--shadow-black);
  cursor: pointer;
  opacity: 0;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fan-card::after {
  content: 'Prima · Dopo';
  position: absolute;
  left: 50%; bottom: .6rem;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-condensed);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(6, 5, 3, .6);
  border: 1px solid rgba(244, 249, 252, .22);
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
}
.fan-card:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

.fan-gallery__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.fan-gallery__arrow {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ink-border);
  background: var(--ink-2);
  color: var(--cream-dim);
  transition: border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.fan-gallery__arrow:hover, .fan-gallery__arrow:focus-visible { border-color: var(--gold); color: var(--gold-light); background: var(--ink-3); outline: none; }
.fan-gallery__dots { display: flex; align-items: center; gap: 8px; }
.fan-gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 238, 224, .22); transition: all var(--dur-med) var(--ease); }
.fan-gallery__dot.is-active { background: var(--gold-light); transform: scale(1.5); }

/* ---------- Lightbox testimonianza ---------- */
.fan-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: var(--sp-4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}
.fan-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.fan-lightbox__backdrop { position: absolute; inset: 0; background: rgba(6, 5, 3, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fan-lightbox__panel {
  position: relative; z-index: 1;
  width: min(880px, 100%);
  max-height: 88vh;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--ink-2);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-black);
  transform: scale(.94);
  transition: transform var(--dur-med) var(--ease-out-soft);
}
.fan-lightbox.is-open .fan-lightbox__panel { transform: scale(1); }
.fan-lightbox__img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.fan-lightbox__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); align-self: center; }
.fan-lightbox__body h3 { font-size: var(--fs-h3); }
.fan-lightbox__body p { color: var(--cream-dim); line-height: 1.7; }
.fan-lightbox__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(6, 5, 3, .55);
  color: var(--on-dark);
  font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid rgba(244, 249, 252, .25);
  transition: border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.fan-lightbox__close:hover, .fan-lightbox__close:focus-visible { border-color: var(--on-dark-accent); color: var(--on-dark-accent); outline: none; }

@media (max-width: 720px) {
  .fan-lightbox__panel { grid-template-columns: 1fr; }
  .fan-lightbox__img { max-height: 42vh; }
}

@media (prefers-reduced-motion: reduce) {
  .fan-card { opacity: 1; }
}

/* ---------- Enzo — sezione intera con video di sfondo (come l'hero) ---------- */
.enzo-section {
  position: relative;
  overflow: hidden;
  background: var(--fsfx-bg);
}
.enzo-section__bg { position: absolute; inset: 0; z-index: 0; }
.enzo-section__video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .4;
  filter: grayscale(.25) contrast(1.1) brightness(.7);
}
.enzo-section__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,5,3,.88) 0%, rgba(6,5,3,.6) 38%, rgba(6,5,3,.28) 64%, rgba(6,5,3,.55) 100%);
}
/* Contenitore più largo del solito (solo qui): la foto di Enzo deve poter
   occupare davvero tutto il lato destro della sezione, non solo una quota
   proporzionale del container standard da 1240px usato nel resto del sito. */
.enzo-section .container { max-width: 1680px; }
.enzo-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 106vh;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-3);
}
.enzo-section__content { max-width: 420px; padding-bottom: var(--sp-6); align-self: center; }
/* Scambia solo l'ordine visivo dei due blocchi (foto+wordmark a sinistra,
   testo a destra) senza toccare il DOM: la versione mobile sotto usa
   column-reverse sull'ordine naturale del DOM e non deve ereditare questo
   scambio, per questo è scoped a min-width, il complementare esatto del
   breakpoint mobile. Contenuti, proporzioni e sovrapposizioni interne a
   ciascun blocco restano invariati. */
@media (min-width: 881px) {
  .enzo-section__visual { order: -1; }
}
.enzo-section__content .teaser-card__link { color: var(--on-dark); }

/* Presentazione sintetica di Enzo: ruolo, breve bio, tre specializzazioni
   editoriali (niente card — solo tipografia, numerazione e linee sottili). */
.enzo-section__role {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--on-dark);
}
.enzo-section__bio {
  margin-top: var(--sp-3);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--on-dark-dim);
  max-width: 46ch;
}
.enzo-specialties { margin-top: var(--sp-6); }
.enzo-specialty {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.enzo-specialty:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.enzo-specialty__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: .25em;
  color: var(--on-dark-accent);
}
.enzo-specialty__heading { display: flex; align-items: baseline; gap: .6em; }
.enzo-specialty__num {
  flex-shrink: 0;
  font-family: var(--font-condensed);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--on-dark-accent);
}
.enzo-specialty__body h3 {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .03em;
  color: var(--on-dark);
}
.enzo-specialty__body p {
  margin-top: .3rem;
  font-size: .92rem;
  color: var(--on-dark-dim);
}

/* Il bottone entra da sinistra (già gestito da [data-reveal="left"]) e poi
   fluttua in modo delicato e continuo: il float è su un wrapper dedicato
   per non entrare in conflitto con il transform dell'entrata. */
.enzo-section__cta-float {
  display: inline-block;
  margin-top: var(--sp-5);
  animation: enzo-cta-float 3.6s ease-in-out infinite;
}
@keyframes enzo-cta-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .enzo-section__cta-float { animation: none; }
}

/* Solo la scritta "MUSCLE DESIGNER" (la foto scontornata di Enzo è stata
   tolta su richiesta del cliente): due righe impilate, in flusso normale,
   dimensionate sulla larghezza del proprio contenitore (cqw) così stanno per
   intero a qualsiasi larghezza senza tagli né scaleX. */
.enzo-section__visual {
  flex: 1;
  min-width: 0;
  align-self: center;
  container-type: inline-size;
}
.enzo-section__wordmark { pointer-events: none; }
/* Solo desktop: la scritta è centrata nella propria colonna e il blocco
   "percorso" non sta più incollato al bordo destro (contenitore più stretto
   di quello da 1680px usato per la foto, che non c'è più). Il mobile resta
   com'era, vedi il media query sotto. */
@media (min-width: 881px) {
  .enzo-section .container { max-width: 1360px; }
  .enzo-section__inner { justify-content: center; gap: var(--sp-7); }
  .enzo-section__wordmark { text-align: center; }
  /* Testo del percorso un po' più grande, per leggerlo meglio. */
  .enzo-section__content { max-width: clamp(420px, 36vw, 520px); }
  .enzo-section__role { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
  .enzo-section__bio { font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: none; }
  .enzo-specialty__body h3 { font-size: 1.2rem; }
  .enzo-specialty__body p { font-size: 1.02rem; }
  .enzo-specialty__num { font-size: .9rem; }
  .enzo-section__content .teaser-card__link { font-size: 1rem; }
}
.enzo-section__wordmark-line {
  display: block;
  white-space: nowrap;
  font-family: var(--font-nameplate);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -0.005em;
  color: rgba(244, 249, 252, .78);
}
.enzo-section__wordmark-line--muscle { font-size: 12cqw; }
.enzo-section__wordmark-line--designer { font-size: 12cqw; }
/* Solo desktop: "MUSCLE DESIGNER" su una sola riga (le due righe del mobile
   restano impilate), dimensionata sulla larghezza della colonna. */
@media (min-width: 881px) {
  .enzo-section__wordmark-line { display: inline; }
  .enzo-section__wordmark-line--designer { margin-left: .22em; }
  .enzo-section__wordmark-line--muscle,
  .enzo-section__wordmark-line--designer { font-size: 15cqw; }
}

@media (max-width: 880px) {
  .enzo-section__inner {
    flex-direction: column-reverse;
    align-items: center;
    min-height: auto;
    padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
    gap: var(--sp-6);
  }
  .enzo-section__visual { flex: none; width: 100%; align-self: stretch; }
  .enzo-section__wordmark { text-align: center; }
  .enzo-section__content { max-width: 100%; padding-bottom: 0; align-self: auto; }
}

/* ---------- Timeline verticale (come lavoro) ---------- */
.timeline { display: flex; flex-direction: column; max-width: 62ch; }
.timeline-step {
  display: flex;
  gap: var(--sp-4);
  position: relative;
  padding-bottom: var(--sp-6);
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 23px; top: 48px;
  width: 2px;
  height: calc(100% - 40px);
  background: var(--ink-border);
}
.timeline-step__num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink-2);
  border: 1px solid var(--ink-border);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--on-dark-accent);
  position: relative;
  z-index: 1;
}
.timeline-step__body h3 { font-size: 1.15rem; }
.timeline-step__body p { margin-top: .35rem; color: var(--cream-dim); font-size: .95rem; max-width: 46ch; }

/* ---------- Il risultato nasce dal metodo — hero split: testo fisso a
   sinistra, a destra una sola foto grande (formato 4:5 come l'originale). ---------- */
.method-showcase {
  position: relative;
  padding-block: var(--sp-9);
  background:
    radial-gradient(100% 130% at 85% 0%, rgba(184, 48, 42, .18), transparent 60%),
    var(--ink);
}
.method-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
}
.method-showcase__content { max-width: 42ch; }
.method-showcase__content .btn { white-space: normal; text-align: center; max-width: 100%; }
.method-showcase__title { font-size: clamp(2.2rem, 2.2vw + 1.6rem, 3.6rem); line-height: 1.05; }
.method-showcase__title em { color: var(--gold-light); }

.method-showcase__main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-black);
}
.method-showcase__main img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; display: block; }

@media (max-width: 880px) {
  .method-showcase__grid { grid-template-columns: minmax(0, 1fr); }
  .method-showcase__content { max-width: none; }
}

/* ---------- Circular testimonials — stack di foto in prospettiva (centro
   grande, laterali ruotate e ridotte) con testo che cambia parola per
   parola e frecce prev/next. Nessuna icona virgolette. ---------- */
.circular-testimonials {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.circular-testimonials__images {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  perspective: 1200px;
}
/* Le foto arrivano con proporzioni diverse tra loro (screenshot originali,
   non ritagliati): object-fit:contain le mostra sempre intere, con un
   piccolo bordo/sfondo dove l'immagine non riempie tutto il riquadro,
   invece di tagliarle per forzarle nel box. */
.circular-testimonials__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink-2);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-black);
  opacity: 0;
  pointer-events: none;
  transition: transform .8s cubic-bezier(.4,2,.3,1), opacity .8s cubic-bezier(.4,2,.3,1);
}
.circular-testimonials__badge {
  position: absolute;
  left: var(--sp-3); bottom: var(--sp-3);
  z-index: 4;
  padding: .4rem .8rem;
  border-radius: var(--radius-pill);
  background: rgba(11,9,6,.68);
  border: 1px solid rgba(244,249,252,.24);
  color: var(--on-dark);
  font-family: var(--font-condensed);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.circular-testimonials__img.is-active {
  z-index: 3; opacity: 1; pointer-events: auto;
  transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
}
.circular-testimonials__img.is-prev {
  z-index: 2; opacity: 1; pointer-events: auto;
  transform: translateX(-14%) translateY(-6%) scale(.85) rotateY(15deg);
}
.circular-testimonials__img.is-next {
  z-index: 2; opacity: 1; pointer-events: auto;
  transform: translateX(14%) translateY(-6%) scale(.85) rotateY(-15deg);
}
.circular-testimonials__content { display: flex; flex-direction: column; }
.circular-testimonials__name {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .02em;
  color: var(--cream);
}
.circular-testimonials__designation {
  margin-top: .3rem;
  font-size: .9rem;
  color: var(--gold-light);
}
.circular-testimonials__quote {
  margin-top: var(--sp-5);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cream-dim);
  max-width: 44ch;
  min-height: 6.8em;
}
.circular-testimonials__quote span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(4px);
  animation: ct-word-in .45s ease-out forwards;
}
@keyframes ct-word-in { to { opacity: 1; filter: blur(0); transform: translateY(0); } }
.circular-testimonials__arrows { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.circular-testimonials__arrow {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-2);
  border: 1px solid var(--ink-border);
  color: var(--cream);
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.circular-testimonials__arrow:hover, .circular-testimonials__arrow:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--ink); outline: none; }

@media (max-width: 880px) {
  .circular-testimonials { grid-template-columns: 1fr; gap: var(--sp-6); }
  .circular-testimonials__images { aspect-ratio: 5 / 4; }
  .circular-testimonials__img.is-prev { transform: translateX(-10%) translateY(-4%) scale(.82) rotateY(12deg); }
  .circular-testimonials__img.is-next { transform: translateX(10%) translateY(-4%) scale(.82) rotateY(-12deg); }
  .circular-testimonials__quote { max-width: none; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .circular-testimonials__img { transition: opacity .3s ease; }
  .circular-testimonials__img.is-prev, .circular-testimonials__img.is-next { transform: none; }
  .circular-testimonials__quote span { animation: none; opacity: 1; filter: none; transform: none; }
}

/* ---------- Floating stat cards (ispirazione: Fitnix) ---------- */
.showcase { position: relative; }
.stat-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgba(17, 13, 9, .74);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(233, 206, 140, .28);
  border-radius: var(--radius-md);
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow-black);
  min-width: 152px;
}
.stat-float__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: var(--cream);
}
.stat-float__label {
  display: block;
  font-family: var(--font-condensed);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.stat-float__value {
  display: block;
  margin-top: .15rem;
  font-family: var(--font-condensed);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--on-dark);
}
@media (max-width: 640px) {
  .stat-float { min-width: 132px; padding: .65rem .85rem; gap: .6rem; }
  .stat-float__icon { width: 28px; height: 28px; }
  .stat-float__value { font-size: 1.1rem; }
}

/* ---------- Collage fotografico a mosaico (ispirazione: GRIND) ---------- */
.collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(70px, 1fr);
  grid-auto-flow: dense;
  gap: var(--sp-3);
}
.collage__item {
  grid-column: span 2;
  grid-row: span 3;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ink-border);
}
.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.45) contrast(1.3) brightness(.94);
  transition: transform var(--dur-slow) var(--ease-out-soft);
}
.collage__item:hover img { transform: scale(1.05); }
.collage__item--tall { grid-row: span 5; }
.collage__item--wide { grid-column: span 4; grid-row: span 3; }
.collage__item--feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink-2);
  padding: var(--sp-4);
  text-align: left;
}
.collage__item--feature strong {
  font-family: var(--font-condensed);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--gold-light);
  line-height: 1;
}
.collage__item--feature span {
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--cream-dim);
  letter-spacing: .02em;
}
@media (max-width: 780px) {
  .collage { grid-template-columns: repeat(4, 1fr); }
  .collage__item--wide { grid-column: span 4; }
}
@media (max-width: 520px) {
  .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(120px, 1fr); }
  .collage__item, .collage__item--wide, .collage__item--tall { grid-column: span 2; grid-row: span 3; }
}

/* ---------- Titoli d'impatto condensati (ispirazione: GRIND) ---------- */
.h-impact {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: .92;
  color: var(--cream);
  font-size: clamp(2.4rem, 6vw, 5.2rem);
}
.h-impact em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* La sezione subito dopo l'hero video (isola scura) sfuma dallo scuro sul
   proprio bordo superiore, per continuare la dissolvenza invece di un
   taglio netto scuro→chiaro. */
.fsfx + .section { position: relative; }
.fsfx + .section::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 90px;
  background: linear-gradient(180deg, var(--fsfx-bg), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Flow block: step numerati su blocco colore pieno (ispirazione: bodyrecomp.info) ---------- */
.flow-block {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(145deg, var(--gold-light), var(--gold) 52%, var(--gold-deep));
  color: var(--cream);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.flow-steps { display: flex; flex-direction: column; gap: var(--sp-5); position: relative; }
.flow-step { display: flex; align-items: flex-start; gap: var(--sp-4); position: relative; }
.flow-step__num {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--gold-light);
  display: grid; place-items: center;
  font-family: var(--font-condensed); font-weight: 700; font-size: 1.25rem;
  position: relative; z-index: 1;
}
.flow-step:not(:last-child)::before {
  content: ''; position: absolute; left: 25px; top: 52px;
  width: 2px; height: calc(100% + var(--sp-5) - 44px);
  background: rgba(255,255,255,.28);
}
.flow-step__body h3 {
  font-family: var(--font-condensed); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .02em; color: var(--cream);
}
.flow-step__body p { margin-top: .35rem; font-size: .92rem; line-height: 1.5; color: rgba(242,244,246,.78); max-width: 42ch; }

.flow-panel {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.flow-panel h4 {
  font-family: var(--font-condensed); text-transform: uppercase;
  font-size: .82rem; letter-spacing: .12em; color: rgba(242,244,246,.62);
  margin-bottom: var(--sp-4);
}
.flow-panel ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.flow-panel li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; color: var(--cream); font-weight: 500; }
.flow-panel li svg { flex-shrink: 0; color: var(--cream); background: rgba(255,255,255,.12); border-radius: 50%; padding: 3px; }

@media (max-width: 880px) {
  .flow-block { grid-template-columns: 1fr; }
}

/* ---------- Pillar: numero grande protagonista (ispirazione: streetgorilla.it) ---------- */
.pillar--big { padding-top: var(--sp-7); position: relative; }
.pillar__bignum {
  font-family: var(--font-condensed);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-light);
  margin-bottom: var(--sp-3);
}
.pillar--big .pillar__num { display: block; margin-bottom: var(--sp-1); }

/* ---------- Tagli diagonali tra sezioni (direzione "atletico cinetico") ---------- */
.section--angled {
  --cut: 34px;
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-block: calc(var(--sp-9) + var(--cut));
  margin-block: calc(var(--cut) * -1);
  position: relative;
  z-index: 1;
}
.section--angled-rev {
  --cut: 34px;
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
  padding-block: calc(var(--sp-9) + var(--cut));
  margin-block: calc(var(--cut) * -1);
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .section--angled, .section--angled-rev { --cut: 18px; }
}

/* ---------- Wordmark gigante nel footer (direzione "atletico cinetico") ---------- */
.footer__wordmark {
  margin-top: var(--sp-8);
  overflow: hidden;
  line-height: .82;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  /* Geist è più largo del condensed usato prima: la scritta deve stare
     per intero nel container (1240px), non solo "abbastanza piccola da
     non sembrare troppo tagliata" — verificato con getBoundingClientRect
     rispetto al bordo del container, non a occhio. */
  font-size: clamp(2rem, 8.6vw, 6.6rem);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-deep) 140%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  letter-spacing: -0.01em;
  user-select: none;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--ink-border);
  padding-block: var(--sp-7) var(--sp-5);
  background: var(--ink-2);
}
.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp-3); }
.footer__brand img { height: 40px; }
.footer p { color: var(--cream-dim); font-size: .92rem; max-width: 36ch; }
.footer h4 { font-family: var(--font-condensed); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--sp-3); }
.footer__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__list a { color: var(--cream-dim); font-size: .95rem; transition: color var(--dur-fast) var(--ease); }
.footer__list a:hover { color: var(--gold-light); }
.footer__contacts { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-border);
  background: var(--ink-3);
  color: var(--cream-dim);
  font-size: .88rem;
  transition: border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.footer__contact:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(143, 184, 217, .08); }
.footer__contact-icon { width: 17px; height: 17px; flex-shrink: 0; display: grid; place-items: center; color: var(--gold-light); }
.footer__contact-icon svg { width: 100%; height: 100%; }
.footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  color: var(--cream-faint);
  font-size: .82rem;
}
.footer__credit { font-weight: 700; color: var(--cream-dim); }
.footer__legal { color: var(--cream-faint); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); }
.footer__legal:hover { color: var(--gold-light); }

/* ---------- Pagine legali (privacy) ---------- */
.legal { padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-9); }
.legal h1 { font-size: var(--fs-h1); margin-top: var(--sp-3); }
.legal__updated { margin-top: var(--sp-3); color: var(--cream-faint); font-size: .9rem; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal p, .legal li { color: var(--cream-dim); max-width: 68ch; margin-top: var(--sp-3); }
.legal ul { list-style: disc; padding-left: 1.3em; }
.legal a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--whatsapp);
  color: #06210F;
  padding: .85rem 1.2rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.6);
  font-family: var(--font-condensed);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-med) var(--ease);
}
.whatsapp-float:hover { background: var(--whatsapp-dark); transform: translateY(-3px); }
.whatsapp-float__label { display: none; }
@media (min-width: 640px) { .whatsapp-float__label { display: inline; } }
.whatsapp-float svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Breadcrumb / mini nav interne ---------- */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-condensed);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: var(--sp-4);
}
.crumb a { color: var(--cream-faint); transition: color var(--dur-fast) var(--ease); }
.crumb a:hover { color: var(--gold-light); }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-9 { margin-top: var(--sp-9); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; gap: var(--sp-5); } }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.badge {
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-pill);
  padding: .4rem .9rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--cream-dim);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.photo-grid .photo-frame { aspect-ratio: 3 / 4; }
@media (max-width: 780px) { .photo-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* Immagine trattata (coerenza fotografica) */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) contrast(1.3) brightness(.94); }
.photo-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(199,154,68,.14), transparent 55%);
  mix-blend-mode: overlay;
}

/* ==========================================================================
   COACHING — sezioni editoriali (layout dal mockup fornito dall'utente,
   colori/toni ripresi dai token del sito: nessun pannello chiaro/crema,
   tutto resta sulle superfici scure "ink" già usate in home). Scoped a
   queste classi per non toccare h1-h4/eyebrow/.step usati altrove.
   ========================================================================== */
.coaching-hero {
  position: relative;
  padding-top: var(--header-h);
  background:
    radial-gradient(100% 130% at 88% 0%, rgba(184, 48, 42, .2), transparent 60%),
    var(--ink);
}
.coaching-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(560px, 66vh, 780px); }
.coaching-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-8);
  padding-left: max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - var(--container)) / 2));
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.coaching-hero__media { position: relative; overflow: hidden; min-height: 320px; }
.coaching-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }

/* Titoli editoriali: serif minuscolo (Fraunces), non l'uppercase condensed
   di h1-h4 nel resto del sito — trattamento specifico a questo mockup. */
.coaching-editorial-title {
  font-family: var(--font-editorial);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.coaching-editorial-title em { font-style: italic; font-weight: 500; }
.coaching-hero__title { font-size: clamp(2.2rem, 2.4vw + 1.6rem, 3.6rem); line-height: 1.08; }
.coaching-hero__title em { color: var(--gold-light); }

@media (max-width: 900px) {
  .coaching-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .coaching-hero__media { order: -1; min-height: 46vh; }
  .coaching-hero__content { padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: var(--sp-7); }
}

/* ---------- Coaching Online — foto | testo+CTA | 5 step ---------- */
.coaching-online {
  background:
    radial-gradient(110% 100% at 10% 100%, rgba(122, 36, 32, .18), transparent 55%),
    var(--ink-2);
}
.coaching-online__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.1fr) minmax(0, 1.1fr); min-height: clamp(520px, 58vh, 740px); }
.coaching-online__media { position: relative; overflow: hidden; }
.coaching-online__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; display: block; }
.coaching-online__text { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); padding: var(--sp-8) var(--sp-6); }
.coaching-online__title { font-size: clamp(1.6rem, 1.4vw + 1.2rem, 2.3rem); line-height: 1.14; }
.coaching-online__title em { color: var(--gold-light); }
.coaching-online__steps-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-8) max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - var(--container)) / 2)) var(--sp-8) var(--sp-6);
  border-left: 1px solid var(--ink-border);
}
.coaching-online__steps-label {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-condensed);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.coaching-steps { display: flex; flex-direction: column; }
.coaching-steps__item { display: flex; gap: var(--sp-3); padding-block: var(--sp-4); }
.coaching-steps__item + .coaching-steps__item { border-top: 1px solid var(--ink-border); }
.coaching-steps__num { flex-shrink: 0; width: 2.1ch; font-family: var(--font-condensed); font-weight: 700; color: var(--gold-light); font-size: 1rem; }
.coaching-steps__body h3 { font-family: var(--font-body); text-transform: none; font-size: .98rem; font-weight: 700; color: var(--cream); letter-spacing: 0; line-height: 1.3; }
.coaching-steps__body p { margin-top: .3rem; font-size: .86rem; color: var(--cream-dim); line-height: 1.5; }

@media (max-width: 1080px) {
  .coaching-online__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .coaching-online__media { min-height: 340px; }
  .coaching-online__text { padding-inline: clamp(1.25rem, 5vw, 2rem); }
  .coaching-online__steps-col { border-left: none; border-top: 1px solid var(--ink-border); padding: var(--sp-7) clamp(1.25rem, 5vw, 2rem); }
}

/* ---------- Lezioni private one-to-one — testo+bullet | foto ---------- */
.coaching-private {
  background:
    radial-gradient(100% 130% at 12% 100%, rgba(184, 48, 42, .18), transparent 60%),
    var(--ink);
}
.coaching-private__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(560px, 62vh, 780px); }
.coaching-private__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding-block: var(--sp-8);
  padding-left: max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - var(--container)) / 2));
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.coaching-private__title { font-size: clamp(1.7rem, 1.6vw + 1.3rem, 2.5rem); line-height: 1.14; }
.coaching-private__title em { color: var(--gold-light); }
.coaching-private__media { position: relative; overflow: hidden; }
.coaching-private__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; display: block; }

.coaching-features { display: flex; flex-direction: column; }
.coaching-features__item { display: flex; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-3); }
.coaching-features__item + .coaching-features__item { border-top: 1px solid var(--ink-border); }
.coaching-features__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold-light); margin-top: .1em; }
.coaching-features__item span { font-size: .92rem; color: var(--cream-dim); line-height: 1.4; }

@media (max-width: 900px) {
  .coaching-private__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .coaching-private__media { order: -1; min-height: 340px; }
  .coaching-private__content { padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: var(--sp-7); }
}

/* ==========================================================================
   CHI SONO — hero + metodo + instagram (layout dal mockup fornito
   dall'utente). Colori ripresi dai token del sito (il mockup era già
   scuro/blu, non serve reinterpretarlo come per la pagina Coaching).
   ========================================================================== */
.chisono-hero {
  position: relative;
  padding-top: var(--header-h);
  background:
    radial-gradient(100% 130% at 88% 0%, rgba(184, 48, 42, .2), transparent 60%),
    var(--ink);
}
.chisono-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(560px, 66vh, 780px); }
.chisono-hero__content { display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-8); padding-left: max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - var(--container)) / 2)); padding-right: clamp(1.5rem, 4vw, 3rem); }
.chisono-hero__title { font-size: clamp(2.6rem, 3vw + 1.8rem, 4.6rem); line-height: .98; margin-top: var(--sp-4); }
.chisono-hero__title-line { display: block; }
.chisono-hero__title em { color: var(--gold-light); }
.chisono-hero__media { position: relative; overflow: hidden; min-height: 320px; }
.chisono-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }

@media (max-width: 900px) {
  .chisono-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .chisono-hero__media { order: -1; min-height: 46vh; }
  .chisono-hero__content { padding-inline: clamp(1.25rem, 5vw, 2rem); padding-block: var(--sp-7); }
}

/* ---------- Il metodo (narrativa) — foto | testo in paragrafi ---------- */
.method-section {
  padding-block: var(--sp-9);
  background:
    radial-gradient(110% 100% at 10% 100%, rgba(122, 36, 32, .18), transparent 55%),
    var(--ink-2);
}
.method-section__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-8); align-items: start; }
.method-section__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; }
.method-section__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }

@media (max-width: 880px) {
  .method-section { padding-block: var(--sp-7); }
  .method-section__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Muscle Designer su Instagram ---------- */
.ig-section { background: var(--ink); }
.ig-section__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: var(--sp-7); align-items: center; }
.ig-feed { min-width: 0; }
.ig-section__title { font-size: clamp(1.7rem, 1.6vw + 1.3rem, 2.5rem); line-height: 1.1; }
.ig-section__title em { color: var(--gold-light); }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.ig-item {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-border);
  display: block;
}
.ig-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out-soft); }
.ig-item:hover img { transform: scale(1.06); }
.ig-item__badge {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(11, 13, 16, .6);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: background var(--dur-med) var(--ease);
}
.ig-item:hover .ig-item__badge { background: var(--gold); }
.ig-item__badge svg { width: 15px; height: 15px; }

@media (max-width: 880px) {
  .ig-section__grid { grid-template-columns: minmax(0, 1fr); }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}